/* ── activity tracker stylesheet ──────────────────────────────────────────
   fork of /home/c/upwork-scraper/upwork-monitor/static/css/style.css
   same :root tokens, same mono+serif typography, same single-blue accent.
   additions: calendar grid, badge pills, chart blocks, etc.
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fff;--muted:rgba(26,24,20,.55);--dim:rgba(26,24,20,.38);
  --text:#1a1814;--border:rgba(26,24,20,.06);--border2:rgba(26,24,20,.12);
  --accent:#1a1814;--good:#15803d;--mid:#a16207;--bad:#b91c1c;
  --accent2:#4f6bb3;
  --c-blue:#4f6bb3;--c-green:#2e7d32;--c-red:#c62828;--c-amber:#b26a00;--c-orange:#c25e00;--c-teal:#00796b;--c-purple:#7b4fa0;
  --mono:ui-monospace,'SF Mono','Cascadia Code',Consolas,'Liberation Mono',Menlo,monospace;
  --serif:Georgia,'Cambria','Times New Roman',serif;
  --pad-x:2.5rem;--max:780px;
  --side-pad:16px;
  --rail-w:216px;
  --hover:rgba(26,24,20,.06);--hover-strong:rgba(26,24,20,.09);--scrim:rgba(26,24,20,.12);
  --btn-text:#fff;
}
html[data-theme="dark"]{
  --bg:#141414;--muted:rgba(255,255,255,.6);--dim:rgba(255,255,255,.4);
  --text:#e7e3dc;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --accent:#e7e3dc;--good:#4ade80;--mid:#facc15;--bad:#f87171;
  --accent2:#8fa8d8;
  --c-blue:#8fa8d8;--c-green:#6fbf8a;--c-red:#d98a8a;--c-amber:#c9a45a;--c-orange:#d0a06a;--c-teal:#6fb3ab;--c-purple:#a890c8;
  --hover:rgba(255,255,255,.07);--hover-strong:rgba(255,255,255,.12);--scrim:rgba(0,0,0,.5);
  --btn-text:#141414;
}
html{scrollbar-gutter:stable}
body{
  background:var(--bg);color:var(--text);
  font:12px/1.5 var(--mono);font-weight:300;
  height:100vh;overflow:hidden;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;letter-spacing:.006em;
}
::selection{background:color-mix(in srgb,var(--accent)15%,transparent)}
:focus-visible{outline:1px solid var(--text);outline-offset:2px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border2)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ── top header bar ── */
.topbar{display:flex;align-items:center;gap:10px;padding:0 1.25rem;border-bottom:1px solid var(--border);position:relative;background:var(--bg);z-index:10;height:48px;flex-shrink:0}
.topbar .health{order:1}
.topbar .top-actions{order:3}
.topbar .brand{font:16px/1 var(--serif);color:var(--text);letter-spacing:.01em;white-space:nowrap;display:flex;align-items:center;height:100%;text-decoration:none;cursor:pointer;margin-right:auto}
.topbar .brand:hover{color:var(--text)}
.topbar .brand em{font-style:italic;color:var(--dim);font-size:14px;letter-spacing:.02em}
.topbar .nav-btn{display:flex;align-items:center;height:auto;line-height:1.5;font-size:9px;padding:2px 8px}
.top-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,46vw);display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border2);border-radius:5px;padding:4px 8px;transition:border-color .15s,box-shadow .15s}
.top-search:focus-within{border-color:var(--c-blue)}
.top-search .search-icon{width:13px;height:13px;color:var(--dim);flex-shrink:0}
.top-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:10px var(--mono);font-weight:300;letter-spacing:.02em}
.top-search input::placeholder{color:var(--dim)}
.top-search .search-clear{background:none;border:none;color:var(--dim);cursor:pointer;font:12px/1 var(--mono);padding:0 2px;display:none}
.top-search .search-clear:hover{color:var(--text)}
.top-search.has-text .search-clear{display:block}
.search-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--border2);border-radius:3px;box-shadow:0 8px 24px var(--scrim);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:130}
.search-suggest[hidden]{display:none}
.search-suggest .sug-head{font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:2px 8px 4px}
.search-suggest .sug{font:10px var(--mono);color:var(--muted);text-align:left;background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:3px}
.search-suggest .sug:hover{background:var(--hover);color:var(--text)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0;padding-left:14px}
.top-actions .icon-btn{
  width:30px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  color:var(--dim);border:none;background:none;cursor:pointer;border-radius:4px;transition:color .15s,background .15s;
}
.top-actions .icon-btn:hover{color:var(--text);background:var(--hover)}
.top-actions .icon-btn svg{width:17px;height:17px;display:block}

/* ── app shell ── */
.shell{flex:1;display:flex;align-items:stretch;min-height:0;width:100%}
.resizer{width:5px;flex-shrink:0;cursor:col-resize;position:relative;z-index:5;background:transparent;transition:background .15s ease}
.resizer:hover,.resizer.active{background:var(--accent2);opacity:.5}
.resizer::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:1px;background:var(--border);pointer-events:none}
.resizer:hover::after{background:var(--accent2)}
body.resizing{user-select:none;cursor:col-resize}
body.resizing *{cursor:col-resize!important}
.sidebar{
  width:var(--rail-w);flex-shrink:0;overflow-y:auto;
  display:flex;flex-direction:column;padding:0 0 32px;
  scrollbar-gutter:stable;scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none;width:0;height:0}
.sidebar-left{border-right:1px solid var(--border);width:var(--left-w,var(--rail-w));min-width:150px;flex-shrink:0}
.sidebar-right{border-left:1px solid var(--border);width:var(--right-w,calc((var(--rail-w) - 56px) / 2));min-width:96px;flex-shrink:0}
.side-block{display:flex;flex-direction:column}
.side-block + .side-block{border-top:1px solid var(--border)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:10px var(--side-pad) 0}
.side-head .side-sec{padding:0}
.side-sec{font:9px var(--mono);font-weight:400;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:10px var(--side-pad) 5px}
.sidebar-left .side-block .side-sec,
.sidebar-right .side-block .side-sec{color:var(--c-blue)}
.side-head-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.side-add{font:10px/1 var(--mono);color:var(--dim);background:none;border:none;cursor:pointer;padding:3px 5px;margin:-3px -2px 0 0;transition:color .15s}
.side-add:hover{color:var(--accent)}
.side-group{display:flex;flex-direction:column;padding:6px var(--side-pad) 8px;gap:1px}
.side-group .nav-btn{display:flex;width:100%;justify-content:flex-start;text-align:left;padding:2px 0;height:auto;line-height:1.5;font-size:9px}
.side-group .nav-btn .cnt{font:9px var(--mono);color:var(--dim);margin-left:auto}
.side-group .nav-btn{border-radius:3px;margin:0 -2px;padding:2px 6px}
.side-group .nav-btn:hover{background:var(--hover)}
.side-group .nav-btn.active{background:var(--hover);color:var(--c-blue)}
.side-actions{display:flex;flex-direction:column;padding:6px var(--side-pad) 8px;gap:1px}
.side-actions .nav-btn{display:flex;width:100%;justify-content:flex-start;text-align:left;padding:2px 0;height:auto;line-height:1.5;font-size:9px;white-space:nowrap}
.side-stats{display:flex;flex-direction:column;gap:1px;padding:6px var(--side-pad) 8px}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:9px var(--mono);color:var(--muted);line-height:1.7}
.stat-row .stat-v{color:var(--text);letter-spacing:.02em}
.stat-row.hl .stat-v{color:var(--accent)}

/* ── sidebar icon nav (icons only) ── */
.side-nav{display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px}
.side-nav-item{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  font:9px var(--mono);font-weight:300;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);background:none;border:none;cursor:pointer;
  border-radius:6px;transition:color .15s,background .15s;
}
.side-nav-item svg{width:18px;height:18px;flex-shrink:0;color:var(--dim);transition:color .15s}
.side-nav-item:hover{color:var(--text);background:var(--hover)}
.side-nav-item:hover svg{color:var(--text)}
.side-nav-item.active{color:var(--c-blue);background:var(--hover)}
.side-nav-item.active svg{color:var(--c-blue)}

/* ── 2×1 dashboard grid (completed tasks + blocked) ── */
.dash-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dash-grid-2 .stat-tile{padding:14px 16px}
.dash-grid-2 .stat-tile-v{font-size:1.3rem}

/* ── people list (employees) in the rail ── */
.people-list{display:flex;flex-direction:column;gap:1px;padding:6px var(--side-pad) 8px}
.people-item{
  display:flex;align-items:center;gap:8px;padding:3px 8px;margin:0 -2px;cursor:pointer;
  color:var(--dim);transition:color .15s,background .15s;border-radius:3px;
}
.people-item:hover{color:var(--text);background:var(--hover)}
.people-item.active{color:var(--c-blue);background:var(--hover)}
.people-item.off{opacity:.45}
.people-item .p-av{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font:7px var(--mono);color:#fff;background:var(--c-blue);letter-spacing:.02em;overflow:hidden;
}
.people-item .p-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.people-item .p-name{font:9px var(--mono);font-weight:300;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.people-item .p-status{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.p-status.present{background:var(--good)}
.p-status.remote{background:var(--c-blue)}
.p-status.half{background:var(--mid)}
.p-status.leave_sick,.p-status.leave_casual,.p-status.leave_earned{background:var(--c-purple)}
.p-status.absent{background:var(--bad)}
.p-status.holiday{background:var(--dim)}

main{max-width:none;width:100%;margin:0;flex:1;overflow-y:auto;padding:.25rem 0 0;display:flex;flex-direction:column}

.nav-btn{
  font:10px var(--mono);font-weight:300;letter-spacing:.05em;
  color:var(--dim);background:none;border:none;cursor:pointer;
  padding:4px 10px;transition:color .18s ease,background .18s ease,opacity .18s ease;text-decoration:none;
  line-height:1.4;display:inline-flex;align-items:center;height:24px;
}
.nav-btn:hover{color:var(--text);background:var(--hover)}
.nav-btn.active{color:var(--c-blue)}
.nav-btn.busy{opacity:.45;pointer-events:none}
.theme-btn{width:32px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--dim)}
.theme-btn:hover{color:var(--text)}
html[data-theme="light"] .icon-moon{display:none}
html[data-theme="dark"] .icon-sun{display:none}

.hidden{display:none!important}
.stats{font:10px var(--mono);color:var(--dim);letter-spacing:.04em;white-space:nowrap}

/* health dots: db · session · activity */
.health{display:inline-flex;align-items:center;gap:5px;padding:0 8px 0 2px;height:24px}
.hdot{width:6px;height:6px;border-radius:50%;background:var(--border2);display:inline-block;flex-shrink:0}
.hdot.good{background:var(--good)}
.hdot.mid{background:var(--mid)}
.hdot.bad{background:var(--bad)}

/* ── tables (employees, tasks, attendance) ── */
.table-wrap{overflow:auto;contain:strict;-webkit-overflow-scrolling:touch}
.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
.t-table{width:100%;border-collapse:collapse;font:10px var(--mono);font-weight:300;color:var(--text);table-layout:auto}
.t-table thead{position:sticky;top:0;z-index:2;background:var(--bg)}
.t-table th{font-size:8px;font-weight:400;text-transform:uppercase;letter-spacing:.14em;color:var(--c-blue);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border2);white-space:nowrap;cursor:pointer;user-select:none}
.t-table th:hover{color:var(--text)}
.t-table th .sort-glyph{opacity:.5;margin-left:4px}
.t-table th.active .sort-glyph{opacity:1}
.t-table td{padding:6px 10px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--border)}
.t-table tr{cursor:pointer;transition:background .15s}
.t-table tr:hover{background:var(--hover)}
.t-table .col-pri{width:80px}
.t-table .col-due{width:100px}
.t-table .col-status{width:110px}
.t-table .col-when{width:90px}
.t-row.due-soon{background:color-mix(in srgb,var(--c-amber)10%,transparent)}
.t-row.overdue{background:color-mix(in srgb,var(--c-red)12%,transparent)}
.t-row.overdue td:first-child{box-shadow:inset 2px 0 0 var(--c-red)}
.t-row.done td{color:var(--dim)}
.t-row.done .col-title{text-decoration:line-through}

/* ── status pill ── */
.pill{font:8px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:2px;display:inline-block;border:1px solid currentColor;line-height:1.4;white-space:nowrap}
.pill-good{color:var(--good)}
.pill-mid{color:var(--mid)}
.pill-bad{color:var(--bad)}
.pill-dim{color:var(--dim)}
.pill-blue{color:var(--c-blue)}
.pill-purple{color:var(--c-purple)}
.pill-teal{color:var(--c-teal)}

/* ── detail page ── */
.detail{display:flex;flex-direction:column;justify-content:flex-start;min-height:calc(100vh - 10rem);padding:2rem 2.5rem 3rem;max-width:980px;width:100%;margin:0 auto}
.detail h1{font:1.05rem/1.25 var(--serif);font-weight:400;margin-bottom:.7rem;letter-spacing:-.02em}
.detail h1 .sub-pri{font:9px var(--mono);color:var(--dim);margin-left:10px;letter-spacing:.04em}
.detail h1 .sub-pri.urgent{color:var(--bad)}
.detail h1 .sub-pri.high{color:var(--c-orange)}
.detail h1 .sub-pri.med{color:var(--mid)}
.detail h1 .sub-pri.low{color:var(--dim)}
.back{font:8px var(--mono);letter-spacing:.06em;color:var(--c-blue);display:inline-flex;align-items:center;gap:4px;margin:1rem 0;transition:color .15s;text-decoration:none;cursor:pointer}
.back:hover{color:var(--text)}
.skill-chips{display:flex;flex-wrap:wrap;gap:5px 10px;margin-bottom:1rem}
.skill-chips span{font:8px var(--mono);color:var(--dim);letter-spacing:.03em;border:1px solid var(--border);border-radius:2px;padding:1px 7px;transition:border-color .15s ease,color .15s ease}
.skill-chips span:hover{border-color:var(--accent2);color:var(--accent2)}
.desc{font:9px/1.75 var(--mono);color:var(--muted);font-weight:300;white-space:pre-line;margin-bottom:1.5rem}

.q-block{margin:0 0 1rem}
.q-table{width:100%;border-collapse:collapse;table-layout:fixed}
.q-table th,.q-table th{
  font:8px/1.6 var(--mono);font-weight:300;text-align:left;
  padding:4px 0;vertical-align:baseline;height:auto;
}
.q-table th{color:var(--dim);letter-spacing:.04em;width:8rem;padding-right:1rem;text-transform:uppercase;letter-spacing:.08em}
.q-table td{color:var(--text)}
.q-table td.t-good{color:var(--good)}
.q-table td.t-mid{color:var(--mid)}
.q-table td.t-bad{color:var(--bad)}
.q-table td.t-blue{color:var(--c-blue)}
.q-table tr.row-success th,.q-table tr.row-success td{font-weight:400}

.actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:.25rem;padding-bottom:2.5rem;align-items:center}
.actions .spacer{flex:1}
.actions .btn{padding:4px 10px;font-size:9px}

/* ── buttons ── */
.btn{font:10px var(--mono);font-weight:300;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:none;border:1px solid var(--border);cursor:pointer;padding:6px 14px;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px;border-radius:3px}
.btn:hover{color:var(--text);border-color:var(--border2)}
.btn-accent{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.btn-accent:hover{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.btn-good{color:var(--good);border-color:rgba(21,128,61,.35)}
.btn-good:hover{color:var(--btn-text);background:var(--good);border-color:var(--good)}
.btn-danger{color:var(--bad);border-color:rgba(185,28,28,.35)}
.btn-danger:hover{color:var(--btn-text);background:var(--bad);border-color:var(--bad)}
.btn-ghost{border-color:transparent;padding-left:0}
.btn-ghost:hover{border-color:transparent;color:var(--accent)}
.btn-sm{padding:3px 10px;font-size:9px}
.btn:not(:disabled):active{transform:translateY(1px)}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;font:11px var(--mono);color:var(--dim);font-style:italic;text-align:center;gap:6px}
.empty strong{font-style:normal;font-weight:400;color:var(--muted)}

.foot{display:flex;align-items:center;justify-content:flex-start;padding:.3rem 1rem;font:8px var(--mono);color:var(--dim);letter-spacing:.02em;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg);order:4}
.foot .foot-copy{color:color-mix(in srgb,var(--c-blue)55%,var(--dim))}
.foot .foot-spacer{flex:1}
.foot-theme{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;padding:0;background:none;border:none;cursor:pointer;color:var(--dim);border-radius:3px;transition:color .15s,background .15s}
.foot-theme:hover{color:var(--text);background:var(--hover)}
.foot-theme svg{width:14px;height:14px;display:block}

/* ── full-page views ── */
.page{order:3;position:relative;inset:auto;z-index:auto;flex:1;min-height:0;background:var(--bg);overflow-y:auto;padding:1.5rem 2.5rem 4rem;display:flex;flex-direction:column;align-items:flex-start}
.page > *{width:100%;max-width:var(--max)}
#page-settings.page > *{max-width:1400px}
#page-settings{align-items:stretch}
#page-settings .page-head{max-width:1400px;align-self:center;width:100%}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;max-width:1400px;width:100%}
.page-head h1{font:1.5rem/1.2 var(--serif);font-weight:400;letter-spacing:-.02em}
.page-head .back{font:9px var(--mono);letter-spacing:.06em;color:var(--c-blue);text-decoration:none;transition:color .15s}
.page-head .back:hover{color:var(--text)}
.page-actions{display:flex;gap:8px;align-items:center;padding-top:6px}

/* ── dashboard tiles + charts ── */
.dash{display:flex;flex-direction:column;gap:1.5rem;padding:1rem 0 3rem;width:100%;max-width:1100px}
.dash-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat-tile{border:1px solid var(--border2);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:var(--bg);transition:border-color .15s}
.stat-tile:hover{border-color:var(--c-blue)}
.stat-tile-v{font:1.6rem/1 var(--serif);color:var(--text);letter-spacing:-.02em}
.stat-tile-l{font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stat-tile-h{font:9px var(--mono);color:var(--muted);letter-spacing:.04em;line-height:1.5}
.dash-section{display:flex;flex-direction:column;gap:.75rem}
.dash-section h2{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-blue);border-bottom:1px solid var(--border);padding-bottom:.4rem}
.chart-box{border:1px solid var(--border2);border-radius:6px;padding:14px 16px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.chart-box h3{font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chart-svg{width:100%;height:160px;display:block}
.chart-svg .bar{fill:var(--c-blue);transition:opacity .15s}
.chart-svg .bar:hover{opacity:.7}
.chart-svg .axis{stroke:var(--border2);stroke-width:1}
.chart-svg .axis-text{font:8px var(--mono);fill:var(--dim)}
.chart-svg .line{fill:none;stroke:var(--c-blue);stroke-width:1.5}
.chart-svg .dot{fill:var(--c-blue)}

/* today panel */
.today-panel{border:1px solid var(--border2);border-radius:6px;padding:14px 16px;background:var(--bg);display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.today-grp h4{font:8px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-blue);padding-bottom:4px}
.today-grp .person{font:10px var(--mono);color:var(--text);padding:2px 0;display:flex;align-items:center;gap:6px}
.today-grp .person .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.today-grp .person.muted{color:var(--dim)}

/* ── calendar grid (per-employee) ── */
.cal{border:1px solid var(--border2);border-radius:6px;padding:14px 16px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-head h3{font:11px var(--serif);color:var(--text);font-weight:400}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font:7px var(--mono);text-align:center;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;padding:4px 0}
.cal-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font:9px var(--mono);color:var(--text);border:1px solid var(--border);border-radius:2px;cursor:pointer;position:relative;transition:transform .1s,border-color .15s}
.cal-cell:hover{border-color:var(--c-blue);transform:scale(1.05)}
.cal-cell.empty{border-color:transparent;cursor:default;pointer-events:none}
.cal-cell.present{background:color-mix(in srgb,var(--c-green)30%,transparent)}
.cal-cell.remote{background:color-mix(in srgb,var(--c-blue)30%,transparent)}
.cal-cell.half{background:color-mix(in srgb,var(--c-amber)30%,transparent)}
.cal-cell.leave_sick,.cal-cell.leave_casual,.cal-cell.leave_earned{background:color-mix(in srgb,var(--c-purple)30%,transparent)}
.cal-cell.absent{background:color-mix(in srgb,var(--c-red)30%,transparent)}
.cal-cell.holiday{background:var(--border);color:var(--dim)}
.cal-cell.today{border-color:var(--c-blue);font-weight:400}
.cal-cell .late{position:absolute;top:1px;right:2px;width:4px;height:4px;border-radius:50%;background:var(--mid)}

/* team grid (employees × days) */
.team-grid{font:9px var(--mono);border:1px solid var(--border2);border-radius:6px;background:var(--bg);overflow:hidden;width:100%}
.team-grid table{width:100%;border-collapse:collapse}
.team-grid th,.team-grid td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:4px 6px;text-align:center;white-space:nowrap}
.team-grid th{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-blue);position:sticky;top:0;background:var(--bg);font-weight:400}
.team-grid th.emp-col{text-align:left;position:sticky;left:0;z-index:1;background:var(--bg);min-width:140px}
.team-grid td.emp-col{text-align:left;position:sticky;left:0;background:var(--bg);font-weight:300}
.team-grid td.cell{cursor:pointer;width:28px;height:22px}
.team-grid td.cell:hover{outline:1px solid var(--c-blue)}
.team-grid td.cell.present{background:color-mix(in srgb,var(--c-green)30%,transparent);color:var(--text)}
.team-grid td.cell.remote{background:color-mix(in srgb,var(--c-blue)30%,transparent);color:var(--text)}
.team-grid td.cell.half{background:color-mix(in srgb,var(--c-amber)30%,transparent);color:var(--text)}
.team-grid td.cell.leave_sick,.team-grid td.cell.leave_casual,.team-grid td.cell.leave_earned{background:color-mix(in srgb,var(--c-purple)30%,transparent);color:var(--text)}
.team-grid td.cell.absent{background:color-mix(in srgb,var(--c-red)30%,transparent);color:var(--text)}
.team-grid td.cell.holiday{background:var(--border);color:var(--dim)}
.team-grid td.cell.empty-cell{background:transparent}

/* ── comments / activity list ── */
.feed{display:flex;flex-direction:column;gap:8px;width:100%}
.feed-item{display:flex;flex-direction:column;gap:3px;padding:8px 0;border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:none}
.feed-item .feed-meta{font:8px var(--mono);color:var(--dim);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.feed-item .feed-meta .who{color:var(--c-blue);letter-spacing:.04em}
.feed-item .feed-meta .type{color:var(--muted)}
.feed-item .feed-body{font:10px var(--mono);color:var(--text);white-space:pre-wrap;line-height:1.5}
.feed-item .feed-summary{font:10px var(--mono);color:var(--muted)}

.composer{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--border);margin-top:6px}
.composer textarea{font:10px var(--mono);font-weight:300;padding:8px 10px;border:1px solid var(--border2);background:var(--bg);color:var(--text);resize:vertical;min-height:60px;letter-spacing:.02em;border-radius:3px}
.composer textarea:focus{outline:none;border-color:var(--c-blue)}
.composer-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}

/* ── settings (sub-page) ── */
.settings-body{display:flex;gap:1.5rem;align-items:flex-start;width:100%}
.settings-nav{display:flex;flex-direction:column;gap:2px;width:200px;flex-shrink:0;position:sticky;top:0;padding-top:2px}
.settings-nav .snav{font:10px var(--mono);font-weight:300;letter-spacing:.04em;color:var(--muted);text-align:left;background:none;border:none;cursor:pointer;padding:7px 12px;border-radius:3px;transition:color .12s,background .12s}
.settings-nav .snav:hover{color:var(--text);background:var(--hover)}
.settings-nav .snav.active{color:var(--c-blue);background:var(--hover);font-weight:400}
.settings-panes{flex:1;min-width:0;max-width:760px}
.settings-panel{display:flex;flex-direction:column;gap:1rem;min-width:0}
.settings-panel .settings-sec + .settings-sec{margin-top:.25rem}
.settings-sec{border:1px solid var(--border2);border-radius:4px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;background:var(--bg)}
.settings-sec .sec-title{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);padding-bottom:.35rem;margin-bottom:.35rem}
.settings-sec label{font:8px var(--mono);color:var(--dim);letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:5px}
.settings-sec .row2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.settings-sec input[type="text"],.settings-sec input[type="number"],.settings-sec input[type="password"],.settings-sec input[type="date"],.settings-sec input[type="time"],.settings-sec select,.settings-sec textarea{font:10px var(--mono);font-weight:300;padding:6px 9px;border:1px solid var(--border);color:var(--text);background:var(--bg);letter-spacing:.02em}
.settings-sec textarea{resize:vertical;min-height:60px}
.settings-sec input:focus,.settings-sec select:focus,.settings-sec textarea:focus{outline:none;border-color:var(--border2)}
.settings-sec .hint{font:9px var(--mono);color:var(--dim);letter-spacing:.03em;line-height:1.6;margin:-6px 0 0}
.settings-sec .checks{padding-top:2px;display:flex;gap:18px;flex-wrap:wrap}
.settings-sec .check{flex-direction:row!important;align-items:center;gap:8px!important;cursor:pointer;text-transform:none;letter-spacing:.04em;font-size:9px!important;width:auto;color:var(--text)}
.settings-sec .check input{accent-color:var(--text);width:13px;height:13px;margin:0}
.settings-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:4px;width:100%}

/* ── employee profile header (avatar + name + role + stats) ── */
.emp-head{display:flex;align-items:center;gap:16px;padding:1rem 0 1.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.emp-head .av{width:54px;height:54px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font:16px var(--mono);color:#fff;background:var(--c-blue);letter-spacing:.02em;overflow:hidden;border:1px solid var(--border2)}
.emp-head .av img{width:100%;height:100%;object-fit:cover;display:block}
.emp-head .who{flex:1;min-width:0}
.emp-head .who h1{font:1.5rem var(--serif);font-weight:400;letter-spacing:-.02em;margin:0 0 4px}
.emp-head .who .role{font:10px var(--mono);color:var(--c-blue);letter-spacing:.06em;text-transform:uppercase}
.emp-head .who .dept{font:9px var(--mono);color:var(--dim);margin-left:6px}
.emp-head .who .bio{font:10px var(--mono);color:var(--muted);margin-top:6px;max-width:520px;line-height:1.6}

/* avatar utility */
.av-sm{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:7px var(--mono);color:#fff;background:var(--c-blue);letter-spacing:.02em;overflow:hidden;flex-shrink:0}
.av-sm img{width:100%;height:100%;object-fit:cover;display:block}
.av-md{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:9px var(--mono);color:#fff;background:var(--c-blue);letter-spacing:.02em;overflow:hidden;flex-shrink:0}
.av-md img{width:100%;height:100%;object-fit:cover;display:block}

/* ── project chip ── */
.proj-chip{display:inline-flex;align-items:center;gap:4px;font:8px var(--mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--border);border-radius:2px}
.proj-chip .swatch{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── modal ── */
.modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:72px 16px 32px;overflow-y:auto}
.modal.hidden{display:none}
.modal-box{background:var(--bg);border:1px solid var(--border2);width:480px;max-width:100%;max-height:calc(100vh - 104px);overflow-y:auto;box-shadow:0 8px 40px var(--scrim);border-radius:4px}
.modal-sm{width:360px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}
.modal-head h2{font:12px var(--mono);font-weight:300;letter-spacing:.04em}
.modal-x{font:18px/1 var(--mono);color:var(--dim);text-decoration:none;padding:2px 6px;transition:color .15s;background:none;border:none;cursor:pointer}
.modal-x:hover{color:var(--text)}
.modal-box form,.help-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-box label{font:9px var(--mono);color:var(--dim);letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:5px}
.modal-box input[type="text"],.modal-box input[type="number"],.modal-box input[type="date"],.modal-box input[type="time"],.modal-box select,.modal-box textarea{font:11px var(--mono);font-weight:300;padding:7px 9px;border:1px solid var(--border);color:var(--text);background:var(--bg);letter-spacing:.02em;text-transform:none;border-radius:3px}
.modal-box textarea{resize:vertical;min-height:60px;font-family:var(--mono)}
.modal-box input:focus,.modal-box select:focus,.modal-box textarea:focus{outline:none;border-color:var(--border2)}
.modal-box input::placeholder{color:var(--dim);opacity:.7}
.modal-box .row2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.modal-actions{display:flex;gap:8px;align-items:center;padding-top:6px}
.modal-actions.pad{padding:12px 20px 16px}
.checks{display:flex;gap:24px;flex-wrap:wrap}
.check{flex-direction:row!important;align-items:center;gap:8px!important;cursor:pointer;text-transform:none;letter-spacing:.04em;font-size:10px!important;display:flex}
.check input{accent-color:var(--text);width:13px;height:13px}
.hint{font:10px var(--mono);color:var(--dim);letter-spacing:.03em;line-height:1.6;margin-top:-4px}
.row2{display:flex;gap:12px}.row2>*{flex:1;min-width:0}
.spacer{flex:1}
.seg-title{font:10px var(--mono);color:var(--accent);letter-spacing:.12em;text-transform:uppercase;padding-top:4px;border-top:1px solid var(--border)}

/* ── loading spinner ── */
.spinner{width:32px;height:32px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--accent);animation:spin .8s linear infinite;margin:32px auto}
.spinner-label{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── toasts (transient feedback, never modal) ── */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;align-items:center}
.toast{background:var(--bg);border:1px solid var(--border2);color:var(--text);font:10px var(--mono);padding:8px 16px;border-radius:3px;box-shadow:0 4px 16px var(--scrim);animation:toast-in .2s ease}
.toast.err{border-color:var(--bad);color:var(--bad)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── responsive ── */
@media (max-width:900px){
  .settings-sec .row2{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .settings-body{flex-direction:column}
  .settings-nav{width:100%;flex-direction:row;flex-wrap:wrap;position:static}
  .settings-sec .row2{grid-template-columns:1fr}
  .modal-box .row2{grid-template-columns:1fr}
}
@media (max-width:720px){
  :root{--pad-x:1.25rem;--rail-w:64px;--side-pad:8px}
  .sidebar-left,.sidebar-right{width:var(--rail-w)!important;min-width:0}
  .resizer{display:none}
  .side-sec,.side-stats{display:none}
  .side-head{justify-content:center;padding:8px 0 0}
  .side-head .side-sec{display:none}
  .side-head-actions{gap:4px}
  .side-group .nav-btn{padding:5px 0;font-size:9px;justify-content:center}
  .side-group .nav-btn .cnt{display:none}
  .side-actions .nav-btn{padding:5px 0;font-size:9px;justify-content:center}
  .people-item{padding:5px 0;justify-content:center}
  .people-item .p-name,.people-item .p-status{display:none}
  .page{padding:1.5rem 1.25rem 3rem}
  .detail{padding:2rem 1.25rem 3rem}
}

/* consistent accents — ONE color everywhere (blue), no rainbow */
.topbar{border-bottom-color:color-mix(in srgb,var(--c-blue)35%,var(--border))}
html,body,.topbar,.sidebar,.main,main,.detail,.t-table td,.t-table th,.btn,.modal-box,.settings-sec,.stat-tile,.chart-box,.cal,.today-panel,.emp-head{transition:background-color .25s ease,color .25s ease,border-color .25s ease}