/* ============================================================================
   The Negocio Solution — Asset & Facility Maintenance Management Platform
   Design system: "Negocio Console"
   Light green + black · squared geometry · hairline dividers · black data headers
   ----------------------------------------------------------------------------
   1. Tokens                 6. Components
   2. Reset & base           7. Console surfaces
   3. Typography             8. Maintenance board
   4. Brand marks            9. Charts
   5. Auth screen           10. Customer portal (light rail)
   6. Shell & navigation    11. Responsive & print
   ========================================================================== */

/* ------------------------------ 1. TOKENS -------------------------------- */
:root{
  /* brand greens */
  --green-50:#F4FBEC;   --green-100:#E8F8DA;  --green-200:#D5F1BD;
  --green-300:#B9E895;  --green-400:#98DD6A;  --green-500:#7CCB45;
  --green-600:#5FA82F;  --green-700:#427A20;  --green-800:#2C5415;
  /* brand blacks */
  --ink-900:#0A0E0C;    --ink-800:#101614;    --ink-700:#161E1B;
  --ink-600:#1E2823;    --ink-500:#2A3630;
  /* neutrals with a green cast */
  --n-0:#FFFFFF;  --n-25:#FAFCF8; --n-50:#F5F8F3; --n-100:#EDF2EA;
  --n-150:#E2E8DF; --n-200:#D3DCD0; --n-300:#B6C2B2; --n-400:#94A290;
  --n-500:#6E7C6B; --n-600:#4E5A4C; --n-700:#333D31; --n-800:#1F2820; --n-900:#141A16;
  /* semantic */
  --c-ok:#2F9E68;     --c-ok-soft:#E7F6EC;
  --c-warn:#C07C18;   --c-warn-soft:#FCF3E3;
  --c-danger:#C8402F; --c-danger-soft:#FBECEA;
  --c-info:#3E6FD9;   --c-info-soft:#EBF0FE;
  --c-purple:#6B4FD8; --c-purple-soft:#F0EDFD;
  /* semantic aliases used across the app and by the chart library */
  --c-primary:var(--green-400);
  --c-primary-700:var(--green-600);
  --c-primary-300:var(--green-300);
  --c-primary-soft:var(--green-50);
  --c-accent:var(--ink-900);
  --c-accent-700:var(--ink-700);
  --c-accent-soft:var(--green-100);
  --c-link:var(--green-700);

  --bg:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-25);
  --border:var(--n-150); --border-strong:var(--n-200);
  --text:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500);
  --shadow-1:0 1px 2px rgba(10,14,12,.05);
  --shadow-2:0 2px 6px rgba(10,14,12,.08);
  --shadow-3:0 22px 48px rgba(10,14,12,.22), 0 6px 16px rgba(10,14,12,.10);

  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:6px; --r-xl:8px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sidebar-w:272px; --topbar-h:66px;
  --font:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Consolas","SFMono-Regular",ui-monospace,monospace;
  --ease:cubic-bezier(.34,.16,.28,1);
}
[data-theme="dark"]{
  --bg:#080B0A; --surface:#0F1512; --surface-2:#131A17;
  --border:#222C27; --border-strong:#2C3831;
  --text:#EAF2E7; --text-2:#A7B6A2; --text-3:#83947E;
  --n-0:#0F1512; --n-25:#131A17; --n-50:#080B0A; --n-100:#18201C; --n-150:#222C27; --n-200:#2C3831;
  --n-300:#3B4A3F; --n-400:#5A6B58; --n-500:#83947E; --n-600:#A7B6A2; --n-700:#C6D2C2;
  --n-800:#DDE7DA; --n-900:#F2F7F0;
  --c-ok-soft:#12291D; --c-warn-soft:#2E2312; --c-danger-soft:#2E1614;
  --c-info-soft:#141C33; --c-purple-soft:#1E1A38;
  --c-primary-soft:#16210F; --c-accent-soft:#1B2415;
  --c-link:#B9E895;
  --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 3px 10px rgba(0,0,0,.5);
  --shadow-3:0 22px 50px rgba(0,0,0,.7);
}

/* ---------------------------- 2. RESET & BASE ---------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); font-size:14px; line-height:1.5; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--c-link);text-decoration:none}
a:hover{text-decoration:underline}
svg.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.ico-sm{width:15px;height:15px}
svg.ico-lg{width:22px;height:22px}
:focus-visible{outline:2px solid var(--green-500);outline-offset:2px;border-radius:var(--r-xs)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--n-300);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------- 3. TYPOGRAPHY ------------------------------ */
h1,h2,h3,h4,h5{margin:0;font-weight:680;letter-spacing:-.018em;line-height:1.24}
h1{font-size:1.3125rem} h2{font-size:1.125rem} h3{font-size:.9375rem} h4{font-size:.875rem}
p{margin:0 0 var(--sp-3)} p:last-child{margin-bottom:0}
small,.small{font-size:.8125rem}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.strong{font-weight:680}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.8125rem}
.nowrap{white-space:nowrap}
.tr{text-align:right} .tc{text-align:center}
.up{color:var(--c-ok)} .down{color:var(--c-danger)}
.eyebrow{font-size:.65625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.divider{height:1px;background:var(--border);margin:var(--sp-4) 0}

/* ---------------------------- 4. BRAND MARKS ----------------------------- */
.brand-rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;
  background:linear-gradient(90deg,var(--green-500),var(--green-300) 55%,var(--green-400))}
.monogram{display:grid;place-items:center;flex:none;line-height:0}
.monogram svg{width:36px;height:36px;display:block}
.monogram-lg svg{width:56px;height:56px}
.wordmark strong{display:block;font-size:1.0625rem;letter-spacing:-.02em;font-weight:700;color:#fff}
.wordmark span{display:block;font-size:.6875rem;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

/* ---------------------------- 5. AUTH SCREEN ----------------------------- */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--ink-900);z-index:90;color:#fff}
.boot-inner{text-align:center;animation:fade .5s var(--ease)}
.boot-title{font-weight:700;margin:16px 0 2px;letter-spacing:-.02em;font-size:1.0625rem}
.boot-sub{color:#86977F;font-size:.8125rem;margin:0 0 18px}
.boot-bar{width:200px;height:3px;background:rgba(152,221,106,.18);overflow:hidden;margin:0 auto}
.boot-bar span{display:block;height:100%;width:42%;background:var(--green-400);animation:slide 1.1s infinite var(--ease)}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.auth{min-height:100vh;display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(410px,.92fr)}
.auth-brand{position:relative;color:#fff;padding:var(--sp-8) var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-6);
  background:
    radial-gradient(820px 420px at 88% -8%,rgba(152,221,106,.16),transparent 62%),
    radial-gradient(760px 460px at 4% 108%,rgba(124,203,69,.12),transparent 58%),
    linear-gradient(160deg,#0A0E0C 12%,#0F1714 58%,#0C1310 100%);
  overflow:hidden}
.auth-brand::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(152,221,106,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(152,221,106,.055) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(72% 62% at 34% 34%,#000,transparent)}
.auth-brand > *{position:relative;z-index:1}
.auth-brand-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
.auth-logo{display:flex;align-items:center;gap:var(--sp-3)}
.auth-logo .wordmark span{color:#86977F}
.auth-pill{font-size:.65625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-sm);
  background:rgba(152,221,106,.08);border:1px solid rgba(152,221,106,.4);color:var(--green-300)}
.auth-kicker{font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-400);margin:0 0 var(--sp-3)}
.auth-brand-mid{margin-top:auto;max-width:600px}
.auth-brand-mid h1{font-size:1.875rem;line-height:1.22;letter-spacing:-.03em;margin-bottom:var(--sp-4);color:#fff}
.auth-brand-mid > p{color:#9BAF94;font-size:.9375rem;max-width:540px}
.auth-points{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.auth-points li{display:flex;gap:var(--sp-4);padding:11px var(--sp-4);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);border:1px solid rgba(152,221,106,.13);border-left:2px solid var(--green-500)}
.auth-points em{font-style:normal;font-family:var(--mono);font-size:.6875rem;font-weight:700;color:var(--green-400);
  border:1px solid rgba(152,221,106,.32);border-radius:var(--r-xs);padding:2px 6px;height:fit-content;margin-top:2px}
.auth-points b{display:block;font-size:.875rem;color:#fff}
.auth-points span{display:block;font-size:.78rem;color:#9BAF94}
.auth-brand-foot{margin-top:auto;display:flex;gap:var(--sp-8);border-top:1px solid rgba(152,221,106,.16);padding-top:var(--sp-5);flex-wrap:wrap}
.auth-stat b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums;color:var(--green-300);font-weight:700}
.auth-stat span{font-size:.72rem;color:#9BAF94;letter-spacing:.03em}

.auth-panel{display:grid;place-items:center;padding:var(--sp-8) var(--sp-6);background:var(--bg)}
.auth-card{width:100%;max-width:452px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-8);box-shadow:0 18px 42px rgba(10,14,12,.07)}
.auth-card-mark{display:inline-block;font-size:.65625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-900);background:var(--green-400);padding:4px 9px;border-radius:var(--r-xs);margin-bottom:var(--sp-4)}
.auth-card-head h2{font-size:1.375rem;margin-bottom:4px}
.auth-card-head p{color:var(--text-2);font-size:.8125rem;margin-bottom:var(--sp-6)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:var(--sp-2) 0 var(--sp-5)}
.auth-demo{margin-top:var(--sp-6);border-top:1px solid var(--border);padding-top:var(--sp-5)}
.auth-demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3)}
.auth-demo-head span{font-size:.65625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.auth-demo-head em{font-style:normal;font-size:.72rem;color:var(--text-3)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.demo-btn{display:flex;align-items:center;gap:var(--sp-2);padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);text-align:left;transition:.14s var(--ease)}
.demo-btn:hover{border-color:var(--green-500);background:var(--green-50);transform:translateY(-1px)}
.demo-btn .ico{color:var(--green-600)}
.demo-btn b{display:block;font-size:.78rem;line-height:1.2}
.demo-btn span{display:block;font-size:.68rem;color:var(--text-3)}
.auth-legal{margin-top:var(--sp-5);font-size:.71875rem;color:var(--text-3);line-height:1.55}

/* ------------------------- 6. SHELL & NAVIGATION ------------------------- */
.shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{background:var(--ink-900);color:#B4C4AE;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;
  border-right:1px solid var(--ink-600)}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:14px var(--sp-4) 14px var(--sp-5);
  border-bottom:1px solid rgba(152,221,106,.12)}
.sidebar-brand-text{min-width:0;flex:1}
.sidebar-brand-text strong{display:block;color:#fff;font-size:.8125rem;letter-spacing:-.015em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand-text span{display:block;font-size:.625rem;color:var(--green-400);letter-spacing:.12em;text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .sidebar-close{display:none;margin-left:auto;color:#8FA388}
.nav{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-3) var(--sp-6)}
.nav-group-label{font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6E8363;
  padding:var(--sp-4) var(--sp-3) var(--sp-2)}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);color:#B4C4AE;font-size:.8125rem;
  width:100%;text-align:left;margin-bottom:2px;transition:.13s var(--ease);border-left:2px solid transparent}
.nav-item:hover{background:rgba(152,221,106,.08);color:#fff;text-decoration:none}
.nav-item .ico{color:#7F9279;width:17px;height:17px}
.nav-item.active{background:var(--green-400);color:var(--ink-900);font-weight:700;border-left-color:#fff}
.nav-item.active .ico{color:var(--ink-900)}
.nav-item .nav-count{margin-left:auto;font-family:var(--mono);font-size:.6875rem;font-weight:700;
  background:rgba(255,255,255,.12);color:#DDE9D8;border-radius:var(--r-xs);padding:1px 6px}
.nav-item.active .nav-count{background:rgba(10,14,12,.18);color:var(--ink-900)}
.nav-item .nav-count.hot{background:var(--c-danger);color:#fff}
.sidebar-foot{border-top:1px solid rgba(152,221,106,.12);padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
.sidebar-user b{display:block;color:#fff;font-size:.8125rem;line-height:1.25}
.sidebar-user span{display:block;font-size:.6875rem;color:#86977F}
.btn-ghost{background:rgba(255,255,255,.05);color:#C6D5C0;border:1px solid rgba(152,221,106,.16)}
.btn-ghost:hover{background:rgba(152,221,106,.14);color:#fff;border-color:rgba(152,221,106,.4)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);
  background:var(--ink-900);border-bottom:1px solid var(--ink-600);position:sticky;top:0;z-index:30}
.menu-btn{display:none;color:#B4C4AE}
.crumb h1{font-size:1rem;color:#fff;letter-spacing:-.01em}
.crumb p{font-size:.72rem;color:#86977F;margin:0}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);color:var(--text-2);border:1px solid transparent;transition:.14s}
.icon-btn:hover{background:var(--n-100);color:var(--text)}
.topbar .icon-btn{color:#B4C4AE}
.topbar .icon-btn:hover{background:var(--ink-700);color:#fff}
.icon-btn.ghost{color:inherit}
.gsearch{position:relative;display:flex;align-items:center;gap:8px;background:var(--ink-700);border:1px solid var(--ink-500);
  border-radius:var(--r-sm);padding:0 10px;height:38px;width:310px;color:#7F9279;transition:.14s}
.gsearch:focus-within{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(152,221,106,.16)}
.gsearch input{border:0;background:transparent;outline:0;width:100%;height:100%;font-size:.8125rem;color:#fff}
.gsearch input::placeholder{color:#7F9279}
.gsearch-results{position:absolute;top:46px;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);max-height:390px;overflow:auto;padding:6px;z-index:50}
.gres-group{font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:9px 10px 4px}
.gres{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-sm);color:var(--text)}
.gres:hover{background:var(--green-50)}
.gres .ico{color:var(--green-600)}
.gres b{display:block;font-size:.8125rem}
.gres span{display:block;font-size:.7rem;color:var(--text-3)}
.user-chip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border:1px solid var(--ink-500);border-radius:var(--r-sm);background:var(--ink-700)}
.user-chip b{font-size:.78rem;line-height:1.15;display:block;color:#fff}
.user-chip span{font-size:.65625rem;color:#86977F;display:block;letter-spacing:.08em;text-transform:uppercase}

.content{flex:1;padding:var(--sp-6);min-width:0}
.appfoot{display:flex;justify-content:space-between;gap:var(--sp-4);padding:14px var(--sp-6) 22px;font-size:.71875rem;
  color:var(--text-3);border-top:1px solid var(--border);flex-wrap:wrap}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,14,12,.6);z-index:39}

/* ----------------------------- 6b. COMPONENTS ---------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.card-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-head h3{font-size:.875rem;display:flex;align-items:center;gap:9px}
.card-head h3::before{content:"";width:4px;height:15px;background:var(--green-400);border-radius:1px;flex:none}
.card-head p{font-size:.72rem;color:var(--text-3);margin:0}
.card-head .spacer{flex:1}
.card-body{padding:var(--sp-5)}
.card-body.tight{padding:var(--sp-3)}
.card-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);background:var(--surface-2)}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.stack{display:grid;gap:var(--sp-5)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.row.tight{gap:var(--sp-2)}
.spacer{flex:1}

/* KPI -------------------------------------------------------------------- */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
  position:relative;overflow:hidden;transition:.16s var(--ease)}
.kpi::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--green-400);opacity:.85}
.kpi.ok::before{background:var(--c-ok)} .kpi.warn::before{background:var(--c-warn)} .kpi.danger::before{background:var(--c-danger)}
.kpi.accent::before{background:var(--ink-900)} .kpi.purple::before{background:var(--c-purple)} .kpi.info::before{background:var(--c-info)}
.kpi:hover{border-color:var(--n-200);box-shadow:var(--shadow-2)}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.kpi-label{font-size:.65625rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.kpi-value{font-size:1.5625rem;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin-top:8px;color:var(--text);white-space:nowrap}
.kpi-value small{font-size:.75rem;font-weight:600;color:var(--text-3);letter-spacing:0}
.kpi-foot{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-3);margin-top:8px}
.kpi-icon{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--ink-900);color:var(--green-400)}
.kpi-icon.ok{background:var(--c-ok-soft);color:var(--c-ok)} .kpi-icon.warn{background:var(--c-warn-soft);color:var(--c-warn)}
.kpi-icon.danger{background:var(--c-danger-soft);color:var(--c-danger)} .kpi-icon.accent{background:var(--green-100);color:var(--green-700)}
.kpi-icon.purple{background:var(--c-purple-soft);color:var(--c-purple)} .kpi-icon.info{background:var(--c-info-soft);color:var(--c-info)}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-size:.72rem;padding:1px 6px;border-radius:var(--r-xs)}
.delta.up{background:var(--c-ok-soft);color:var(--c-ok)} .delta.down{background:var(--c-danger-soft);color:var(--c-danger)}
.delta.flat{background:var(--n-100);color:var(--text-2)}
.g-5 .kpi{padding:var(--sp-3) var(--sp-4)}
.g-5 .kpi-value{font-size:1.1875rem;letter-spacing:-.03em}
.g-5 .kpi-icon{width:28px;height:28px}
.g-5 .kpi-icon .ico{width:15px;height:15px}

/* Buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 15px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:.75rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;transition:.14s var(--ease);white-space:nowrap}
.btn:hover{background:var(--n-100);border-color:var(--n-300)}
.btn .ico{width:15px;height:15px}
.btn-primary{background:var(--green-400);border-color:var(--green-500);color:var(--ink-900)}
.btn-primary:hover{background:var(--green-300);border-color:var(--green-400)}
.btn-accent{background:var(--ink-900);border-color:var(--ink-900);color:var(--green-300)}
.btn-accent:hover{background:var(--ink-700);border-color:var(--ink-700);color:var(--green-400)}
.btn-danger{background:var(--surface);border-color:var(--c-danger);color:var(--c-danger)}
.btn-danger:hover{background:var(--c-danger);color:#fff}
.btn-sm{height:29px;padding:0 10px;font-size:.65625rem;letter-spacing:.06em}
.btn-lg{height:46px;font-size:.8125rem;letter-spacing:.09em}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn-group{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.btn-group button{padding:0 12px;height:32px;font-size:.65625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);border-right:1px solid var(--border)}
.btn-group button:last-child{border-right:0}
.btn-group button.active{background:var(--ink-900);color:var(--green-300)}
.btn-group button:hover{background:var(--n-100)}
.btn-group button.active:hover{background:var(--ink-700)}

/* Badges & chips --------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-xs);font-size:.65625rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.badge .dot{width:5px;height:5px;border-radius:1px;background:currentColor}
.badge.neutral{background:var(--n-100);color:var(--n-600)}
.badge.ok{background:var(--c-ok-soft);color:var(--c-ok)}
.badge.warn{background:var(--c-warn-soft);color:var(--c-warn)}
.badge.danger{background:var(--c-danger-soft);color:var(--c-danger)}
.badge.info{background:var(--c-info-soft);color:var(--c-info)}
.badge.primary{background:var(--green-100);color:var(--green-800)}
.badge.accent{background:var(--ink-900);color:var(--green-300)}
.badge.purple{background:var(--c-purple-soft);color:var(--c-purple)}
.badge.outline{background:transparent;border-color:var(--border-strong);color:var(--text-2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface-2);font-size:.75rem}
.tag{font-family:var(--mono);font-size:.7rem;background:var(--n-100);border:1px solid var(--border);padding:1px 6px;
  border-radius:var(--r-xs);color:var(--text-2)}

/* Avatars ---------------------------------------------------------------- */
.avatar{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:.72rem;font-weight:700;
  color:var(--green-300);background:var(--ink-900);flex:none;letter-spacing:.03em}
.avatar.sm{width:26px;height:26px;font-size:.66rem}
.avatar.lg{width:46px;height:46px;font-size:.9375rem}
.avatar.grey{background:linear-gradient(140deg,#5A6B58,#333D31);color:#EAF2E7}

/* Tables ----------------------------------------------------------------- */
.table-wrap{overflow:auto;border-top:1px solid var(--border)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.8125rem}
.tbl th{position:sticky;top:0;background:var(--ink-900);text-align:left;font-size:.625rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-300);padding:10px 14px;border-bottom:1px solid var(--ink-600);white-space:nowrap;z-index:1}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:nth-child(even) td{background:var(--n-25)}
.tbl tbody tr:hover td{background:var(--green-50)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.78rem}
.tbl .actions{text-align:right;white-space:nowrap}
.tbl.compact td{padding:8px 12px} .tbl.compact th{padding:8px 12px}
.tbl .cell-main{font-weight:640}
.tbl .cell-sub{display:block;font-size:.72rem;color:var(--text-3)}
/* keep codes, money, badges and secondary lines on one line so columns stay scannable */
.tbl .num,.tbl .mono,.tbl .cell-sub,.tbl td.actions,.tbl td .badge{white-space:nowrap}
.tbl.compact .cell-sub{font-size:.7rem}
.tbl tfoot td{background:var(--green-50);font-weight:700;border-top:2px solid var(--ink-900)}
.tbl tr.group-row td{background:var(--green-100);font-weight:700;color:var(--green-800)}
.tbl .actions .icon-btn{display:inline-grid;vertical-align:middle}
.link-cell{color:var(--c-link);font-weight:640;text-decoration:none;background:none;border:0;padding:0;text-align:left;font-size:inherit}
.link-cell:hover{text-decoration:underline;color:var(--green-800)}
button.tile{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cell-sub{display:block;font-size:.72rem;color:var(--text-3);line-height:1.4}
.list-plain li .cell-sub{margin-top:2px}

/* Forms ------------------------------------------------------------------ */
.field{display:block;margin-bottom:var(--sp-4)}
.field-label{display:block;font-size:.65625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.field-label .req{color:var(--c-danger)}
.field-hint{display:block;font-size:.71rem;color:var(--text-3);margin-top:5px}
.field-input{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);padding:0 11px;height:38px;transition:.14s;color:var(--text-3)}
.field-input:focus-within{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(152,221,106,.2);color:var(--green-700)}
.field-input input,.field-input select,.field-input textarea{border:0;outline:0;background:transparent;width:100%;height:100%;color:var(--text);font-size:.8125rem}
.field-input textarea{height:auto;padding:9px 0;resize:vertical;min-height:76px;line-height:1.5}
.field-input.invalid{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-soft)}
.field-input.plain{padding:0}
.field-trail{font-size:.65625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);padding:3px 5px;border-radius:var(--r-xs)}
.field-trail:hover{background:var(--green-50)}
select.select{height:38px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);padding:0 10px;font-size:.8125rem;width:100%}
select.select:focus{outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(152,221,106,.2)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-5)}
.form-grid .span-2{grid-column:span 2}
.check{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--green-500)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.8125rem}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:20px;border-radius:2px;background:var(--n-300);position:relative;transition:.2s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:1px;background:#fff;transition:.2s}
.switch input:checked + .track{background:var(--green-500)}
.switch input:checked + .track::after{transform:translateX(18px)}

.filters{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.filters .field{margin:0;min-width:150px}
.filters .field.grow{flex:1;min-width:220px}
.filters .field-input,.filters select.select{height:36px;background:var(--surface)}
.search-inline{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);padding:0 10px;height:36px;min-width:230px}
.search-inline .ico{color:var(--text-3)}
.search-inline input{border:0;outline:0;background:transparent;width:100%;font-size:.8125rem}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border);flex-wrap:wrap}
.pager-info{font-size:.72rem;color:var(--text-3);letter-spacing:.03em}
.pager-btns{display:flex;gap:4px;align-items:center}
.pager-btns button{min-width:30px;height:30px;border-radius:var(--r-xs);font-family:var(--mono);font-size:.75rem;font-weight:700;
  color:var(--text-2);border:1px solid var(--border)}
.pager-btns button:hover{background:var(--n-100)}
.pager-btns button.active{background:var(--ink-900);border-color:var(--ink-900);color:var(--green-300)}

/* Alerts & toasts -------------------------------------------------------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-sm);font-size:.8125rem;
  border:1px solid transparent;border-left-width:3px;margin-bottom:var(--sp-4)}
.alert-danger{background:var(--c-danger-soft);color:var(--c-danger);border-color:rgba(200,64,47,.22);border-left-color:var(--c-danger)}
.alert-warn{background:var(--c-warn-soft);color:var(--c-warn);border-color:rgba(192,124,24,.22);border-left-color:var(--c-warn)}
.alert-info{background:var(--c-info-soft);color:var(--c-info);border-color:rgba(62,111,217,.2);border-left-color:var(--c-info)}
.alert-ok{background:var(--c-ok-soft);color:var(--c-ok);border-color:rgba(47,158,104,.22);border-left-color:var(--c-ok)}
.alert b{font-weight:700}
.toasts{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:80;max-width:390px}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--green-500);
  border-radius:var(--r-sm);box-shadow:var(--shadow-3);padding:12px 14px;animation:toastIn .26s var(--ease)}
.toast .ico{color:var(--green-600);margin-top:1px}
.toast.ok{border-left-color:var(--c-ok)} .toast.ok .ico{color:var(--c-ok)}
.toast.warn{border-left-color:var(--c-warn)} .toast.warn .ico{color:var(--c-warn)}
.toast.danger{border-left-color:var(--c-danger)} .toast.danger .ico{color:var(--c-danger)}
.toast b{display:block;font-size:.8125rem}
.toast span{display:block;font-size:.75rem;color:var(--text-2)}
.toast .tclose{margin-left:auto;color:var(--text-3);width:26px;height:26px}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Modal & drawer --------------------------------------------------------- */
.modal-scrim{position:fixed;inset:0;background:rgba(10,14,12,.62);z-index:60;display:grid;place-items:center;padding:var(--sp-5);animation:fade .16s var(--ease)}
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);width:100%;max-width:660px;max-height:88vh;
  display:flex;flex-direction:column;border:1px solid var(--border);overflow:hidden;animation:modalIn .2s var(--ease)}
.modal.wide{max-width:920px} .modal.xwide{max-width:1140px} .modal.narrow{max-width:440px}
@keyframes modalIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-head{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-5);border-bottom:2px solid var(--ink-900)}
.modal-head h3{font-size:1rem}
.modal-head h3::before{content:"";display:inline-block;width:4px;height:14px;background:var(--green-400);margin-right:9px;border-radius:1px;vertical-align:-2px}
.modal-head p{font-size:.78rem;color:var(--text-3);margin:4px 0 0}
.modal-head .tclose{margin-left:auto;color:var(--text-3)}
.modal-body{padding:var(--sp-5);overflow:auto;flex:1}
.modal-foot{display:flex;gap:var(--sp-3);justify-content:flex-end;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);
  background:var(--surface-2);flex-wrap:wrap}
.drawer-scrim{position:fixed;inset:0;background:rgba(10,14,12,.5);z-index:60;animation:fade .16s var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,94vw);background:var(--surface);border-left:1px solid var(--border);z-index:61;
  box-shadow:var(--shadow-3);display:flex;flex-direction:column;animation:drawerIn .24s var(--ease)}
@keyframes drawerIn{from{transform:translateX(20px);opacity:.4}to{transform:none;opacity:1}}

/* Tabs, progress, timeline ----------------------------------------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 var(--sp-5);overflow-x:auto;background:var(--surface)}
.tabs button{padding:12px 14px;font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
  border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--text);border-bottom-color:var(--green-400)}
.tabs .tab-count{font-family:var(--mono);font-size:.66rem;background:var(--n-100);border-radius:var(--r-xs);padding:1px 5px;margin-left:6px}
.tabs button.active .tab-count{background:var(--green-400);color:var(--ink-900)}
.progress{height:6px;border-radius:1px;background:var(--n-150);overflow:hidden}
.progress span{display:block;height:100%;border-radius:1px;background:var(--green-500);transition:width .5s var(--ease)}
.progress.ok span{background:var(--c-ok)} .progress.warn span{background:var(--c-warn)} .progress.danger span{background:var(--c-danger)}
.progress.accent span{background:var(--ink-900)}
.meter{display:grid;gap:6px}
.meter-top{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-2)}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:1px;background:var(--border-strong)}
.tl-item{position:relative;padding-bottom:var(--sp-5)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:4px;width:9px;height:9px;background:var(--surface);border:2px solid var(--n-300)}
.tl-item.done::before{background:var(--green-500);border-color:var(--green-500)}
.tl-item.now::before{background:var(--ink-900);border-color:var(--ink-900);box-shadow:0 0 0 4px var(--green-100)}
.tl-item b{display:block;font-size:.8125rem}
.tl-item span{display:block;font-size:.72rem;color:var(--text-3)}
.tl-item p{font-size:.78rem;color:var(--text-2);margin:4px 0 0}

/* Miscellaneous ---------------------------------------------------------- */
.empty{display:grid;place-items:center;gap:8px;padding:var(--sp-10) var(--sp-5);text-align:center;color:var(--text-3)}
.empty svg{width:32px;height:32px;stroke-width:1.3;color:var(--n-300)}
.empty b{color:var(--text);font-size:.875rem}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:10px 0;border-bottom:1px solid var(--border);font-size:.8125rem}
.list-plain li:last-child{border-bottom:0}
.section-title{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-4)}
.section-title h2{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.section-title .spacer{flex:1}
.section-title:first-child{margin-top:0}
.hero{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);border-radius:var(--r-lg);color:#fff;
  flex-wrap:wrap;border-left:5px solid var(--green-400);
  background:linear-gradient(96deg,var(--ink-900) 0%,var(--ink-700) 62%,#1B2A22 100%)}
.hero h2{font-size:1.25rem;letter-spacing:-.025em}
.hero p{color:#9BAF94;font-size:.8125rem;max-width:680px;margin:6px 0 0}
.hero .hero-actions{margin-left:auto;display:flex;gap:var(--sp-3);flex-wrap:wrap}
.pill-stat{display:flex;flex-direction:column;gap:2px;background:rgba(152,221,106,.1);border:1px solid rgba(152,221,106,.26);
  border-radius:var(--r-sm);padding:9px 14px}
.pill-stat b{font-size:1.0625rem;font-variant-numeric:tabular-nums;color:var(--green-300)}
.pill-stat span{font-size:.68rem;color:#9BAF94}
.kv{display:grid;grid-template-columns:160px minmax(0,1fr);gap:9px var(--sp-4);font-size:.8125rem}
.kv dt{color:var(--text-3);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase}
.kv dd{margin:0;font-weight:560}
code.code{font-family:var(--mono);font-size:.75rem;background:var(--n-100);padding:2px 5px;border-radius:var(--r-xs)}
.split-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-3)}
.tile{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);background:var(--surface);transition:.16s var(--ease)}
.tile:hover{border-color:var(--green-500);box-shadow:var(--shadow-2);transform:translateY(-1px);background:var(--green-50)}
.tile .tile-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tile .tile-top .ico{color:var(--green-600)}
.tile b{font-size:.875rem}
.tile .tile-meta{font-size:.72rem;color:var(--text-3)}
.crumbs{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--text-3);margin-bottom:var(--sp-4);flex-wrap:wrap;
  text-transform:uppercase;letter-spacing:.08em}
.crumbs button{color:var(--green-700);font-size:inherit;font-weight:700;letter-spacing:inherit}
.crumbs .sep{color:var(--n-300)}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:.75rem;color:var(--text-2)}
.legend i{width:9px;height:9px;border-radius:1px;display:inline-block;margin-right:6px}
.legend-item{display:inline-flex;align-items:center}
.data-strip{display:flex;gap:0;flex-wrap:wrap;padding:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);overflow:hidden}
.data-strip div{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--border);min-width:140px}
.data-strip div b{display:block;font-size:1.0625rem;font-variant-numeric:tabular-nums;font-weight:700}
.data-strip div span{font-size:.65625rem;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase}
.sla-bar{display:flex;height:6px;border-radius:1px;overflow:hidden;background:var(--n-150);width:110px}
.sla-bar i{display:block;height:100%}

/* ------------------- 7. CONSOLE SURFACES (DASHBOARD BAND) ---------------- */
.kpi-console{background:linear-gradient(135deg,var(--ink-900),var(--ink-700) 70%,#18251D);
  border:1px solid var(--ink-500);border-radius:var(--r-lg);padding:var(--sp-4);gap:2px}
.kpi-console .kpi{background:transparent;border:0;border-left:1px solid rgba(152,221,106,.16);border-radius:0;
  padding:10px var(--sp-5);box-shadow:none}
.kpi-console .kpi:nth-child(4n+1){border-left:0;padding-left:var(--sp-4)}
.kpi-console .kpi:nth-child(n+5){border-top:1px solid rgba(152,221,106,.16)}
.kpi-console .kpi::before{display:none}
.kpi-console .kpi:hover{background:rgba(152,221,106,.05)}
.kpi-console .kpi-label{color:#86977F}
.kpi-console .kpi-value{color:#fff}
.kpi-console .kpi-value small{color:#86977F}
.kpi-console .kpi-foot{color:#9BAF94}
.kpi-console .kpi-icon{background:rgba(152,221,106,.14);color:var(--green-400)}
.kpi-console .delta.up{background:rgba(47,158,104,.22);color:#6FE0A6}
.kpi-console .delta.down{background:rgba(200,64,47,.22);color:#F0958A}
.kpi-console .delta.flat{background:rgba(255,255,255,.1);color:#C6D5C0}
[data-theme="dark"] .kpi-console{background:linear-gradient(135deg,#0C120F,#131A17)}

/* --------------------------- 8. MAINTENANCE BOARD ------------------------ */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);overflow-x:auto;align-items:start}
.board-col{background:var(--n-50);border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column;min-height:180px;transition:.15s var(--ease)}
.board-col.over{border-color:var(--green-500);box-shadow:0 0 0 3px rgba(152,221,106,.22)}
.board-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;
  background:var(--ink-900);border-radius:var(--r-md) var(--r-md) 0 0}
.board-col-head b{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-300)}
.board-col-head .badge{background:rgba(152,221,106,.16);color:var(--green-300)}
.board-col-body{padding:10px;display:grid;gap:8px;max-height:560px;overflow-y:auto}
.wo-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--n-200);border-radius:var(--r-sm);
  padding:10px 11px;cursor:grab;transition:.15s var(--ease)}
.wo-card:hover{border-color:var(--green-500);border-left-color:var(--green-500);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.wo-card.dragging{opacity:.45;transform:rotate(1deg)}
.wo-card b{display:block;font-size:.8125rem;margin:6px 0 3px;line-height:1.35}
.board-empty{padding:14px 4px;text-align:center;color:var(--text-3);font-size:.75rem}

/* Portal banner ---------------------------------------------------------- */
.portal-banner{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);
  background:linear-gradient(100deg,var(--green-50),var(--surface) 70%);border:1px solid var(--border);
  border-left:4px solid var(--green-400);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.portal-banner h2{font-size:1.0625rem}
.portal-banner p{font-size:.78rem;color:var(--text-2);margin:2px 0 0}

/* ------------------------------- 9. CHARTS ------------------------------- */
.chart{position:relative;width:100%}
.chart canvas{display:block;width:100%}
.chart-h180{height:180px} .chart-h220{height:220px} .chart-h260{height:260px} .chart-h300{height:300px} .chart-h340{height:340px}
.chart-tip{position:absolute;pointer-events:none;background:var(--ink-900);color:#fff;border-radius:var(--r-sm);padding:8px 10px;font-size:.72rem;
  box-shadow:var(--shadow-3);z-index:5;white-space:nowrap;transform:translate(-50%,-115%);opacity:0;transition:opacity .12s;
  border-left:2px solid var(--green-400)}
.chart-tip.on{opacity:1}
.chart-tip b{display:block;font-size:.75rem;margin-bottom:3px;color:var(--green-300)}
.chart-tip .tipline{display:flex;justify-content:space-between;gap:12px}
.chart-tip i{width:8px;height:8px;border-radius:1px;display:inline-block;margin-right:6px}
.spark{display:block;width:100%;height:34px}
.gauge-wrap{display:flex;align-items:center;gap:var(--sp-5)}
.gauge{position:relative;width:132px;height:132px;flex:none}
.gauge-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge-center b{display:block;font-size:1.375rem;font-variant-numeric:tabular-nums}
.gauge-center span{display:block;font-size:.68rem;color:var(--text-3)}

/* --------------------- 10. CUSTOMER PORTAL (LIGHT RAIL) ------------------ */
body.portal .sidebar{background:linear-gradient(180deg,#FFFFFF,#F3F9EC);border-right:1px solid var(--n-200)}
body.portal .sidebar-brand{border-bottom-color:var(--n-150)}
body.portal .sidebar-brand-text strong{color:var(--text)}
body.portal .sidebar-brand-text span{color:var(--green-700)}
body.portal .nav-group-label{color:var(--green-700)}
body.portal .nav-item{color:var(--n-600)}
body.portal .nav-item .ico{color:var(--green-600)}
body.portal .nav-item:hover{background:var(--green-50);color:var(--text)}
body.portal .nav-item.active{background:var(--green-400);color:var(--ink-900);border-left-color:var(--ink-900)}
body.portal .nav-item.active .ico{color:var(--ink-900)}
body.portal .nav-item .nav-count{background:var(--n-150);color:var(--text-2)}
body.portal .nav-item .nav-count.hot{background:var(--c-danger);color:#fff}
body.portal .nav-item.active .nav-count{background:rgba(10,14,12,.18);color:var(--ink-900)}
body.portal .sidebar-foot{border-top-color:var(--n-150)}
body.portal .sidebar-user b{color:var(--text)}
body.portal .sidebar-user span{color:var(--text-3)}
body.portal .btn-ghost{background:var(--surface);color:var(--text-2);border-color:var(--n-200)}
body.portal .btn-ghost:hover{background:var(--green-50);color:var(--text);border-color:var(--green-500)}
[data-theme="dark"] body.portal .sidebar{background:linear-gradient(180deg,#0F1512,#0C1210)}
[data-theme="dark"] body.portal .sidebar-brand-text strong{color:var(--text)}
[data-theme="dark"] body.portal .nav-item{color:#A7B6A2}

/* ------------------- 11. RESPONSIVE & PRINT ----------------------------- */
@media (max-width:1400px){
  :root{--sidebar-w:250px}
  .g-5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1280px){
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-console .kpi:nth-child(2n+1){border-left:0;padding-left:var(--sp-4)}
  .kpi-console .kpi:nth-child(n+3){border-top:1px solid rgba(152,221,106,.16)}
}
@media (max-width:1080px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .g-3,.g-2-1,.g-1-2,.g-3-2{grid-template-columns:1fr}
  .gsearch{width:210px}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);transform:translateX(-102%);transition:transform .24s var(--ease);height:100vh}
  .sidebar.open{transform:none;box-shadow:var(--shadow-3)}
  .sidebar .sidebar-close{display:grid}
  .menu-btn{display:grid}
  .scrim.on{display:block}
  .content{padding:var(--sp-4)}
  .topbar{padding:0 var(--sp-4)}
  .gsearch{display:none}
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:span 1}
  .kv{grid-template-columns:1fr;gap:2px var(--sp-4)}
  .kv dt{margin-top:6px}
  .kpi-console .kpi{border-left:0;border-top:1px solid rgba(152,221,106,.16);padding-left:var(--sp-3)}
  .kpi-console .kpi:first-child{border-top:0;padding-top:10px}
  .data-strip div{border-right:0;border-bottom:1px solid var(--border);flex:1 1 45%}
  .auth-card{padding:var(--sp-5)}
}
@media print{
  .sidebar,.topbar,.appfoot,.toasts,.card-head .btn,.filters,.pager,.hero-actions,.brand-rail{display:none !important}
  .shell{grid-template-columns:1fr} .content{padding:0}
  .card{box-shadow:none;border-color:#bbb;break-inside:avoid}
  .tbl th{background:#fff;color:#000;border-bottom:1px solid #666}
  .tbl tbody tr:nth-child(even) td{background:#fff}
  .kpi-console{background:#fff;border-color:#bbb}
  .kpi-console .kpi-value,.kpi-console .kpi-label,.kpi-console .kpi-foot{color:#000}
  body{background:#fff}
}

/* helpdesk notifications (FR-PRT-09) */
.notif-btn { position: relative; }
.notif-dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #98DD6A; color: #0A0E0C; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-dot[hidden] { display: none; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { padding: 10px 0; border-bottom: 1px solid var(--line, #e5e7e6); }
.notif-list li.unread b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #98DD6A; margin-right: 6px; }