/* ==========================================================================
   SchoolERP web - the token layer of the NEW look (UI/UX Phase B, direction A «Operational Calm»,
   approved by the owner 2026-10-27). docs/ui-ux/web-phase-a/03-design-directions.md is the design;
   docs/ui-ux/web-phase-a/07-phase-b-plan-risks-tests.md the plan.

   Every rule here is keyed on <html data-ui="v2"> (App.razor writes it from School.UiV2), so a school on the old
   look loads this file and nothing changes. Batch 1 does two things:
     1. redefines the OLD token names (--primary, --bg, --card, --border, --text, --radius, --shadow, --font, the
        --sidebar-* family, the status colours) with direction A's values, so every page that already reads a
        token takes the new look without being touched (K4 in the plan: the old names are aliases until batch 6);
     2. restyles the shell (top bar, cards, tables, buttons, fields; the dark sidebar stays) - borders and tone instead of
        shadows and glow, one radius, no lift on hover, Vazirmatn everywhere.
   The semantic names (--color-*, --status-*, --nav-*, --sp-*, --fs-*, --motion-*) are the ones new components
   read from batch 2 on. MudBlazor takes the same values from MainLayout.CreateTheme(v2: true).

   Contrast (WCAG 2.2, checked by tests/SchoolERP.SecurityTests/UiTokensTests.cs):
   text on surface 16.3:1 · text-muted on surface 5.4:1 · text-muted on muted 5.0:1 · white on indigo 6.3:1 ·
   dark text on dark surface 15.5:1 · dark muted 8.1:1 · every status ink on its tint >= 4.5:1.
   ========================================================================== */

html[data-ui="v2"] {
    /* semantic - light */
    --color-canvas: #F7F8FB;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F1F4F8;
    --color-surface-raised: #FFFFFF;
    --color-text: #172033;
    --color-text-muted: #5D6B7A;
    --color-text-disabled: #8C98A6;
    --color-border: #DCE3EC;
    --color-border-soft: #E8EDF3;
    --color-border-strong: #8792A1;
    --color-secondary: #0F766E;
    --color-secondary-soft: #E6F4F2;
    --color-success: #15803D;
    --color-warning: #B45309;
    --color-danger: #C2414B;
    --color-info: #0369A1;
    --status-success-bg: #E8F5EE; --status-success-ink: #0F5132;
    --status-warning-bg: #FFF4E5; --status-warning-ink: #9A3412;
    --status-danger-bg: #FFE4E6;  --status-danger-ink: #9F1239;
    --status-info-bg: #E0F2FE;    --status-info-ink: #075985;
    --status-neutral-bg: #EEF1F5; --status-neutral-ink: #3B4A5C;
    --nav-bg: #FFFFFF;
    --nav-text: #3B4A5C;
    --nav-icon: #5D6B7A;
    --nav-group: #8C98A6;
    --topbar-bg: #FFFFFF;
    --topbar-text: #172033;

    /* geometry, type, motion */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
    --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-24: 24px; --fs-32: 32px;
    --ctl-h: 36px; --ctl-h-lg: 40px;
    --row-h: 44px; --row-pad: 11px;
    --radius-dialog: 12px; --radius-pill: 999px;
    --shadow-menu: 0 4px 16px rgba(23, 32, 51, .12);
    --shadow-dialog: 0 16px 40px rgba(23, 32, 51, .18);
    --motion-fast: 140ms; --motion-layer: 220ms; --ease: cubic-bezier(.2, 0, 0, 1);

    /* the OLD names, aliased (batch 1 → batch 6) */
    --bg: var(--color-canvas);
    --card: var(--color-surface);
    --surface: var(--color-surface);
    --surface-2: var(--color-surface-muted);
    --track: #E3E9F0;
    --border: var(--color-border);
    --border-soft: var(--color-border-soft);
    --text: var(--color-text);
    --text-muted: var(--color-text-muted);
    --green: var(--color-success);  --green-soft: var(--status-success-bg); --green-ink: var(--status-success-ink); --green-strong: var(--color-success);
    --red: var(--color-danger);     --red-soft: var(--status-danger-bg);   --red-ink: var(--status-danger-ink);   --red-strong: var(--color-danger);
    --amber: var(--color-warning);  --amber-soft: var(--status-warning-bg); --amber-ink: var(--status-warning-ink); --amber-strong: var(--color-warning);
    --blue: var(--color-info);      --blue-soft: var(--status-info-bg);    --blue-ink: var(--status-info-ink);    --blue-strong: var(--color-info);
    --teal: var(--color-secondary); --teal-soft: var(--color-secondary-soft); --teal-ink: #0F766E;
    --violet-ink: #6D28D9; --violet-soft: #F3E8FF;
    --radius: 8px;
    --radius-sm: 6px;
    /* a 1 px ring instead of a shadow: every .card/.stat/.table-card/.form-section reads --shadow */
    --shadow: 0 0 0 1px var(--color-border);
    --shadow-sm: 0 0 0 1px var(--color-border);
    /* the sidebar keeps its own dark tokens, width included, from app.css (owner 2026-10-27, after seeing rps:
       «الشريط الجانبي الفاتح فقط» لم يعجبه) */
    --topbar-h: 56px;
    --font: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
}

html[data-ui="v2"][data-theme="dark"] {
    --color-canvas: #0D131C;
    --color-surface: #151D28;
    --color-surface-muted: #111923;
    --color-surface-raised: #1D2734;
    --color-text: #F2F5F8;
    --color-text-muted: #A8B4C2;
    --color-text-disabled: #6B7A8C;
    --color-border: #2E3A47;
    --color-border-soft: #263241;
    --color-border-strong: #5B6B80;
    --color-secondary: #2DD4BF;
    --color-secondary-soft: #0F2A28;
    --color-success: #4ADE80;
    --color-warning: #FBBF24;
    --color-danger: #FB7185;
    --color-info: #38BDF8;
    --status-success-bg: #11291C; --status-success-ink: #86EFAC;
    --status-warning-bg: #2B2010; --status-warning-ink: #FCD34D;
    --status-danger-bg: #2E1418;  --status-danger-ink: #FDA4AF;
    --status-info-bg: #0F2433;    --status-info-ink: #7DD3FC;
    --status-neutral-bg: #1D2734; --status-neutral-ink: #C7D0DB;
    --nav-bg: #111923;
    --nav-text: #C7D0DB;
    --nav-icon: #A8B4C2;
    --nav-group: #6B7A8C;
    --topbar-bg: #151D28;
    --topbar-text: #F2F5F8;
    --track: #263241;
    --teal-ink: #2DD4BF;
    --violet-ink: #C4B5FD; --violet-soft: #2A2144;
    --shadow-menu: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-dialog: 0 16px 40px rgba(0, 0, 0, .6);
    /* fills that carry DARK text in dark mode (the bright status colours) */
    --green-strong: #4ADE80; --red-strong: #FB7185; --amber-strong: #FBBF24; --blue-strong: #38BDF8;
}

/* The app colour (the five accents): the fill is the same in both themes (white text >= 4.99:1); the tint and the
   ink follow the theme. The bare blocks above carry none of these on purpose - the accent blocks of app.css
   already define --primary/--primary-dark/--primary-light/--primary-soft/--primary-ink/--primary-rgb for every
   key and both themes, and direction A keeps those exact shades (03-design-directions.md). Only the nav tokens
   that read the accent are added here. */
html[data-ui="v2"] { --nav-active-bg: var(--primary-soft); --nav-active-text: var(--primary-ink); --color-primary: var(--primary); --color-primary-hover: var(--primary-dark); --color-primary-soft: var(--primary-soft); --color-primary-ink: var(--primary-ink); --color-focus: var(--primary); }

@media (prefers-reduced-motion: reduce) {
    html[data-ui="v2"] { --motion-fast: 0ms; --motion-layer: 0ms; }
}

/* ---------- Type ---------- */
html[data-ui="v2"], html[data-ui="v2"] body { font-family: var(--font); font-size: 14px; line-height: 1.5; }
html[data-ui="v2"][dir="rtl"], html[data-ui="v2"][dir="rtl"] body { font-family: var(--font); }
html[data-ui="v2"] h1, html[data-ui="v2"] h2, html[data-ui="v2"] h3, html[data-ui="v2"] h4 { font-weight: 600; letter-spacing: 0; }
html[data-ui="v2"] .page-title { font-size: var(--fs-24); font-weight: 700; line-height: 1.25; }
html[data-ui="v2"] .card-title { font-size: var(--fs-16); font-weight: 600; }
html[data-ui="v2"] .breadcrumb { font-size: var(--fs-12); }

/* ---------- Sidebar: UNCHANGED - the dark sidebar of app.css stays (owner 2026-10-27). Only the mobile drawer
   shadow and the nav badge colour are touched below. ---------- */
html[data-ui="v2"] .nav-badge { background: var(--color-warning) !important; }

/* ---------- Top bar: a surface with a border, no blur ---------- */
html[data-ui="v2"] .topbar { background: var(--topbar-bg); color: var(--topbar-text); border-bottom: 1px solid var(--color-border); gap: 10px; padding: 0 20px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="v2"] .topbar__search { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0 12px; height: var(--ctl-h); box-shadow: none; max-width: 420px; }
html[data-ui="v2"] .topbar__search:focus-within { border-color: var(--primary); }
html[data-ui="v2"] .year-pill { border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; padding: 4px 12px; height: var(--ctl-h); justify-content: center; }
html[data-ui="v2"] .icon-btn, html[data-ui="v2"] .theme-toggle, html[data-ui="v2"] .lang-current, html[data-ui="v2"] .user-chip { width: auto; min-width: var(--ctl-h); height: var(--ctl-h); border-radius: var(--radius); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: none; color: var(--color-text-muted); }
html[data-ui="v2"] .icon-btn { width: var(--ctl-h); }
html[data-ui="v2"] .icon-btn:hover, html[data-ui="v2"] .theme-toggle:hover, html[data-ui="v2"] .lang-toggle:hover, html[data-ui="v2"] .user-chip:hover, html[data-ui="v2"] .lang-current:hover { transform: none; box-shadow: none; background: var(--color-surface-muted); color: var(--color-text); }
html[data-ui="v2"] .icon-btn .dot { top: 4px; inset-inline-end: 4px; background: var(--color-danger); }
html[data-ui="v2"] .user-chip { padding: 0 10px 0 4px; gap: 8px; }
html[data-ui="v2"][dir="rtl"] .user-chip { padding: 0 4px 0 10px; }
html[data-ui="v2"] .user-chip .avatar-initials { width: 28px; height: 28px; font-size: 12px; }
html[data-ui="v2"] .user-chip .u-name { font-weight: 600; }
html[data-ui="v2"] .topbar-print { border-radius: var(--radius); box-shadow: none; height: var(--ctl-h); }
html[data-ui="v2"] .notif-panel, html[data-ui="v2"] .user-menu, html[data-ui="v2"] .lang-panel { border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-menu); }
html[data-ui="v2"] .um-item { border-radius: var(--radius-sm); }

/* ---------- Page frame, cards, tiles: a ring, one radius, no lift ---------- */
html[data-ui="v2"] .content { padding: 8px 24px 32px; }
html[data-ui="v2"] .page-head { margin: 8px 0 16px; }
html[data-ui="v2"] .card, html[data-ui="v2"] .form-section, html[data-ui="v2"] .table-card, html[data-ui="v2"] .stat, html[data-ui="v2"] .help-card { border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-ui="v2"] .card, html[data-ui="v2"] .form-section { padding: 20px; }
html[data-ui="v2"] .card:hover, html[data-ui="v2"] .stat:hover, html[data-ui="v2"] .kan-card:hover, html[data-ui="v2"] .sx-stat:hover, html[data-ui="v2"] .mini:hover { transform: none !important; box-shadow: var(--shadow) !important; }
html[data-ui="v2"] .stat:hover .stat__icon { transform: none; }
html[data-ui="v2"] .stat { padding: 14px 16px; gap: 12px; }
html[data-ui="v2"] .stat__icon { width: 40px; height: 40px; border-radius: var(--radius); box-shadow: none; }
html[data-ui="v2"] .stat__value { font-size: 22px; font-weight: 700; letter-spacing: 0; }
html[data-ui="v2"] .stats-grid { gap: 12px; margin-bottom: 16px; }
html[data-ui="v2"] .grid { gap: 16px; }
html[data-ui="v2"] .mini { border-radius: var(--radius); }
html[data-ui="v2"] .content > .page-head, html[data-ui="v2"] .content > .grid, html[data-ui="v2"] .content > .card, html[data-ui="v2"] .content > .table-card, html[data-ui="v2"] .content > .form-section, html[data-ui="v2"] .stats-grid .stat { animation: none; }

/* ---------- Buttons: 36 px, radius 6, no glow, no lift ---------- */
html[data-ui="v2"] .btn { border-radius: var(--radius-sm); padding: 0 14px; height: var(--ctl-h); font-size: 13px; font-weight: 600; transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
html[data-ui="v2"] .btn:hover, html[data-ui="v2"] .btn:active { transform: none; }
html[data-ui="v2"] .btn-primary { box-shadow: none; }
html[data-ui="v2"] .btn-primary:hover { box-shadow: none; background: var(--primary-dark); }
html[data-ui="v2"] .btn-light { box-shadow: none; border: 1px solid var(--color-border); }
html[data-ui="v2"] .btn-light:hover { background: var(--color-surface-muted); }
html[data-ui="v2"] .btn-ghost:hover { background: var(--primary-light); }
html[data-ui="v2"] .seg { border-radius: var(--radius-sm); }
html[data-ui="v2"] .pill { border-radius: var(--radius-pill); padding: 5px 12px; }
html[data-ui="v2"] .pill.on-late { color: var(--status-warning-ink); }

/* ---------- Fields: 40 px, radius 6, no shadow ---------- */
html[data-ui="v2"] .select, html[data-ui="v2"] .input { border-radius: var(--radius-sm); box-shadow: none; height: var(--ctl-h); padding: 0 12px; }
html[data-ui="v2"] .field input, html[data-ui="v2"] .field select, html[data-ui="v2"] .field textarea { border-radius: var(--radius-sm); padding: 9px 12px; }
html[data-ui="v2"] .field textarea { min-height: 80px; }
html[data-ui="v2"] .field input:focus, html[data-ui="v2"] .field select:focus, html[data-ui="v2"] .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
html[data-ui="v2"] .filter-bar { gap: 8px; margin-bottom: 12px; }

/* ---------- Tables: sticky header, dense 44 px rows, no uppercase ---------- */
html[data-ui="v2"] .table thead th { padding: 10px 16px; font-size: var(--fs-12); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-muted); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1; }
html[data-ui="v2"] .table tbody td { padding: var(--row-pad) 16px; font-size: 13.5px; border-bottom: 1px solid var(--color-border-soft); }
html[data-ui="v2"] .table tbody tr:hover { background: var(--color-surface-muted); }
html[data-ui="v2"] .table tbody tr { transition: background-color var(--motion-fast) var(--ease); transform: none !important; box-shadow: none !important; }
html[data-ui="v2"] .table .avatar, html[data-ui="v2"] .table .avatar-initials { width: 32px; height: 32px; font-size: 12px; }
html[data-ui="v2"] .badge { border-radius: var(--radius-pill); font-weight: 600; padding: 3px 10px; }
html[data-ui="v2"] .badge-grey { background: var(--status-neutral-bg); color: var(--status-neutral-ink); }
html[data-density="comfortable"][data-ui="v2"] { --row-h: 52px; --row-pad: 15px; }

/* ---------- Tabs, sub-navs, side navs ---------- */
html[data-ui="v2"] .tabs { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; margin-bottom: 16px; gap: 2px; }
html[data-ui="v2"] .tab { border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13px; }
html[data-ui="v2"] .sn-item { border-radius: var(--radius-sm); padding: 8px 12px; }
html[data-ui="v2"] .sn-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); }

/* ---------- MudBlazor: low elevations become the same ring; floating layers keep a shadow ---------- */
html[data-ui="v2"] .mud-paper.mud-elevation-1, html[data-ui="v2"] .mud-paper.mud-elevation-2, html[data-ui="v2"] .mud-paper.mud-elevation-3, html[data-ui="v2"] .mud-paper.mud-elevation-4,
html[data-ui="v2"] .mud-table.mud-elevation-1, html[data-ui="v2"] .mud-table.mud-elevation-2, html[data-ui="v2"] .mud-card.mud-elevation-1 { box-shadow: var(--shadow); }
html[data-ui="v2"] .mud-popover { box-shadow: var(--shadow-menu); border: 1px solid var(--color-border); }
html[data-ui="v2"] .mud-dialog { box-shadow: var(--shadow-dialog); border-radius: var(--radius-dialog); }
html[data-ui="v2"] .mud-button-root { text-transform: none; letter-spacing: 0; font-weight: 600; }
html[data-ui="v2"] .mud-table-cell { font-size: 13.5px; }
html[data-ui="v2"] .mud-table-head .mud-table-cell { font-size: var(--fs-12); font-weight: 600; color: var(--color-text-muted); background: var(--color-surface-muted); }
html[data-ui="v2"] .mud-chip { border-radius: var(--radius-pill); font-weight: 600; }
html[data-ui="v2"] .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-sm); }

/* ---------- Focus: one ring everywhere ---------- */
html[data-ui="v2"] a:focus-visible, html[data-ui="v2"] button:focus-visible, html[data-ui="v2"] input:focus-visible, html[data-ui="v2"] select:focus-visible, html[data-ui="v2"] textarea:focus-visible,
html[data-ui="v2"] .nav-item:focus-visible, html[data-ui="v2"] .tab:focus-visible, html[data-ui="v2"] .sn-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Scrollbars ---------- */
html[data-ui="v2"] ::-webkit-scrollbar-thumb { background: var(--color-border-strong); background-clip: content-box; }

/* ---------- Phone: the drawer keeps its shadow (it floats), nothing else does ---------- */
@media (max-width: 880px) {
    html[data-ui="v2"] .app-shell.nav-open .sidebar { box-shadow: var(--shadow-dialog); }
    html[data-ui="v2"] .content { padding: 8px 16px 24px; }
    html[data-ui="v2"] .topbar { padding: 0 12px; }
}