/* The dark theme, and the switch that turns it on.

   dark.auto.css (made by scripts/make-dark-css.mjs) re-colours every light rule in panel.css and polish.css.
   This file is what that cannot know: the palette the rules read through variables, the page ground, the
   switch itself, the chart, and every spot where the generated colour needed a hand.

   The header, the Overview hero, toasts and the lock screens are dark in both themes and are not touched. */

/* ---------------------------------------------------------------- the switch (both themes) */
.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;flex:none;width:58px;height:30px;padding:0 8px;margin:0;
  border:1px solid rgba(255,255,255,.22);border-radius:99px;background:rgba(255,255,255,.07);color:var(--pd-c9d3ec,#c9d3ec);box-shadow:none;cursor:pointer;
  transition:background .25s,border-color .25s}
.top .theme-switch{min-height:30px;padding:0 8px;border-radius:99px;font-size:0}
.theme-switch:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
.theme-switch svg{position:relative;z-index:1;flex:none;transition:color .25s,opacity .25s}
.theme-switch .ts-sun{color:var(--pd-1a1f36,#1a1f36)}
.theme-switch .ts-moon{color:var(--pd-aab6da,#aab6da)}
.theme-switch .ts-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.6);transition:transform .28s cubic-bezier(.2,.8,.2,1),background .25s}
.theme-switch[aria-checked="true"]{background:linear-gradient(135deg,rgba(var(--pdr-61-123-255,61,123,255),.55),rgba(var(--pdr-122-60-245,122,60,245),.55));border-color:rgba(var(--pdr-160-150-255,160,150,255),.6)}
.theme-switch[aria-checked="true"] .ts-knob{transform:translateX(28px);background:var(--pd-0d1226,#0d1226)}
.theme-switch[aria-checked="true"] .ts-sun{color:var(--pd-aab6da,#aab6da)}
.theme-switch[aria-checked="true"] .ts-moon{color:#fff}
.theme-switch:focus-visible{outline:2px solid var(--pd-9db6ff,#9db6ff);outline-offset:2px}

/* a short cross-fade when the switch is used */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .28s ease,border-color .28s ease,color .28s ease,fill .28s ease,box-shadow .28s ease !important}
@media (prefers-reduced-motion:reduce){html.theme-fade,html.theme-fade *{transition:none !important}.theme-switch .ts-knob{transition:none}}

/* ---------------------------------------------------------------- the palette */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:var(--pd-e8edf9,#e8edf9);--muted:var(--pd-8f9bb8,#8f9bb8);--line:var(--pd-232c42,#232c42);--bg:var(--pd-080c15,#080c15);--card:var(--pd-111827,#111827);
  --brand:var(--pd-84a2ff,#84a2ff);--brand-dark:var(--pd-a8bcff,#a8bcff);--brand-wash:rgba(var(--pdr-100-128-255,100,128,255),.15);
  --green:#3ed598;--green-wash:rgba(52,211,153,.14);
  --red:#ff8a80;--red-wash:rgba(255,107,95,.15);
  --amber:#f2b955;--amber-wash:rgba(242,185,85,.14);
  --blue-wash:rgba(var(--pdr-100-128-255,100,128,255),.17);
  --shadow:0 1px 2px rgba(0,0,0,.55),0 14px 30px -16px rgba(0,0,0,.8);
  --shadow-up:0 1px 2px rgba(0,0,0,.6),0 20px 38px -18px rgba(0,0,0,.9);
  --ring:0 0 0 4px rgba(var(--pdr-132-162-255,132,162,255),.28);
  --viz-sales:var(--pd-5b9bf0,#5b9bf0);--viz-kept:#34d3a0;--viz-muted:var(--pd-3a4560,#3a4560);
}
html[data-theme="dark"],html[data-theme="dark"] body{background-color:var(--bg);color:var(--ink)}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 360px at 8% -60px,rgba(var(--pdr-61-123-255,61,123,255),.16),transparent 70%),
    radial-gradient(760px 320px at 96% -70px,rgba(var(--pdr-122-60-245,122,60,245),.14),transparent 70%),
    var(--bg);
  background-repeat:no-repeat}
html[data-theme="dark"] ::selection{background:rgba(var(--pdr-120-150-255,120,150,255),.35)}
html[data-theme="dark"]{scrollbar-color:var(--pd-2c3650,#2c3650) transparent}

/* ---------------------------------------------------------------- surfaces the generator cannot reach */
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .drawer,html[data-theme="dark"] .fin-card,html[data-theme="dark"] .ord-card,
html[data-theme="dark"] .ov-tile,html[data-theme="dark"] .sup,html[data-theme="dark"] .tpl-grid .tpl,html[data-theme="dark"] .dz-card{background-color:var(--card)}
html[data-theme="dark"] .modal{background:var(--card);color:var(--ink);box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(var(--pdr-150-170-255,150,170,255),.16)}
html[data-theme="dark"] .modal-head{background:linear-gradient(180deg,var(--pd-151d30,#151d30),var(--card));border-bottom-color:var(--line)}
html[data-theme="dark"] .modal-foot{background:var(--pd-0e1524,#0e1524);border-top-color:var(--line)}
html[data-theme="dark"] .modal::backdrop{background:rgba(var(--pdr-2-4-12,2,4,12),.72)}
html[data-theme="dark"] .modal-x{color:var(--pd-8f9bb8,#8f9bb8)}
html[data-theme="dark"] .modal-x:hover:not(:disabled){background:var(--pd-1c2640,#1c2640);color:#fff}
html[data-theme="dark"] dialog.fin-dialog{background:var(--card);color:var(--ink);border:1px solid var(--line)}
html[data-theme="dark"] table.tbl tbody tr:hover td{background:var(--pd-152036,#152036)}
html[data-theme="dark"] .tbl th{color:var(--pd-8f9bb8,#8f9bb8)}
html[data-theme="dark"] .tbl td{border-bottom-color:var(--pd-1c2438,#1c2438)}
html[data-theme="dark"] .tbl th:hover{color:#fff}
html[data-theme="dark"] code{background:var(--pd-1a2338,#1a2338);color:var(--pd-c3cff0,#c3cff0)}
html[data-theme="dark"] a{color:var(--brand)}
html[data-theme="dark"] a[href]:hover{color:var(--brand-dark)}
html[data-theme="dark"] hr{border-top-color:var(--line)}

/* fields, buttons */
html[data-theme="dark"] button{background:var(--pd-161f33,#161f33);color:var(--ink);border-color:var(--pd-2a3550,#2a3550)}
html[data-theme="dark"] button:hover:not(:disabled){background:var(--pd-1c2842,#1c2842);border-color:var(--pd-3b4a6e,#3b4a6e)}
html[data-theme="dark"] button.primary{background:var(--grad);color:#fff;border-color:transparent}
html[data-theme="dark"] button.primary:hover:not(:disabled){background:var(--grad);border-color:transparent}
html[data-theme="dark"] button.danger{background:var(--pd-161f33,#161f33);color:var(--red);border-color:#5a2f34}
html[data-theme="dark"] button.danger:hover:not(:disabled){background:#2a1a22;border-color:#8a4148;color:#ffb0a8}
html[data-theme="dark"] button.ghost{background:transparent;color:var(--pd-b6c2e0,#b6c2e0);border-color:transparent}
html[data-theme="dark"] button.ghost:hover:not(:disabled){background:var(--pd-1a2238,#1a2238)}
html[data-theme="dark"] .top .lock-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--pd-0e1524,#0e1524);color:var(--ink);border-color:var(--pd-2a3550,#2a3550)}
html[data-theme="dark"] input:hover:not(:disabled):not(:focus),html[data-theme="dark"] select:hover:not(:disabled):not(:focus),html[data-theme="dark"] textarea:hover:not(:disabled):not(:focus){border-color:var(--pd-3b4a6e,#3b4a6e)}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{border-color:var(--pd-7f9dff,#7f9dff)}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--pd-5d6a8a,#5d6a8a)}
html[data-theme="dark"] input:disabled,html[data-theme="dark"] select:disabled,html[data-theme="dark"] textarea:disabled{background:var(--pd-0c1220,#0c1220);color:var(--pd-5d6a8a,#5d6a8a)}
html[data-theme="dark"] label{color:var(--pd-8f9bb8,#8f9bb8)}
html[data-theme="dark"] input[type=checkbox],html[data-theme="dark"] input[type=radio]{accent-color:var(--pd-7f9dff,#7f9dff)}

/* notes */
html[data-theme="dark"] .note.info{background:var(--brand-wash);color:var(--pd-bccaf6,#bccaf6);border-color:rgba(var(--pdr-132-162-255,132,162,255),.3)}
html[data-theme="dark"] .note.good{background:var(--green-wash);color:#7be7b8;border-color:rgba(52,211,153,.3)}
html[data-theme="dark"] .note.warn{background:var(--amber-wash);color:#f5c97a;border-color:rgba(242,185,85,.3)}
html[data-theme="dark"] .note.bad{background:var(--red-wash);color:#ffa39a;border-color:rgba(255,107,95,.3)}

/* badges */
html[data-theme="dark"] .badge{background:var(--pd-1a2338,#1a2338);color:var(--pd-c3cff0,#c3cff0)}
html[data-theme="dark"] .badge.good{background:var(--green-wash);color:#5fe0aa}
html[data-theme="dark"] .badge.warn{background:var(--amber-wash);color:#f5c97a}
html[data-theme="dark"] .badge.bad{background:var(--red-wash);color:#ff9d94}
html[data-theme="dark"] .badge.sup{background:rgba(var(--pdr-100-128-255,100,128,255),.2);color:var(--pd-a9bdff,#a9bdff)}
html[data-theme="dark"] .badge.prime{background:rgba(var(--pdr-56-189-248,56,189,248),.16);color:var(--pd-7dd3fc,#7dd3fc);box-shadow:inset 0 0 0 1px rgba(var(--pdr-56-189-248,56,189,248),.35)}
html[data-theme="dark"] .badge.prime.soft{background:rgba(var(--pdr-56-189-248,56,189,248),.09);color:var(--pd-8ec6e0,#8ec6e0);box-shadow:inset 0 0 0 1px rgba(var(--pdr-56-189-248,56,189,248),.2)}

/* the Suppliers and Templates cards */
html[data-theme="dark"] .sup-chip{background:var(--pd-1a2338,#1a2338);color:var(--pd-c3cff0,#c3cff0)}
html[data-theme="dark"] .sup-draft{background:rgba(var(--pdr-100-128-255,100,128,255),.2);color:var(--pd-a9bdff,#a9bdff)}
html[data-theme="dark"] .sup-bad{background:var(--red-wash);color:#ff9d94}
html[data-theme="dark"] .sup-tpl{background:rgba(var(--pdr-160-120-255,160,120,255),.2);color:var(--pd-c9b3ff,#c9b3ff)}
html[data-theme="dark"] .sup:hover>.sup-top{background:var(--pd-141d31,#141d31)}
html[data-theme="dark"] .sup-filters .chip{background:var(--pd-141d31,#141d31);color:var(--pd-b6c2e0,#b6c2e0);border-color:var(--pd-2a3550,#2a3550)}
html[data-theme="dark"] .sup-filters .chip:hover:not(:disabled){background:var(--pd-1a2540,#1a2540)}
html[data-theme="dark"] .sup-filters .chip.on{background:rgba(var(--pdr-100-128-255,100,128,255),.2);border-color:var(--pd-5b74d6,#5b74d6);color:var(--pd-cbd6ff,#cbd6ff)}
html[data-theme="dark"] .sup-body{background:none}
html[data-theme="dark"] .tile{background:#fff}                       /* a shop's own logo keeps its own ground */
html[data-theme="dark"] .tile.initials{background:rgba(var(--pdr-100-128-255,100,128,255),.2);color:var(--pd-b6c6ff,#b6c6ff)}
html[data-theme="dark"] .ov-pic,html[data-theme="dark"] .ord-pic{background:#fff}
html[data-theme="dark"] .ord-pic.none,html[data-theme="dark"] .ov-pic.none{background:var(--pd-182034,#182034)}
html[data-theme="dark"] .thumb{background:var(--pd-182034,#182034);border-color:var(--pd-232c42,#232c42)}
html[data-theme="dark"] .thumb img,html[data-theme="dark"] .photo img{background:#fff}

/* tabs, steps, lists */
html[data-theme="dark"] .tabs button.on{color:var(--pd-cbd6ff,#cbd6ff);box-shadow:inset 0 -2px 0 var(--pd-8a6cff,#8a6cff)}
html[data-theme="dark"] .tabs button:hover:not(:disabled){background:var(--pd-151e33,#151e33)}
html[data-theme="dark"] .tpl-head:hover{background:var(--pd-141d31,#141d31)}
html[data-theme="dark"] .step .num,html[data-theme="dark"] .start .n{background:rgba(var(--pdr-100-128-255,100,128,255),.2);color:var(--pd-b6c6ff,#b6c6ff)}
html[data-theme="dark"] .step.done .num,html[data-theme="dark"] .start li.done .n{background:var(--green-wash);color:#5fe0aa}
html[data-theme="dark"] .start li.next{background:linear-gradient(90deg,rgba(var(--pdr-100-128-255,100,128,255),.16),transparent 85%)}
html[data-theme="dark"] .bar{background:var(--pd-1c2540,#1c2540)}
html[data-theme="dark"] .dz-card.on{background:linear-gradient(180deg,rgba(var(--pdr-100-128-255,100,128,255),.14),var(--card));border-color:var(--pd-5b74d6,#5b74d6);box-shadow:0 0 0 3px rgba(var(--pdr-132-162-255,132,162,255),.16)}
html[data-theme="dark"] .dz-slots,html[data-theme="dark"] .dz-ver{background:var(--pd-0e1524,#0e1524);border-color:var(--line)}
html[data-theme="dark"] .guide{background:linear-gradient(180deg,var(--pd-0f1729,#0f1729),var(--pd-0d1526,#0d1526));border-color:var(--pd-25304c,#25304c)}
html[data-theme="dark"] .copy{background:var(--pd-0e1524,#0e1524);border-color:var(--pd-25304c,#25304c)}
html[data-theme="dark"] .copy:hover{background:rgba(var(--pdr-100-128-255,100,128,255),.14);border-color:var(--pd-5b74d6,#5b74d6)}
html[data-theme="dark"] .ta-list{background:var(--pd-111827,#111827);border-color:var(--pd-2a3550,#2a3550)}
html[data-theme="dark"] .ta-list button:hover{background:var(--pd-1a2540,#1a2540)}
html[data-theme="dark"] .check-box{background:#1d1a10;border-color:#4a3d1c}
html[data-theme="dark"] .facts div{border-top-color:#3a3117}
html[data-theme="dark"] .ord-box,html[data-theme="dark"] .ord-state,html[data-theme="dark"] .ord-sum{background:var(--pd-0e1524,#0e1524);border-color:var(--line)}

/* Overview */
html[data-theme="dark"] .ov-seg{background:var(--pd-0e1524,#0e1524)}
html[data-theme="dark"] .ov-root .ov-seg button{color:var(--pd-8f9bb8,#8f9bb8)}
html[data-theme="dark"] .ov-root .ov-seg button.on{background:var(--pd-1e2a47,#1e2a47);color:#fff}
html[data-theme="dark"] .ov-root .ov-seg button:hover:not(:disabled):not(.on){background:var(--pd-151e33,#151e33)}
html[data-theme="dark"] .ov-root button.ov-need:hover:not(:disabled),html[data-theme="dark"] .ov-root button.ov-pstep:hover:not(:disabled){background:var(--pd-141d31,#141d31)}
html[data-theme="dark"] .ov-root button.ov-pstep{background:var(--pd-0e1524,#0e1524)}
html[data-theme="dark"] .ov-need .ico{background:var(--pd-182034,#182034)}
html[data-theme="dark"] .ov-need.bad .ico{background:var(--red-wash);color:var(--red)}
html[data-theme="dark"] .ov-need.warn .ico{background:var(--amber-wash);color:var(--amber)}
html[data-theme="dark"] .ov-need.info .ico{background:var(--brand-wash);color:var(--brand)}
html[data-theme="dark"] .ov-clear{background:var(--green-wash);border-color:rgba(52,211,153,.3)}
html[data-theme="dark"] .ov-clear span{color:#8be0bc}
html[data-theme="dark"] .ov-empty{background:var(--pd-0e1524,#0e1524);border-color:var(--line)}
html[data-theme="dark"] .ov-root .trk{background:var(--pd-1c2540,#1c2540)}
html[data-theme="dark"] .ov-meter{background:var(--pd-1c2a4a,#1c2a4a)}
html[data-theme="dark"] .ov-tip{background:var(--pd-131b2e,#131b2e);border-color:var(--pd-2a3550,#2a3550);color:var(--ink)}
html[data-theme="dark"] .ov-split .lab{color:var(--pd-b6c2e0,#b6c2e0)}
html[data-theme="dark"] .ov-legend .hollow{background:var(--card)}
html[data-theme="dark"] .ov-dl.good{color:#5fe0aa}
html[data-theme="dark"] .ov-dl.bad{color:#ff9d94}

/* Orders and Finances */
html[data-theme="dark"] .ord-card.zero,html[data-theme="dark"] .fin-compare>div{background:var(--pd-0e1524,#0e1524)}
html[data-theme="dark"] .ord-card.on{background:linear-gradient(180deg,rgba(var(--pdr-100-128-255,100,128,255),.16),rgba(var(--pdr-120-90-245,120,90,245),.12));border-color:var(--pd-5b74d6,#5b74d6)}
html[data-theme="dark"] .fin-mode.on{background:linear-gradient(90deg,rgba(var(--pdr-100-128-255,100,128,255),.16),rgba(var(--pdr-120-90-245,120,90,245),.1))}
html[data-theme="dark"] .fin-compare>div.now{background:var(--card);border-color:var(--pd-5b74d6,#5b74d6)}
html[data-theme="dark"] .fin-meter{background:var(--pd-1c2540,#1c2540)}
html[data-theme="dark"] .tbl tr.strong td{background:var(--pd-0e1524,#0e1524)}
html[data-theme="dark"] tr.match-group td,html[data-theme="dark"] tr.match-group:hover{background:var(--pd-0a0e18,#0a0e18)}
html[data-theme="dark"] .match-table{background:var(--card)}
html[data-theme="dark"] .st.transit,html[data-theme="dark"] .st.delivered{color:#5fe0aa}

/* the chart (viz.js draws inline SVG with these classes) */
html[data-theme="dark"] .ov-trend text{fill:var(--pd-8f9bb8,#8f9bb8)}
html[data-theme="dark"] .ov-trend .grid line,html[data-theme="dark"] .ov-trend line.grid{stroke:var(--pd-232c42,#232c42)}

/* the empty state of a table */
html[data-theme="dark"] .muted{color:var(--muted)}
html[data-theme="dark"] .sub,html[data-theme="dark"] .hint{color:var(--muted)}
html[data-theme="dark"] .lead{color:var(--pd-c3cff0,#c3cff0)}

/* the skeleton while a page loads */
html[data-theme="dark"] .skel{background:linear-gradient(100deg,var(--pd-151d30,#151d30) 30%,var(--pd-1c2640,#1c2640) 50%,var(--pd-151d30,#151d30) 70%);background-size:230% 100%}
html[data-theme="dark"] .modal-loading{color:var(--muted)}

/* the frame that shows a listing keeps the white page a buyer sees */
html[data-theme="dark"] .preview{background:#fff;border-color:var(--line)}