/*
  EPICS Night — the dark presentation mode (owner request, 26 Oct 2026, from the owner's dashboard mockup):
  deep navy canvas lit by a sunset glow and a green leaf aurora, glass surfaces with fine cyan edges,
  a glowing blue active menu item, gradient KPI tiles and a green-to-lime primary action.
  The server injects this file last on every page. Everything below is scoped to
  html[data-presentation-mode="dark"], so the light mode is unchanged; the login screen is the one
  brand screen styled the same way in both modes.
*/

/* ---------- Tokens: the shell reads these, so most of the dark mode is a re-tint ---------- */
/* Owner requests 31 Oct 2026: the dark mode and the login screen are three steps lighter, for a brighter first impression. */
html[data-presentation-mode="dark"]{
  color-scheme:dark;
  --vf-navy:#1f4f8f;--vf-navy-2:#2a62a8;--vf-primary:#3b8cff;--vf-primary-600:#2a74e6;--vf-primary-50:rgba(59,140,255,.16);
  --vf-bg:#1e467f;--vf-surface:rgba(48,98,158,.58);--vf-surface-2:rgba(255,255,255,.06);--vf-line:rgba(110,231,214,.20);--vf-line-strong:rgba(110,231,214,.36);
  --vf-ink:#f1f6ff;--vf-text:#d3e0f1;--vf-muted:#a6bbd6;
  --vf-success:#34d399;--vf-success-50:rgba(52,211,153,.15);--vf-warning:#fbbf24;--vf-warning-50:rgba(251,191,36,.15);
  --vf-danger:#f87171;--vf-danger-50:rgba(248,113,113,.15);--vf-info:#60a5fa;--vf-info-50:rgba(96,165,250,.15);
  --vf-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  --night-glass:rgba(46,94,152,.56);--night-glass-strong:rgba(40,82,138,.86);--night-edge:rgba(125,220,235,.26);
  --night-glow-blue:0 0 0 1px rgba(147,197,253,.35),0 10px 28px rgba(59,140,255,.45);
  --night-cta:linear-gradient(90deg,#10c47c 0%,#7ed957 70%,#c5f04a 100%);
}

/* ---------- Canvas: navy, sunset glow at the top, green aurora at the bottom ---------- */
html[data-presentation-mode="dark"] body:has(> .sidebar){
  background:
    radial-gradient(1100px 520px at 70% -12%,rgba(255,176,72,.18),transparent 62%),
    radial-gradient(900px 620px at -5% 112%,rgba(34,197,94,.22),transparent 60%),
    radial-gradient(700px 520px at 105% 100%,rgba(163,230,53,.12),transparent 60%),
    linear-gradient(160deg,#2a62a8 0%,#1f4f8f 55%,#1a4580 100%) fixed!important;
  color:var(--vf-text)!important;
}
/* A glowing leaf line along the lower edge, as in the mockup. Decorative only. */
html[data-presentation-mode="dark"] body:has(> .sidebar)::after{
  content:"";position:fixed;inset:auto 0 0 0;height:220px;pointer-events:none;z-index:0;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23a3e635' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23a3e635' stop-opacity='.9'/%3E%3Cstop offset='.7' stop-color='%2322c55e' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%2322d3ee' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 190 C 300 120, 560 210, 860 150 S 1340 80, 1600 140' fill='none' stroke='url(%23g)' stroke-width='2.2'/%3E%3Cpath d='M0 205 C 320 150, 600 220, 900 175 S 1360 120, 1600 170' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.6'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
html[data-presentation-mode="dark"] body:has(> .sidebar) main{position:relative;z-index:1}

/* ---------- Sidebar: glass navy with a glowing active item ---------- */
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell){
  background:linear-gradient(180deg,rgba(42,90,148,.94) 0%,rgba(34,76,130,.96) 100%)!important;
  border-left:1px solid var(--night-edge)!important;box-shadow:-12px 0 40px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(14px);
}
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .brand{background:transparent!important;border-bottom:1px solid rgba(125,196,255,.12)!important}
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .erp-nav-link,
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .erp-nav-title{color:#dbe7f7!important;border-radius:12px!important}
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .erp-nav-link:hover,
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .erp-nav-title:hover{background-color:rgba(59,140,255,.12)!important}
html[data-presentation-mode="dark"] body aside.sidebar:not(#vf-shell) .erp-nav-link.active{
  background:linear-gradient(90deg,#1f63d6 0%,#3b8cff 100%)!important;box-shadow:var(--night-glow-blue)!important;color:#fff!important}

/* ---------- Top bar ---------- */
html[data-presentation-mode="dark"] body:has(> .sidebar) main>header{
  background:rgba(38,82,138,.58)!important;border-bottom:1px solid var(--night-edge)!important;backdrop-filter:blur(14px) saturate(1.2)}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.finalerp-header-icon,main>header .profile,.epics-active-branch-control select){
  background:rgba(255,255,255,.05)!important;border-color:var(--night-edge)!important;color:var(--vf-ink)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .finalerp-header-icon:hover{background:rgba(59,140,255,.16)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .finalerp-king-launcher{background:rgba(251,191,36,.10)!important;border-color:rgba(251,191,36,.45)!important;color:#fde68a!important}

/* ---------- Glass surfaces ---------- */
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.workspace,.panel,.table-wrap,.card,.page-search-box,.operation-card,.dashboard-card,.module-card,.report-card,.my-work-card,.home-visual-card,.sales-cycle-card,.tabs,.statement-kpis article){
  background:var(--night-glass)!important;border:1px solid var(--night-edge)!important;box-shadow:var(--vf-shadow)!important;
  backdrop-filter:blur(14px) saturate(1.15);color:var(--vf-text)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.operation-card,.module-card,.report-card,.dashboard-card):hover{
  border-color:rgba(125,196,255,.42)!important;box-shadow:0 0 0 1px rgba(125,196,255,.22),0 22px 48px rgba(0,0,0,.45)!important}
/* Department cards: screen chips of a linked card, and the section headings between card groups. */
html[data-presentation-mode="dark"] body:has(> .sidebar) .operation-card-chips{border-top-color:var(--night-edge)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .operation-card-chips a{background:rgba(125,196,255,.08)!important;border-color:rgba(125,196,255,.30)!important;color:#9fd0ff!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .operation-card-chips a:hover{background:rgba(125,196,255,.18)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main .operations-section{color:var(--vf-muted)!important}
/* Customer service flags on website orders. */
html[data-presentation-mode="dark"] body:has(> .sidebar) .cs-flag{background:rgba(125,196,255,.14)!important;color:#9fd0ff!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .cs-flag--warn{background:rgba(245,184,74,.16)!important;color:#f5c46b!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .cs-flag--danger{background:rgba(247,139,139,.16)!important;color:#f7a3a3!important}
/* Older page stylesheets hard-code navy headings; in the dark they must be light. */
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(h1,h2,h3,h4,strong,legend,caption){color:var(--vf-ink)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(.eyebrow,.form-hint,.hint,.muted,small){color:var(--vf-muted)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(p,li,dd,dt,label,span:not(.vf-status)){color:inherit}

/* Hero strips glow blue-to-teal, like the mockup banner. */
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.inventory-hero,section.hero,.reports-hero,.food-safety-hero,.cycle-hero,.quality-hero,.postal-hero,.stock-entry-hero,.warehouse-detail-hero,.year-end-hero){
  background:radial-gradient(600px 200px at 85% 0%,rgba(255,176,72,.22),transparent 70%),linear-gradient(120deg,#0b2a5c 0%,#0b3b6b 55%,#0d5560 100%)!important;
  border:1px solid var(--night-edge)!important;box-shadow:var(--vf-shadow)!important}

/* KPI tiles take the mockup's four tints: gold, green, blue, teal. */
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.metrics,.statement-kpis,.kpi-grid,.kpis,.hero-stats)>:is(article,div,section,a):nth-child(4n+1){background:linear-gradient(135deg,rgba(234,179,8,.26),rgba(48,98,158,.62) 70%)!important;border-color:rgba(250,204,21,.38)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.metrics,.statement-kpis,.kpi-grid,.kpis,.hero-stats)>:is(article,div,section,a):nth-child(4n+2){background:linear-gradient(135deg,rgba(16,185,129,.26),rgba(48,98,158,.62) 70%)!important;border-color:rgba(52,211,153,.38)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.metrics,.statement-kpis,.kpi-grid,.kpis,.hero-stats)>:is(article,div,section,a):nth-child(4n+3){background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(48,98,158,.62) 70%)!important;border-color:rgba(96,165,250,.42)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(.metrics,.statement-kpis,.kpi-grid,.kpis,.hero-stats)>:is(article,div,section,a):nth-child(4n+4){background:linear-gradient(135deg,rgba(20,184,166,.26),rgba(48,98,158,.62) 70%)!important;border-color:rgba(45,212,191,.38)!important}

/* ---------- Controls ---------- */
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea),
html[data-presentation-mode="dark"] dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background-color:rgba(34,74,126,.62)!important;color:var(--vf-ink)!important;border-color:var(--vf-line-strong)!important}
html[data-presentation-mode="dark"] :is(input,textarea)::placeholder{color:#6f87a6!important}
html[data-presentation-mode="dark"] select option{background:#123d73;color:#e8f0fb}
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(input,select,textarea):focus{border-color:#22d3ee!important;box-shadow:0 0 0 3px rgba(34,211,238,.22)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(input,select,textarea):disabled{background-color:rgba(255,255,255,.03)!important;color:var(--vf-muted)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(main,dialog) :is(button.primary,.btn-primary,a.primary){
  background:var(--night-cta)!important;color:#04261b!important;font-weight:800!important;box-shadow:0 10px 26px rgba(16,196,124,.30)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(main,dialog) :is(button.primary,.btn-primary,a.primary):hover{filter:brightness(1.08)}
html[data-presentation-mode="dark"] body:has(> .sidebar) :is(main,dialog) :is(button.secondary,.btn-secondary,a.secondary){
  background:rgba(255,255,255,.05)!important;border-color:var(--vf-line-strong)!important;color:var(--vf-ink)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .tabs .tab{color:var(--vf-muted)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) .tabs .tab.active{background:rgba(59,140,255,.18)!important;color:#bcd8ff!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main a:not(.primary):not(.secondary):not(.operation-card):not(.module-card){color:#7fb6ff}

/* ---------- Tables ---------- */
/* Older shared sheets paint tables and form blocks white; in the dark they sit on the glass instead. */
html[data-presentation-mode="dark"] body:has(> .sidebar) main table{background:transparent!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main :is(fieldset,details,.erp-form,.filters,.toolbar,.form-grid,.summary,.summary-card,.info-box,.empty-state,.stat-card,.kpi-card,.metric-card){
  background:rgba(255,255,255,.035)!important;border-color:var(--night-edge)!important;color:var(--vf-text)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main thead th{background:rgba(255,255,255,.04)!important;color:#9fb6d3!important;border-bottom-color:var(--night-edge)!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main tbody td{border-bottom-color:rgba(125,196,255,.08)!important;color:var(--vf-text)!important;background:transparent!important}
html[data-presentation-mode="dark"] body:has(> .sidebar) main tbody tr:hover td{background:rgba(59,140,255,.08)!important}
/* Owner review 31 Oct 2026: tables.css paints the hovered row #e8f6f9; under the see-through cells it turned the row white and hid its text. */
html[data-presentation-mode="dark"] body:has(> .sidebar) main tbody tr:hover{background:transparent!important}
html[data-presentation-mode="dark"] .vf-status--muted{background:rgba(255,255,255,.07);color:var(--vf-muted)}

/* ---------- Dialogs, menus, messages, scrollbars ---------- */
html[data-presentation-mode="dark"] dialog{background:var(--night-glass-strong)!important;color:var(--vf-text)!important;border:1px solid var(--night-edge)!important;box-shadow:0 30px 80px rgba(0,0,0,.6)!important}
html[data-presentation-mode="dark"] dialog::backdrop{background:rgba(2,8,18,.62);backdrop-filter:blur(3px)}
html[data-presentation-mode="dark"] :is(.success,.status.success){color:#6ee7b7}
html[data-presentation-mode="dark"] :is(.error,.status.error){color:#fca5a5}
html[data-presentation-mode="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-presentation-mode="dark"] ::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
html[data-presentation-mode="dark"] ::-webkit-scrollbar-thumb{background:rgba(125,196,255,.25);border-radius:8px}

/* ---------- Theme toggle in the top bar (both modes) ---------- */
.finalerp-theme-toggle .night-icon-sun{display:none}
html[data-presentation-mode="dark"] .finalerp-theme-toggle .night-icon-sun{display:block}
html[data-presentation-mode="dark"] .finalerp-theme-toggle .night-icon-moon{display:none}

/* ======================================================================
   Login: the brand screen in both modes (owner, 26 Oct; redesigned 31 Oct 2026 from the owner's reference).
   The factory at sunset fills the screen, the logo stands on the corner, one glass card holds the form,
   and a green light runs along the floor. Everything here is scoped to body.login-page.
   ====================================================================== */
body.login-page{
  --login-glass:linear-gradient(165deg,rgba(18,58,112,.62),rgba(9,33,72,.70));
  --login-edge:rgba(186,230,253,.30);
  --login-text:#f2f7ff;--login-soft:#c3d5ee;
  --login-leaf:#22c55e;--login-lime:#c5f04a;
  min-height:100vh;margin:0;color:var(--login-text)!important;overflow-x:hidden;
  background:
    radial-gradient(1100px 620px at 82% 18%,rgba(255,170,70,.42),transparent 62%),
    radial-gradient(900px 700px at 50% 55%,rgba(6,24,58,.55),transparent 70%),
    linear-gradient(90deg,rgba(6,22,52,.62) 0%,rgba(6,22,52,.18) 40%,transparent 60%),
    linear-gradient(180deg,rgba(8,30,70,.35) 0%,rgba(8,30,70,.12) 38%,rgba(5,22,52,.72) 100%),
    url("../images/login-epics-dusk.jpg") center/cover no-repeat fixed,#0c2a5c!important;
}
body.login-page main.login-shell{position:relative;z-index:2;display:grid!important;place-items:center!important;min-height:calc(100vh - 44px);padding:48px 16px!important;grid-template-columns:1fr!important;background:transparent!important}

/* The logo on the corner, with the company name under it; above the card on smaller screens. */
body.login-page .login-brand{position:fixed!important;top:34px;right:48px;left:auto;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;background:none!important;box-shadow:none!important;border:0!important;z-index:3}
body.login-page .login-brand-body{display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:0!important;background:none!important}
body.login-page .login-brand-logo{background:none!important;box-shadow:none!important;padding:0!important;border:0!important;width:auto!important;height:auto!important}
body.login-page .login-brand-logo img{width:190px!important;height:auto!important;filter:drop-shadow(0 10px 28px rgba(0,0,0,.5))}
body.login-page .login-brand-company{margin:0!important;color:var(--login-lime)!important;font:800 15px/1.4 "Segoe UI",Tahoma,Arial,sans-serif!important;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* The glass card. */
body.login-page .login-card{
  width:min(480px,100%)!important;gap:20px!important;padding:44px 42px 30px!important;border-radius:28px!important;
  background:var(--login-glass)!important;border:1px solid var(--login-edge)!important;
  box-shadow:0 34px 90px rgba(2,10,30,.55),inset 0 1px 0 rgba(255,255,255,.18)!important;
  backdrop-filter:blur(22px) saturate(1.35)!important;-webkit-backdrop-filter:blur(22px) saturate(1.35)!important;color:var(--login-text)!important;
  animation:login-card-in .7s cubic-bezier(.2,.7,.2,1) both}
body.login-page .login-card-head{justify-content:center!important;text-align:center;margin-bottom:6px}
body.login-page .login-card-logo{display:none!important}
body.login-page h1#loginTitle{color:#fff!important;font-size:38px!important;line-height:1.3!important;font-weight:800!important;text-wrap:balance;text-shadow:0 3px 20px rgba(0,0,0,.4)}
body.login-page .login-tagline{margin:10px 0 0;color:var(--login-soft);font:600 13px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.5em;text-transform:uppercase}

/* Fields: the placeholder names the field; the label stays for screen readers. */
body.login-page .login-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.login-page #loginForm{gap:18px!important}
body.login-page .login-input{min-height:60px;background:rgba(10,36,78,.48)!important;border:1px solid rgba(186,230,253,.34)!important;border-radius:14px!important}
body.login-page .login-input:focus-within{border-color:var(--login-lime)!important;box-shadow:0 0 0 4px rgba(197,240,74,.18)!important}
body.login-page .login-input > svg{width:22px!important;height:22px!important;margin-inline:18px 6px!important;stroke:#e3eeff!important}
body.login-page .login-reveal svg{stroke:#e3eeff!important}
body.login-page .login-reveal:hover{background:rgba(255,255,255,.08)!important}
body.login-page .login-reveal[aria-pressed="true"] svg{stroke:var(--login-lime)!important}
body.login-page #loginForm .login-input input{height:58px!important;background:transparent!important;color:#fff!important;font-size:17px!important}
body.login-page .login-input input::placeholder{color:#b4c7e2!important}
body.login-page :is(.login-remember,.login-windows-hint,.login-audit,.login-hint){color:var(--login-soft)!important}
body.login-page .login-remember input{accent-color:var(--login-leaf)!important}
body.login-page .login-link{color:#7dd3fc!important}
body.login-page .login-hint{background:rgba(255,255,255,.08)!important}
body.login-page .login-caps{background:rgba(255,182,72,.18)!important;color:#ffe2b0!important}
body.login-page .login-status.error{background:rgba(220,38,38,.22)!important;color:#ffd6d6!important}
body.login-page .login-status.success{background:rgba(34,197,94,.2)!important;color:#d6ffe4!important}
body.login-page .login-status.pending{color:var(--login-soft)!important}

/* The one call to action: the leaf green of the logo, with an arrow pointing the way in. */
body.login-page .login-submit{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px!important;margin-top:4px;
  background:linear-gradient(90deg,#10c47c 0%,#5fd35b 55%,var(--login-lime) 100%)!important;color:#05301e!important;
  font-size:19px!important;font-weight:800!important;border-radius:14px!important;box-shadow:0 14px 34px rgba(16,196,124,.38)!important;transition:filter .15s,transform .15s}
body.login-page .login-submit::after{content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
body.login-page .login-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
body.login-page .login-submit:disabled{filter:saturate(.6);cursor:progress;transform:none}
body.login-page .login-submit:focus-visible,body.login-page .login-link:focus-visible,body.login-page .login-reveal:focus-visible,body.login-page .login-windows-button:focus-visible{outline:3px solid var(--login-lime)!important;outline-offset:3px}
body.login-page .login-windows-button{background:rgba(255,255,255,.08)!important;border:1px solid var(--login-edge)!important;color:#fff!important}
body.login-page .login-divider{color:var(--login-soft)!important}
body.login-page .login-divider::before,body.login-page .login-divider::after{background:rgba(186,230,253,.25)!important}
body.login-page .login-audit{text-align:center;font-size:12px!important;opacity:.85}

/* The green light along the floor, as in the reference: drawn, not photographed, and still for reduced motion. */
body.login-page .login-aurora{position:fixed;inset:auto 0 0 0;height:42vh;z-index:1;pointer-events:none}
body.login-page .login-aurora svg{width:100%;height:100%;overflow:visible}
body.login-page .login-aurora path{fill:none;stroke-linecap:round}
body.login-page .login-aurora-wide{stroke:rgba(110,231,120,.55);stroke-width:7;filter:drop-shadow(0 0 14px rgba(132,204,22,.9)) drop-shadow(0 0 40px rgba(34,197,94,.6))}
body.login-page .login-aurora-thin{stroke:rgba(253,224,71,.75);stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(250,204,21,.9))}
body.login-page .login-aurora-wide,body.login-page .login-aurora-thin{stroke-dasharray:1900;stroke-dashoffset:1900;animation:login-light 2.4s .3s cubic-bezier(.3,.6,.2,1) forwards}
body.login-page .login-footer{position:relative;z-index:2;height:44px;border:0!important;color:rgba(220,232,248,.78)!important;background:transparent!important;text-align:center}

@keyframes login-card-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes login-light{to{stroke-dashoffset:0}}

/* Below laptop width the logo sits above the card instead of on the corner, so it never overlaps the form. */
@media (max-width:1180px){
  body.login-page main.login-shell{align-content:center;gap:20px;padding-top:28px!important}
  body.login-page .login-brand{position:static!important;order:-1;justify-self:center}
  body.login-page .login-brand-logo img{width:130px!important}
}
@media (max-width:560px){
  body.login-page .login-card{padding:30px 20px 22px!important;border-radius:22px!important}
  body.login-page h1#loginTitle{font-size:27px!important}
  body.login-page .login-tagline{letter-spacing:.32em;font-size:11px}
  body.login-page .login-brand-logo img{width:104px!important}
  body.login-page{background-attachment:scroll!important}
}
@media (prefers-reduced-motion:reduce){
  body.login-page .login-card{animation:none}
  body.login-page .login-aurora-wide,body.login-page .login-aurora-thin{animation:none;stroke-dashoffset:0}
}

/* ---------- Home board: the board styles itself from the app tokens; here they point at the night surfaces ---------- */
html[data-presentation-mode="dark"] .home-board{
  --glass-bg-strong:var(--night-glass);--glass-border:var(--night-edge);--glass-shadow:var(--vf-shadow);
  --text-primary:var(--vf-ink);--text-secondary:var(--vf-muted);
  --valfood-blue:var(--vf-primary);--valfood-green:var(--vf-success);--amber:var(--vf-warning);--red:var(--vf-danger);
}
html[data-presentation-mode="dark"] .home-board .board-level--watch{color:var(--vf-warning)}
/* Each indicator card glows in its own colour, as in the owner's reference: gold sales, green stock, blue production, teal orders. */
html[data-presentation-mode="dark"] .home-board .board-kpi{border-color:color-mix(in srgb,var(--tone) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tone) 30%,transparent),0 14px 34px color-mix(in srgb,var(--tone) 28%,transparent)}
html[data-presentation-mode="dark"] .home-board .board-kpi--sales{--tone:#fbbf24}
html[data-presentation-mode="dark"] .home-board .board-kpi--orders{--tone:#2dd4bf}

/* ---------- Home: sales flow, channel bars and the general manager's approvals (review 28 Oct 2026) ----------
   These boxes paint light gradients, which the night safety net does not read, so their text went pale on white. */
html[data-presentation-mode="dark"] .sales-funnel div,html[data-presentation-mode="dark"] .channel-bars>div{background:var(--vf-surface-2)!important;border-color:var(--vf-line)!important}
html[data-presentation-mode="dark"] .sales-funnel span,html[data-presentation-mode="dark"] .sales-funnel small,html[data-presentation-mode="dark"] .channel-bars span{color:var(--vf-muted)!important}
html[data-presentation-mode="dark"] .sales-funnel b,html[data-presentation-mode="dark"] .channel-bars b{color:var(--vf-ink)!important}
html[data-presentation-mode="dark"] .sales-funnel i,html[data-presentation-mode="dark"] .channel-bars i{background:rgba(255,255,255,.10)!important}
html[data-presentation-mode="dark"] .gm-approval-alert{background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.45)!important;color:#fde68a!important}
html[data-presentation-mode="dark"] .gm-approval-alert strong{color:var(--vf-ink)!important}
html[data-presentation-mode="dark"] .gm-approval-alert small{color:#f5d38a!important}
html[data-presentation-mode="dark"] .gm-approval-alert>b{color:var(--vf-warning)!important}