/* Black Horse workspace · 1.2.0 premium design layer
   Loads after app.css + workspace.css. Adds no new markup dependencies —
   only refines existing selectors, so nothing in app.js needs to change.
   Fonts: Fraunces (display/serif accents) + Inter (body, already used). */

:root{
  --ink:#16241f;
  --muted:#63756a;
  --forest:#0f3c2c;
  --forest-2:#1c5c44;
  --deep:#0c2019;
  --gold:#b8914d;
  --gold-light:#ecd49a;
  --gold-deep:#8a6a30;
  --paper:#faf8f2;
  --line:#e7e2d3;
  --success:#1f7a52;
  --danger:#ae4a40;
  --shadow:0 10px 30px -12px rgba(13,35,26,.16);
  --shadow-lg:0 24px 60px -20px rgba(11,30,23,.28);
  --radius:18px;
}

@media (prefers-reduced-motion:no-preference){
  .kpi,.panel,.product-card,.btn,.pipeline-row,.team-row,tbody tr{
    transition:transform .18s ease,box-shadow .22s ease,background .18s ease,border-color .18s ease;
  }
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 100% -10%,#eadfc422 0%,transparent 60%),
    radial-gradient(900px 500px at -10% 110%,#1c5c4412 0%,transparent 55%),
    var(--paper);
}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9bd9c66;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--gold);outline-offset:2px;
}

/* ---------- Typography ---------- */
h1,.brand strong,.login-copy h1,.login-form h2,.detail-hero h2,.setup-card h1,.modal-head h2,.page-head h1{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-feature-settings:"ss01" 1;
}
h1,.page-head h1{font-weight:560;letter-spacing:-.02em}
.eyebrow{font-weight:700}
.chart-summary strong,.kpi-value{font-family:"Fraunces",Georgia,serif;font-weight:560;letter-spacing:-.02em}

/* ---------- Buttons ---------- */
.btn{border-radius:10px;font-weight:650}
.btn.primary{
  background:linear-gradient(160deg,var(--forest-2),var(--forest) 70%);
  border-color:var(--forest);
  box-shadow:0 6px 16px -6px #0f3c2c55, inset 0 1px 0 #ffffff1a;
}
.btn.primary:hover{
  background:linear-gradient(160deg,#22684e,#0d3324 70%);
  box-shadow:0 10px 24px -8px #0f3c2c66, inset 0 1px 0 #ffffff26;
  transform:translateY(-1.5px);
}
.btn.gold{
  background:linear-gradient(160deg,var(--gold-light),#e0bd7c);
  border-color:#e0bd7c;color:#4a3818;
}
.btn.gold:hover{transform:translateY(-1.5px);box-shadow:0 8px 18px -8px #b8914d55}
.btn.danger:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}

/* ---------- Sidebar & brand ---------- */
.sidebar{
  background:linear-gradient(175deg,#173a2c 0%,#0c2019 78%);
  border-right:1px solid #ffffff0d;
  box-shadow:inset -1px 0 0 #d9b46a12;
}
.brand img{box-shadow:0 0 0 1px #d9b46a55,0 4px 14px -4px #00000055}
.brand strong{background:linear-gradient(120deg,#f4ead2,#d9b46a 60%,#f4ead2);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{opacity:.9}
.nav-label{opacity:.85}
.nav a.active{
  background:linear-gradient(100deg,#f0d9a0,#d9b46a);
  box-shadow:0 4px 14px -4px #00000030, inset 0 1px 0 #ffffff40;
}
.nav a:hover{box-shadow:inset 0 0 0 1px #ffffff10}
.sidebar-user{position:relative}
.sidebar-user:before{content:"";position:absolute;top:0;left:4px;right:4px;height:1px;background:linear-gradient(90deg,transparent,#d9b46a55,transparent)}

/* ---------- Topbar ---------- */
.topbar{backdrop-filter:saturate(1.1);border-bottom:1px solid var(--line)}
.role-pill{background:linear-gradient(160deg,#f3f8f4,#e9f2ec);border-color:#dbe8df}
.top-actions .avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px #e3c98a}

/* ---------- KPI cards ---------- */
.kpi{
  border-radius:16px;position:relative;
  box-shadow:var(--shadow);
}
.kpi:before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
  opacity:.9;
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dashboard-kpis .kpi:first-child{
  background:radial-gradient(140% 140% at 0% 0%,#1c6249,#0e3729 70%);
  box-shadow:0 14px 34px -12px #0f3c2c66;
}
.dashboard-kpis .kpi:first-child:before{background:linear-gradient(90deg,#e9ce96,#f6e6bf)}
.dashboard-kpis .kpi:not(:first-child):before{opacity:.55}

/* ---------- Panels ---------- */
.panel{border-radius:18px;box-shadow:var(--shadow);border-color:var(--line)}
.panel-head{border-bottom:1px solid #f0ece0}
.panel-symbol{background:linear-gradient(160deg,#fbfaf4,#f0eee2)}

/* ---------- Pipeline / team rows ---------- */
.pipeline-row:hover{transform:translateX(2px)}
.team-row:hover{background:#faf8f0}
.progress{background:#eee9da}

/* ---------- Product / inventory cards ---------- */
.product-card{border-radius:16px;box-shadow:var(--shadow)}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.product-art{background:linear-gradient(160deg,#f2efe0,#e7e2cd);border-color:#e0dac2}

/* ---------- Badges: soft pill + status dot ---------- */
.badge{
  border-radius:999px;padding:4px 11px 4px 9px;font-weight:650;
  display:inline-flex;align-items:center;gap:6px;
}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;flex-shrink:0}

/* ---------- Tables ---------- */
th{background:linear-gradient(180deg,#f8f6ee,#f3f1e6);letter-spacing:.03em}
tbody tr:nth-child(even){background:#fcfbf6}
tbody tr:hover{background:#f7f3e6}
.order-link{font-weight:700}
.sheet th:first-child,.sheet td:first-child{background:#f7f4e7}

/* ---------- Notices / attention ---------- */
.notice{border-radius:12px}
.notice.success{background:linear-gradient(160deg,#eef7ef,#e6f2e8)}
.notice.danger{background:linear-gradient(160deg,#fdf1ef,#fbe6e2)}
.notice.info{background:linear-gradient(160deg,#eef2f8,#e6ecf5)}
.attention{background:linear-gradient(160deg,#faf6ea,#f4eddb);border-color:#e9dcb8}

/* ---------- Tabs / segmented ---------- */
.tabs button.active{position:relative}
.tabs button.active:after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
}
.segmented button.active{box-shadow:0 2px 8px -2px #0f3c2c33}

/* ---------- Modals ---------- */
dialog{border-radius:20px;box-shadow:0 30px 90px -20px #0c201955}
.modal-head{position:relative}
.modal-head:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--forest),var(--gold-light) 80%)}

/* ---------- Empty states ---------- */
.empty-art{background:linear-gradient(160deg,#f3f7f0,#e9f1e4)}
.chart-empty-icon{background:linear-gradient(160deg,#f3f7f0,#e9f1e4)}

/* ---------- Login screen ---------- */
.login-art{
  background:
    radial-gradient(ellipse 70% 60% at 20% 15%,#1f6a4d55,transparent 65%),
    radial-gradient(ellipse 60% 55% at 90% 90%,#c8a35a22,transparent 60%),
    linear-gradient(175deg,#0e2b21,#0a1c16);
  position:relative;overflow:hidden;
}
.login-art:before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(#d9b46a22 1px,transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 30% 30%,black 0%,transparent 70%);
}
.login-copy img{box-shadow:0 0 0 1px #d9b46a44,0 20px 50px -20px #00000080}
.login-copy h1{font-weight:520;color:#f4ead2}
.login-copy h1 em{
  font-style:normal;
  background:linear-gradient(120deg,#f0d9a0,#e6c487 60%,#f0d9a0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-brand{position:relative;padding-bottom:6px}
.login-brand:after{content:"";position:absolute;left:0;bottom:-6px;width:34px;height:2px;background:var(--gold-light)}
.login-form h2{font-weight:560}
.login-role{position:relative}
.login-role button.active{color:var(--forest);font-weight:700}
.login-form .btn.primary{box-shadow:0 10px 26px -10px #0f3c2c66}

/* ---------- Setup screen ---------- */
.setup-body{background:radial-gradient(1200px 700px at 50% -10%,#eadfc430,transparent 60%),var(--paper)}
.setup-card{border-radius:20px;box-shadow:var(--shadow-lg)}
.setup-card h1{font-weight:560}

/* ---------- Footer ---------- */
.footer{opacity:.9}

@media print{
  .kpi:before,.badge:before,.login-art:before{display:none!important}
}

/* ============================================================
   1.3 — scale, density & sidebar overhaul
   Feedback: nav felt cramped/small, overall type scale too tight,
   whole thing read as a generic admin template. This section
   raises the density, enlarges the sidebar, and adds the kind
   of deliberate detail (chips, dividers, depth) a designed
   product has that a template doesn't.
   ============================================================ */

/* Sidebar: more air, bigger touch targets, a real "brand" moment */
.sidebar{padding:22px 16px 16px;position:relative;overflow:hidden}
.sidebar:before{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,#2f7a5a3a,transparent 70%);
  top:-120px;right:-120px;pointer-events:none;
}
.brand-row{min-height:88px;padding:0 10px;margin-bottom:14px}
.brand{gap:13px}
.brand img{width:50px;height:52px;border-radius:12px}
.brand strong{font-size:1.12rem;letter-spacing:.07em}
.brand small{font-size:.64rem;letter-spacing:.28em;margin-top:4px}

.nav{padding:0 2px 8px}
.nav-label{padding:20px 14px 9px;font-size:.68rem;letter-spacing:.17em}
.nav-label:first-child{padding-top:6px}
.nav a{min-height:48px;padding:11px 14px;margin:3px 0;gap:14px;font-size:.945rem;border-radius:11px;font-weight:500}
.nav a .icon{width:20px;height:20px}
.nav a.active .icon{color:#23372a}

.sidebar-user{padding:16px 6px 2px;margin-top:10px}
.sidebar-user .avatar{width:38px;height:38px;font-size:.85rem;border-radius:12px}
.sidebar-user strong{font-size:.88rem}
.sidebar-user small{font-size:.72rem}

/* Topbar: taller, a real search field, calmer rhythm */
.topbar{height:78px;padding:0 34px;gap:24px}
.breadcrumbs{font-size:.88rem}
.global-search{height:44px;width:320px;max-width:32vw;border-radius:11px;background:#f5f6ee;border-color:#e8e4d4;padding:0 10px 0 14px}
.global-search input{font-size:.86rem}
.role-pill{padding:7px 11px;font-size:.76rem}
.top-actions .notification-button{width:40px;min-height:40px}
.top-actions .avatar{width:38px;height:38px}

/* Page: roomier margins, a stronger heading moment */
.page{padding:38px 40px 26px}
.page-head{margin-bottom:32px}
.page-head h1{font-size:2.15rem}
.page-head p{font-size:.94rem;margin-top:9px}
.eyebrow{font-size:.72rem;letter-spacing:.17em;position:relative;padding-left:15px}
.eyebrow:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:2px;background:var(--gold-deep)}

/* KPI cards: bigger numbers, clearer hierarchy, a subtle mark */
.kpis{gap:20px;margin-bottom:28px}
.kpi{padding:24px 24px 22px;border-radius:18px}
.kpi-icon{width:40px;height:40px;border-radius:12px}
.kpi-icon .icon{width:20px;height:20px}
.kpi-value{font-size:2.55rem;margin:16px 0 13px}
.kpi-top{font-size:.86rem}
.kpi-bottom{font-size:.79rem}
.kpi:after{
  content:"";position:absolute;right:16px;bottom:12px;width:56px;height:56px;
  background:radial-gradient(circle,#0f3c2c0a,transparent 70%);border-radius:50%;pointer-events:none;
}
.dashboard-kpis .kpi:first-child:after{background:radial-gradient(circle,#ffffff10,transparent 70%)}

/* Panels & section rhythm */
.panel-head{padding:24px 26px}
.panel-head h2{font-size:1.2rem}
.panel-body{padding:0 26px 26px}
.dashboard-row,.dashboard-row.bottom{gap:24px;margin-bottom:24px}
.chart,.chart-empty{height:220px}

/* Pipeline rows get a touch more presence */
.pipeline-row{padding:12px 10px}
.pipeline-index{width:38px;height:38px;border-radius:11px}
.pipeline-row strong{font-size:.9rem}
.pipeline-row b{font-size:1.12rem}

/* Tables: a bit more breathing room */
th{padding:14px 22px;font-size:.74rem}
td{padding:16px 22px;font-size:.9rem}

/* Buttons: slightly larger, more assured */
.btn{min-height:43px;padding:10px 16px;font-size:.9rem}
.btn.sm{min-height:36px;padding:6px 12px}
.page-head .actions .btn.primary{padding:10px 20px}

/* Login: bigger, more confident */
.login-copy h1{font-size:clamp(2.7rem,4.6vw,4.9rem)}
.login-form{max-width:410px}
.login-form h2{font-size:2.1rem}
.login-form form{gap:23px}

@media (max-width:1220px){
  .topbar{height:70px;padding:0 23px}
  .global-search{width:250px}
}
@media (max-width:950px){
  .page{padding:26px 24px 18px}
  .topbar{height:62px}
  .brand-row{min-height:70px}
  .nav a{min-height:44px}
}
@media (max-width:540px){
  .topbar{height:58px;padding:0 15px}
  .page{padding:22px 16px 15px}
  .page-head h1{font-size:1.8rem}
  .kpi{padding:15px}
  .kpi-value{font-size:2rem}
}

/* ============================================================
   1.4.1 — sidebar collapse rail, header day/night control, menu scrollbar
   Paired with design-plus.js, which toggles `body.sidebar-collapsed` and
   `html[data-theme]`. The controls themselves are rendered by app.js into
   the header and the shell, so they are part of the layout rather than
   floating chrome parked on top of it.
   ============================================================ */

/* ---- Scrollbars: consistent, refined, everywhere (not just .nav) ---- */
html{scrollbar-width:thin;scrollbar-color:#b7ab8a transparent}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:9px;height:9px}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:#b7ab8aa0;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:transparent}
.page::-webkit-scrollbar{width:9px}
.page::-webkit-scrollbar-thumb{background:#c9bd9c99;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.page::-webkit-scrollbar-thumb:hover{background:#c9bd9cd0;background-clip:padding-box}

/* ---- Sidebar menu scroll indicator ----
   The old 6px solid-green bar read like a progress meter bolted onto the
   menu. It is now a slim, rounded, low-contrast rail that only surfaces
   while the menu is hovered, focused or actively scrolling. Soft edge
   fades (toggled by design-plus.js, so they appear only when there is
   actually more menu in that direction) make long menus dissolve instead
   of being sliced off. */
.nav{
  padding-right:6px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  transition:scrollbar-color .25s ease;
  --nav-fade-top:0px;
  --nav-fade-bottom:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top),#000 calc(100% - var(--nav-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top),#000 calc(100% - var(--nav-fade-bottom)),transparent 100%);
}
.nav.nav-fade-top{--nav-fade-top:20px}
.nav.nav-fade-bottom{--nav-fade-bottom:22px}
.nav:hover,.nav:focus-within,.nav.is-scrolling{scrollbar-color:#ffffff38 transparent}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{
  background:transparent;border-radius:99px;
  border:2.5px solid transparent;background-clip:padding-box;
  transition:background .25s ease;
}
.nav:hover::-webkit-scrollbar-thumb,
.nav:focus-within::-webkit-scrollbar-thumb,
.nav.is-scrolling::-webkit-scrollbar-thumb{background:#ffffff30;background-clip:padding-box}
.nav::-webkit-scrollbar-thumb:hover,.nav::-webkit-scrollbar-thumb:active{background:#e9ce9670;background-clip:padding-box}


/* ---- Header day / night control ---- */
.theme-toggle{position:relative;overflow:hidden}
.theme-toggle .bh-icon-sun,.theme-toggle .bh-icon-moon{display:inline-flex;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.theme-toggle .bh-icon-moon{position:absolute;inset:0;align-items:center;justify-content:center;transform:rotate(-70deg) scale(.5);opacity:0}
html[data-theme="dark"] .theme-toggle .bh-icon-sun{transform:rotate(70deg) scale(.5);opacity:0}
html[data-theme="dark"] .theme-toggle .bh-icon-moon{transform:none;opacity:1}
html[data-theme="dark"] .theme-toggle{color:#e8cd94}

/* ---- Floating control (sign-in screen only, where there is no header) ---- */
.bh-float-btn{
  position:fixed;z-index:70;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--forest);cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(15,35,26,.3);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.bh-float-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(15,35,26,.4)}
.bh-float-btn .icon{width:16px;height:16px}
.bh-theme-btn{bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;position:fixed}
.bh-theme-btn .icon{width:19px;height:19px}
.bh-theme-btn .bh-icon-moon{display:none}
html[data-theme="dark"] .bh-theme-btn .bh-icon-sun{display:none}
html[data-theme="dark"] .bh-theme-btn .bh-icon-moon{display:inline-flex}

/* ---- Sidebar collapse: one width variable drives layout AND the button ----
   Because the rail button is anchored to --sidebar-w (not measured from
   JavaScript), it travels with the sidebar on the exact same easing curve
   instead of snapping into place a frame or two later. */
body{--sidebar-w:238px;--sidebar-ease:cubic-bezier(.4,0,.2,1)}
body.sidebar-collapsed{--sidebar-w:78px}

@media (min-width:951px){
  .shell{
    position:relative;
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
    transition:grid-template-columns .28s var(--sidebar-ease);
  }
  .sidebar{transition:padding .28s var(--sidebar-ease)}

  .sidebar-rail-toggle{
    position:absolute;top:34px;left:var(--sidebar-w);z-index:65;
    width:26px;height:26px;padding:0;margin:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transform:translateX(-50%);
    background:#fff;border:1px solid var(--line);color:var(--forest);cursor:pointer;
    box-shadow:0 3px 10px -3px rgba(15,35,26,.45);
    transition:left .28s var(--sidebar-ease),background .18s ease,color .18s ease,box-shadow .18s ease;
  }
  .sidebar-rail-toggle .icon{width:15px;height:15px;transition:transform .28s var(--sidebar-ease)}
  .sidebar-rail-toggle:hover{background:var(--forest);color:#fff;box-shadow:0 5px 14px -3px rgba(15,35,26,.5)}
  body.sidebar-collapsed .sidebar-rail-toggle .icon{transform:rotate(180deg)}
  html[data-theme="dark"] .sidebar-rail-toggle{background:#152420;border-color:var(--line);color:#cfe0d6}

  /* Text collapses by fading + zeroing width, so nothing pops out of existence. */
  body.sidebar-collapsed .sidebar{padding-left:11px;padding-right:11px}
  body.sidebar-collapsed .sidebar:before{display:none}
  body.sidebar-collapsed .brand-row{padding:0;justify-content:center}
  body.sidebar-collapsed .brand{justify-content:center;gap:0}
  body.sidebar-collapsed .nav{padding-right:4px;scrollbar-gutter:auto}

  .brand>span{overflow:hidden;transition:opacity .16s ease,max-width .28s var(--sidebar-ease)}
  body.sidebar-collapsed .brand>span{opacity:0;max-width:0}

  .nav-label{overflow:hidden;white-space:nowrap;transition:opacity .16s ease,height .24s var(--sidebar-ease),padding .24s var(--sidebar-ease)}
  body.sidebar-collapsed .nav-label{opacity:0;height:10px;padding-top:0;padding-bottom:0}

  .nav a{transition:background .18s,color .18s,padding .28s var(--sidebar-ease),gap .28s var(--sidebar-ease)}
  .nav a>span:not(.nav-active-dot){overflow:hidden;white-space:nowrap;transition:opacity .16s ease}
  body.sidebar-collapsed .nav a{justify-content:center;padding-left:0;padding-right:0;gap:0}
  body.sidebar-collapsed .nav a>span:not(.nav-active-dot){opacity:0;flex:0 0 0;width:0}
  body.sidebar-collapsed .nav a .nav-active-dot{display:none}
  body.sidebar-collapsed .nav a .icon{width:19px;height:19px}

  body.sidebar-collapsed .sidebar-user{justify-content:center}
  body.sidebar-collapsed .sidebar-user .account-button{flex:0}
  body.sidebar-collapsed .sidebar-user .person>span:last-child{display:none}
  body.sidebar-collapsed .sidebar-user .signout-button{display:none}
}

/* The rail control is desktop-only; small screens use the header hamburger. */
@media (max-width:950px){
  .sidebar-rail-toggle{display:none}
  /* 1.6.0: keep the phone menu off-canvas (the 1.3 rule above made it take a full screen of space) */
  .sidebar{position:fixed}
}

@media (prefers-reduced-motion:reduce){
  .shell,.sidebar,.sidebar-rail-toggle,.sidebar-rail-toggle .icon,
  .nav a,.nav a>span,.nav-label,.brand>span,
  .theme-toggle .bh-icon-sun,.theme-toggle .bh-icon-moon{transition:none!important}
}

/* ============================================================
   Dark theme — html[data-theme="dark"]
   Structural surfaces are re-pointed explicitly (many were hard-coded
   white/hex, not CSS variables); text/border tokens flip via the
   custom properties, which most of the app already consumes.
   Soft pastel chips (badges, notices, tags…) use an invert+hue-rotate
   trick to flip lightness while keeping each status's hue recognisable,
   without hand-remapping every status color.
   ============================================================ */
html[data-theme="dark"]{
  --ink:#e7ece8;
  --muted:#94a89d;
  --line:#243830;
  --paper:#0d1613;
  --success:#3fa87c;
  --danger:#e08277;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1100px 620px at 100% -10%,#1c5c4422 0%,transparent 60%),
    radial-gradient(900px 500px at -10% 110%,#0f3c2c22 0%,transparent 55%),
    var(--paper);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .segmented button.active,
html[data-theme="dark"] .import-drop,
html[data-theme="dark"] .import-drop input,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .setup-card,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .global-search button,
html[data-theme="dark"] .range-button,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .session-box,
html[data-theme="dark"] .login,
html[data-theme="dark"] .bh-float-btn{
  background:#152420;border-color:var(--line);color:var(--ink);
}
html[data-theme="dark"] .btn:hover{background:#1c2f28}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn.primary:hover{color:#fff}
html[data-theme="dark"] .workday-panel{background:linear-gradient(130deg,#152420,#0f1d18)}
html[data-theme="dark"] th{background:#182720;color:#9db3a6;border-color:var(--line)}
html[data-theme="dark"] td{border-color:#22342c;color:var(--ink)}
html[data-theme="dark"] tbody tr:nth-child(even){background:#101c17}
html[data-theme="dark"] tbody tr:hover{background:#1b2b24}
html[data-theme="dark"] .sheet th:first-child,html[data-theme="dark"] .sheet td:first-child{background:#152420}
html[data-theme="dark"] .dashboard-kpis .kpi:first-child{background:radial-gradient(140% 140% at 0% 0%,#1c6249,#0d3324 70%);color:#f2f6f2;border-color:#1a523d}
html[data-theme="dark"] .empty-art,html[data-theme="dark"] .chart-empty-icon,html[data-theme="dark"] .product-art,html[data-theme="dark"] .panel-symbol{background:#1a2b24;border-color:#26382f}
html[data-theme="dark"] .chart-empty{background:linear-gradient(0deg,#152420,transparent 35%,transparent 75%,#152420),repeating-linear-gradient(0deg,transparent,transparent 44px,#1c2f27 44px,#1c2f27 45px)}
html[data-theme="dark"] .chart text{fill:#9db3a6}
html[data-theme="dark"] .chart-grid{stroke:#22342c}
html[data-theme="dark"] .progress{background:#22342c}
html[data-theme="dark"] .timeline{border-color:#26382f}
html[data-theme="dark"] .timeline-item:before{border-color:#0d1613}
html[data-theme="dark"] .stock-attention{color:#c9bd9c;border-color:#26382f}
html[data-theme="dark"] .footer{border-color:#22342c}
html[data-theme="dark"] .pipeline-foot,html[data-theme="dark"] .chart-foot{border-color:#22342c}
html[data-theme="dark"] .badge,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .attention,
html[data-theme="dark"] .role-pill,
html[data-theme="dark"] .readonly-strip,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .demo-pill,
html[data-theme="dark"] .metric-caption{
  filter:invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] .sidebar-user .avatar,
html[data-theme="dark"] .top-actions .avatar{filter:none}
html[data-theme="dark"] .top-actions .avatar{background:#e8cd94;color:#25362a;box-shadow:0 0 0 2px #152420,0 0 0 3px #e3c98a}

/* ============================================================
   Print safety — never carry night mode onto paper/PDF.
   Without this, a user who printed while in night mode got dark
   slabs of ink and inverted badges.
   ============================================================ */
@media print{
  html[data-theme="dark"]{--ink:#182d29;--muted:#607268;--line:#e2e9e5;--paper:#fff}
  html[data-theme="dark"] body,
  html[data-theme="dark"] .panel,
  html[data-theme="dark"] .kpi,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] dialog,
  html[data-theme="dark"] table,
  html[data-theme="dark"] th,
  html[data-theme="dark"] td,
  html[data-theme="dark"] tbody tr:nth-child(even){background:#fff!important;color:#182d29!important}
  html[data-theme="dark"] .badge,
  html[data-theme="dark"] .notice,
  html[data-theme="dark"] .attention,
  html[data-theme="dark"] .role-pill,
  html[data-theme="dark"] .readonly-strip,
  html[data-theme="dark"] .tag,
  html[data-theme="dark"] .avatar,
  html[data-theme="dark"] .demo-pill,
  html[data-theme="dark"] .metric-caption{filter:none!important}
  .sidebar-rail-toggle,.bh-float-btn,.theme-toggle{display:none!important}
}

/* 1.6.1 — dealer Final sheet is view only (screen). Print already hides it. */
@media screen{
  .dealer-final{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .dealer-final::after{content:"";position:absolute;inset:0;background-image:var(--wm);background-repeat:repeat;pointer-events:none;z-index:4;border-radius:inherit}
  .dealer-final .readonly-strip strong{color:var(--forest)}
}
html[data-theme="dark"] .dealer-final .readonly-strip strong{color:#bfe0c8}

/* 1.7.0 — work badges in the menu, send-to-verifier option, dealer notes */
.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#d9b46a;color:#1b3328;font-size:.7rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.nav-count[hidden]{display:none}
body.sidebar-collapsed .nav-count{position:absolute;top:7px;right:12px;min-width:9px;width:9px;height:9px;padding:0;font-size:0;box-shadow:0 0 0 2px #152e27}
.send-verifier{margin:14px 0 4px;padding:12px 14px;border:1px solid #cfe0d1;background:#f1f8f2;border-radius:10px}
.send-verifier .check-label{font-weight:700;color:var(--forest)}
.send-verifier small{display:block;margin:4px 0 0 28px;color:var(--muted);font-size:.78rem}
.dealer-notes .notice{margin-bottom:8px}
.dealer-notes .timeline-item{padding-left:14px;border-left:2px solid var(--line);margin:0 0 10px}
.dealer-notes .timeline-item small{display:block;color:var(--muted)}
.cell-sub.verified-on{color:#2b7552;font-weight:600}
html[data-theme="dark"] .send-verifier{background:#17291f;border-color:#2b4436}
html[data-theme="dark"] .send-verifier .check-label{color:#cfe6d5}
html[data-theme="dark"] .cell-sub.verified-on{color:#8fd1ab}

/* 1.7.1 — role-first sign-in */
.login-step[hidden]{display:none!important}
.login-step>p{margin:0 0 16px;color:var(--muted)}
.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.role-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:16px 16px 15px;border:1px solid #dfe6dc;border-radius:14px;background:#fff;cursor:pointer;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:roleIn .38s ease both}
.role-card:nth-child(2){animation-delay:.05s}.role-card:nth-child(3){animation-delay:.1s}.role-card:nth-child(4){animation-delay:.15s}
.role-card .icon{width:22px;height:22px;color:#1b6b4a;margin-bottom:4px}
.role-card strong{font-size:1rem;font-weight:700;color:var(--forest)}
.role-card small{font-size:.78rem;color:var(--muted)}
.role-card:hover,.role-card:focus-visible{transform:translateY(-2px);border-color:#b49454;box-shadow:0 10px 24px -14px #1b332866;outline:none}
@keyframes roleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.login-as{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 22px;padding:11px 14px;border-radius:11px;background:#f1f7f2;border:1px solid #d6e6d9;font-size:.9rem}
.login-as strong{color:var(--forest)}
.login-as .text-button{font-size:.82rem;font-weight:700;color:#8a6a2e;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
html[data-theme="dark"] .role-card{background:#132420;border-color:#284036;color:var(--ink)}
html[data-theme="dark"] .role-card strong{color:#e8efe9}
html[data-theme="dark"] .role-card .icon{color:#8fd1ab}
html[data-theme="dark"] .login-as{background:#17291f;border-color:#2b4436}
html[data-theme="dark"] .login-as strong{color:#cfe6d5}
@media(max-width:420px){.role-cards{gap:9px}.role-card{padding:13px 12px}.role-card small{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.role-card{animation:none;transition:none}}

/* 1.9.0 — import: worksheet chooser, found headings, skipped rows */
.import-sheet-pick{display:block;margin:0 0 14px;font-weight:600}
.import-sheet-pick select{margin-top:6px}
.import-found{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 16px}
.import-skips{margin:8px 0 0;padding-left:18px;max-height:180px;overflow:auto;font-size:.85rem}
.import-skips li{margin:2px 0}

/* 1.11.5 — show/hide password */
.pw-field{position:relative;display:block}
.pw-field input{padding-right:44px!important;width:100%}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;margin:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;box-shadow:none}
.pw-eye:hover{background:#e9efe8;color:var(--ink)}.pw-eye.on{color:var(--forest)}
.pw-eye .icon,.pw-eye svg{width:18px;height:18px;stroke:currentColor;fill:none}
html[data-theme="dark"] .pw-eye:hover{background:#22382c}

/* 1.12.3 — loading a big sheet in parts */
.sheet-loading{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:#163c2c;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* 1.27.0 — incentive tables */
table.mini{font-size:.86rem}table.mini th,table.mini td{padding:8px 10px}#inc-rows td input{width:100%;min-width:120px}#inc-matrix td{text-align:center}#inc-matrix td:first-child{text-align:left}#inc-matrix input[type=checkbox]{width:18px;height:18px}#salary-suggestion table.mini{margin:10px 0}

/* 1.27.1 — overview: entries by Master Sheet (donut) */
.share-panel .panel-body{padding:18px 22px 22px}.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.donut{width:160px;height:160px;flex:0 0 160px}.donut-total{font:700 26px/1 var(--font-display,Georgia,serif);fill:var(--ink,#1c2a24)}.donut-caption{font-size:11px;fill:var(--muted,#6b7a74);letter-spacing:.08em;text-transform:uppercase}.donut-legend{list-style:none;margin:0;padding:0;flex:1;min-width:180px}.donut-legend li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line,#e8e6df);font-size:.9rem}.donut-legend li:last-child{border-bottom:0}.donut-legend .swatch{width:12px;height:12px;border-radius:3px;flex:0 0 12px}.donut-legend .legend-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.donut-legend b{font-variant-numeric:tabular-nums}.donut-legend small{color:var(--muted,#6b7a74);min-width:36px;text-align:right}
.dashboard-row .share-panel{grid-column:1/-1}
@media (min-width:1200px){.dashboard-row:has(.share-panel){grid-template-columns:minmax(0,1.5fr) minmax(230px,.9fr) minmax(230px,.9fr)}.dashboard-row .share-panel{grid-column:auto}}

/* 1.27.7 — My profile */
.profile-hero{display:flex;align-items:center;gap:20px;padding:22px 24px;margin-bottom:24px;flex-wrap:wrap}
.profile-avatar{width:72px;height:72px;flex:0 0 72px;font-size:1.45rem;letter-spacing:.02em}
.profile-id{flex:1;min-width:200px}.profile-id h2{margin:0;font-size:1.5rem;line-height:1.2}.profile-id p{margin:4px 0 10px;color:var(--muted)}
.profile-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.profile-master{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;min-width:240px}
.profile-master small{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;font-weight:600}.profile-master strong{font-size:1.1rem;line-height:1.3}.profile-master .btn{margin-top:4px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:18px;align-items:start}
.profile-grid .panel{margin:0}
.kv{padding:4px 22px 12px}
.kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.kv-row:last-child{border-bottom:0}.kv-row>span{color:var(--muted)}.kv-row>strong{font-weight:600;text-align:right;overflow-wrap:break-word;min-width:0;max-width:62%}
.kv-row a{color:var(--forest);text-decoration:underline}.kv-empty{color:var(--muted);font-weight:400;font-style:italic}
@media (max-width:640px){.profile-hero{padding:18px}.profile-master{width:100%}.kv{padding:2px 16px 10px}.kv-row{flex-direction:column;gap:2px}.kv-row>strong{text-align:left;max-width:100%}}