/* ==================================================================
   THEME: light / dark mode + the sign-in page
   Loaded after styles.css on every page. Light mode is exactly the
   existing design; everything under html[data-theme="dark"] only
   recolours it. Printed documents (DC, PO, GRN, stickers, IR) are
   not touched, so they always print on white.
   ================================================================== */

/* ---------- the sun / moon button (in the header) ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--gold);cursor:pointer;
  transition:background .15s, transform .2s, color .15s;flex:0 0 auto;padding:0;}
.theme-toggle:hover{background:rgba(255,255,255,.18);color:#fff;transform:rotate(-18deg);}
.theme-toggle:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;}
.theme-toggle-float{position:absolute;right:28px;top:50%;transform:translateY(-50%);}
.theme-toggle-float:hover{transform:translateY(-50%) rotate(-18deg);}

/* ==================================================================
   DARK MODE
   ================================================================== */
html[data-theme="dark"]{
  --cream-100:#16233A; --cream-200:#0E1828; --cream-300:#24354F;
  --teal:#22C55E;   --teal-dark:#4ADE80; --teal-bg:rgba(34,197,94,.14);
  --purple:#8DB4E8; --purple-bg:rgba(141,180,232,.14);
  --coral:#F87171;  --coral-bg:rgba(248,113,113,.14);
  --amber:#FBBF24;  --amber-bg:rgba(251,191,36,.13);
  --navy:#A9C6EC;   --navy-bg:rgba(169,198,236,.12);
  --pink:#F2B84B;   --pink-bg:rgba(242,184,75,.14);
  --navy-600:#A9C6EC;
  --ink:#E6EDF6; --sub:#93A4BB; --line:#24354F; --bg:#0A1322; --card:#111D30;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink);}
html[data-theme="dark"] header.page-header{background:#0D1B30;}
html[data-theme="dark"] nav.tabs{background:#0D1B30;box-shadow:0 6px 18px rgba(0,0,0,.35);}
html[data-theme="dark"] .site-footer{background:#070F1C;}
html[data-theme="dark"] .card{border-color:var(--line);}
html[data-theme="dark"] label,
html[data-theme="dark"] th,
html[data-theme="dark"] .stat .l{color:var(--sub);}

/* form fields */
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=tel], html[data-theme="dark"] input:not([type]), html[data-theme="dark"] select, html[data-theme="dark"] textarea{
  background:#0E1A2C;border-color:#2A3E5C;color:var(--ink);}
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus{background:#0E1A2C;}
html[data-theme="dark"] input[readonly]{background:#16233A !important;color:var(--sub);}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#8FA8CC;}
html[data-theme="dark"] select option{background:#0E1A2C;color:var(--ink);}
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit,
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit-text,
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit-day-field,
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit-month-field,
html[data-theme="dark"] input[type=date]::-webkit-datetime-edit-year-field{color:var(--ink);}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.8);}
html[data-theme="dark"] .mac-boxes input{background:#0E1A2C;}

/* buttons */
html[data-theme="dark"] .btn-ghost{background:#16233A;border-color:#2F4566;color:var(--ink);}
html[data-theme="dark"] .btn-ghost:hover{background:#1C2C47;}
html[data-theme="dark"] .btn-navy{background:linear-gradient(135deg,#2A5A94,#1B3F6B);}
html[data-theme="dark"] .btn-purple{background:linear-gradient(135deg,#10A9D6,#2A5A94);}
html[data-theme="dark"] .btn:hover{box-shadow:0 6px 16px rgba(0,0,0,.4);}

/* tables, badges, rows */
html[data-theme="dark"] th{background:rgba(16,169,214,.10);border-bottom-color:rgba(16,169,214,.25);}
html[data-theme="dark"] td{border-bottom-color:#1E2E46;}
html[data-theme="dark"] tbody tr:hover td{background:rgba(16,169,214,.08);}
html[data-theme="dark"] .b-teal{color:#4ADE80;} html[data-theme="dark"] .b-purple{color:#8DB4E8;}
html[data-theme="dark"] .b-coral{color:#F87171;} html[data-theme="dark"] .b-amber{color:#FBBF24;}
html[data-theme="dark"] .b-navy{color:#A9C6EC;} html[data-theme="dark"] .b-pink{color:#F2B84B;}
html[data-theme="dark"] .queue-item, html[data-theme="dark"] .toggle-group,
html[data-theme="dark"] .loc-pick{background:#16233A;border-color:#24354F;color:#E6EDF6;--ink:#E6EDF6;--sub:#8FA8CC;}
html[data-theme="dark"] .toggle-group button.active{background:#0E1A2C;}
html[data-theme="dark"] .toggle-group button{color:#8FA8CC;}
html[data-theme="dark"] .toggle-group button.active{color:#E6EDF6;}
html[data-theme="dark"] .device-panel, html[data-theme="dark"] .req-item-row{background:rgba(16,169,214,.05);border-color:rgba(16,169,214,.2);}

/* dashboard tiles and home */
html[data-theme="dark"] .stat{
  background:linear-gradient(160deg,#13213A 0%,#111D30 100%);border-color:#24354F;
  color:#E6EDF6; --ink:#E6EDF6; --sub:#B7CCE8;
}
html[data-theme="dark"] .stat .n{color:#E6EDF6;}
html[data-theme="dark"] .stat .l, html[data-theme="dark"] .stat .l + .l{color:#B7CCE8;}
html[data-theme="dark"] .stat.click.active{background:linear-gradient(160deg,#15304A 0%,#122A42 100%);}
html[data-theme="dark"] .stat.click:hover{box-shadow:0 14px 34px rgba(0,0,0,.45);}
html[data-theme="dark"] .dash-greet-sub, html[data-theme="dark"] .dash-greet-name{color:#C9DAF0;}
html[data-theme="dark"] .dash-greet-activity{color:rgba(255,255,255,.78);}
html[data-theme="dark"] .icon-stat-n{color:#E6EDF6;}
html[data-theme="dark"] .icon-stat-l{color:#B7CCE8;}
html[data-theme="dark"] .icon-stat-sub{color:#93A4BB;}

/* Devices in Stock / Devices on Field tiles keep their light card background
   even in dark mode (higher-specificity rule in styles.css), so their text
   must stay dark here, not inherit the light text above. */
html[data-theme="dark"] .stat.big-detail-box{color:#0B2342; --ink:#0B2342; --sub:#0B2342;}
html[data-theme="dark"] .stat.big-detail-box .l,
html[data-theme="dark"] .stat.big-detail-box .n{color:#0B2342;}
html[data-theme="dark"] .qa-btn:hover, html[data-theme="dark"] .home-dash .qa-btn:hover{background:#16233A;}
html[data-theme="dark"] .kv-grid > div{background:rgba(16,169,214,.07);}

/* modals, notes, misc */
html[data-theme="dark"] .modal{background:#111D30;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.6);}
html[data-theme="dark"] .modal-overlay{background:rgba(3,8,16,.72);}
html[data-theme="dark"] .login-hint{color:var(--ink);}
html[data-theme="dark"] a{color:#5CC8EE;}
html[data-theme="dark"] nav.tabs a{color:rgba(255,255,255,.72);}
html[data-theme="dark"] nav.tabs a.active{color:#fff;}
html[data-theme="dark"] *{scrollbar-color:rgba(16,169,214,.45) #0A1322;}

/* map page (Leaflet): darker tiles, dark popups */
html[data-theme="dark"] .leaflet-tile-pane{filter:brightness(.72) invert(1) contrast(.9) hue-rotate(200deg) saturate(.35) brightness(.95);}
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip{background:#111D30;color:var(--ink);}
html[data-theme="dark"] .leaflet-container{background:#0A1322;}
html[data-theme="dark"] .leaflet-bar a{background:#16233A;color:var(--ink);border-color:#24354F;}
html[data-theme="dark"] .leaflet-control-attribution{background:rgba(17,29,48,.85) !important;color:var(--sub);}

/* ==================================================================
   SIGN-IN PAGE
   ================================================================== */
body.login-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.login-shell{flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:0;}

/* left: brand panel */
.login-brand{position:relative;overflow:hidden;color:#fff;padding:56px 56px 40px;display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(520px 360px at 85% 8%, rgba(16,169,214,.38), transparent 65%),
    radial-gradient(460px 340px at 8% 100%, rgba(242,184,75,.22), transparent 65%),
    linear-gradient(150deg,#0B2342 0%,#0E2B50 55%,#12345A 100%);}
.login-brand::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);}
.login-brand::after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(16,169,214,.25);box-shadow:0 0 0 60px rgba(16,169,214,.04), 0 0 0 120px rgba(16,169,214,.03);pointer-events:none;}
.login-brand > *{position:relative;z-index:1;}
.lb-top{display:flex;align-items:center;gap:14px;}
.lb-top img{height:54px;width:auto;filter:drop-shadow(0 0 14px rgba(242,184,75,.5));}
.lb-company{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;}
.lb-company b{display:block;color:#fff;font-size:15px;letter-spacing:.06em;margin-top:2px;}
.lb-mid{margin:44px 0 30px;}
.lb-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-bright);background:rgba(16,169,214,.12);border:1px solid rgba(16,169,214,.35);padding:6px 12px;border-radius:30px;}
.lb-kicker i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22);display:inline-block;}
.lb-title{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:18px 0 12px;max-width:560px;}
.lb-title span{background:linear-gradient(90deg,#10A9D6,#7FDBF5 45%,#F2B84B);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lb-sub{font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:500px;margin:0;}

/* lifecycle steps */
.lb-flow{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:30px 0 0;}
.lb-step{display:flex;flex-direction:column;align-items:center;gap:7px;width:84px;text-align:center;}
.lb-step .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#7FDBF5;backdrop-filter:blur(4px);}
.lb-step:nth-child(9) .ic{color:#F2B84B;border-color:rgba(242,184,75,.45);background:rgba(242,184,75,.12);}
.lb-step span{font-size:11px;font-weight:700;color:rgba(255,255,255,.78);letter-spacing:.03em;}
.lb-line{flex:1 1 14px;min-width:12px;max-width:38px;height:2px;margin-bottom:22px;
  background:repeating-linear-gradient(90deg, rgba(127,219,245,.7) 0 5px, transparent 5px 9px);}

.lb-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px;}
.lb-feat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px 14px;}
.lb-feat b{display:block;font-size:13px;color:#fff;margin-bottom:3px;}
.lb-feat span{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.4;}

/* right: the form */
.login-side{max-width:none;margin:0;width:100%;position:relative;display:flex;align-items:center;justify-content:center;padding:48px 28px;
  background:radial-gradient(600px 400px at 100% 0%, rgba(16,169,214,.08), transparent 60%), var(--bg);}
.login-theme-spot{position:absolute;top:20px;right:22px;}
.login-theme-spot .theme-toggle{color:var(--navy);border-color:var(--line);background:var(--card);box-shadow:var(--shadow-sm);}
.login-theme-spot .theme-toggle:hover{color:var(--accent-bright);background:var(--card);}
html[data-theme="dark"] .login-theme-spot .theme-toggle{color:var(--gold);}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 32px 28px;
  box-shadow:0 1px 2px rgba(11,35,66,.05), 0 24px 60px rgba(11,35,66,.12);position:relative;}
html[data-theme="dark"] .login-card{box-shadow:0 24px 60px rgba(0,0,0,.5);}
.login-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#10A9D6,#F2B84B);}
.lc-logo{display:none;height:48px;margin:0 auto 10px;}
.lc-hello{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);}
.login-card h1{font-size:25px;letter-spacing:-.02em;margin:6px 0 4px;color:var(--ink);}
.lc-sub{margin:0 0 24px;color:var(--sub);font-size:13.5px;}
.lc-field{position:relative;margin-bottom:14px;}
.lc-field label{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--sub);text-align:left;}
.lc-field .lc-ic{position:absolute;left:12px;bottom:12px;color:var(--sub);pointer-events:none;display:flex;}
.login-card .lc-field input{padding:12px 12px 12px 40px;font-size:14px;border-radius:11px;height:44px;}
.login-card .lc-field input#loginPass{padding-right:44px;}
.lc-eye{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border:none;background:transparent;color:var(--sub);cursor:pointer;
  border-radius:8px;display:flex;align-items:center;justify-content:center;}
.lc-eye:hover{color:var(--accent-bright);background:rgba(16,169,214,.08);}
.lc-btn{width:100%;height:46px;margin-top:8px;border:none;border-radius:12px;cursor:pointer;color:#fff;font-size:14.5px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(135deg,#10A9D6 0%,#0B7FB8 100%);box-shadow:0 10px 24px rgba(16,169,214,.32);
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s, box-shadow .15s, filter .15s;}
.lc-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(16,169,214,.42);filter:brightness(1.05);}
.lc-btn:active{transform:translateY(0);}
.lc-btn svg{transition:transform .15s;} .lc-btn:hover svg{transform:translateX(3px);}
#loginMsg{min-height:18px;margin-top:10px;font-size:12.5px;color:var(--coral);text-align:center;}
#loginMsg:not(:empty){background:var(--coral-bg);border-radius:9px;padding:8px 10px;}
.lc-foot{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--sub);}
.lc-foot svg{color:#16A34A;flex:0 0 auto;}
.lc-help{margin-top:10px;text-align:center;font-size:11.5px;color:var(--sub);}

@media (max-width:980px){
  .login-shell{grid-template-columns:1fr;}
  .login-brand{display:none;}
  .lc-logo{display:block;}
  .login-card{text-align:center;}
}
@media (max-width:1180px) and (min-width:981px){
  .lb-title{font-size:32px;} .lb-feats{grid-template-columns:1fr 1fr;} .lb-feat:nth-child(3){display:none;}
}

/* ---------- sign-in: the live network behind the brand panel ---------- */
.login-brand > .lb-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.login-brand::after{display:none;}
.lb-net .net-links path{stroke:rgba(127,219,245,.18);stroke-width:1.2;fill:none;}
.lb-net .net-flow path{stroke:url(#linkGrad);stroke-width:1.6;fill:none;stroke-dasharray:6 14;animation:netFlow 2.4s linear infinite;}
.lb-net .net-packets circle{fill:#7FDBF5;filter:drop-shadow(0 0 4px rgba(127,219,245,.9));}
.lb-net .net-packets circle.pk-gold{fill:#F2B84B;filter:drop-shadow(0 0 4px rgba(242,184,75,.9));}
.lb-net .nd .c{fill:#0E2B50;stroke:#7FDBF5;stroke-width:1.6;}
.lb-net .nd-r .dot{fill:#7FDBF5;}
.lb-net .nd-s .ln{stroke:#7FDBF5;stroke-width:1.4;}
.lb-net .nd-a .c{fill:rgba(242,184,75,.18);stroke:#F2B84B;animation:atmBlink 3s ease-in-out infinite;}
.lb-net .hub-core{fill:#10A9D6;stroke:#BFEFFF;stroke-width:2;}
.lb-net .hub-ic{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lb-net .ring{fill:none;stroke:#7FDBF5;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:hubPulse 3.6s ease-out infinite;}
.lb-net .ring.r2{animation-delay:1.2s;} .lb-net .ring.r3{animation-delay:2.4s;}
@keyframes netFlow{to{stroke-dashoffset:-40;}}
@keyframes hubPulse{0%{transform:scale(.6);opacity:.75;}100%{transform:scale(3.6);opacity:0;}}
@keyframes atmBlink{0%,100%{opacity:1;}50%{opacity:.45;}}
/* keep the text readable over the network */
.login-brand .lb-sub, .login-brand .lb-company{text-shadow:0 2px 14px rgba(11,35,66,.9);}
.lb-title{text-shadow:0 2px 18px rgba(11,35,66,.7);} .lb-title span{text-shadow:none;}
.login-brand::before{opacity:.25;}
.lb-shade{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(11,35,66,.82) 0%, rgba(11,35,66,.55) 42%, rgba(11,35,66,0) 72%);}
.lb-step .ic{background:rgba(11,35,66,.6);}
.lb-feat{background:rgba(11,35,66,.55);backdrop-filter:blur(3px);}

/* right side: a faint node pattern */
.login-side::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle, rgba(16,169,214,.22) 1.4px, transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);}
.login-card{z-index:1;}
.login-theme-spot{z-index:2;}

@media (prefers-reduced-motion: reduce){
  .lb-net .net-flow path, .lb-net .ring, .lb-net .nd-a .c{animation:none;}
  .lb-net .net-packets{display:none;}
}

/* ==================================================================
   DARK MODE over the Oct 2026 design (styles.css "Cream boxes")
   The new design gives every box a light background and fixes the text
   inside it to dark navy (.card / .stat set their own --ink). In dark mode
   that made fields, buttons and rows dark with dark text. Here the boxes
   turn dark with light text; light mode is untouched. The two big Home
   boxes (Devices in Stock / on Field) stay light on purpose (see above).
   ================================================================== */
html[data-theme="dark"]{
  background-color:#000;
  background-image:url('../assets/background-dark.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
html[data-theme="dark"] body:not(.login-page){background:transparent;}

html[data-theme="dark"] .card, html[data-theme="dark"] .stat, html[data-theme="dark"] .modal,
html[data-theme="dark"] .decor-card, html[data-theme="dark"] .devices-detail-card, html[data-theme="dark"] .spectrum-card,
html[data-theme="dark"] .indent-reminder-card{
  background:linear-gradient(135deg,rgba(20,35,59,.96) 0%,rgba(16,28,47,.96) 100%);
  color:#E6EDF6; --ink:#E6EDF6; --sub:#9FB3CC;
  border-color:rgba(16,169,214,.28);
}
html[data-theme="dark"] .indent-reminder-card{background:linear-gradient(to top left,rgba(248,113,113,.16) 0%,rgba(16,28,47,.96) 55%);}
html[data-theme="dark"] .attn-card-coral{background:linear-gradient(180deg,#14233B 0%,rgba(248,113,113,.18) 100%);}
html[data-theme="dark"] .attn-card-navy{background:linear-gradient(180deg,#14233B 0%,rgba(141,180,232,.18) 100%);}
html[data-theme="dark"] .attn-card-amber{background:linear-gradient(180deg,#14233B 0%,rgba(251,191,36,.16) 100%);}
html[data-theme="dark"] .attn-card-green{background:linear-gradient(180deg,#14233B 0%,rgba(34,197,94,.16) 100%);}
html[data-theme="dark"] .stat.tone-ok{background:rgba(34,197,94,.16);}
html[data-theme="dark"] .stat.tone-alert{background:rgba(248,113,113,.16);}
html[data-theme="dark"] .stat.click.active{background:linear-gradient(160deg,#15304A 0%,#122A42 100%);}

/* text that the new design fixed to navy */
html[data-theme="dark"] .card h2, html[data-theme="dark"] .card label, html[data-theme="dark"] .card label span,
html[data-theme="dark"] .card .hint, html[data-theme="dark"] .card .kv-grid, html[data-theme="dark"] .card .empty,
html[data-theme="dark"] .card td, html[data-theme="dark"] .modal h3,
html[data-theme="dark"] .stat .n, html[data-theme="dark"] .flow-title, html[data-theme="dark"] .flow-label{color:#E6EDF6;}
html[data-theme="dark"] .card th{color:#9FB3CC;background:rgba(16,169,214,.10);border-bottom-color:rgba(16,169,214,.25);}
html[data-theme="dark"] .card td{border-bottom-color:#1E2E46;}
html[data-theme="dark"] .card tbody tr:hover td{background:rgba(16,169,214,.08);}
html[data-theme="dark"] .stat .l, html[data-theme="dark"] .stat .l + .l{color:#B7CCE8;}
html[data-theme="dark"] .card a:not(.btn), html[data-theme="dark"] .card .link-btn{color:#5CC8EE;}

/* rows, panels and small boxes the new design made white */
html[data-theme="dark"] .queue-item, html[data-theme="dark"] .device-panel, html[data-theme="dark"] .req-item-row,
html[data-theme="dark"] .toggle-group, html[data-theme="dark"] .kv-grid > div, html[data-theme="dark"] .card .note,
html[data-theme="dark"] .loc-pick{background:#16233A;border-color:#24354F;color:#E6EDF6;}
html[data-theme="dark"] .current-box{background:var(--coral-bg);color:#E6EDF6;}
html[data-theme="dark"] .card .note{color:#FBBF24;}

/* fields and buttons inside the boxes */
html[data-theme="dark"] .card input, html[data-theme="dark"] .card select, html[data-theme="dark"] .card textarea,
html[data-theme="dark"] .modal input, html[data-theme="dark"] .modal select, html[data-theme="dark"] .modal textarea{color:#E6EDF6;}
html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .card .btn-ghost{background:#16233A;border-color:#2F4566;color:#E6EDF6;}

/* Home: bars and flow numbers on the dark boxes */
html[data-theme="dark"] .bar-label, html[data-theme="dark"] .bar-value{color:#E6EDF6;}
html[data-theme="dark"] .bar-track{background:rgba(255,255,255,.1);}
html[data-theme="dark"] .field-note{color:#9FB3CC;}
html[data-theme="dark"] .flow-wave{opacity:.35;}
/* ...except the two light boxes, which keep dark text */
html[data-theme="dark"] .stat.big-detail-box .bar-label, html[data-theme="dark"] .stat.big-detail-box .bar-value{color:#0B2342;}
html[data-theme="dark"] .stat.big-detail-box .bar-track{background:rgba(11,35,66,.08);}
html[data-theme="dark"] .stat.big-detail-box .field-note{color:#64748B;}
html[data-theme="dark"] .flow-arrow .flow-cap{color:#B7CCE8;}