/* Sottozero Design System v1.0 — mapped from brand-tokens.css */
:root{
  --sz-primary:#0A4FD1; --sz-primary-soft:#EAF1FC; --sz-primary-dark:#0034A8;
  --sz-accent-orange:#FF5C1F;
  --sz-ink:#0B0E13; --sz-ink-2:#232730; --sz-muted:#5B616B; --sz-muted-2:#9CA0A8;
  --sz-line:#EAEAEF; --sz-line-2:#F3F3F6; --sz-bg:#F7F7F9; --sz-white:#FFFFFF;
  --sz-good:#0F9E66; --sz-good-soft:rgba(15,158,102,.10);
  --sz-bad:#C9302E; --sz-bad-soft:rgba(201,48,46,.10);
  --sz-warn:#B27310; --sz-warn-soft:rgba(178,115,16,.10);
  --sz-shadow-xs:0 1px 2px rgba(15,18,28,.04);
  --sz-shadow:0 1px 2px rgba(15,18,28,.04),0 12px 36px rgba(15,18,28,.04);
  --sz-shadow-lg:0 1px 2px rgba(15,18,28,.04),0 28px 72px rgba(15,18,28,.10);
  --sz-radius-sm:10px; --sz-radius:14px; --sz-radius-pill:999px;
  --sz-font-head:"Boston Black","Inter",system-ui,Arial,sans-serif;
  --sz-font-subhead:"Boston Bold","Inter",system-ui,Arial,sans-serif;
  --sz-font-body:"Boston Regular","Inter",system-ui,Arial,sans-serif;
  /* legacy aliases used across the app */
  --blue:var(--sz-primary); --blue-dark:var(--sz-primary-dark); --blue-light:var(--sz-primary-soft);
  --sky:var(--sz-primary); --ink:var(--sz-ink); --muted:var(--sz-muted); --bg:var(--sz-bg);
  --card:var(--sz-white); --line:var(--sz-line); --green:var(--sz-good); --red:var(--sz-bad);
  --amber:var(--sz-warn); --pink:var(--sz-accent-orange);
  --radius:var(--sz-radius); --shadow:var(--sz-shadow-xs);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sz-font-body);background:var(--sz-bg);color:var(--sz-ink);font-size:14px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--sz-line);border-radius:var(--sz-radius-sm);background:#fff;color:var(--sz-ink);outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--sz-primary);box-shadow:0 0 0 3px var(--sz-primary-soft)}
input::placeholder{color:var(--sz-muted-2)}
label{font-size:12px;font-weight:600;color:var(--sz-muted);display:block;margin:10px 0 4px}
h1{font-size:24px;font-family:var(--sz-font-head);color:var(--sz-ink-2);letter-spacing:-.4px}
h2{font-size:18px;font-family:var(--sz-font-head);color:var(--sz-ink-2)}
h3{font-size:15px;font-family:var(--sz-font-subhead);color:var(--sz-ink-2)}
a{color:var(--sz-primary)}

/* login */
#login-screen{position:fixed;inset:0;background:linear-gradient(150deg,var(--sz-primary-dark) 0%,var(--sz-primary) 70%);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.login-card{background:#fff;border-radius:22px;padding:38px 34px;max-width:430px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login-logo-img{width:82%;max-width:300px;margin:8px auto 0;display:block}
.login-note{font-size:13px;color:var(--muted);margin:18px 0 14px}
.login-users{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}
.login-user{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:.15s}
.login-user:hover{border-color:var(--sky);background:var(--blue-light)}
.login-user b{font-size:13px}
.login-foot{margin-top:18px;font-size:11px;color:var(--muted)}

/* layout */
#app{display:flex;min-height:100vh}
#sidebar{width:225px;background:var(--blue-dark);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:20}
.side-brand{display:flex;gap:8px;align-items:baseline;padding:22px 16px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.side-logo-img{width:150px;filter:brightness(0) invert(1)}   /* white wordmark on brand blue */
.side-brand small{opacity:.65;font-size:10px;letter-spacing:3px;color:#fff}
#nav{flex:1;padding:12px 10px;overflow:auto}
.nav-item{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:#cdd9f2;font-size:13px;font-weight:500;margin-bottom:2px;border:none;background:none;width:100%;text-align:left}
.nav-item svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:var(--sz-white);color:var(--sz-primary);font-weight:700}
.side-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#fff}
#side-user-name{font-weight:700}
#side-user-role{opacity:.7;font-size:11px;margin:2px 0 10px;text-transform:capitalize}
.side-user .btn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);width:100%}
.side-user .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
#main{flex:1;margin-left:225px;min-width:0}
#topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}
#burger{display:none;background:none;border:none;font-size:20px}
#global-search-wrap{position:relative;flex:1;max-width:460px}
#global-search-results{position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none;max-height:320px;overflow:auto;z-index:30}
.gsr-item{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.gsr-item:hover{background:var(--blue-light)}
#view{padding:24px;max-width:1280px}

/* cards & grids */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .v{font-size:22px;font-weight:800;color:var(--blue)}
.kpi .l{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.kpi .s{font-size:10px;color:var(--muted)}
.kpi.warn .v{color:var(--amber)} .kpi.bad .v{color:var(--red)} .kpi.good .v{color:var(--green)}
.kpi{border:1px solid var(--sz-line)}
.card{background:var(--card);border:1px solid var(--sz-line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px;transition:box-shadow .15s}
.card:hover{box-shadow:var(--sz-shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.card h3{margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.mt{margin-top:12px}

/* table */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--blue-light)}
.table-wrap{overflow:auto}

/* misc ui */
.btn{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;transition:.15s}
.btn:hover{background:var(--blue-dark)}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--blue-light)}
.btn.danger{background:var(--red)}
.btn.small{padding:6px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chip{display:inline-block;padding:2px 9px;border-radius:var(--sz-radius-pill);font-size:10.5px;font-weight:600;background:var(--sz-primary-soft);color:var(--sz-primary);margin:1px 2px}
.chip.green{background:var(--sz-good-soft);color:var(--sz-good)} .chip.red{background:var(--sz-bad-soft);color:var(--sz-bad)}
.chip.amber{background:var(--sz-warn-soft);color:var(--sz-warn)} .chip.grey{background:var(--sz-line-2);color:var(--sz-muted)}
.chip.pink{background:rgba(255,92,31,.10);color:var(--sz-accent-orange)}
.pill-filter{padding:6px 13px;border-radius:var(--sz-radius-pill);border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;color:var(--muted)}
.pill-filter.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.empty{padding:30px;text-align:center;color:var(--muted)}
.muted{color:var(--muted);font-size:12px}
.big-num{font-size:26px;font-weight:800;color:var(--blue)}
.progress{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--sky)}
.avatar{width:34px;height:34px;border-radius:var(--sz-radius-pill);background:var(--sz-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}

/* drawer */
#drawer-overlay,#modal-overlay{position:fixed;inset:0;background:rgba(7,42,102,.45);z-index:38;display:none}
#drawer{position:fixed;top:0;right:-620px;width:600px;max-width:96vw;bottom:0;background:#fff;z-index:40;box-shadow:-10px 0 40px rgba(0,0,0,.2);transition:right .25s;overflow:auto;padding:24px}
#drawer.open{right:0}
#modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);background:#fff;border-radius:18px;z-index:42;width:640px;max-width:94vw;max-height:88vh;overflow:auto;padding:24px;display:none;box-shadow:0 30px 90px rgba(0,0,0,.4)}
#modal.open{display:block;transform:translate(-50%,-50%) scale(1)}
.drawer-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:14px 0}
.tab{padding:8px 14px;border:none;background:none;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;display:none;z-index:60;box-shadow:var(--shadow)}

/* AI chat */
.ai-wrap{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:420px}
.ai-msgs{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.ai-msg{max-width:82%;padding:12px 15px;border-radius:16px;font-size:13px;line-height:1.55;white-space:pre-wrap}
.ai-msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.ai-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;box-shadow:var(--shadow)}
.ai-msg.bot table{margin-top:8px;font-size:12px}
.ai-suggestions{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.ai-input{display:flex;gap:8px;margin-top:10px}

/* import */
.dropzone{border:2px dashed var(--sky);border-radius:16px;padding:40px;text-align:center;color:var(--muted);background:var(--blue-light);cursor:pointer;transition:.2s}
.dropzone.drag{background:#d3e8ff;border-color:var(--blue)}
.map-row{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;align-items:center;margin-bottom:6px}

@media(max-width:920px){
  #sidebar{left:-235px;transition:left .25s}
  body.nav-open #sidebar{left:0}
  #main{margin-left:0}
  #burger{display:block}
  .grid2,.grid3{grid-template-columns:1fr}
  #view{padding:14px}
  #drawer{width:100vw}
}
@media(max-width:640px){
  input,select,textarea{font-size:16px}         /* prevent iOS auto-zoom */
  .btn{min-height:44px}                          /* touch target minimum */
  .btn:hover{background:var(--sz-primary)}
  .btn:active{transform:scale(.97)}
  .row{flex-direction:column;align-items:stretch}
  .row.spread{flex-direction:row}
}