:root{
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --surface-2:#ECEEF2;
  --border:#DCE0E6;
  --text:#1A2029;
  --text-muted:#5C6673;
  --accent:#2B5CAD;
  --accent-2:#1F4585;
  --accent-contrast:#FFFFFF;
  --warn:#B4780B;
  --warn-bg:#FBF0DC;
  --danger:#B3261E;
  --danger-bg:#FBE4E1;
  --good:#2E7D46;
  --good-bg:#E3F1E7;
  --shadow:0 1px 2px rgba(20,25,35,.06), 0 8px 24px -12px rgba(20,25,35,.18);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12151B; --surface:#181C24; --surface-2:#1F2430; --border:#2B3140;
    --text:#E7E9EE; --text-muted:#9AA3B2; --accent:#7FADEE; --accent-2:#9EC0F4;
    --accent-contrast:#0E1116; --warn:#E7B155; --warn-bg:#3A2E13;
    --danger:#E88B85; --danger-bg:#3A1D1B; --good:#7FCC9A; --good-bg:#173323;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#12151B; --surface:#181C24; --surface-2:#1F2430; --border:#2B3140;
  --text:#E7E9EE; --text-muted:#9AA3B2; --accent:#7FADEE; --accent-2:#9EC0F4;
  --accent-contrast:#0E1116; --warn:#E7B155; --warn-bg:#3A2E13;
  --danger:#E88B85; --danger-bg:#3A1D1B; --good:#7FCC9A; --good-bg:#173323;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Barlow Semi Condensed", ui-sans-serif, system-ui, sans-serif;
  font-weight:700; letter-spacing:.01em; margin:0;
}
.num{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
button{font:inherit;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
[hidden]{display:none !important;}

/* ---------- login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:32px 28px;
}
.login-card .brand{display:block; text-align:center; margin-bottom:22px;}
.login-card .brand .eyebrow{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block;
}
.login-card .brand h1{font-size:22px; margin-top:2px;}
.login-error{
  background:var(--danger-bg); color:var(--danger); border-radius:8px; padding:9px 12px;
  font-size:12.5px; margin-bottom:14px; display:none;
}
.login-error.show{display:block;}
.login-hint{
  text-align:center; color:var(--text-muted); font-size:12px; margin-top:18px; line-height:1.5;
}

/* ---------- app shell ---------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border);
  padding:14px clamp(14px,3vw,32px); display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand h1{font-size:22px;}
.eyebrow{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.topbar-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.stat-row{display:flex; gap:10px; flex-wrap:wrap;}
.stat-tile{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:7px 14px; min-width:96px;}
.stat-tile .stat-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}
.stat-tile .stat-value{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:19px; font-weight:500; margin-top:1px;}
.stat-tile.tone-danger .stat-value{color:var(--danger);}
.stat-tile.tone-good .stat-value{color:var(--good);}

.user-menu{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-muted);}
.user-menu .who{color:var(--text); font-weight:600;}
.role-pill{
  display:inline-block; padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; background:var(--surface-2); border:1px solid var(--border);
}
.role-pill.role-admin{background:var(--accent); color:var(--accent-contrast); border-color:var(--accent);}
.role-pill.role-purchaser{background:var(--good-bg); color:var(--good);}

.live-dot{width:7px; height:7px; border-radius:50%; background:var(--good); display:inline-block; margin-right:5px;}
.live-dot.offline{background:var(--text-muted);}

.tabbar{
  position:sticky; top:65px; z-index:19; background:var(--bg); border-bottom:1px solid var(--border);
  padding:10px clamp(14px,3vw,32px); display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.tabs{display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px;}
.tab-btn{border:none; background:transparent; padding:7px 16px; border-radius:999px; cursor:pointer; font-weight:500; color:var(--text-muted);}
.tab-btn.active{background:var(--accent); color:var(--accent-contrast);}
.tab-btn:not(.active):hover{color:var(--text);}

.btn{border-radius:8px; border:1px solid transparent; padding:8px 16px; cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.btn-primary{background:var(--accent); color:var(--accent-contrast);}
.btn-primary:hover{background:var(--accent-2);}
.btn-primary:disabled{opacity:.55; cursor:not-allowed;}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-danger{background:transparent; border-color:var(--danger); color:var(--danger);}
.btn-danger:hover{background:var(--danger-bg);}
.btn-block{width:100%; justify-content:center;}
.btn-sm{padding:5px 11px; font-size:12.5px; border-radius:7px;}
.link-btn{background:none; border:none; color:var(--text-muted); text-decoration:underline; cursor:pointer; padding:0; font-size:12.5px;}
.link-btn:hover{color:var(--danger);}
.link-btn.confirming{color:var(--danger); font-weight:600; text-decoration:none;}
.icon-btn{background:none; border:none; font-size:20px; line-height:1; cursor:pointer; color:var(--text-muted); padding:4px;}
.icon-btn:hover{color:var(--text);}

main{padding:20px clamp(14px,3vw,32px) 60px; flex:1;}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.panel-head h2{font-size:19px;}
.search-input{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:7px 12px; min-width:220px;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; min-width:720px;}
thead th{
  text-align:left; font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; text-transform:uppercase;
  font-size:11px; letter-spacing:.06em; color:var(--text-muted); background:var(--surface-2);
  padding:9px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.cell-material{font-weight:600;}
.cell-sub{color:var(--text-muted); font-size:12px; margin-top:2px;}
.cell-notes{max-width:220px; color:var(--text-muted); font-size:12.5px;}
.actions-cell{display:flex; flex-direction:column; align-items:flex-start; gap:6px; white-space:nowrap;}

.pill{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.02em;}
.pill-danger{background:var(--danger-bg); color:var(--danger);}
.pill-warn{background:var(--warn-bg); color:var(--warn);}
.pill-good{background:var(--good-bg); color:var(--good);}
.pill-muted{background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}

.empty-state{padding:48px 20px; text-align:center; color:var(--text-muted);}
.empty-state h3{color:var(--text); font-size:18px; margin-bottom:6px;}

.banner{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:13px; font-weight:500;}
.banner.banner-danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger);}

.overlay{position:fixed; inset:0; background:rgba(15,18,24,.45); z-index:29;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--surface);
  border-left:1px solid var(--border); box-shadow:var(--shadow); z-index:30;
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border);}
.drawer-head h2{font-size:20px;}
.drawer-form{padding:18px 20px; display:flex; flex-direction:column; gap:14px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12px; font-weight:600; color:var(--text-muted);}
.field input,.field select,.field textarea{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:9px 11px; width:100%;}
.field textarea{resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.checkbox-field{justify-content:center;}
.checkbox-field label{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); font-weight:500;}
.checkbox-field input{width:auto;}
.hint{font-size:12.5px; color:var(--text-muted); background:var(--surface-2); border-radius:8px; padding:9px 11px; min-height:0;}
.hint:empty{display:none;}
.drawer-actions{display:flex; justify-content:flex-end; gap:10px; padding-top:16px; border-top:1px solid var(--border); margin-top:4px;}
.order-summary{padding:16px 20px 0; font-size:13px; color:var(--text-muted);}
.order-summary strong{color:var(--text); font-weight:600;}

.toast-root{position:fixed; bottom:20px; right:20px; z-index:40; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--text); color:var(--bg); padding:10px 16px; border-radius:8px; font-size:13px; font-weight:500; box-shadow:var(--shadow); max-width:320px;}
.toast.tone-danger{background:var(--danger);}
.toast.tone-good{background:var(--good);}

footer{padding:14px clamp(14px,3vw,32px); color:var(--text-muted); font-size:11.5px; text-align:center;}

/* ---------- team screen ---------- */
.team-add-form{display:grid; grid-template-columns:repeat(5,1fr) auto; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); align-items:end;}
.team-add-form .field{gap:4px;}
.role-select{background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:5px 8px; font-size:12.5px;}

@media (max-width:900px){
  .team-add-form{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr;}
  .tabbar{top:auto; position:static;}
  .topbar{position:static;}
}