@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#F2F4F2;
  --panel:#FFFFFF;
  --ink:#161C1F;
  --ink-soft:#5C6B6E;
  --ink-faint:#8B979A;
  --line:#DFE5E3;
  --line-strong:#C9D2D0;
  --brand:#163A3E;
  --brand-soft:#E4EEEC;
  --amber:#B4791E;
  --amber-bg:#FBEFDD;
  --coral:#B8452C;
  --coral-bg:#FBEAE4;
  --sage:#2E6E52;
  --sage-bg:#E4F0EA;
  --violet:#5A5490;
  --violet-bg:#EBE9F5;
  --slate:#4A5B6B;
  --slate-bg:#E7ECEF;
  --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;}
.wrap{max-width:1240px;margin:0 auto;padding:28px 32px 60px;}

.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px;width:100%;max-width:340px;}
.login-hint{font-size:13px;color:var(--ink-soft);margin:10px 0 18px;}
.login-card form{display:flex;flex-direction:column;gap:10px;}
.login-card input{padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;font-size:13.5px;}
.login-error{color:var(--coral);font-size:12.5px;margin-top:10px;min-height:16px;}

.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap;}
.brandmark{display:flex;align-items:baseline;gap:10px;}
.brandmark .mark{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:22px;color:var(--brand);letter-spacing:-0.01em;}
.brandmark .sub{font-size:12.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
.session-info{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.stat .n{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:600;color:var(--brand);}
.stat .l{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.stat.flag .n{color:var(--amber);}
.stat.risk .n{color:var(--coral);}
.stat.good .n{color:var(--sage);}

.adminbar{display:flex;gap:18px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.adminbar-title{font-size:12.5px;color:var(--ink-soft);}
.adminbar-toggle{font-size:12.5px;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.admin-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:none;}
.admin-panel.open{display:block;}
.admin-panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:10px;}
.admin-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.admin-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:20px;font-size:12px;}
.admin-chip .x{cursor:pointer;opacity:.6;padding:2px;}
.admin-chip .x:hover{opacity:1;}
.admin-add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.admin-add-row input, .admin-add-row select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;min-width:170px;}
.color-picks{display:flex;gap:5px;}
.color-dot{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.color-dot.selected{border-color:var(--ink);}
.btn-add{padding:8px 14px;border-radius:8px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:12.5px;cursor:pointer;}
.btn-ghost{padding:8px 14px;border-radius:8px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);font-size:12.5px;cursor:pointer;}
.btn-danger{padding:6px 10px;border-radius:8px;border:1px solid var(--coral);background:transparent;color:var(--coral);font-size:11.5px;cursor:pointer;}

.team-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);}
.team-row:last-child{border-bottom:none;}
.team-row input, .team-row select{padding:7px 9px;border:1px solid var(--line-strong);border-radius:7px;font-size:12.5px;width:100%;}
.team-row-flags{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--ink-soft);align-items:center;}
.team-row-flags label{display:flex;align-items:center;gap:4px;}

.weeknav{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.week-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);cursor:pointer;font-size:15px;color:var(--ink-soft);}
.week-btn:hover{border-color:var(--brand);color:var(--brand);}
.week-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--brand);min-width:190px;}
.week-today{font-size:12px;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}

.layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;}

.rail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px;position:sticky;top:20px;}
.rail-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);padding:8px 10px 4px;}
.rail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink);}
.rail-item:hover{background:var(--brand-soft);}
.rail-item.active{background:var(--brand);color:#fff;}
.rail-item .cnt{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);}
.rail-item.active .cnt{color:#cfe0dc;}

.main{min-width:0;}
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.search{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;font-size:13.5px;background:var(--panel);}
.search:focus{outline:none;border-color:var(--brand);}
.chip{padding:7px 12px;border-radius:20px;border:1px solid var(--line-strong);background:var(--panel);font-size:12.5px;color:var(--ink-soft);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff;}

.rows{display:flex;flex-direction:column;gap:8px;}
.person{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;display:grid;grid-template-columns:170px 1fr 90px;gap:16px;align-items:center;}
.person:hover{border-color:var(--line-strong);}
.person[data-level="2"]{margin-left:20px;}
.person[data-level="3"]{margin-left:40px;}
.person[data-level="4"]{margin-left:60px;}
.who .name .connector{color:var(--ink-faint);font-weight:400;margin-right:4px;}
.who .name{font-size:14px;font-weight:600;}
.who .lead{font-size:11.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:2px;}

.ledger{display:flex;flex-direction:column;gap:6px;}
.bar-track{position:relative;height:16px;background:var(--slate-bg);border-radius:5px;overflow:hidden;display:flex;}
.seg{height:100%;}
.seg.available{background:repeating-linear-gradient(45deg, var(--line), var(--line) 4px, transparent 4px, transparent 8px);}
.bar-track.over{outline:1.5px solid var(--coral);}
.bar-track .empty-note{position:absolute;inset:0;display:flex;align-items:center;padding-left:8px;font-size:10.5px;color:var(--ink-faint);}
.alloc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.alloc-chip{font-size:10.5px;padding:2px 9px;border-radius:12px;font-weight:500;}
.alloc-plus{padding:3px 10px;border-radius:12px;border:1px dashed var(--line-strong);background:transparent;color:var(--ink-faint);font-size:11px;cursor:pointer;}
.alloc-plus:hover{border-color:var(--brand);color:var(--brand);}
.periods-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.period-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;padding:2px 8px;border-radius:10px;background:var(--slate-bg);color:var(--slate);border:1px solid transparent;}
.period-pill.current{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);font-weight:500;}
.period-pill .del{cursor:pointer;opacity:.55;}
.period-pill .del:hover{opacity:1;}
.note-text{font-size:11.5px;color:var(--ink-faint);}

.skills-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;}
.skill-tag{font-size:10.5px;padding:2px 9px;border-radius:12px;font-weight:500;}
.skill-plus{width:20px;height:20px;border-radius:50%;border:1px dashed var(--line-strong);background:transparent;color:var(--ink-faint);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.skill-plus:hover{border-color:var(--brand);color:var(--brand);}

.side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.pct{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;}
.pct.over{color:var(--coral);}
.badge{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:500;white-space:nowrap;}
.b-onboard{background:var(--sage-bg);color:var(--sage);}
.b-dotted{background:var(--slate-bg);color:var(--slate);}
.b-transfer{background:var(--coral-bg);color:var(--coral);}
.b-note{background:var(--slate-bg);color:var(--slate);}

.empty-state{text-align:center;padding:60px 20px;color:var(--ink-faint);font-size:13.5px;}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin:18px 2px 0;font-size:11.5px;color:var(--ink-soft);}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;}
.legend i.hatch{background:repeating-linear-gradient(45deg, var(--line-strong), var(--line-strong) 3px, transparent 3px, transparent 6px);}

.popover{position:absolute;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:10px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:20;min-width:220px;}
.popover-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;font-size:12.5px;}
.popover-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.popover-item span.label{flex:1;}
.popover-item input{width:52px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:6px;font-size:12px;text-align:right;}
.popover-empty{padding:8px;font-size:12px;color:var(--ink-faint);}
.popover-total{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);padding:8px 4px 4px;border-top:1px solid var(--line);margin-top:6px;}
.popover-total.over{color:var(--coral);}
.popover-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}

.skill-popover{position:absolute;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:20;min-width:160px;}
.skill-popover-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;}
.skill-popover-item:hover{background:var(--brand-soft);}
.skill-popover-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.skill-popover-item .check{margin-left:auto;font-size:11px;color:var(--brand);}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .layout{grid-template-columns:1fr;}
  .person{grid-template-columns:1fr;text-align:left;}
  .side{align-items:flex-start;flex-direction:row;flex-wrap:wrap;}
  .team-row{grid-template-columns:1fr;}
}