/* Kalydo brand tokens ---------------------------------------------------- */
:root {
  --primary-50:#F2FBF6;  --primary-100:#DDF3E8; --primary-200:#B8E6CF;
  --primary-300:#7FD1A8; --primary-350:#53BB86; --primary-400:#26A35E;
  --primary-450:#218D51; --primary-500:#1C7644; --primary-550:#186739;
  --primary-600:#155833; --primary-650:#124D2D; --primary-700:#104327;
  --primary-750:#0E3A22; --primary-800:#0B2F1C; --primary-850:#092818;
  --primary-900:#071F13; --primary-950:#04130B; --primary-1000:#1f628e;

  --secondary-50:#FCFFE7;  --secondary-100:#F6FDD0; --secondary-150:#F2FCC0;
  --secondary-200:#EFFA9C; --secondary-250:#E9F877; --secondary-300:#E4F55F;
  --secondary-350:#E0F448; --secondary-400:#DEF352; --secondary-450:#CBE034;
  --secondary-500:#B8CD1F; --secondary-550:#A4B914; --secondary-600:#89A50B;
  --secondary-650:#748E0E; --secondary-700:#637B10; --secondary-750:#5A6F11;
  --secondary-800:#526311; --secondary-850:#46550E; --secondary-900:#38440A;
  --secondary-950:#242F04;

  /* Taken from kalydo.ai, so the tool sits beside the site rather than
     against it: its pale green ground, near-black type, warm grey for
     secondary text, and the green the site uses for anything active. */
  --site-ground:#F1FCF2;  --site-pale:#DEFAE3;   --site-light:#BEF4C8;
  --site-bright:#65DA7C;  --site-green:#1B7A2F;  --site-deep:#184F25;
  --site-darkest:#072C10; --site-line:#DBDBDB;   --site-line-soft:#E7E7E7;
  --site-ink:#050503;     --site-grey:#706F6B;

  /* The brand scale carries no warning colours, so these two are additions,
     darkened from the originals so they stay readable on a light ground. */
  --warn:#965D0C;  --warn-dim:#FDF4E5;  --warn-line:#E8C58C;
  --stop:#BE3A32;  --stop-dim:#FDECEC;  --stop-line:#F0B5B0;

  --bg:#F6FBF7;
  --surface:#FFFFFF;
  --surface-2:var(--site-ground);
  --line:var(--site-line);
  --line-soft:var(--site-line-soft);
  --ink:var(--site-ink);
  --ink-2:#3E3E3A;
  --ink-3:var(--site-grey);
  --accent:var(--site-green);

  --rail:236px;
  --radius:10px;
  --radius-sm:6px;
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Tells the browser to draw its own controls — the calendar picker icon,
     scrollbars, the date popup — for a light page. */
  color-scheme:light;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-0.015em; }
h1 { font-size:22px; }
h2 { font-size:17px; }
h3 { font-size:14px; }
:focus-visible { outline:2px solid var(--site-green); outline-offset:2px; border-radius:4px; }

/* Sign in --------------------------------------------------------------- */
.signin {
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--site-pale), transparent 60%),
    var(--bg);
}
.signin-card {
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  box-shadow:0 1px 2px rgba(5,5,3,.04), 0 8px 24px rgba(5,5,3,.06);
}
.signin-mark { margin-bottom:2px; }
.signin-mark img { display:block; width:168px; height:auto; }
.signin p { color:var(--ink-3); margin:6px 0 26px; }

/* Shell ----------------------------------------------------------------- */
.shell { display:grid; grid-template-columns:var(--rail) 1fr; min-height:100dvh; }
.rail {
  background:var(--surface); border-right:1px solid var(--line);
  padding:22px 16px; display:flex; flex-direction:column; gap:26px;
  position:sticky; top:0; height:100dvh;
}
.rail-mark { padding:2px 8px 0; }
.rail-mark img { display:block; width:142px; height:auto; }
.rail nav { display:flex; flex-direction:column; gap:2px; }
.rail nav a {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:var(--radius-sm); color:var(--ink-2);
  font-weight:500;
}
.rail nav a:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.rail nav a.active { background:var(--site-pale); color:var(--site-darkest); font-weight:600; }
.rail-foot { margin-top:auto; border-top:1px solid var(--line-soft); padding-top:16px; }
.rail-who { padding:0 8px 10px; }
.rail-who strong { display:block; }
.rail-who small { color:var(--ink-3); }

.main { padding:26px 30px 70px; max-width:1500px; }
.topline { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.topline p { color:var(--ink-3); margin:4px 0 0; max-width:66ch; }

/* Live timer bar -------------------------------------------------------- */
.timerbar {
  display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:18px;
  background:var(--secondary-100); border:1px solid var(--secondary-450);
  border-left:3px solid var(--secondary-600); border-radius:var(--radius-sm);
}
.timerbar .dot {
  width:8px; height:8px; border-radius:50%; background:var(--secondary-600);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce) { .timerbar .dot { animation:none; } }
.timerbar span { color:var(--secondary-900); }
.timerbar strong { color:var(--secondary-950); }

/* Controls -------------------------------------------------------------- */
.btn {
  font:inherit; font-weight:600; cursor:pointer; border-radius:var(--radius-sm);
  padding:8px 14px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink);
}
.btn:hover { border-color:var(--site-bright); background:var(--site-ground); }
.btn-primary { background:var(--site-green); border-color:var(--site-green); color:#FFFFFF; }
.btn-primary:hover { background:var(--site-deep); border-color:var(--site-deep); }
.btn-go { background:var(--secondary-300); border-color:var(--secondary-450); color:var(--secondary-950); }
.btn-go:hover { background:var(--secondary-350); border-color:var(--secondary-500); }
.btn-stop { background:var(--stop-dim); border-color:var(--stop-line); color:var(--stop); }
.btn-stop:hover { background:#FBDCDA; border-color:var(--stop); }
.btn-danger { background:var(--stop); border-color:var(--stop); color:#FFFFFF; }
.btn-danger:hover { background:#C93E44; border-color:#C93E44; }
.btn-quiet { background:transparent; }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

label { display:block; font-size:12px; font-weight:600; color:var(--ink-3); margin-bottom:5px; }
input,select,textarea {
  font:inherit; width:100%; padding:9px 11px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
input:focus,select:focus,textarea:focus { border-color:var(--site-green); outline:none; }
input::placeholder,textarea::placeholder { color:#A5A49F; }
textarea { resize:vertical; min-height:76px; }
select option { background:var(--surface); color:var(--ink); }

/* Make the date and time picker icons obviously clickable. color-scheme
   above is what keeps them dark-on-light rather than invisible. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor:pointer; opacity:.6;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity:1; }
.field { margin-bottom:14px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row-3 { grid-template-columns:1fr 1fr 1fr; }
.hint { font-size:12px; color:var(--ink-3); margin-top:5px; }

/* Tick-more-than-one dropdown (see peoplePicker in ui.js) ----------------- */
.picker { position:relative; }
.picker-toggle {
  width:100%; display:flex; align-items:center; gap:8px; text-align:left;
  font:inherit; padding:9px 11px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer;
}
.picker-toggle:hover { border-color:var(--site-bright); }
.picker[data-open="true"] .picker-toggle { border-color:var(--site-green); }
.picker-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-label.is-empty { color:var(--ink-3); }
.picker-caret { color:var(--ink-3); font-size:11px; }
.picker[data-open="true"] .picker-caret { transform:rotate(180deg); }
.picker-menu[hidden] { display:none; }
.picker-menu {
  margin-top:4px; max-height:244px; overflow-y:auto; padding:4px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:0 6px 18px rgba(5,5,3,.08);
}
.picker-opt {
  display:flex; align-items:center; gap:10px; margin:0; padding:8px 10px;
  border-radius:var(--radius-sm); cursor:pointer;
}
.picker-opt:hover { background:var(--site-ground); }
.picker-opt input { width:auto; margin:0; accent-color:var(--site-green); }
.picker-name { flex:1; }
.picker-role { font-size:12px; color:var(--ink-3); }
.checkline { display:flex; align-items:center; gap:8px; }
.checkline input { width:auto; }
.checkline label { margin:0; }

.filters {
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  padding:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:16px;
}
.filters .field { margin:0; min-width:150px; }
.filters .grow { flex:1; min-width:220px; }

/* Table ----------------------------------------------------------------- */
.tablewrap { border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:var(--surface); }
table { width:100%; border-collapse:collapse; }
thead th {
  position:sticky; top:0; z-index:1; text-align:left; font-size:12px; font-weight:700;
  color:var(--ink-3); background:var(--site-ground);
  padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td { padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--site-ground); }
tbody tr.clickable { cursor:pointer; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.sn { color:var(--ink-3); font-variant-numeric:tabular-nums; }
.desc { max-width:380px; }
.desc small { display:block; color:var(--ink-3); margin-top:3px; }

/* Pills ----------------------------------------------------------------- */
.pill {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:12px; font-size:12px; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.pill-not_started { background:#F4F4F2; color:var(--ink-3); border-color:var(--line); }
.pill-in_progress { background:var(--secondary-100); color:var(--secondary-800); border-color:var(--secondary-450); }
.pill-completed { background:var(--site-pale); color:var(--site-deep); border-color:var(--site-bright); }
.pill-blocked_internal { background:var(--warn-dim); color:var(--warn); border-color:var(--warn-line); }
.pill-blocked_external { background:var(--stop-dim); color:var(--stop); border-color:var(--stop-line); }
.pill-awaiting { background:var(--secondary-200); color:var(--secondary-900); border-color:var(--secondary-550); }
.pill-late { background:var(--stop-dim); color:var(--stop); border-color:var(--stop-line); }
.pill-urgent { background:var(--stop-dim); color:var(--stop); border-color:var(--stop-line); }
.pill-high { background:var(--warn-dim); color:var(--warn); border-color:var(--warn-line); }
.pill-medium { background:#F4F4F2; color:var(--ink-2); border-color:var(--line-soft); }
.pill-low { background:transparent; color:var(--ink-3); border-color:var(--line); }
.pill-edited { background:var(--site-ground); color:var(--site-green); border-color:var(--site-light); }
.pill-client { background:var(--site-ground); color:var(--site-deep); border-color:var(--site-light); font-variant-numeric:tabular-nums; }

/* Client type.

   Deliberately no lime: the secondary scale carries task status (in progress,
   awaiting sign-off), and a client type wearing the same colour read as a
   status at a glance. These are uppercase tags in the green scale only, so
   they are a different kind of label from the status pills rather than a
   competing set of colours. Same 12px corner as every other pill. */
.pill[class*="pill-ct-"] {
  text-transform:uppercase;
  font-size:10px; letter-spacing:0.05em; padding:3px 8px;
}
.pill-ct-demo { background:var(--site-light); color:var(--site-darkest); border-color:var(--site-bright); }
.pill-ct-deploy { background:var(--site-green); color:#FFFFFF; border-color:var(--site-deep); }
.pill-ct-training { background:var(--site-ground); color:var(--site-green); border-color:var(--site-light); }
.pill-ct-universal { background:transparent; color:var(--ink-3); border-color:var(--line); }
.tag-count {
  min-width:20px; text-align:center; padding:1px 7px; border-radius:99px;
  background:var(--site-green); color:#FFFFFF; font-size:11px; font-weight:700;
}

/* Drawer ---------------------------------------------------------------- */
.scrim { position:fixed; inset:0; background:rgba(5,5,3,.34); z-index:40; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(660px,94vw); z-index:41;
  background:var(--surface); border-left:1px solid var(--line);
  overflow-y:auto; padding:24px 26px 60px;
  box-shadow:-12px 0 32px rgba(5,5,3,.08);
}
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:6px; }
.drawer-meta { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 22px; }
.section { border-top:1px solid var(--line-soft); padding-top:18px; margin-top:22px; }
.section > h3 { margin-bottom:12px; }
.kv { display:grid; grid-template-columns:132px 1fr; gap:8px 14px; }
.kv dt { color:var(--ink-3); font-size:13px; }
.kv dd { margin:0; }

.modal {
  position:fixed; z-index:50; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(620px,94vw); max-height:88vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px;
  box-shadow:0 20px 50px rgba(5,5,3,.16);
}
.modal-actions, .drawer-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* Session log ----------------------------------------------------------- */
.sessions { display:flex; flex-direction:column; gap:8px; }
.session {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--site-ground); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
}
.session.running { border-color:var(--secondary-450); background:var(--secondary-100); }
.session-time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.session-label { color:var(--ink-2); flex:1; }
.session-tools { display:flex; gap:6px; }

/* Dashboard ------------------------------------------------------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.card .metric { font-size:30px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.card .metric small { font-size:15px; font-weight:600; color:var(--ink-3); margin-left:3px; }
.card .label { color:var(--ink-3); font-size:13px; margin-top:2px; }
.card-lead { background:var(--site-ground); border-color:var(--site-light); }
.card-lead .metric { color:var(--site-green); }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; }
.panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px; }
.panel-head p { margin:2px 0 0; color:var(--ink-3); font-size:13px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:1150px) { .grid-2 { grid-template-columns:1fr; } }

.bars { display:flex; flex-direction:column; gap:10px; }
.bar-row { display:grid; grid-template-columns:120px 1fr 78px; align-items:center; gap:12px; }
.bar-track { height:22px; background:var(--site-ground); border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; background:var(--site-green); border-radius:4px; }
.bar-fill.alt { background:var(--secondary-600); }
.bar-val { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }

.heat td, .heat th { text-align:center; font-variant-numeric:tabular-nums; }
.heat th:first-child, .heat td:first-child { text-align:left; }
.heat td { border:1px solid var(--line-soft); }

.empty { padding:46px 20px; text-align:center; color:var(--ink-3); }
.empty strong { display:block; color:var(--ink-2); margin-bottom:6px; font-size:15px; }

.notice {
  padding:11px 14px; border-radius:var(--radius-sm); margin-bottom:16px;
  background:var(--site-ground); border:1px solid var(--site-light); color:var(--ink-2);
}
.notice-warn { background:var(--warn-dim); border-color:var(--warn-line); color:#7A4C0B; }
.notice-stop { background:var(--stop-dim); border-color:var(--stop-line); color:#93231C; }

#toast {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
/* Dark on a light page, so a message that appears over anything still reads. */
.toast {
  padding:10px 16px; border-radius:var(--radius-sm); font-weight:600;
  background:var(--site-deep); border:1px solid var(--site-darkest); color:#FFFFFF;
  box-shadow:0 8px 24px rgba(5,5,3,.18);
}
.toast.bad { background:var(--stop); border-color:#9E2A23; color:#FFFFFF; }

.muted { color:var(--ink-3); }
.tabular { font-variant-numeric:tabular-nums; }
.stack { display:flex; flex-direction:column; gap:4px; }
.rowline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:14px; }

/* Client work ------------------------------------------------------------ */
/* The live section is deliberately card-shaped rather than another table:
   "whose work is going on" should be answerable from the layout alone. */
.livedot {
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px;
  background:var(--site-bright); box-shadow:0 0 0 3px var(--site-pale);
  animation:livepulse 2s ease-in-out infinite;
}
.livedot.off { background:#C9C9C5; box-shadow:none; animation:none; }
@keyframes livepulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .livedot { animation:none; } }

.livegrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px; }
.livecard {
  background:var(--site-ground); border:1px solid var(--site-light);
  border-radius:var(--radius); padding:12px;
}
.livecard-head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--site-light);
}
.livecount {
  margin-left:auto; font-size:12px; font-weight:600; color:var(--site-green);
}
.liverow {
  display:flex; align-items:flex-start; gap:14px; padding:10px;
  border-radius:var(--radius-sm); background:var(--surface);
}
.liverow:hover { background:#FFFFFF; box-shadow:0 1px 6px rgba(5,5,3,.07); }
.liverow + .liverow { margin-top:6px; }
.liverow-main { flex:1; min-width:0; }
.liverow-desc { font-weight:600; margin-bottom:6px; }
.liverow-desc .sn { color:var(--ink-3); margin-right:6px; }
.liverow-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; }
.liverow-label { font-size:12px; margin-top:6px; }
.liverow-who { display:flex; align-items:center; gap:9px; text-align:left; }
.liverow-name { font-weight:600; font-size:13px; }
.avatar {
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--site-pale); color:var(--site-deep);
  border:1px solid var(--site-bright);
}

.progresslist { display:flex; flex-direction:column; gap:18px; }
.progrow-head { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.progrow-name { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.progrow-pct { font-weight:700; font-size:15px; color:var(--site-deep); }
.progbar {
  height:10px; border-radius:12px; overflow:hidden;
  background:#EAEFEA; border:1px solid var(--line-soft);
}
.progbar span {
  display:block; height:100%; border-radius:12px;
  background:linear-gradient(90deg, var(--site-green), var(--site-bright));
}
.progbar-empty { background:repeating-linear-gradient(
  135deg, #F2F2F0 0 6px, #E7E7E5 6px 12px); }
.progrow-foot {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:7px; font-size:12px; color:var(--ink-3);
}
.progrow-stats { display:flex; gap:14px; flex-wrap:wrap; margin-left:auto; }
.warn-note { color:var(--warn); }
.stop-note { color:var(--stop); }

@media (max-width: 900px) {
  .livegrid { grid-template-columns:1fr; }
  .progrow-stats { margin-left:0; }
}

/* Leave ------------------------------------------------------------------ */
.card-over { border-color:var(--stop-line); background:var(--stop-dim); }
.leave-meter {
  height:6px; margin-top:10px; border-radius:12px; overflow:hidden;
  background:#EAEFEA; border:1px solid var(--line-soft);
}
.leave-meter span {
  display:block; height:100%; border-radius:12px;
  background:linear-gradient(90deg, var(--site-green), var(--site-bright));
}
.card-over .leave-meter span { background:var(--stop); }

.lv-request {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:12px 14px; background:var(--site-ground);
  border:1px solid var(--site-light); border-radius:var(--radius-sm);
}
.lv-request-main { flex:1; min-width:0; }
.lv-reason { margin-top:6px; color:var(--ink-2); }

.lv-holidays { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.lv-holiday {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; border:1px solid var(--site-light);
  border-left:3px solid var(--site-bright);
  border-radius:var(--radius-sm); background:var(--site-ground);
}
.lv-holiday.is-past { background:transparent; border-color:var(--line-soft);
  border-left-color:var(--line); opacity:.6; }

.pill-lv-regular { background:var(--site-ground); color:var(--site-deep); border-color:var(--site-light); }
.pill-lv-sick { background:var(--warn-dim); color:var(--warn); border-color:var(--warn-line); }
.pill-lvs-pending { background:var(--secondary-100); color:var(--secondary-800); border-color:var(--secondary-450); }
.pill-lvs-approved { background:var(--site-pale); color:var(--site-deep); border-color:var(--site-bright); }
.pill-lvs-rejected { background:var(--stop-dim); color:var(--stop); border-color:var(--stop-line); }
.pill-lvs-cancelled { background:#F4F4F2; color:var(--ink-3); border-color:var(--line); }

tbody tr.lv-over td { background:var(--stop-dim); }
tbody tr.lv-over:hover td { background:#FBDCDA; }

/* Half-day marker and unpaid leave --------------------------------------- */
.pill-lv-half {
  background:transparent; color:var(--ink-3); border-color:var(--line);
  font-weight:600;
}
.lv-unpaid {
  margin-top:8px; padding:8px 11px; border-radius:var(--radius-sm);
  background:var(--warn-dim); border:1px solid var(--warn-line); color:#7A4C0B;
  font-size:13px;
}

/* Department by client (dashboard) ---------------------------------------- */
/* Three departments, three tints from the green scale so a colour means the
   same department everywhere on the page. */
.dept-1 { --dept:var(--site-green); }
.dept-2 { --dept:var(--site-bright); }
.dept-3 { --dept:var(--primary-650); }
.dept-0 { --dept:var(--line); }

.cdlist { display:flex; flex-direction:column; gap:18px; }
.cdclient { padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.cdclient:last-child { border-bottom:none; padding-bottom:0; }
.cdclient-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cdclient-total { margin-left:auto; font-weight:700; font-size:15px; }
.cdbar {
  display:flex; height:10px; border-radius:12px; overflow:hidden; gap:2px;
  background:#EAEFEA; margin-bottom:12px;
}
.cdbar-seg { display:block; height:100%; background:var(--dept); }
.cddepts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.cddept {
  padding:10px 12px; border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); background:var(--site-ground);
}
.cddept-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.cddept-head .muted { margin-left:auto; font-size:12px; }
.cddot { width:9px; height:9px; border-radius:50%; background:var(--dept); flex:none; }
.cdpeople { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.cdperson {
  display:flex; align-items:center; gap:10px; font-size:12px;
  padding:3px 0; border-top:1px solid var(--line-soft);
}
.cdperson span:nth-child(2) { margin-left:auto; font-weight:600; }
.cdperson .muted { min-width:56px; text-align:right; }

/* Department label on people and tasks */
.dept-tag {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px;
  border-radius:12px; font-size:11px; font-weight:600;
  background:var(--site-ground); color:var(--site-deep); border:1px solid var(--site-light);
}

/* Task types grouped by department (Setup) -------------------------------- */
.deptgroup { margin-bottom:16px; }
.deptgroup:last-child { margin-bottom:0; }
.deptgroup-head {
  display:flex; align-items:baseline; gap:8px; margin-bottom:7px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--site-deep); padding-bottom:5px; border-bottom:1px solid var(--site-light);
}
.deptgroup-head .muted { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; }

tbody tr.is-off td { opacity:.55; }

/* Departments overview (owner) ------------------------------------------- */
.dpgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(390px,1fr)); gap:16px; }
.dpcard {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
  display:flex; flex-direction:column;
}
.dpcard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dpcard-head p { margin:3px 0 0; font-size:13px; }
.dplive {
  display:inline-flex; align-items:center; gap:2px; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--site-green);
}
.dpempty { margin:16px 0; color:var(--ink-3); font-size:13px; }

.dpbar {
  height:8px; margin:14px 0 12px; border-radius:12px; overflow:hidden;
  background:#EAEFEA; border:1px solid var(--line-soft);
}
.dpbar span {
  display:block; height:100%; border-radius:12px;
  background:linear-gradient(90deg, var(--site-green), var(--site-bright));
}
.dpstats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dpstat {
  padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--site-ground); border:1px solid var(--line-soft);
}
.dpstat b { display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.dpstat span { font-size:11px; color:var(--ink-3); }
.dpstat.is-bad  { background:var(--stop-dim); border-color:var(--stop-line); }
.dpstat.is-bad b { color:var(--stop); }
.dpstat.is-warn { background:var(--warn-dim); border-color:var(--warn-line); }
.dpstat.is-warn b { color:var(--warn); }
.dpstat.is-wait { background:var(--secondary-100); border-color:var(--secondary-450); }
.dpstat.is-wait b { color:var(--secondary-800); }

.dpmeta {
  display:flex; gap:14px; flex-wrap:wrap; margin-top:12px;
  font-size:12px; color:var(--ink-3);
}
.dplivelist {
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:4px;
}
.dpliverow {
  display:flex; align-items:center; gap:9px; font-size:12px;
  padding:5px 7px; border-radius:var(--radius-sm); cursor:pointer;
}
.dpliverow:hover { background:var(--site-ground); }
.dpliverow-who { font-weight:600; min-width:62px; }
.dpliverow-what { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpopen { margin-top:14px; align-self:flex-start; }

.backlink {
  display:inline-block; margin-bottom:10px; font-size:13px; font-weight:600;
  color:var(--ink-3);
}
.backlink:hover { color:var(--site-green); text-decoration:none; }