/* Generated theme tokens from app.css. Run tools/generate_auth_tokens.py. */
:root,:root[data-theme="light"]{
  --brand:#75A1C8;--brand-2:#4E7DAE;--brand-3:#2E5580;
  --accent:#E99F6B;--accent-2:#D4834A;
  --pos:#26844C;--neg:#D24033;--warn:#D9922B;
  --bg:#EEF2F7;--bg-2:#E4EBF3;--ground-2:#F0F4F9;
  --card:rgba(255,255,255,.74);--card-solid:#FFFFFF;--surface-raise:#FFFFFF;
  --hair:rgba(16,40,72,.10);

  --g-bg:rgba(255,255,255,.42);--g-bg-deep:rgba(20,36,58,.82);
  --g-edge:rgba(255,255,255,.55);
  --g-shadow:0 1px 2px rgba(16,40,72,.06),0 18px 46px rgba(16,40,72,.16);
  --ink:#14243A;--ink-2:#4A5C74;--ink-3:#7C8CA3;
  --shadow:0 1px 2px rgba(16,40,72,.05),0 10px 30px rgba(16,40,72,.09);
  --shadow-lift:0 2px 6px rgba(16,40,72,.07),0 18px 46px rgba(16,40,72,.15);
  --brand-tint:rgba(117,161,200,.10);--accent-tint:rgba(233,159,107,.14);

  --muted:var(--ink-2);--canvas:var(--bg);--surface:var(--card-solid);--surface-2:var(--bg-2);
  --line:rgba(16,40,72,.11);--line-strong:rgba(16,40,72,.22);
  --border:var(--line);
  --accent-soft:var(--blue-soft);
  --wf-menu-bg:var(--surface-raise);
  --wf-menu-fg:var(--ink);

  --pos-ink:var(--done-ink);
  --neg-ink:var(--red);
  --green:var(--brand-3);--green-2:var(--brand-2);--green-soft:#E8EFF7;
  --blue:#975D35;--blue-soft:#FDF0E6;
  --amber:#94631D;--amber-soft:#FFF4DC;
  --red:#B23A2E;--red-soft:#FDECEA;

  --on-fill:#FFFFFF;
  --brand-fill:#2E5580;--brand-fill-hover:#24466B;--accent-fill:#975D35;--warn-fill:#94631D;

  --header-bg:#14243A;--header-ink:#F5F8FC;--header-ink-2:#A9B8CD;--header-ink-3:#C3CDDA;
  --header-surface:#1E3552;--header-active:#2E5580;--header-active-line:rgba(78,125,174,.55);
  --header-hair:#3A4E68;--header-sep:rgba(255,255,255,.22);--header-focus:#8DB6DC;
  --header-shadow:0 3px 16px rgba(16,40,72,.18);
  --role-halo:rgba(255,255,255,.08);
  --role-dot:#9AA5AD;--role-admin:#F0B84B;--role-cnc:#56A0E2;--role-warehouse:#72BD7D;

  --btn-bg:#FFFFFF;--btn-hover-bg:#EDF2F8;--btn-hover-line:#AAB8CC;--danger-line:#E3B4B0;
  --input-bg:#FFFFFF;--focus-line:#4E7DAE;--focus-ring:rgba(78,125,174,.12);
  --check-bg:#FAFCFE;--check-locked-bg:#F1F4F9;--drop-bg:#F7FAFD;--drop-line:#AAB8CC;

  --grid-bg:#FFFFFF;--grid-head-1:#2E5580;--grid-head-2:#14243A;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.14);
  --cell-editable:#E3E6EA;--cell-editable-hover:#D7DFE7;--cell-locked:#E2E4E8;--cell-wh:#DCE0E6;
  --cell-new:#D6DDE4;--cell-new-line:#7FA4CC;
  --done-bg:#DFF1E4;--done-ink:#173A25;--done-bg-hover:#D4EADB;
  --zero-bg:#FFF7F6;--zero-bg-hover:#FDEEEC;--pending-hover:#FDECCD;
  --pending-row:#FFF6E4;--pending-row-edge:#D9922B;
  --sticky-shadow:rgba(16,40,72,.07);
  --rownum-bg:#EDF1F5;--rownum-bg-hover:#E3EAF2;--rownum-ink:#54637A;
  --sel-ring:#2E5580;--sel-glow:rgba(46,85,128,.16);--sel-locked-bg:#C7DAF0;--sel-handle:#FFFFFF;
  --chip-ring:rgba(0,0,0,.10);

  --flash-bg:#16243A;--flash-ink:#FFFFFF;--flash-line:#3C5F8C;
  --toast-bg:#14243A;--toast-ink:#FFFFFF;--toast-error:#7D2D28;--toast-success:#235E39;

  --login-1:#EDF2F8;--login-2:#F7FAFD;--login-3:#E7EDF6;
  --login-panel-1:#14243A;--login-panel-2:#2E5580;--login-shadow:0 24px 70px rgba(16,40,72,.15);
  --login-toggle-bg:rgba(255,255,255,.92);
  --login-ink:#FFFFFF;--login-ink-2:#CBD8E6;--login-ink-3:#D3DFEC;--login-eyebrow:#B6CAE1;
  --login-hair:rgba(255,255,255,.11);--login-glow-1:rgba(255,255,255,.035);
  --login-glow-2:rgba(255,255,255,.02);
  --login-step-bg:rgba(255,255,255,.06);--login-step-line:rgba(255,255,255,.2);
  --login-error-bg:#FFF0EE;--login-error-ink:#9F2D24;--login-error-line:#F2C6C1;

  --vc-navy-bg:#12509E;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#B23A2E;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#F6C8C3;--vc-pink-ink:#8E1F14;
  --vc-amber-bg:#F5D699;--vc-amber-ink:#6B4A0A;
  --vc-lavender-bg:#E0CCEE;--vc-lavender-ink:#5E2C80;
  --vc-teal-bg:#B6E0D9;--vc-teal-ink:#1F5850;
  --vc-purple-bg:#C6BBE2;--vc-purple-ink:#3E2E68;
  --vc-orange-bg:#A85B12;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#D6E6F6;--vc-lightblue-ink:#1F5C93;
  --vc-peach-bg:#FBD9B4;--vc-peach-ink:#7A400A;
  --vc-grey-bg:#E6E6E6;--vc-grey-ink:#5C5C5C;
  --vc-stone-bg:#EFEFEF;--vc-stone-ink:#616161;
  --vc-green-bg:#2F6B1C;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#C3E3B6;--vc-leaf-ink:#335624;
  --vc-dark-bg:#3A3A3A;--vc-dark-ink:#FFFFFF;

  --r:18px;--r-sm:12px;--r-pill:999px;
  --g-blur:22px;--g-sat:170%;
  --ease:cubic-bezier(.32,.72,0,1);--fast:.22s;--med:.42s;
  --fs:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fa:"SF Arabic","Geeza Pro","Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
  --radius:var(--r);--header-h:68px;--rownum-w:46px;
  --font:var(--fs);

  --date-col-w:98px;

  --sticky-wash:#F1F6FA;--crosshair-bg:#F1F6FA;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);

  --deleted-bg:var(--check-locked-bg);--deleted-ink:var(--ink-2);--deleted-line:var(--line-strong);
  --warn-soft:var(--amber-soft);--bad-soft:var(--red-soft);
  --scrim:rgba(10,14,20,.55);
}

:root[data-theme="dark"]{
  --brand:#8FB6D8;--brand-2:#6E9FCB;--brand-3:#4E7DAE;
  --accent:#F0B183;--accent-2:#E29A62;
  --pos:#4CC47E;--neg:#F0705F;--warn:#E8AE4C;
  --bg:#101822;--bg-2:#16202C;--ground-2:var(--bg-2);
  --card:rgba(26,35,47,.74);--card-solid:#1A232F;--surface-raise:#2D394B;
  --hair:rgba(255,255,255,.10);
  --ink:#E8EEF6;--ink-2:#AFBFD2;--ink-3:#8496AC;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.40),0 18px 46px rgba(0,0,0,.55);
  --brand-tint:rgba(143,182,216,.12);--accent-tint:rgba(240,177,131,.14);
  --line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
  --green:var(--brand);--green-2:var(--brand-2);--green-soft:#1B2A3B;
  --blue:#EFAE79;--blue-soft:#33220F;
  --amber:#F0C069;--amber-soft:#332711;
  --red:#FF9083;--red-soft:#3A1C19;
  --on-fill:#FFFFFF;
  --brand-fill:#2F5C87;--brand-fill-hover:#3A6E9E;--accent-fill:#A05C28;--warn-fill:#8A5C18;
  --g-bg:rgba(22,32,43,.55);--g-bg-deep:rgba(11,18,27,.82);
  --g-edge:rgba(255,255,255,.16);
  --g-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 46px rgba(0,0,0,.55);
  --header-bg:#0B121B;--header-ink:#EAF1F9;--header-ink-2:#A3B5CA;--header-ink-3:#B6C6D8;
  --header-surface:#182534;--header-active:#2A4C74;--header-active-line:rgba(110,159,203,.5);
  --header-hair:#2B3C51;--header-sep:rgba(255,255,255,.18);--header-focus:#9CC3E6;
  --header-shadow:0 3px 16px rgba(0,0,0,.55);
  --role-halo:rgba(255,255,255,.08);
  --role-dot:#6B7A88;--role-admin:#F0B84B;--role-cnc:#56A0E2;--role-warehouse:#72BD7D;
  --btn-bg:#1F2A38;--btn-hover-bg:#273546;--btn-hover-line:rgba(255,255,255,.34);--danger-line:#7A3A33;
  --input-bg:#141C27;--focus-line:#6E9FCB;--focus-ring:rgba(110,159,203,.22);
  --check-bg:#18212C;--check-locked-bg:#141C26;--drop-bg:#151E29;--drop-line:#3B4A5C;
  --grid-bg:#151E29;--grid-head-1:#22415F;--grid-head-2:#101822;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.14);
  --cell-editable:#1F2A38;--cell-editable-hover:#26354A;--cell-locked:#1A2331;--cell-wh:#182231;
  --cell-new:#22314A;--cell-new-line:#4E7DAE;
  --done-bg:#123122;--done-ink:#A9E5C1;--done-bg-hover:#173C2A;
  --zero-bg:#2B1618;--zero-bg-hover:#361C1E;--pending-hover:#3A2C12;
  --sticky-shadow:rgba(0,0,0,.50);
  --rownum-bg:#111A24;--rownum-bg-hover:#182231;--rownum-ink:#9AACC2;
  --sel-ring:#8FB6D8;--sel-glow:rgba(143,182,216,.18);--sel-locked-bg:#24344A;--sel-handle:#0B121B;
  --chip-ring:rgba(255,255,255,.14);
  --flash-bg:#1B2A3D;--flash-ink:#FFFFFF;--flash-line:#3C5F8C;
  --toast-bg:#1B2A3D;--toast-ink:#FFFFFF;--toast-error:#7D2D28;--toast-success:#1D5233;
  --login-1:#0C131C;--login-2:#111A24;--login-3:#0A1119;
  --login-panel-1:#0B121B;--login-panel-2:#2E5580;--login-shadow:0 24px 70px rgba(0,0,0,.60);
  --login-toggle-bg:rgba(26,35,47,.92);
  --login-ink:#FFFFFF;--login-ink-2:#C3D2E2;--login-ink-3:#CBD9E9;--login-eyebrow:#C8D9EC;
  --login-error-bg:#3A1C19;--login-error-ink:#FFB4A8;--login-error-line:#7A3A33;
  --vc-navy-bg:#1D4E96;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#B23A2E;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#5A1F1A;--vc-pink-ink:#F6C8C3;
  --vc-amber-bg:#4A3508;--vc-amber-ink:#F5D699;
  --vc-lavender-bg:#3A2350;--vc-lavender-ink:#E0CCEE;
  --vc-teal-bg:#14403A;--vc-teal-ink:#B6E0D9;
  --vc-purple-bg:#332552;--vc-purple-ink:#C6BBE2;
  --vc-orange-bg:#8A4A0E;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#17364F;--vc-lightblue-ink:#CFE3F7;
  --vc-peach-bg:#4E2E10;--vc-peach-ink:#FBD9B4;
  --vc-grey-bg:#4A4A4A;--vc-grey-ink:#E6E6E6;
  --vc-stone-bg:#33383D;--vc-stone-ink:#D8DEE4;
  --vc-green-bg:#2F6B1C;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#223A17;--vc-leaf-ink:#C3E3B6;
  --vc-dark-bg:#EDEDED;--vc-dark-ink:#1F1F1F;

  --sticky-wash:#24303E;--crosshair-bg:#24303E;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --brand:#8FB6D8;--brand-2:#6E9FCB;--brand-3:#4E7DAE;
    --accent:#F0B183;--accent-2:#E29A62;
    --pos:#4CC47E;--neg:#F0705F;--warn:#E8AE4C;
    --bg:#101822;--bg-2:#16202C;--ground-2:var(--bg-2);
    --card:rgba(26,35,47,.74);--card-solid:#1A232F;--surface-raise:#2D394B;
    --hair:rgba(255,255,255,.10);
    --ink:#E8EEF6;--ink-2:#AFBFD2;--ink-3:#8496AC;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.45);
    --shadow-lift:0 2px 6px rgba(0,0,0,.40),0 18px 46px rgba(0,0,0,.55);
    --brand-tint:rgba(143,182,216,.12);--accent-tint:rgba(240,177,131,.14);
    --line:rgba(255,255,255,.13);--line-strong:rgba(255,255,255,.26);
    --green:var(--brand);--green-2:var(--brand-2);--green-soft:#1B2A3B;
    --blue:#EFAE79;--blue-soft:#33220F;
    --amber:#F0C069;--amber-soft:#332711;
    --red:#FF9083;--red-soft:#3A1C19;
    --on-fill:#FFFFFF;
    --brand-fill:#2F5C87;--brand-fill-hover:#3A6E9E;--accent-fill:#A05C28;--warn-fill:#8A5C18;
    --g-bg:rgba(22,32,43,.55);--g-bg-deep:rgba(11,18,27,.82);
    --g-edge:rgba(255,255,255,.16);
    --g-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 46px rgba(0,0,0,.55);
    --header-bg:#0B121B;--header-ink:#EAF1F9;--header-ink-2:#A3B5CA;--header-ink-3:#B6C6D8;
    --header-surface:#182534;--header-active:#2A4C74;--header-active-line:rgba(110,159,203,.5);
    --header-hair:#2B3C51;--header-sep:rgba(255,255,255,.18);--header-focus:#9CC3E6;
    --header-shadow:0 3px 16px rgba(0,0,0,.55);
    --role-halo:rgba(255,255,255,.08);
    --role-dot:#6B7A88;--role-admin:#F0B84B;--role-cnc:#56A0E2;--role-warehouse:#72BD7D;
    --btn-bg:#1F2A38;--btn-hover-bg:#273546;--btn-hover-line:rgba(255,255,255,.34);--danger-line:#7A3A33;
    --input-bg:#141C27;--focus-line:#6E9FCB;--focus-ring:rgba(110,159,203,.22);
    --check-bg:#18212C;--check-locked-bg:#141C26;--drop-bg:#151E29;--drop-line:#3B4A5C;
    --grid-bg:#151E29;--grid-head-1:#22415F;--grid-head-2:#101822;
    --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.14);
    --cell-editable:#1F2A38;--cell-editable-hover:#26354A;--cell-locked:#1A2331;--cell-wh:#182231;
    --cell-new:#22314A;--cell-new-line:#4E7DAE;
    --done-bg:#123122;--done-ink:#A9E5C1;--done-bg-hover:#173C2A;
    --zero-bg:#2B1618;--zero-bg-hover:#361C1E;--pending-hover:#3A2C12;
    --sticky-shadow:rgba(0,0,0,.50);
    --rownum-bg:#111A24;--rownum-bg-hover:#182231;--rownum-ink:#9AACC2;
    --sel-ring:#8FB6D8;--sel-glow:rgba(143,182,216,.18);--sel-locked-bg:#24344A;--sel-handle:#0B121B;
    --chip-ring:rgba(255,255,255,.14);
    --flash-bg:#1B2A3D;--flash-ink:#FFFFFF;--flash-line:#3C5F8C;
    --toast-bg:#1B2A3D;--toast-ink:#FFFFFF;--toast-error:#7D2D28;--toast-success:#1D5233;
    --login-1:#0C131C;--login-2:#111A24;--login-3:#0A1119;
    --login-panel-1:#0B121B;--login-panel-2:#2E5580;--login-shadow:0 24px 70px rgba(0,0,0,.60);
    --login-toggle-bg:rgba(26,35,47,.92);
    --login-ink:#FFFFFF;--login-ink-2:#C3D2E2;--login-ink-3:#CBD9E9;--login-eyebrow:#C8D9EC;
    --login-error-bg:#3A1C19;--login-error-ink:#FFB4A8;--login-error-line:#7A3A33;
    --vc-navy-bg:#1D4E96;--vc-navy-ink:#FFFFFF;
    --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
    --vc-red-bg:#B23A2E;--vc-red-ink:#FFFFFF;
    --vc-pink-bg:#5A1F1A;--vc-pink-ink:#F6C8C3;
    --vc-amber-bg:#4A3508;--vc-amber-ink:#F5D699;
    --vc-lavender-bg:#3A2350;--vc-lavender-ink:#E0CCEE;
    --vc-teal-bg:#14403A;--vc-teal-ink:#B6E0D9;
    --vc-purple-bg:#332552;--vc-purple-ink:#C6BBE2;
    --vc-orange-bg:#8A4A0E;--vc-orange-ink:#FFFFFF;
    --vc-lightblue-bg:#17364F;--vc-lightblue-ink:#CFE3F7;
    --vc-peach-bg:#4E2E10;--vc-peach-ink:#FBD9B4;
    --vc-grey-bg:#4A4A4A;--vc-grey-ink:#E6E6E6;
    --vc-stone-bg:#33383D;--vc-stone-ink:#D8DEE4;
    --vc-green-bg:#2F6B1C;--vc-green-ink:#FFFFFF;
    --vc-leaf-bg:#223A17;--vc-leaf-ink:#C3E3B6;
    --vc-dark-bg:#EDEDED;--vc-dark-ink:#1F1F1F;

    --sticky-wash:#24303E;--crosshair-bg:#24303E;
    --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
  }
}

:root[data-theme="midnight"]{
  --brand:#8AB4EE;--brand-2:#6690D4;--brand-3:#4368A8;
  --accent:#F2B58C;--accent-2:#DE9A6A;
  --pos:#46C888;--neg:#F4796A;--warn:#EDB255;
  --bg:#05080F;--bg-2:#0A0F1A;--ground-2:var(--bg-2);
  --card:rgba(13,19,31,.76);--card-solid:#0D131F;--surface-raise:#26324A;
  --hair:rgba(255,255,255,.09);
  --ink:#DFE8F8;--ink-2:#A9B9D4;--ink-3:#7B8CAA;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 18px 46px rgba(0,0,0,.7);
  --brand-tint:rgba(138,180,238,.12);--accent-tint:rgba(242,181,140,.14);
  --line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.24);
  --green:var(--brand);--green-2:var(--brand-2);--green-soft:#131E33;
  --blue:#F2B58C;--blue-soft:#2C1E10;
  --amber:#F2C56E;--amber-soft:#2C2210;
  --red:#FF9587;--red-soft:#331718;
  --on-fill:#FFFFFF;
  --brand-fill:#35619A;--brand-fill-hover:#4172B0;--accent-fill:#96552B;--warn-fill:#815417;
  --g-bg:rgba(13,19,31,.58);--g-bg-deep:rgba(4,7,13,.82);
  --g-edge:rgba(255,255,255,.14);
  --g-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 46px rgba(0,0,0,.65);
  --header-bg:#04070D;--header-ink:#E7EEFA;--header-ink-2:#9FB0CE;--header-ink-3:#B2C2DC;
  --header-surface:#101A2B;--header-active:#254776;--header-active-line:rgba(102,144,212,.5);
  --header-hair:#22304A;--header-sep:rgba(255,255,255,.16);--header-focus:#93BAEC;
  --header-shadow:0 3px 16px rgba(0,0,0,.7);
  --role-halo:rgba(255,255,255,.08);
  --role-dot:#5F6E86;--role-admin:#F0B84B;--role-cnc:#56A0E2;--role-warehouse:#72BD7D;
  --btn-bg:#141D2E;--btn-hover-bg:#1C2740;--btn-hover-line:rgba(255,255,255,.32);--danger-line:#75352F;
  --input-bg:#0A1120;--focus-line:#6690D4;--focus-ring:rgba(102,144,212,.22);
  --check-bg:#0E1524;--check-locked-bg:#0B111E;--drop-bg:#0A1120;--drop-line:#334158;
  --grid-bg:#0A0F1B;--grid-head-1:#1C3557;--grid-head-2:#05080F;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.14);
  --cell-editable:#141D2E;--cell-editable-hover:#1B2740;--cell-locked:#0F1626;--cell-wh:#0D1524;
  --cell-new:#182742;--cell-new-line:#4368A8;
  --done-bg:#0D2A1D;--done-ink:#A2E3BC;--done-bg-hover:#123425;
  --zero-bg:#261316;--zero-bg-hover:#31191C;--pending-hover:#33270F;
  --sticky-shadow:rgba(0,0,0,.6);
  --rownum-bg:#080D18;--rownum-bg-hover:#0E1626;--rownum-ink:#93A5C4;
  --sel-ring:#8AB4EE;--sel-glow:rgba(138,180,238,.2);--sel-locked-bg:#1B2B47;--sel-handle:#05080F;
  --chip-ring:rgba(255,255,255,.14);
  --flash-bg:#132038;--flash-ink:#FFFFFF;--flash-line:#35538A;
  --toast-bg:#132038;--toast-ink:#FFFFFF;--toast-error:#75282A;--toast-success:#1A4E31;
  --login-1:#05080F;--login-2:#0A0F1A;--login-3:#04070D;
  --login-panel-1:#04070D;--login-panel-2:#2C4F82;--login-shadow:0 24px 70px rgba(0,0,0,.75);
  --login-toggle-bg:rgba(13,19,31,.92);
  --login-ink:#FFFFFF;--login-ink-2:#BECEE6;--login-ink-3:#C6D6EE;--login-eyebrow:#C6D6EE;
  --login-error-bg:#331718;--login-error-ink:#FFB0A4;--login-error-line:#75352F;
  --vc-navy-bg:#1D4E96;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#B23A2E;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#521B16;--vc-pink-ink:#F6C8C3;
  --vc-amber-bg:#432F06;--vc-amber-ink:#F5D699;
  --vc-lavender-bg:#341F49;--vc-lavender-ink:#E0CCEE;
  --vc-teal-bg:#103A34;--vc-teal-ink:#B6E0D9;
  --vc-purple-bg:#2E214B;--vc-purple-ink:#C6BBE2;
  --vc-orange-bg:#8A4A0E;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#133048;--vc-lightblue-ink:#CFE3F7;
  --vc-peach-bg:#47290C;--vc-peach-ink:#FBD9B4;
  --vc-grey-bg:#454545;--vc-grey-ink:#E6E6E6;
  --vc-stone-bg:#2E3338;--vc-stone-ink:#D8DEE4;
  --vc-green-bg:#2F6B1C;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#1D3413;--vc-leaf-ink:#C3E3B6;
  --vc-dark-bg:#EDEDED;--vc-dark-ink:#1F1F1F;

  --sticky-wash:#192334;--crosshair-bg:#192334;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
}

:root[data-theme="sand"]{
  --brand:#C2A07A;--brand-2:#96714A;--brand-3:#6B4A28;
  --accent:#D98C4A;--accent-2:#B96F2F;
  --pos:#3E7D4A;--neg:#B03A2C;--warn:#A0691A;
  --bg:#EFE7D9;--bg-2:#E6DACA;--ground-2:#F0E8DB;
  --card:rgba(255,251,244,.78);--card-solid:#FFFBF4;--surface-raise:#FFFFFF;
  --hair:rgba(74,52,30,.12);
  --ink:#2F2418;--ink-2:#5B4835;--ink-3:#8B7660;
  --shadow:0 1px 2px rgba(74,52,30,.06),0 10px 30px rgba(74,52,30,.10);
  --shadow-lift:0 2px 6px rgba(74,52,30,.08),0 18px 46px rgba(74,52,30,.16);
  --brand-tint:rgba(194,160,122,.14);--accent-tint:rgba(217,140,74,.14);
  --line:rgba(74,52,30,.14);--line-strong:rgba(74,52,30,.26);
  --green:var(--brand-3);--green-2:var(--brand-2);--green-soft:#F2E7D6;
  --blue:#8A4E1E;--blue-soft:#FBEBD9;
  --amber:#8A5A12;--amber-soft:#FBF0D5;
  --red:#A93327;--red-soft:#FBE7E3;
  --on-fill:#FFFFFF;
  --brand-fill:#6B4A28;--brand-fill-hover:#563A1E;--accent-fill:#8A4E1E;--warn-fill:#8A5A12;
  --g-bg:rgba(255,251,244,.46);--g-bg-deep:rgba(51,38,26,.82);
  --g-edge:rgba(255,255,255,.6);
  --g-shadow:0 1px 2px rgba(74,52,30,.08),0 18px 46px rgba(74,52,30,.18);
  --header-bg:#33261A;--header-ink:#FBF4EA;--header-ink-2:#C9B69F;--header-ink-3:#D8C9B6;
  --header-surface:#453421;--header-active:#6B4A28;--header-active-line:rgba(194,160,122,.5);
  --header-hair:#5B4632;--header-sep:rgba(255,255,255,.22);--header-focus:#DFC49C;
  --header-shadow:0 3px 16px rgba(74,52,30,.24);
  --role-halo:rgba(255,255,255,.08);
  --role-dot:#9D8C77;--role-admin:#B07A12;--role-cnc:#3F72A6;--role-warehouse:#4E8B57;
  --btn-bg:#FFFBF4;--btn-hover-bg:#F4E9D8;--btn-hover-line:#C6B092;--danger-line:#DDB3AC;
  --input-bg:#FFFBF4;--focus-line:#96714A;--focus-ring:rgba(150,113,74,.16);
  --check-bg:#FFFCF6;--check-locked-bg:#F2EADD;--drop-bg:#FBF5EA;--drop-line:#C6B092;
  --grid-bg:#FFFBF4;--grid-head-1:#6B4A28;--grid-head-2:#33261A;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.16);
  --cell-editable:#EFE6D6;--cell-editable-hover:#E7DAC5;--cell-locked:#EDE4D6;--cell-wh:#E9DECB;
  --cell-new:#E4D7C1;--cell-new-line:#B08A5C;
  --done-bg:#E1F0DF;--done-ink:#1F3A22;--done-bg-hover:#D6E9D4;
  --zero-bg:#FCEFEA;--zero-bg-hover:#F8E3DC;--pending-hover:#F6E3BE;
  --sticky-shadow:rgba(74,52,30,.10);
  --rownum-bg:#F3EADB;--rownum-bg-hover:#EBE0CD;--rownum-ink:#6B5741;
  --sel-ring:#6B4A28;--sel-glow:rgba(107,74,40,.16);--sel-locked-bg:#E0CDA8;--sel-handle:#FFFBF4;
  --chip-ring:rgba(0,0,0,.10);
  --flash-bg:#33261A;--flash-ink:#FFFFFF;--flash-line:#7A6046;
  --toast-bg:#33261A;--toast-ink:#FFFFFF;--toast-error:#7A2B22;--toast-success:#245C36;
  --login-1:#F5EEE1;--login-2:#FFFBF4;--login-3:#EFE3D0;
  --login-panel-1:#33261A;--login-panel-2:#6B4A28;--login-shadow:0 24px 70px rgba(74,52,30,.18);
  --login-toggle-bg:rgba(255,251,244,.92);
  --login-ink:#FFFFFF;--login-ink-2:#E4D7C5;--login-ink-3:#EADFCF;--login-eyebrow:#D9C3A4;
  --login-error-bg:#FBE7E3;--login-error-ink:#8E271D;--login-error-line:#E7BDB6;
  --vc-navy-bg:#12509E;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#B23A2E;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#F6C8C3;--vc-pink-ink:#8E1F14;
  --vc-amber-bg:#F5D699;--vc-amber-ink:#6B4A0A;
  --vc-lavender-bg:#E0CCEE;--vc-lavender-ink:#5E2C80;
  --vc-teal-bg:#B6E0D9;--vc-teal-ink:#1F5850;
  --vc-purple-bg:#C6BBE2;--vc-purple-ink:#3E2E68;
  --vc-orange-bg:#A85B12;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#D6E6F6;--vc-lightblue-ink:#1F5C93;
  --vc-peach-bg:#FBD9B4;--vc-peach-ink:#7A400A;
  --vc-grey-bg:#E7E2D8;--vc-grey-ink:#5A5348;
  --vc-stone-bg:#F0ECE4;--vc-stone-ink:#5F584C;
  --vc-green-bg:#2F6B1C;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#C3E3B6;--vc-leaf-ink:#335624;
  --vc-dark-bg:#3A342C;--vc-dark-ink:#FFFFFF;

  --sticky-wash:#F6EEE3;--crosshair-bg:#F6EEE3;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
}

:root[data-theme="forest"]{
  --brand:#7FA894;--brand-2:#4E7D68;--brand-3:#2A5545;
  --accent:#D9A05B;--accent-2:#BE8036;
  --pos:#2E7D4F;--neg:#B33F30;--warn:#96681A;
  --bg:#D9E0D8;--bg-2:#CDD6CB;--ground-2:#DBE2DA;
  --card:rgba(240,244,239,.80);--card-solid:#F0F4EF;--surface-raise:#FFFFFF;
  --hair:rgba(20,40,30,.12);
  --ink:#15251C;--ink-2:#3F5648;--ink-3:#6C8175;
  --shadow:0 1px 2px rgba(20,40,30,.05),0 10px 30px rgba(20,40,30,.09);
  --shadow-lift:0 2px 6px rgba(20,40,30,.07),0 18px 46px rgba(20,40,30,.14);
  --brand-tint:rgba(127,168,148,.14);--accent-tint:rgba(217,160,91,.14);
  --line:rgba(20,40,30,.13);--line-strong:rgba(20,40,30,.24);
  --green:var(--brand-3);--green-2:var(--brand-2);--green-soft:#DDEADF;
  --blue:#8A5220;--blue-soft:#F7EADB;
  --amber:#7D5710;--amber-soft:#F5EED6;
  --red:#A93A2C;--red-soft:#F7E4E1;
  --on-fill:#FFFFFF;
  --brand-fill:#2A5545;--brand-fill-hover:#1F4335;--accent-fill:#8A5220;--warn-fill:#7D5710;
  --g-bg:rgba(240,244,239,.48);--g-bg-deep:rgba(22,38,30,.82);
  --g-edge:rgba(255,255,255,.6);
  --g-shadow:0 1px 2px rgba(20,40,30,.07),0 18px 46px rgba(20,40,30,.16);
  --header-bg:#16261E;--header-ink:#EFF5EF;--header-ink-2:#AEC2B4;--header-ink-3:#C1D2C6;
  --header-surface:#20362A;--header-active:#2A5545;--header-active-line:rgba(127,168,148,.5);
  --header-hair:#33513F;--header-sep:rgba(255,255,255,.2);--header-focus:#A7CDB8;
  --header-shadow:0 3px 16px rgba(20,40,30,.22);
  --role-halo:rgba(255,255,255,.08);
  --role-dot:#8C9C90;--role-admin:#A87614;--role-cnc:#3D7398;--role-warehouse:#40865A;
  --btn-bg:#F0F4EF;--btn-hover-bg:#E2EAE0;--btn-hover-line:#A9BBAE;--danger-line:#D9B2AB;
  --input-bg:#F6F9F5;--focus-line:#4E7D68;--focus-ring:rgba(78,125,104,.16);
  --check-bg:#F6F9F5;--check-locked-bg:#E9EFE8;--drop-bg:#F3F7F2;--drop-line:#A9BBAE;
  --grid-bg:#F0F4EF;--grid-head-1:#2A5545;--grid-head-2:#16261E;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.16);
  --cell-editable:#E0E7DE;--cell-editable-hover:#D5DED3;--cell-locked:#DFE5DD;--cell-wh:#DAE2D8;
  --cell-new:#D3DDD1;--cell-new-line:#7FA894;
  --done-bg:#DDEEDF;--done-ink:#183A24;--done-bg-hover:#D2E7D5;
  --zero-bg:#F8EDEA;--zero-bg-hover:#F2E0DC;--pending-hover:#F1E5C6;
  --sticky-shadow:rgba(20,40,30,.10);
  --rownum-bg:#E7EDE5;--rownum-bg-hover:#DDE5DB;--rownum-ink:#4C6153;
  --sel-ring:#2A5545;--sel-glow:rgba(42,85,69,.16);--sel-locked-bg:#C6DCC9;--sel-handle:#F0F4EF;
  --chip-ring:rgba(0,0,0,.10);
  --flash-bg:#16261E;--flash-ink:#FFFFFF;--flash-line:#3F6350;
  --toast-bg:#16261E;--toast-ink:#FFFFFF;--toast-error:#7A2C24;--toast-success:#215636;
  --login-1:#E4EBE2;--login-2:#F2F6F1;--login-3:#DCE5DA;
  --login-panel-1:#16261E;--login-panel-2:#2A5545;--login-shadow:0 24px 70px rgba(20,40,30,.18);
  --login-toggle-bg:rgba(240,244,239,.92);
  --login-ink:#FFFFFF;--login-ink-2:#CFDDD3;--login-ink-3:#D7E4DA;--login-eyebrow:#A9C7B5;
  --login-error-bg:#F7E4E1;--login-error-ink:#8E2A20;--login-error-line:#E0B8B2;
  --vc-navy-bg:#12509E;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#2C6CA8;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#A93A2C;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#F0C7C2;--vc-pink-ink:#8A1F14;
  --vc-amber-bg:#EFD298;--vc-amber-ink:#68470A;
  --vc-lavender-bg:#DBC8E8;--vc-lavender-ink:#5B2B7C;
  --vc-teal-bg:#B2DCD5;--vc-teal-ink:#1D554E;
  --vc-purple-bg:#C1B7DC;--vc-purple-ink:#3B2C64;
  --vc-orange-bg:#A05712;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#D2E2F1;--vc-lightblue-ink:#1D588D;
  --vc-peach-bg:#F5D5B1;--vc-peach-ink:#763E0A;
  --vc-grey-bg:#E1E4E0;--vc-grey-ink:#565B57;
  --vc-stone-bg:#EAEDE9;--vc-stone-ink:#5B605C;
  --vc-green-bg:#2C6519;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#BFDFB2;--vc-leaf-ink:#315322;
  --vc-dark-bg:#35392F;--vc-dark-ink:#FFFFFF;

  --sticky-wash:#E0E9E2;--crosshair-bg:#E0E9E2;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
}

:root[data-theme="contrast"]{
  --brand:#0A66C2;--brand-2:#004B94;--brand-3:#003A75;
  --accent:#B35A00;--accent-2:#8A4300;
  --pos:#006B2D;--neg:#A80000;--warn:#7A4E00;
  --bg:#FFFFFF;--bg-2:#EDEDED;--ground-2:#FFFFFF;
  --card:#FFFFFF;--card-solid:#FFFFFF;--surface-raise:#DCDCDC;
  --hair:#000000;
  --ink:#000000;--ink-2:#1F1F1F;--ink-3:#3D3D3D;
  --shadow:0 0 0 1px #000000;--shadow-lift:0 0 0 2px #000000;
  --brand-tint:#E3EEF9;--accent-tint:#FBEBD8;
  --line:#000000;--line-strong:#000000;
  --green:var(--brand-3);--green-2:var(--brand-2);--green-soft:#DEEBF7;
  --blue:#8A4300;--blue-soft:#FDEEDD;
  --amber:#6B4300;--amber-soft:#FBF0D2;
  --red:#A80000;--red-soft:#FCE6E6;
  --on-fill:#FFFFFF;
  --brand-fill:#003A75;--brand-fill-hover:#002B57;--accent-fill:#8A4300;--warn-fill:#6B4300;
  --g-bg:#FFFFFF;--g-bg-deep:#000000;--g-edge:#000000;
  --g-shadow:0 0 0 1px #000000;--g-blur:0px;--g-sat:100%;
  --header-bg:#000000;--header-ink:#FFFFFF;--header-ink-2:#E6E6E6;--header-ink-3:#F2F2F2;
  --header-surface:#1F1F1F;--header-active:#003A75;--header-active-line:#FFFFFF;
  --header-hair:#FFFFFF;--header-sep:#FFFFFF;--header-focus:#FFD400;
  --header-shadow:0 3px 0 #000000;
  --role-halo:rgba(255,255,255,.25);
  --role-dot:#5C5C5C;--role-admin:#8A5A00;--role-cnc:#004B94;--role-warehouse:#006B2D;
  --btn-bg:#FFFFFF;--btn-hover-bg:#E3EEF9;--btn-hover-line:#000000;--danger-line:#A80000;
  --input-bg:#FFFFFF;--focus-line:#003A75;--focus-ring:rgba(0,58,117,.30);
  --check-bg:#FFFFFF;--check-locked-bg:#EDEDED;--drop-bg:#FFFFFF;--drop-line:#000000;
  --grid-bg:#FFFFFF;--grid-head-1:#00305F;--grid-head-2:#000000;
  --grid-head-ink:#FFFFFF;--grid-head-hair:rgba(255,255,255,.35);
  --cell-editable:#F2F2F2;--cell-editable-hover:#E4E4E4;--cell-locked:#EDEDED;--cell-wh:#E8E8E8;
  --cell-new:#DDEAF7;--cell-new-line:#003A75;
  --done-bg:#D8F0DD;--done-ink:#00341A;--done-bg-hover:#CBE9D2;
  --zero-bg:#FCE6E6;--zero-bg-hover:#F7D6D6;--pending-hover:#F7E6BE;
  --sticky-shadow:rgba(0,0,0,.35);
  --rownum-bg:#EDEDED;--rownum-bg-hover:#E0E0E0;--rownum-ink:#1F1F1F;
  --sel-ring:#000000;--sel-glow:rgba(0,0,0,.18);--sel-locked-bg:#BCD8F5;--sel-handle:#FFFFFF;
  --chip-ring:rgba(0,0,0,.55);
  --flash-bg:#000000;--flash-ink:#FFFFFF;--flash-line:#FFFFFF;
  --toast-bg:#000000;--toast-ink:#FFFFFF;--toast-error:#8A0000;--toast-success:#00461F;
  --login-1:#FFFFFF;--login-2:#FFFFFF;--login-3:#EDEDED;
  --login-panel-1:#000000;--login-panel-2:#003A75;--login-shadow:0 0 0 2px #000000;
  --login-toggle-bg:#FFFFFF;
  --login-ink:#FFFFFF;--login-ink-2:#FFFFFF;--login-ink-3:#FFFFFF;--login-eyebrow:#FFD400;
  --login-error-bg:#FCE6E6;--login-error-ink:#8A0000;--login-error-line:#A80000;
  --vc-navy-bg:#0A2F63;--vc-navy-ink:#FFFFFF;
  --vc-blue-bg:#0B4E85;--vc-blue-ink:#FFFFFF;
  --vc-red-bg:#8C1E12;--vc-red-ink:#FFFFFF;
  --vc-pink-bg:#FFE1DD;--vc-pink-ink:#7A1108;
  --vc-amber-bg:#FFE7B8;--vc-amber-ink:#4A3000;
  --vc-lavender-bg:#EFE0FA;--vc-lavender-ink:#4A1D6B;
  --vc-teal-bg:#D6F1EB;--vc-teal-ink:#0E3B34;
  --vc-purple-bg:#E2DAF5;--vc-purple-ink:#2E1F58;
  --vc-orange-bg:#7A3D00;--vc-orange-ink:#FFFFFF;
  --vc-lightblue-bg:#E1EFFC;--vc-lightblue-ink:#0F4472;
  --vc-peach-bg:#FFE8CE;--vc-peach-ink:#5C2E00;
  --vc-grey-bg:#EDEDED;--vc-grey-ink:#3D3D3D;
  --vc-stone-bg:#F5F5F5;--vc-stone-ink:#454545;
  --vc-green-bg:#17551A;--vc-green-ink:#FFFFFF;
  --vc-leaf-bg:#DCF2D2;--vc-leaf-ink:#20421A;
  --vc-dark-bg:#1F1F1F;--vc-dark-ink:#FFFFFF;

  --sticky-wash:#E3EEF9;--crosshair-bg:#E3EEF9;
  --zebra-bg:var(--check-locked-bg);--range-bg:var(--sel-locked-bg);
}
:root{color-scheme:light;--ctl-h:36px;--ctl-h-sm:30px;--r-ctl:8px;--track-label:.05em;--track-eyebrow:.13em;--g-sheen:.18}
:root[data-theme="dark"],:root[data-theme="midnight"]{color-scheme:dark;--g-sheen:.06}
:root[data-theme="contrast"]{--g-sheen:0}
:root[dir="rtl"]{--track-label:0em;--track-eyebrow:0em}
@media(prefers-color-scheme:dark){:root:not([data-theme]),:root[data-theme="system"]{color-scheme:dark;--g-sheen:.06}}

/* ── Reset / base ─────────────────────────────────────────────────────── */
:lang(ar){font-family:var(--fa)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px}
body{padding-top:var(--header-h)}
button,input,select{font:inherit}
button,a{transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),opacity var(--fast) var(--ease)}
a{color:inherit}

/* ── Brand lockup + language toggle (also used outside the header on these
   two pages) ─────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand strong,.brand small{display:block;white-space:nowrap}
.brand strong{font-size:14px}.brand small{font-size:10px;color:var(--header-ink-2);margin-top:2px;letter-spacing:var(--track-label)}
.lang-toggle{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface)}
/* min-block-size 24px is WCAG 2.5.8 Target Size (Minimum), level AA. At
   font-size 10px/1.4 plus 4px padding these rendered 22px tall and failed
   it by 2px. inline-flex is what makes the min-size apply to an <a>. */
.lang-opt{display:inline-flex;align-items:center;justify-content:center;min-block-size:24px;min-inline-size:24px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:var(--track-label);color:var(--muted);text-decoration:none;line-height:1.4}
.lang-opt:hover{color:var(--ink)}
.lang-opt.is-on{background:var(--brand-fill);color:var(--on-fill)}
.lang-toggle.on-dark{border-color:var(--header-hair);background:transparent}
.lang-toggle.on-dark .lang-opt{color:var(--header-ink-2)}
.lang-toggle.on-dark .lang-opt:hover{color:var(--header-ink)}
.lang-toggle.on-dark .lang-opt.is-on{background:var(--header-active);color:var(--header-ink)}
.logout{margin-inline-start:6px;padding:7px 10px;border:1px solid var(--header-hair);border-radius:7px;color:var(--header-ink-2);text-decoration:none}.logout:hover{background:var(--header-surface);color:var(--header-ink)}

/* ── Buttons / form basics ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 12px;background:var(--btn-bg);color:var(--ink);cursor:pointer;text-decoration:none;font-weight:650;font-size:12px}.btn:hover{background:var(--btn-hover-bg);border-color:var(--btn-hover-line)}.btn.primary{background:var(--brand-fill);border-color:var(--brand-fill);color:var(--on-fill)}.btn.primary:hover{background:var(--brand-fill-hover);border-color:var(--brand-fill-hover)}.btn:disabled{opacity:.45;cursor:not-allowed}
.field,.field label{display:flex;flex-direction:column;gap:5px}.field label{font-size:11px;color:var(--muted);font-weight:650}input[type=text],input[type=password]{min-height:36px;border:1px solid var(--line-strong);border-radius:7px;background:var(--input-bg);color:var(--ink);padding:7px 9px;outline:none}input:focus{border-color:var(--focus-line);box-shadow:0 0 0 3px var(--focus-ring)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
[hidden]{display:none!important}
@media(max-width:900px){.brand span:last-child{display:none}}

/* ── Login / change-password shell ────────────────────────────────────── */
.login-page .lang-toggle{position:fixed;top:16px;inset-inline-end:16px;z-index:60;background:var(--login-toggle-bg);box-shadow:var(--shadow)}
.login-page{min-height:100vh;background:linear-gradient(135deg,var(--login-1) 0%,var(--login-2) 58%,var(--login-3) 100%);display:grid;place-items:center;padding:28px}
.login-shell{width:min(1040px,100%);min-height:590px;display:grid;grid-template-columns:1.25fr .75fr;background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;box-shadow:var(--login-shadow)}
.login-brand{background:linear-gradient(150deg,var(--login-panel-1),var(--login-panel-2));color:var(--login-ink);padding:42px;display:flex;flex-direction:column;justify-content:space-between;gap:38px;position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;width:340px;height:340px;border:1px solid var(--login-hair);border-radius:50%;inset-inline-end:-130px;bottom:-120px;box-shadow:0 0 0 45px var(--login-glow-1),0 0 0 90px var(--login-glow-2)}
.login-logo{color:var(--login-ink);position:relative;z-index:1}.login-logo small{color:var(--login-ink-3)}.login-brand h1{font-size:clamp(30px,4vw,50px);line-height:1.14;max-width:620px;margin:12px 0 16px;letter-spacing:-.035em}.login-brand p{color:var(--login-ink-2);line-height:1.8;max-width:620px;font-size:15px}.eyebrow{text-transform:uppercase;letter-spacing:var(--track-eyebrow);font-size:11px;font-weight:800;color:var(--login-eyebrow)}.login-steps{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:1}.login-steps span{border:1px solid var(--login-step-line);background:var(--login-step-bg);padding:8px 10px;border-radius:999px;font-size:10px;color:var(--login-ink-3)}
.login-card{padding:46px 38px;display:flex;flex-direction:column;justify-content:center;gap:28px}.login-card h2{font-size:28px;margin:8px 0 4px}.login-card p{color:var(--muted);margin:0}.login-submit{width:100%;justify-content:center;padding:12px}.login-error{background:var(--login-error-bg);color:var(--login-error-ink);border:1px solid var(--login-error-line);border-radius:8px;padding:9px 11px;font-size:12px}.login-foot{color:var(--muted);text-align:center}/* Pulled up under .login-foot: the card is a flex column with a 28px gap, and the credit belongs WITH the footer line, not as a third block. */.login-credit{color:var(--muted);text-align:center;font-size:11px;margin-block-start:-20px;opacity:.85}.login-credit bdi{font-weight:600;unicode-bidi:isolate}
@media(max-width:760px){.login-page{padding:14px}.login-shell{grid-template-columns:1fr;min-height:auto}.login-brand{padding:28px;min-height:310px}.login-brand h1{font-size:32px}.login-card{padding:30px 24px}}

/* LIQUID GLASS, applied - the one card on this stylesheet that qualifies
   (a single card floating over a background, no dense grid underneath it,
   no scroll performance to protect). Same rule as app.css's .login-card,
   which is dead code for this file's own two pages (login.html/
   change_password.html load login.css, not app.css) - ported here so they
   actually get it. Additive to the opaque .login-card rule above: a browser
   without backdrop-filter, and the contrast theme (--g-blur:0px above),
   simply never runs this and keeps that plain solid card. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .login-card{
    background:var(--g-bg);border:1px solid var(--g-edge);
    border-radius:var(--r-sm);box-shadow:var(--g-shadow);
    -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
    backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
    position:relative}
  /* The sheen is part of the background so it cannot cover content. */
  .login-card{
    background:linear-gradient(180deg,rgba(255,255,255,var(--g-sheen)),transparent 42%),var(--g-bg)}
}
/* OS-level reduced-transparency/motion: the manual body.reduce-transparency
   toggle in app.css is set by templates/base.html, which neither of this
   file's two pages load, so that class can never exist here - only the
   platform media feature applies. Same solid fallback as app.css's
   .login-card entry in that list. */
@media (prefers-reduced-transparency:reduce),(prefers-reduced-motion:reduce){
  .login-card{background:var(--card-solid)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .login-card::after{display:none}
}

/* ── Empire MENA brand lockup ─────────────────────────────────── */
.brand-logo{height:26px;width:auto;display:block;flex:none}
.brand:hover .brand-logo{opacity:.9}

/* One visible focus style everywhere, in the brand colour. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}

/* The header runs out of room well before the existing 900px breakpoint -
   .brand small also lives outside the header on these two pages. */
@media(max-width:1100px){.brand small{display:none}}

/* Login form: one field per row. The shared .form-grid auto-fits two columns
   once there is ~330px, which put username and password side by side - they
   are a sequence to work through, not parallel fields. */
.login-card .form-grid{grid-template-columns:1fr}
.login-submit{margin-top:4px}
.login-submit[aria-busy="true"]{opacity:.75;pointer-events:none}
.login-card .field label{font-size:12px}
.login-card input{min-height:42px;font-size:14px}

/* Printing: force a light palette and drop the language toggle, same as the
   full stylesheet does everywhere else. */
@media print{
  .lang-toggle{display:none!important}
  :root,:root[data-theme]{--bg:#fff;--bg-2:#fff;--surface:#fff;--card-solid:#fff;--surface-raise:#fff;
    --ink:#000;--ink-2:#333;--ink-3:#555;--line:#999;--line-strong:#666;
    --g-bg:#fff;--g-bg-deep:#fff;--g-edge:#999;--g-shadow:none;--g-blur:0px;--g-sat:100%}
  body{padding-top:0;background:#fff;color:#000}
}

/* Authentication pages share the operations shell's restrained card rhythm.
   Keep the theme variables above as the single colour source for all seven modes. */
.login-page{
  padding:clamp(16px,3.5vw,44px);
  background:linear-gradient(145deg,var(--login-1),var(--login-2) 55%,var(--login-3));
}
.login-shell{
  width:min(1120px,100%);
  min-height:min(640px,calc(100dvh - 88px));
  grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
  border-radius:24px;
  box-shadow:var(--login-shadow);
}
.login-brand{padding:clamp(30px,4vw,58px);gap:34px}
.login-brand::after{width:360px;height:360px;inset-inline-end:-150px;bottom:-160px}
.login-brand-copy{position:relative;z-index:1}
.login-brand h1{font-size:clamp(32px,4vw,52px);max-width:14ch;line-height:1.1;margin:16px 0}
.login-brand p{max-width:50ch;line-height:1.7;margin:0}
.login-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.login-steps span{
  display:flex;align-items:center;min-height:54px;padding:10px 12px;
  border-radius:10px;font-size:11px;font-weight:700;line-height:1.35;
}
.login-card{padding:clamp(30px,4.5vw,60px);gap:24px;border-radius:0}
.login-form-head{display:grid;justify-items:start;gap:7px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.login-form-head .eyebrow{color:var(--ink-2)}
.login-card h2{font-size:clamp(24px,2.8vw,30px);line-height:1.15;margin:0}
.login-card .login-form-head p{line-height:1.6;max-width:48ch}
.login-card .login-form{gap:16px}
.login-card .field label{font-size:12.5px;color:var(--ink-2)}
.login-card input{min-height:48px;border-radius:9px;font-size:15px;padding-inline:13px}
.login-submit{min-height:50px;border-radius:9px;font-size:14px;margin-top:5px}
.login-error{padding:11px 13px;border-radius:9px;line-height:1.5}
.login-notice{padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);line-height:1.5}
.login-foot{margin-top:auto}
.login-credit{margin-block-start:-14px;line-height:1.5}
.login-signout{align-self:center;color:var(--ink-2);font-size:12px;font-weight:700;text-decoration:none}
.login-signout:hover{text-decoration:underline;text-underline-offset:3px}
.login-signout:focus-visible{outline:2px solid var(--focus-line);outline-offset:3px}
.password-shell .login-credit{margin-block-start:-8px}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .login-card{border-radius:0}
}
@media(max-width:760px){
  .login-shell{display:flex;flex-direction:column;min-height:0;border-radius:18px}
  .login-brand{min-height:64px;padding:18px 22px;gap:0}
  .login-brand .login-brand-copy,.login-brand .login-steps{display:none}
  .login-brand::after{display:none}
  .login-card{order:-1}
  .login-card{padding:30px;gap:22px}
}
@media(max-width:480px){
  .login-page{padding:12px;padding-top:52px;place-items:start center}
  .login-page .lang-toggle{top:12px;inset-inline-end:12px}
  .login-brand{padding:25px 22px;gap:20px}
  .login-steps{gap:6px}
  .login-steps span{min-height:46px;padding:8px;font-size:10px}
  .login-card{padding:27px 22px}
}
@media (prefers-reduced-motion:reduce){
  .login-page button,.login-page a{transition:none}
}
@media print{
  .login-page{background:#fff}
  .login-shell{box-shadow:none;border-radius:0}
  .login-brand{background:#fff;color:#000}
  .login-brand p,.login-brand .eyebrow,.login-steps span{color:#000}
  .login-card{background:#fff;border:0}
}
::placeholder{color:var(--ink-2);opacity:1}