/* DTC/iQraa shared visual system. Runtime token owner; see root DESIGN.md.
   Loaded after legacy page styles. Business states and permissions stay page-owned. */
html:root {
  color-scheme: light;
  --brand-blue: #3f5172;
  --brand-green: #9fce55;
  --brand-magenta: #ba2795;
  --ui-ink: #253650;
  --ui-muted: #58677c;
  --ui-canvas: #f3f5f9;
  --ui-surface: #ffffff;
  --ui-tint: #eaf0f7;
  --ui-line: #d9e0e9;
  --ui-focus: #8c1e73;
  --ui-success: #226743;
  --ui-danger: #a12e39;
  --ui-radius: 18px;
  --ui-control-radius: 12px;
  --ui-page: 1200px;
  --ui-space: 24px;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
  --ui-title-font: "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --ui-shadow: 0 4px 18px rgb(37 54 80 / 4%);
  --ui-scroll-thumb: #8897ac;
  --ui-scroll-track: #edf1f6;
  --ui-scroll-hover: #58677c;
  --ui-scroll-active: #3f5172;
  --navy: var(--brand-blue);
  --navy-2: var(--ui-ink);
  --blue: var(--brand-blue);
  --mint: var(--ui-success);
  --mint-bright: var(--brand-green);
  --mint-soft: #eff6e5;
  --magenta: var(--brand-magenta);
  --lime: var(--brand-green);
  --cream: var(--ui-canvas);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --danger: var(--ui-danger);
  --shadow: var(--ui-shadow);
  --portal-navy: var(--brand-blue);
  --portal-mint: var(--ui-success);
  --portal-soft: var(--ui-tint);
  --portal-muted: var(--ui-muted);
  --portal-line: var(--ui-line);
  scroll-padding-block: calc(var(--ui-header-height, 88px) + 20px) 28px;
  scrollbar-gutter: stable;
}
html, body, body * {
  scrollbar-width: auto;
  scrollbar-color: var(--ui-scroll-thumb) var(--ui-scroll-track);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ui-scroll-track); }
::-webkit-scrollbar-thumb { background: var(--ui-scroll-thumb); border: 2px solid var(--ui-scroll-track); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-scroll-hover); }
::-webkit-scrollbar-thumb:active { background: var(--ui-scroll-active); }
body { font-family: var(--ui-font); color: var(--ui-ink); }
body :is(button, input, select, textarea) { font-family: inherit; }
body :is(button, a, summary, [role="button"]):not(:disabled):not([aria-disabled="true"]) { cursor: pointer; }
body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus); outline-offset: 3px;
}
body :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .6; }
body :is(a, button) { -webkit-tap-highlight-color: rgb(63 81 114 / 16%); touch-action: manipulation; }
body :is(h1, h2, h3) { text-wrap: pretty; }
body :is(p, label, h1, h2, h3) { overflow-wrap: anywhere; }
body :is(input, select, textarea) { max-inline-size: 100%; min-inline-size: 0; }
body :is(input, select, textarea, button, a) { scroll-margin-block: calc(var(--ui-header-height, 88px) + 20px) 32px; }
body textarea { resize: none; min-block-size: 128px; line-height: 1.8; overflow-y: auto; }
.ui-skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 12px; z-index: 100010; padding: 12px 20px; background: var(--ui-surface); color: var(--ui-ink); border: 2px solid var(--brand-blue); border-radius: 10px; transform: translateY(-160%); }
.ui-skip-link:focus { transform: none; }

/* Operational screens: natural document scroll, never a viewport-locked form. */
body.ui-product { background: var(--ui-canvas); line-height: 1.65; }
.ui-product main:not(.login-shell):not(.parent-login) { width: 100%; max-width: var(--ui-page); padding: 36px var(--ui-space) 72px; }
.ui-product .topbar, .ui-product .parent-topbar {
  height: auto; min-height: 80px; padding: 12px max(var(--ui-space), calc((100vw - var(--ui-page)) / 2 + var(--ui-space)));
  gap: 14px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); backdrop-filter: none;
}
.ui-product :is(.topbar, .parent-topbar)::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 3px;
  background: linear-gradient(to left, var(--brand-blue) 0 60%, var(--brand-green) 60% 86%, var(--brand-magenta) 86%);
}
.ui-product :is(.topbar, .parent-topbar) strong { font-size: 15px; line-height: 1.5; color: var(--ui-ink); }
.ui-product .account-area { gap: 8px; flex-wrap: wrap; }
.ui-product .account-area :is(a, button), .ui-product .header-actions :is(a, button) {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: var(--ui-control-radius); background: var(--ui-tint); color: var(--brand-blue); text-decoration: none;
}
.ui-product .account-area a:hover, .ui-product .header-actions a:hover { background: var(--ui-line); }
.ui-product .account-area > span { color: var(--ui-muted); }
.ui-product :is(.hero, .teacher-hero) { max-width: 880px; margin: 0 0 28px; text-align: start; }
.ui-product :is(.hero, .teacher-hero) h1 { font-family: var(--ui-title-font); font-size: clamp(29px, 3.2vw, 42px); line-height: 1.45; letter-spacing: 0; margin: 4px 0 8px; color: var(--ui-ink); }
.ui-product :is(.hero, .teacher-hero) > p:last-child { font-size: 16px; line-height: 1.9; max-width: 760px; margin: 8px 0 0; }
.ui-product .eyebrow { color: var(--ui-success); font-size: 12px; letter-spacing: 0; line-height: 1.6; }
.ui-product .card { border-radius: var(--ui-radius); padding: var(--ui-space); box-shadow: var(--ui-shadow); }
.ui-product :is(.section-title, .view-heading, .statistics-heading, .editor-head) { flex-wrap: wrap; gap: 14px; }
.ui-product .section-title h2 { font-size: clamp(20px, 2vw, 25px); line-height: 1.5; }
.ui-product :is(.fields, .facts, .fact-grid, .filter-summary) > *, .ui-product label { min-width: 0; }
.ui-product :is(.card, .parent-contact-card, .login-card, dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  font-size: 16px; color: var(--ui-ink); min-height: 48px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius);
  padding: 11px 13px; background: var(--ui-surface); box-shadow: none; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ui-product :is(input, select, textarea):focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgb(63 81 114 / 12%); }
.ui-product :is(input, select, textarea)[readonly] { background: var(--ui-tint); }
.ui-product :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-product :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--brand-blue); min-width: 20px; min-height: 20px; }
.ui-product button { min-height: 44px; border-radius: var(--ui-control-radius); transition: background-color 150ms ease, box-shadow 150ms ease; }
.ui-product .primary { background: var(--brand-blue); color: var(--ui-surface); text-decoration: none; }
.ui-product .primary:hover:not(:disabled) { background: var(--ui-ink); }
.ui-product .primary:active:not(:disabled) { box-shadow: inset 0 2px 5px rgb(0 0 0 / 18%); }
.ui-product :is(.secondary, .text-button) { background: var(--ui-tint); color: var(--brand-blue); }
.ui-product :is(.status, .message) { border-radius: var(--ui-control-radius); line-height: 1.8; overflow-wrap: anywhere; }
.ui-product footer { padding: 24px var(--ui-space) calc(24px + env(safe-area-inset-bottom)); color: var(--ui-muted); }

/* School-office directory: visual hierarchy follows real areas, not fake statistics. */
.ui-product .portal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ui-product .portal-section-title { grid-column: 1 / -1; font-size: 19px; gap: 10px; margin: 28px 0 2px; padding-block-end: 10px; border-bottom: 1px solid var(--ui-line); }
.ui-product .portal-section-title > span { width: 7px; height: 24px; border-radius: 4px; background: var(--brand-magenta); color: transparent; font-size: 0; }
.ui-product .operation-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; min-height: 158px; padding: 22px 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: none; background: var(--ui-surface); }
.ui-product .operation-card h2 { font-size: 18px; line-height: 1.55; color: var(--ui-ink); margin-bottom: 8px; }
.ui-product .operation-card p { font-size: 13px; line-height: 1.8; }
.ui-product .operation-card > b { grid-column: 2; font-size: 12px; color: var(--brand-blue); }
.ui-product .operation-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--ui-tint); color: var(--brand-blue); }
.ui-product .operation-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-product .operation-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow: var(--ui-shadow); }
.ui-directory-tools { grid-column: 1 / -1; display: grid; gap: 16px; padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.ui-directory-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ui-directory-search label { font-weight: 700; color: var(--ui-ink); }
.ui-directory-search input { flex: 1; min-width: 130px; height: 46px; padding: 10px 14px; background: var(--ui-canvas); border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); font: inherit; }
.ui-directory-search button { color: var(--brand-blue); background: var(--ui-tint); padding: 8px 14px; }
.ui-directory-sections { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-directory-sections a { padding: 8px 12px; min-height: 40px; font-size: 13px; color: var(--brand-blue); border: 1px solid var(--ui-line); border-radius: 10px; text-decoration: none; }
.ui-directory-sections a:hover { background: var(--ui-tint); }
.ui-directory-result { margin: 0; font-size: 13px; color: var(--ui-muted); }
/* Filtering and access visibility are separate: never remove a page-owned hidden class. */
.ui-filtered-out, .ui-directory-tools [hidden] { display: none !important; }

/* Teacher and family spaces share the system, with room for human context. */
.ui-product .teacher-hero { max-width: none; padding: 28px; border-radius: var(--ui-radius); background: var(--ui-surface); border-inline-start: 5px solid var(--brand-green); }
.ui-product .teacher-portal { gap: 18px; }
.ui-product .teacher-card { min-height: 220px; padding: 26px; border-radius: var(--ui-radius); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.ui-product .teacher-card::after { display: none; }
.ui-product .teacher-card h2 { font-size: 26px; }
.ui-product .teacher-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--ui-tint); color: var(--brand-blue); }
.ui-product .teacher-holidays { border-radius: var(--ui-radius); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.ui-product .parent-topbar { flex-wrap: wrap; }
.ui-product .parent-topbar strong { white-space: normal; overflow: visible; }
.ui-product .portal-actions { margin-inline-start: auto; flex-wrap: wrap; }
.ui-product .modern-action { min-height: 44px; color: var(--brand-blue); }
.ui-product .portal-actions .modern-action { width: auto; min-width: 64px; border-radius: var(--ui-control-radius); }
.ui-product .portal-actions .modern-action span { display: block; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.ui-product .parent-hero { background: var(--ui-surface); border: 1px solid var(--ui-line); border-inline-start: 5px solid var(--brand-green); box-shadow: var(--ui-shadow); border-radius: var(--ui-radius); padding: 28px; }
.ui-product .parent-hero h1 { color: var(--ui-ink); font-size: clamp(28px, 4vw, 38px); line-height: 1.5; }
.ui-product :is(.child-card, .course-row, .parent-contact-card, .parent-dashboard-section, .parent-courses-card, .parent-interest-card) { border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); border-color: var(--ui-line); }
.ui-product .child-card { padding: 24px; background: var(--ui-surface); }
.ui-product .child-avatar { background: var(--ui-tint); color: var(--brand-blue); }
.ui-product .parent-contact-card { background: var(--ui-surface); padding: 28px; border-inline-start: 4px solid var(--brand-magenta); }
.ui-product .contact-icon { background: #f9edf6; color: var(--ui-focus); }
.ui-product .parent-whatsapp-message { background: var(--ui-success); color: var(--ui-surface); }
.ui-product .portal-nav { top: var(--ui-header-height, 80px); }

/* Sign-in: shared layout, original account workflows and biometrics retained. */
.ui-product :is(.login-shell, .parent-login) { max-width: none; min-height: calc(100svh - 70px); padding: 40px 20px; background: radial-gradient(ellipse at 10% 20%, #e6eddc, transparent 55%), var(--ui-canvas); }
.ui-product .login-card { position: relative; overflow: hidden; width: min(100%, 480px); border-radius: 24px; padding: 36px; border-color: var(--ui-line); box-shadow: 0 18px 60px rgb(37 54 80 / 9%); }
.ui-product .login-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px; background: linear-gradient(to left, var(--brand-blue) 60%, var(--brand-green) 60% 85%, var(--brand-magenta) 85%); }
.ui-product .login-card h1 { font-size: 32px; color: var(--ui-ink); }
.ui-product .login-card .intro { font-size: 15px; line-height: 1.9; }
.ui-product .login-card .login-logo-link { display: flex; width: max-content; margin: 0 auto 20px; }
.ui-product .login-card form button[type="submit"] { background: var(--brand-blue); color: var(--ui-surface); min-height: 48px; }
.ui-product .login-card form button[type="submit"]:hover:not(:disabled) { background: var(--ui-ink); }
.ui-password-field { display: flex; gap: 8px; align-items: stretch; }
.ui-password-field input { flex: 1; width: 0; }
.ui-product .ui-password-toggle { flex: 0 0 auto; width: auto; margin: 7px 0 0; padding: 8px 12px; color: var(--brand-blue); background: var(--ui-tint); font-size: 13px; }
.ui-field-error { color: var(--ui-danger); font-size: 13px; font-weight: 500; margin: 6px 0; }
.ui-form-summary { padding: 12px 16px; margin: 14px 0; background: #fff0f1; color: var(--ui-danger); border: 1px solid #e9b9c0; border-radius: var(--ui-control-radius); }

/* Tables keep every column/action; a named, keyboard-scrollable region owns overflow. */
.ui-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); margin-block: 16px; }
.ui-table-scroll > table { min-width: 640px; width: 100%; border-collapse: collapse; margin: 0; }
.ui-table-scroll th { background: var(--ui-tint); color: var(--brand-blue); font-size: 13px; padding: 14px 16px; text-align: start; }
.ui-table-scroll td { padding: 14px 16px; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.ui-table-scroll tbody tr:last-child td { border-bottom: 0; }
.ui-table-hint { color: var(--ui-muted); font-size: 12px; margin: 8px 0 0; }
.ui-product .database-layout > *, .ui-product .stats > *, .ui-product .stat-card { min-width: 0; }
.ui-product .database-layout { grid-template-columns: 250px minmax(0, 1fr); }
.ui-product .database-layout .database-scroll { width: 100%; }
.ui-product .stat-card strong { overflow-wrap: anywhere; font-size: clamp(20px, 2.5vw, 31px); }
.ui-product .summary-counts small, .ui-product .workflow-stats small { color: var(--ui-muted); }
.ui-product dialog { border: 1px solid var(--ui-line); border-radius: 22px; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(var(--ui-viewport-height, 100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; color: var(--ui-ink); }
.ui-product dialog::backdrop { background: rgb(25 39 62 / 42%); }
.ui-product .iqraa-busy-card { border-radius: var(--ui-radius); color: var(--brand-blue); }
.ui-product .iqraa-spinner { border-top-color: var(--brand-blue); }

/* Marketing register: retain the school's imagery and voice, bring it onto the palette. */
body.ui-marketing { background: var(--ui-surface); }
.ui-marketing .site-header { background: var(--ui-surface); border-bottom: 3px solid var(--brand-blue); }
.ui-marketing .hero h1 { color: var(--ui-ink); letter-spacing: 0; }
.ui-marketing .hero h1 em { color: var(--brand-blue); font-style: normal; }
.ui-marketing .primary-action { background: var(--brand-blue); }
.ui-marketing .secondary-action { color: var(--brand-blue); border-color: var(--ui-line); }
.ui-marketing .portal-card { box-shadow: var(--ui-shadow); border-radius: 22px; }
.ui-marketing .values-section { background: var(--brand-blue); }
.ui-marketing .value-grid p, .ui-marketing .values-section header > p:last-child { color: #edf1f6; }
.ui-marketing .value-number { color: #e0e7f2; }
.ui-marketing .portal-card:hover { transform: translateY(-3px); border-color: var(--brand-blue); }

@media (max-width: 1000px) {
  .ui-product .portal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-product :is(.topbar, .parent-topbar) { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  html:root { --ui-space: 16px; }
  .ui-product main:not(.login-shell):not(.parent-login) { padding-block-start: 26px; }
  .ui-product .topbar { padding: 10px 16px; gap: 10px; }
  .ui-product .account-area { flex-basis: 100%; margin: 0; justify-content: flex-start; padding-block-start: 8px; border-top: 1px solid var(--ui-line); }
  .ui-product .account-area > span { display: none; }
  .ui-product .account-area :is(a, button) { min-height: 40px; font-size: 12px; }
  .ui-product :is(.hero, .teacher-hero) { margin-bottom: 20px; }
  .ui-product :is(.hero, .teacher-hero) > p:last-child { font-size: 14px; }
  .ui-product .card { padding: 18px; }
  .ui-product .database-layout { grid-template-columns: minmax(0, 1fr); }
  .ui-product :is(.information-filters, .statistics-filters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-product :is(.parent-contact-card, .parent-hero, .teacher-hero) { padding: 22px; }
  .ui-product .teacher-card { min-height: 190px; padding: 22px; }
  .ui-product .teacher-card h2 { font-size: 23px; }
  .ui-product .parent-topbar .brand { flex: 1; }
  .ui-product .portal-actions { flex-basis: 100%; justify-content: flex-start; gap: 6px; }
  .ui-product .portal-actions .modern-action { flex-direction: column; gap: 4px; height: auto; min-height: 62px; padding: 8px !important; border-radius: var(--ui-control-radius) !important; }
  .ui-product .portal-actions .modern-action span { font-size: 11px; }
  .ui-product .portal-nav { position: static; }
  .ui-product .sticky-save { position: static; flex-wrap: wrap; gap: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .ui-product .attendance-save-actions { flex-wrap: wrap; }
  .ui-product .login-card { padding: 30px 22px; }
  .ui-product .ui-directory-search { gap: 8px; }
  .ui-directory-search label { flex-basis: 100%; }
  .ui-directory-tools { min-width: 0; }
  .ui-directory-sections { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .ui-directory-sections a { font-size: 12px; flex: 0 0 auto; }
  .ui-marketing .gallery-stage { min-height: 320px; height: 65svh; max-height: 550px; }
}
@media (max-width: 500px) {
  .ui-product .portal { grid-template-columns: minmax(0, 1fr); }
  .ui-product .stat-section { min-width: 0; }
  .ui-product .operation-card { min-height: 124px; padding: 20px; gap: 10px 14px; }
  .ui-product .operation-card > b { grid-column: 2; }
  .ui-product .portal-section-title { font-size: 18px; }
  .ui-product :is(.lookup-row, .search-row, .information-toolbar) { flex-wrap: wrap; }
  .ui-product :is(.information-filters, .statistics-filters) { grid-template-columns: minmax(0, 1fr); }
  .ui-product .login-card h1 { font-size: 28px; }
  .ui-product .parent-topbar { padding-inline: 16px; }
  .ui-marketing .site-header { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 10px; }
  .ui-marketing .header-register { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  /* Override legacy animations and hover transforms throughout the shared shell. */
  html { scroll-behavior: auto !important; }
  body *, body *::before, body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body :is(.operation-card, .teacher-card, .portal-card, .child-card):hover { transform: none; }
}
@media (forced-colors: active) {
  html, body, body * { scrollbar-color: auto; }
  body :is(button, a, input, select, textarea):focus-visible { outline-color: Highlight; }
  .ui-product :is(.operation-card, .teacher-card, .card) { border-color: CanvasText; }
}
@media print {
  .ui-directory-tools, .ui-skip-link, .ui-table-hint, .ui-password-toggle { display: none; }
  .ui-table-scroll { overflow: visible; border: 0; }
  .ui-product .topbar, .ui-product .parent-topbar { position: static; }
  .ui-product main { max-width: none; padding: 0; }
}
/* Shared release metadata in document flow, never inside or over the header. */
.ui-release-version { display: block; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--ui-muted); white-space: nowrap; }
.ui-release-footer { clear: both; text-align: center; padding: 12px var(--ui-space) calc(12px + env(safe-area-inset-bottom)); }