:root{
  /* Arrowpoint brand: signal amber from the mark, cool grey from the wordmark.
     Amber carries fills; a darkened amber carries text and thin marks, which
     amber itself cannot do legibly on white. */
  --brand:#ffc20e; --brand-deep:#9a7100; --brand-tint:#fff6da;
  --brand-grey:#a8aeb6;
  --ink:#1c1f23; --ink-2:#4c545d; --ink-3:#7b848d;
  --line:#e3e6ea; --line-2:#eff1f4; --bg:#f7f8f9; --panel:#fff;
  --accent:#9a7100; --accent-soft:#fff6da;
  --billable:#ffc20e; --overhead:#a8aeb6; --revenue:#5a636d; --flag:#b4433a;
  --ok:#2f7a52;
  --axis-hours:#8a6400; --axis-rev:#5a636d;
  --shadow:0 1px 2px rgba(16,24,32,.05),0 4px 14px rgba(16,24,32,.05);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* class-level display rules outrank the UA [hidden] rule, so restate it */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}
h2,h3{margin:0;font-weight:600}

/* ---------- login ---------- */
.login-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:32px;width:100%;max-width:360px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:34px;height:34px;flex-shrink:0}
.brand-sm{display:flex;align-items:center;gap:8px}
.brand-sm .mark{width:22px;height:22px;flex-shrink:0}
.wordmark{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
          font-size:19px;letter-spacing:.13em;font-style:normal;white-space:nowrap}
.wordmark b{color:var(--brand);font-weight:600}
.wordmark i{color:var(--brand-grey);font-weight:600;font-style:normal}
.brand-sm .wordmark{font-size:13px;letter-spacing:.11em}
:root{--paper:#fff}
.login-sub{margin:4px 0 22px;color:var(--ink-3);font-size:13px}
.login-card label{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.login-card input{padding:9px 11px;border:1px solid var(--line);border-radius:6px;font:inherit;margin-bottom:16px;background:#fff}
.login-card input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.login-card button{background:var(--brand);color:var(--ink);border:0;border-radius:6px;padding:10px;font-weight:650;letter-spacing:.02em}
.login-card button:hover{background:#f0b400}
.login-card button:disabled{opacity:.6;cursor:default}
.login-error{margin-top:14px;color:var(--flag);font-size:13px}
.login-foot{color:var(--ink-3);font-size:12px;margin:0}

/* ---------- shell ---------- */
#app{display:grid;overflow:hidden;grid-template-columns:246px minmax(0,1fr);grid-template-rows:52px 1fr;height:100vh;
     grid-template-areas:"top top" "side main"}
.topbar{grid-area:top;display:flex;align-items:center;gap:22px;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line)}

.tabs{display:flex;gap:2px;flex:1}
.tab{background:none;border:0;padding:7px 12px;border-radius:6px;color:var(--ink-2);font-weight:500}
.tab:hover{background:var(--line-2)}
.tab.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.logout{background:none;border:1px solid var(--line);border-radius:6px;padding:6px 12px;color:var(--ink-2)}

.filters{grid-area:side;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:16px}
.filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.filters h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.link{background:none;border:0;color:var(--accent);font-size:12px;padding:0}
.fgroup{border-bottom:1px solid var(--line-2)}
.fhead{width:100%;display:flex;align-items:center;gap:7px;background:none;border:0;padding:9px 2px;text-align:left;color:var(--ink-2)}
.fhead:hover{color:var(--accent)}
.fhead .chev{display:inline-block;transition:transform .15s;font-size:14px;color:var(--ink-3)}
.fhead.open .chev{transform:rotate(90deg)}
.flabel{flex:1;font-size:13px;font-weight:600}
.fcount{font-size:11px;color:var(--ink-3);background:var(--line-2);border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums}
.fcount.on{background:var(--brand);color:var(--ink);font-weight:650}
.fbody{padding:0 2px 10px}
.fsearch{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:12px;margin-bottom:6px;background:#fff}
.checklist{max-height:190px;overflow-y:auto;border:1px solid var(--line-2);border-radius:6px;padding:3px}
.chk{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:4px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.chk:hover{background:var(--accent-soft)}
.chk input{margin:0;accent-color:var(--brand-deep);flex-shrink:0}
.chk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk-empty{padding:8px;font-size:12px;color:var(--ink-3);text-align:center}
.factions{display:flex;gap:12px;margin-top:7px}
.filter-toggle{display:none;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:6px;padding:6px 12px;color:var(--ink-2);font-weight:500}
.fbadge{background:var(--brand);color:var(--ink);border-radius:20px;padding:0 6px;font-size:11px;font-weight:600}
.scrim{display:none;position:fixed;inset:0;background:rgba(16,24,32,.35);z-index:19}
.filter-note{font-size:11px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}

.content{grid-area:main;overflow-y:auto;overflow-x:hidden;padding:22px;min-width:0}
.view{max-width:1240px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px;min-width:0;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.panel-head h3{font-size:14px}
.sub{color:var(--ink-3);font-size:12px;margin:3px 0 0;font-weight:400}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.kpi .v{font-size:22px;font-weight:650;margin-top:5px;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--ink-3);margin-top:2px}
/* a date range needs to fit on one line, so it runs smaller than a bare number */
.kpi-range .v{font-size:14px;letter-spacing:0;white-space:nowrap}

/* ---------- tables ---------- */
.tablewrap{overflow:auto;max-height:min(560px,60vh);border:1px solid var(--line);border-radius:7px;overscroll-behavior:contain}
table{border-collapse:collapse;width:100%;font-size:13px}
th{position:sticky;top:0;background:#fbfcfd;text-align:left;font-size:11px;text-transform:uppercase;
   letter-spacing:.04em;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
td{padding:7px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
tbody tr:hover{background:#fafbfc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.null{color:#b8c2cb;font-style:italic}
.pager{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.pager button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 11px}
.pager button:disabled{opacity:.45;cursor:default}

.btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;color:var(--ink-2);font-weight:500}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--brand);color:var(--ink);border-color:var(--brand);font-weight:600}

.group-select{padding:6px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;background:#fff;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:3px 10px;font-size:12px;font-weight:500}
.badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:600}
.badge-empty{background:#f1f4f6;color:var(--ink-3)}
.badge-flag{background:#fbeceb;color:var(--flag)}
.badge-ok{background:#eaf5ee;color:var(--ok)}

.notice{background:#fdf7ed;border:1px solid #f0e0c4;border-left:3px solid #d09a3c;
        border-radius:6px;padding:11px 13px;font-size:12.5px;color:#6b4f22;margin-bottom:16px}
.notice strong{color:#5a4119}
.empty-state{color:var(--ink-3);padding:34px;text-align:center}
.spinner{color:var(--ink-3);padding:34px;text-align:center}

/* ---------- charts ---------- */
.chart{width:100%;overflow:visible}
.chart text{font-size:11px;fill:var(--ink-3)}
.chart .axis-line{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.bar-row{display:grid;grid-template-columns:190px 1fr 96px;gap:10px;align-items:center;margin-bottom:6px;font-size:13px}
.bar-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
          font-weight:600;padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.bar-scale{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;
           letter-spacing:.02em;color:var(--ink-3)}
.bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bar-track{background:var(--line-2);border-radius:3px;height:16px;overflow:hidden}
.bar-fill{background:var(--brand);height:100%;border-radius:3px}
.bar-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.split>*{min-width:0}
.tablelist{max-height:620px;overflow-y:auto;border:1px solid var(--line);border-radius:7px}
.tableitem{padding:8px 11px;border-bottom:1px solid var(--line-2);cursor:pointer;display:flex;justify-content:space-between;gap:8px;align-items:center}
.tableitem:hover{background:var(--accent-soft)}
.tableitem.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--brand)}
.tableitem .nm{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.tableitem .ct{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.searchbox{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;margin-bottom:8px}
.seg{display:flex;gap:0;margin-bottom:8px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{flex:1;background:#fff;border:0;padding:5px;font-size:12px;color:var(--ink-2)}
.seg button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* Narrow screens: the sidebar becomes a slide-over rather than disappearing,
   so filtering is never unreachable. */
@media(max-width:900px){
  #app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .split{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .filters{position:fixed;top:52px;bottom:0;left:0;width:270px;z-index:20;
           transform:translateX(-100%);transition:transform .18s ease;box-shadow:var(--shadow)}
  body.filters-open .filters{transform:none}
  body.filters-open .scrim{display:block}
  .tabs{gap:0;overflow-x:auto}
  .tab{padding:7px 9px;font-size:13px;white-space:nowrap}
}


/* ---------- full-screen panels ---------- */
/* A panel can take over the window so one view can be studied and filtered on
   its own. The sidebar switches to a drawer at every width so filters stay
   reachable while a panel covers the page. */
.icon-btn{padding:5px 9px;line-height:1;font-size:14px;color:var(--ink-3)}
.icon-btn:hover{color:var(--ink);border-color:var(--brand)}
.panel-fullscreen{overflow:hidden}
.panel.expanded{
  /* starts below the 52px toolbar so the header is never hidden under it */
  position:fixed;inset:52px 0 0 0;margin:0;border:0;border-radius:0;z-index:30;
  overflow-y:auto;padding:20px clamp(16px,4vw,40px) 40px;box-shadow:none;
  background:var(--panel);
}
.panel.expanded .panel-head{
  position:sticky;top:-20px;background:var(--panel);z-index:2;
  padding:14px 0 12px;margin:-20px 0 16px;border-bottom:1px solid var(--line);
}
.panel.expanded .panel-head h3{font-size:17px}
.panel.expanded .tablewrap{max-height:calc(100vh - 250px)}
.panel.expanded .chart{max-width:1400px}
.panel.expanded .bar-row{grid-template-columns:minmax(190px,26%) 1fr 120px}
/* the filters drawer and its scrim must clear an expanded panel */
.panel-fullscreen .filters{
  position:fixed;top:52px;bottom:0;left:0;width:270px;z-index:42;
  transform:translateX(-100%);transition:transform .18s ease;box-shadow:var(--shadow);
}
.panel-fullscreen.filters-open .filters{transform:none}
.panel-fullscreen.filters-open .scrim{display:block;z-index:41}
.panel-fullscreen .topbar{position:relative;z-index:43}
.panel-fullscreen .filter-toggle{display:inline-flex}
@media(prefers-reduced-motion:reduce){.filters{transition:none}}