:root{
  --paper:#f5f2ed; --card:#ffffff; --ink:#201b16; --ink-soft:#6b6258; --ink-faint:#9a9082;
  --line:#e6e0d6; --line-strong:#d8d0c2; --nav:#1b1714; --nav-soft:#a99f92;
  --accent:#8a1a0f; --accent-ink:#6f140b; --weekend:#efeae1; --today:#f7ede2;
  --hover:#f1ece4; --good:#0d7d6f; --warn:#b45309; --radius:10px;
  --track:#ece6dc; --scrim:rgba(27,23,20,.46);
  --shadow:0 1px 2px rgba(32,27,22,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:0;margin:0}
h2,h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent)}
::selection{background:#f0d9d4}
.hidden{display:none!important}

/* ---------- auth screen ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:var(--paper)}
.authcard{width:100%;max-width:392px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 3px rgba(32,27,22,.06);padding:42px 36px}
.authcard .mark{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#a8261a,#8a1a0f);
  display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;color:#fff;margin-bottom:18px}
.authcard{text-align:center}
.authcard .form{text-align:left}
.authcard .authlogo{max-width:240px;width:78%;height:auto;display:block;margin:2px auto 16px}
.authcard h1{font-size:30px;margin-bottom:4px}
.authcard p.sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 22px}
.auth .err{background:#fdecec;color:#b3261e;border:1px solid #f3bdb8;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.auth .ok{background:#e7f6f2;color:#0b7a6e;border:1px solid #b6e3da;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}

.rules{font-size:12px;color:var(--ink-soft);background:#f7f2ef;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}

/* ---------- app shell ---------- */
.app{display:flex;min-height:100vh}
.side{width:236px;flex:0 0 236px;background:var(--nav);color:#fff;display:flex;flex-direction:column;
  padding:18px 14px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#a8261a,#8a1a0f);
  display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:20px;color:#fff}
.brand b{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:20px;letter-spacing:0;display:block;line-height:1.05}
.brand small{color:var(--nav-soft);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--nav-soft);
  padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;text-align:left;transition:.15s}
.nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.nav button.on{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 2px 0 0 #c0563f}
.nav button.on .ic{color:#d98c80}
.ic{width:18px;height:18px;flex:0 0 18px;color:var(--nav-soft);transition:.15s}
.nav button:hover .ic{color:#fff}
.badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;
  border-radius:10px;display:grid;place-items:center;padding:0 5px}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.me{display:flex;align-items:center;gap:10px;padding:6px 8px}
.me .nm{font-size:13px;font-weight:600;line-height:1.1}
.me .rl{font-size:11px;color:var(--nav-soft);text-transform:capitalize}
.me .out{margin-left:auto;color:var(--nav-soft);background:transparent;border:0;padding:6px;border-radius:8px}
.me .out:hover{background:rgba(255,255,255,.08);color:#fff}

.main{flex:1;min-width:0;padding:24px 30px 60px;max-width:1320px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.head h1{font-size:31px;letter-spacing:.2px}
.head p{margin:6px 0 0;color:var(--ink-soft);font-size:13.5px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:8px;
  font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.15s;text-decoration:none}
.btn:hover{border-color:var(--ink-faint);background:#faf7f2}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.block{width:100%;justify-content:center;padding:11px}
.btn.danger{color:#b91c1c}.btn.danger:hover{background:#fef2f2;border-color:#fca5a5}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.nav button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:22px}

select,input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink);background:var(--card)}
textarea{resize:vertical;min-height:74px}
.fld{display:block}
.fld .lab{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form{display:grid;gap:16px;max-width:560px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);font-weight:500;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent)}

/* ---------- calendar timeline ---------- */
.calbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.month{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:22px;min-width:160px}
.nudge{display:flex;gap:4px}
.nudge button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--card);display:grid;place-items:center;color:var(--ink-soft)}
.nudge button:hover{color:var(--ink);border-color:var(--ink-faint)}
.legend{display:flex;gap:13px;margin-left:auto;flex-wrap:wrap;align-items:center}
.lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);font-weight:500}
.dot{width:11px;height:11px;border-radius:3px}
.timewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.grid{display:grid;min-width:760px}
.grow{display:grid;grid-template-columns:var(--cols);align-items:stretch}
.gh{position:sticky;top:0;z-index:3}
.namecol{position:sticky;left:0;z-index:2;background:var(--card);border-right:1px solid var(--line-strong);padding:0 14px;display:flex;align-items:center;gap:10px}
.gh .namecol{z-index:4;background:#faf7f2}
.dayhd{text-align:center;padding:8px 0 7px;border-left:1px solid var(--line);font-size:11px;color:var(--ink-soft)}
.dayhd .dow{display:block;font-size:9.5px;letter-spacing:.04em;color:var(--ink-faint);text-transform:uppercase}
.dayhd .dn{font-weight:600;font-size:13px;color:var(--ink)}
.dayhd.wknd{background:var(--weekend)}
.dayhd.today{background:var(--today)}
.dayhd.today .dn{color:var(--warn)}
.gh .grow{background:#faf7f2;border-bottom:1px solid var(--line-strong)}
.prow{border-bottom:1px solid var(--line);min-height:46px}
.prow:last-child{border-bottom:0}
.av{border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:0 0 auto}
.av.s{width:28px;height:28px;font-size:11px}.av.m{width:36px;height:36px;font-size:13px}
.nmeta{min-width:0}
.nmeta .n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmeta .d{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.cell{border-left:1px solid var(--line);position:relative}
.cell.wknd{background:var(--weekend)}
.cell.today{box-shadow:inset 2px 0 0 #f0b86b,inset -2px 0 0 #f0b86b}
.cell.hol{background:repeating-linear-gradient(45deg,#efeae1,#efeae1 4px,#e6e0d6 4px,#e6e0d6 8px)}
.bar{position:absolute;top:7px;bottom:7px;left:2px;right:2px;border-radius:4px}
.bar.start{border-top-left-radius:7px;border-bottom-left-radius:7px;left:3px}
.bar.end{border-top-right-radius:7px;border-bottom-right-radius:7px;right:3px}
.bar.pending{}
.bar.half-r{left:50%}.bar.half-l{right:50%}
.empty-row{padding:34px;text-align:center;color:var(--ink-faint);font-size:14px}

/* ---------- lists ---------- */
.req{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.req:last-child{border-bottom:0}
.req .who{display:flex;align-items:center;gap:11px;min-width:190px}
.req .det{flex:1;min-width:0}
.req .det .ln1{font-size:14px;font-weight:600}
.req .det .ln2{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.tag{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:.03em;text-transform:uppercase}
.pill{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;text-transform:capitalize}
.pill.pending{background:#fff4e3;color:#b45309}.pill.approved{background:#e7f6f2;color:#0b7a6e}
.pill.declined{background:#fdecec;color:#c0322b}.pill.cancelled{background:#ece6dc;color:#6b6258}
.acts{display:flex;gap:7px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--card);display:grid;place-items:center}
.iconbtn.ok{color:var(--good)}.iconbtn.ok:hover{background:#e7f6f2;border-color:#5ec6b6}
.iconbtn.no{color:#c0322b}.iconbtn.no:hover{background:#fdecec;border-color:#f0a8a3}

/* ---------- stats / ring ---------- */
.stats{display:flex;flex-wrap:wrap;gap:0;margin:0}
.stat{padding:2px 30px;border-left:1px solid var(--line)}
.stat:first-child{padding-left:0;border-left:0}
.stat .k{font-size:10.5px;color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.1em}

.stat .v{font-family:'Inter',sans-serif;font-weight:700;font-size:28px;margin-top:7px;line-height:1;color:var(--ink);display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
/* The unit is a whisper against the figure, set in the body face so the serif numeral
   stays the thing you read. */
.stat .v .unit{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  color:var(--ink-faint);letter-spacing:.06em;text-transform:lowercase}
.stat .v small{font-size:14px;color:var(--ink-faint);font-weight:600}
.ring{--p:0;width:128px;height:128px;border-radius:50%;flex:0 0 128px;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--track) 0);display:grid;place-items:center;position:relative}
/* A hairline on the outer edge, and the disc inside leaves only a fine arc showing.
   A narrow stroke reads as considered where a thick band reads as a pie chart. */
.ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(32,27,22,.06)}
.ring i{width:102px;height:102px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;font-style:normal;box-shadow:0 1px 2px rgba(43,34,30,.06)}

.ring i b{font-family:'Inter',sans-serif;font-size:29px;font-weight:700;line-height:1;display:block;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring i span{font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:1px;line-height:1;display:block}

/* ---------- team / groups ---------- */
.deptlabel{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;padding:16px 18px 8px}
.deptlabel::before{content:"";display:inline-block;width:16px;height:2px;background:var(--accent);vertical-align:middle;margin:-2px 9px 0 0}
.person{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line)}
.person:last-child{border-bottom:0}
.person .info{flex:1;min-width:0}
.person .info .nm{font-size:14px;font-weight:600}
.person .info .ro{font-size:12.5px;color:var(--ink-soft)}
.person .alw{text-align:right;font-size:13px;color:var(--ink-soft)}
.person .alw b{color:var(--ink)}

.flag{font-size:11px;font-weight:700;color:var(--ink-soft);background:#efeae1;border-radius:6px;padding:2px 7px;letter-spacing:.03em}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- types / chips ---------- */
.types{display:flex;flex-wrap:wrap;gap:8px}
.typ{border:1.5px solid var(--line-strong);background:var(--card);padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.typ.on{color:var(--ink);background:#f7f1ee;border-color:#cdb6ad}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line-strong);background:var(--card);padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.chip.on{border-color:var(--accent);color:var(--accent-ink);background:#f6ece9}
.summary{background:#f7efec;border:1px solid #ecd9d3;border-radius:10px;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.summary .big{font-family:'Inter';font-weight:700;font-size:24px;color:var(--accent-ink)}
.summary small{color:var(--ink-soft);font-size:12.5px}

/* ---------- modal ---------- */

.scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:50;padding:20px;overflow:auto}

.modal{background:var(--card);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:100%;max-width:540px;overflow:hidden;margin:auto}
.modal .mh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal .mh h3{font-size:18px}
.modal .mb{padding:22px;display:grid;gap:15px;max-height:70vh;overflow:auto}
.modal .mf{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:9px;align-items:center}
.hol-item{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.hol-item:last-child{border-bottom:0}
.hol-item .hn{font-size:13.5px;font-weight:500}.hol-item .hd{font-size:12.5px;color:var(--ink-soft)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:500;opacity:0;transition:.25s;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#b3261e}

.notiflist{position:absolute;right:0;top:46px;width:340px;max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:30}
.notiflist .np-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600}
.notiflist .np-link{border:0;background:transparent;color:var(--accent-ink);font-size:12.5px;font-weight:600;cursor:pointer;font-family:Inter,sans-serif}
.notiflist .np-link:hover{text-decoration:underline}
.notiflist .np-empty{padding:18px 15px;color:var(--ink-soft);font-size:13px}
.notiflist .nrow.compact{padding:10px 14px}
.notiflist .nrow.compact .nt{font-size:13px}

@media (max-width:860px){
  .stats{grid-template-columns:1fr}
  .main{padding:18px 16px 60px}
  .two{grid-template-columns:1fr}
  .app{flex-direction:column}
  .side{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;padding:10px 14px;flex-wrap:wrap}
  .brand{padding:0;margin-right:auto}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px;width:100%;order:3;margin-top:8px}
  .nav button{width:auto;padding:8px 11px}.nav button span.lab{display:none}
  .side-foot{margin-top:0;border-top:0;padding-top:0;order:2}
  .me .nm,.me .rl{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Admin acting-as banner */
.actbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:#92400e;color:#fff;padding:9px 16px;font-size:13.5px;text-align:center}
.actbar b{font-weight:700}
.actbar button{background:#fff;color:#92400e;border:0;border-radius:7px;padding:6px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer}
.actbar button:hover{background:#fde68a}

/* Calendar team grouping header */
.teamhd{grid-column:1 / -1;position:sticky;left:0;background:var(--bg-soft,#f3f4f6);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);padding:7px 14px 7px 26px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.lochd{grid-column:1 / -1;position:sticky;left:0;background:var(--nav);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;letter-spacing:.2px;
  color:#fff;padding:9px 14px;border-top:1px solid var(--nav)}
.lochd::before{content:"";display:inline-block;width:14px;height:2px;background:var(--accent);
  vertical-align:middle;margin:-3px 10px 0 0}

/* Group membership editor */
.memlist{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:6px;margin-top:6px}
.memrow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:7px;cursor:pointer}
.memrow:hover{background:var(--bg-soft,#f3f4f6)}
.memrow span{font-size:13.5px;font-weight:600}
.memrow small{margin-left:auto;color:var(--ink-faint);font-size:12px}

/* Calendar user hover card */
.userpop{position:absolute;z-index:60;width:250px;background:var(--card,#fff);border:1px solid var(--line-strong,#d7dae0);
  border-radius:11px;box-shadow:0 12px 30px rgba(16,18,27,.16);padding:12px 13px;font-size:13px;pointer-events:none}
.userpop .ph{font-weight:700;font-size:14px}
.userpop .psub{color:var(--ink-soft);font-size:12px;margin-bottom:8px}
.userpop .pr{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-top:1px solid var(--line)}
.userpop .pr span{color:var(--ink-soft)}
.userpop .pr b{font-weight:600;text-align:right}

/* Prominent notification badge + notifications page */
.badge.alert{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.18)}
.nav button .badge.alert{animation:notifpulse 2s ease-in-out infinite}
@keyframes notifpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
.notif-row{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-bottom:1px solid var(--line)}
.notif-row:last-child{border-bottom:0}
.notif-row .ndot{width:9px;height:9px;border-radius:50%;background:transparent;margin-top:5px;flex:0 0 auto}
.notif-row.unread{background:#fef2f2}
.notif-row.unread .ndot{background:#dc2626}
.notif-row .nt{font-size:13.5px;line-height:1.4}
.notif-row.unread .nt{font-weight:600}
.notif-row .nw{font-size:11.5px;color:var(--ink-faint);margin-top:3px}

/* Christmas shutdown shading on the calendar */
.cell.shut{background:repeating-linear-gradient(45deg,rgba(185,28,28,.10),rgba(185,28,28,.10) 5px,rgba(185,28,28,.04) 5px,rgba(185,28,28,.04) 10px)}
.dayhd.shut{background:rgba(185,28,28,.12);color:#b91c1c}

/* My leave status filter chips */
.fchips{display:flex;gap:8px;flex-wrap:wrap;padding:14px 15px;border-bottom:1px solid var(--line)}
.fchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.fchip:hover{border-color:var(--accent)}
.fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fchip .fc{background:rgba(0,0,0,.08);border-radius:999px;padding:0 7px;font-size:11.5px;min-width:18px;text-align:center}
.fchip.on .fc{background:rgba(255,255,255,.28)}

/* Activity log */
.log-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:11px 15px;border-bottom:1px solid var(--line);font-size:13px}
.log-row:last-child{border-bottom:0}
.log-row .lmain{line-height:1.5}
.log-row .lcontent{min-width:0;flex:1}
.log-row .lmeta{color:var(--ink-faint);font-size:11.5px;margin-top:2px;letter-spacing:.01em}
.log-row .act{display:inline-block;font-weight:700;background:#f6ece9;color:var(--accent-ink);border-radius:5px;padding:1px 7px;margin-right:5px;font-size:12px}
.log-row .as{color:#b45309;font-weight:600}
.log-row .sub{color:var(--ink-soft);font-weight:600}
.log-row .dt{color:var(--ink-faint)}
.log-row .lwhen{color:var(--ink-faint);font-size:12px;white-space:nowrap;flex:0 0 auto}

/* Dashboard rows */
.dashrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 15px;border-bottom:1px solid var(--line);font-size:13.5px}
.dashrow:last-child{border-bottom:0}

/* Dashboard plain-English tiles */
.dashtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.dashtile{padding:4px 2px}
.dashtile .num{font-size:38px;font-weight:800;line-height:1}
.dashtile .tl{font-size:15px;font-weight:700;margin-top:6px}
.dashtile .ts{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.dashrow b{font-weight:700}

/* Make dashboard rows feel clickable */
.dashrow{transition:background .12s}
.dashrow:hover{background:var(--hover,#f5f6f8)}
.userpop .btn{width:100%}

/* Morning/afternoon segmented control on the booking form */
.seg{display:inline-flex;border:1px solid var(--line-strong,#d7dae0);border-radius:9px;overflow:hidden}
.seg .segbtn{appearance:none;border:0;background:var(--card,#fff);color:var(--ink,#1f2430);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.seg .segbtn + .segbtn{border-left:1px solid var(--line-strong,#d7dae0)}
.seg .segbtn.on{background:var(--accent,#8a1a0f);color:#fff}

/* Small section heading inside cards (My team) */
.subhd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);padding:10px 15px 4px}



/* Book leave: read-only list of full days */
.blockbox{display:flex;flex-wrap:wrap;gap:6px}
.blockchip{background:rgba(185,28,28,.12);color:#b91c1c;border-radius:7px;padding:4px 9px;font-size:12.5px;font-weight:600}
.blockmore{color:var(--ink-soft);font-size:12px;align-self:center}
.blockempty{color:var(--ink-soft);font-size:13px}

/* ---------- premium finishing ---------- */
.summary .big{color:var(--accent-ink)}
.dashtile .num{font-weight:700;letter-spacing:-.02em}
.dashtile .tl{letter-spacing:.01em}
.deptlabel,.subhd{color:var(--ink-soft)}
/* quieter card section headings inside list cards */
.card > .deptlabel:first-child{padding-top:18px}
/* refined avatars: square-ish, less bubbly */
.av{border-radius:9px}
.av.s{border-radius:7px}
/* tab labels in tracked case for an editorial feel */
.tabs button{letter-spacing:.01em}
/* primary button: subtle depth, crisp */
.btn.primary{box-shadow:0 1px 1px rgba(138,26,15,.18)}
.btn.primary:hover{box-shadow:0 2px 6px rgba(138,26,15,.22)}
/* hairline between stacked cards handled by their own borders; add breathing room */
.card{overflow:hidden}

/* ---------- notifications ---------- */
.nfgroup{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);padding:14px 16px 6px}
.nrow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line)}
.nrow:first-of-type{border-top:0}
.nrow.unread{background:#faf4f0}
.nrow.unread .nt{font-weight:600}
.nrow.clickable{cursor:pointer}
.nrow.clickable:hover{background:var(--hover)}
.nicon{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--track);color:var(--ink-soft)}
.nicon svg{width:16px;height:16px}
.nicon.ok{background:#e3f3ee;color:#0d7d6f}
.nicon.no{background:#fdecec;color:#c0322b}
.nicon.muted{background:#ece6dc;color:#6b6258}
.nicon.pending{background:#fdf1e3;color:#b45309}
.nicon.warn{background:#f6ece9;color:var(--accent-ink)}
.nbody{flex:1;min-width:0}
.nt{font-size:14px;color:var(--ink);line-height:1.4}
.ntime{font-size:12px;color:var(--ink-faint);margin-top:2px}
.autobadge{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);background:var(--track);border-radius:4px;padding:1px 6px;vertical-align:middle}

/* ---------- reports ---------- */
.rep-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.rf{display:flex;flex-direction:column;gap:4px}
.rf .lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.rf input,.rf select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:13.5px;font-family:inherit;color:var(--ink);background:var(--card)}
.rf-presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rf-actions{margin-left:auto}
.rep-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rep-stat{flex:1;min-width:150px}
.rep-stat .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.rep-stat .v{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.rep-typechips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 18px}
.typechip{display:inline-flex;align-items:center;gap:7px;font-size:13px;background:var(--hover);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.typechip .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.typechip b{font-weight:700}
.rtable-wrap{overflow-x:auto}
.rtable{width:100%;border-collapse:collapse;font-size:13px}
.rtable th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding:9px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.rtable td{padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.rtable tbody tr:hover{background:var(--hover)}
.rtable th.num,.rtable td.num{text-align:right}
.rtable tfoot td{padding:9px 14px;border-top:1px solid var(--line-strong)}
.cell.full{background:repeating-linear-gradient(45deg,rgba(180,83,9,.10),rgba(180,83,9,.10) 5px,rgba(180,83,9,.03) 5px,rgba(180,83,9,.03) 10px)}
.overtag{display:inline-block;background:rgba(138,26,15,.10);color:var(--accent-ink);font-weight:700;font-size:12px;padding:1px 8px;border-radius:999px}
.rep-stat-warn .v{color:var(--accent-ink)}
.rep-overbar{border-left:3px solid var(--accent);background:rgba(138,26,15,.05);font-size:13.5px;margin-bottom:14px}
.cell.multi .bar{border-radius:3px}
.cell.off{background:var(--weekend)}
.dayhd .dn{}
.simple-table{border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13.5px}
.simple-table .st-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.simple-table .st-row:last-child{border-bottom:0}
.simple-table .st-head{background:var(--surface-2,#faf8f4);font-weight:600;color:var(--ink-soft)}
@media print {
  /* Browsers drop background colours when printing unless told otherwise, and the leave
     blocks are drawn as backgrounds, so without this the calendar prints as an empty
     grid. */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .nav, .topbar, .side, button, select, .actions { display: none !important; }
  .cal, .card { break-inside: avoid; }
  body { background: #fff; }
  .main { margin: 0 !important; padding: 0 !important; }
  /* Belt and braces: if a printer or driver still refuses the fill, an outline keeps
     the booked days visible. */
  .bar { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35) !important; }
  .grid .cell.wknd, .grid .cell.hol { background: #eee !important; }
  /* The search box is no use on paper. */
  .searchbar, .searchfield { display: none !important; }
}
:focus-visible { outline: 2px solid var(--accent, #8a1a0f); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 14px; z-index: 1000; border: 1px solid var(--line); }
.skip-link:focus { left: 8px; top: 8px; }

/* Half-day working pattern chip: a distinct, softer state from a full day. */
.chip.half { background: var(--accent-soft, #eef4f1); border-style: dashed; }

/* Calendar hover card: who is off, what type, and when. */
.caltip {
  position: absolute; z-index: 90; pointer-events: none;
  background: #3f4a25; color: #fff; border-radius: 10px;
  padding: 10px 13px; max-width: 260px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  font-size: 13px; line-height: 1.45;
}
.caltip .ct-name { font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.caltip .ct-type { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.caltip .ct-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.caltip .ct-when { opacity: .9; margin-top: 2px; }
.caltip .ct-status { margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .95; }
.caltip .ct-note { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.22); font-size: 12px; opacity: .9; }

/* Search field. A plain input[type=search] picks up the browser's own styling, which
   does not match anything else here, so it gets its own treatment: the magnifier sits
   inside the field, and the whole thing lifts slightly on focus. */
.searchbar{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.searchfield{position:relative;flex:1;min-width:240px;max-width:420px}
.searchfield svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--ink-faint);stroke-width:2;
  stroke-linecap:round;pointer-events:none;transition:stroke .15s ease}
.searchfield input[type=search]{
  width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;
  font:inherit;font-size:14px;color:var(--ink);
  padding:10px 36px 10px 38px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.searchfield input[type=search]::placeholder{color:var(--ink-faint)}
.searchfield input[type=search]:hover{border-color:var(--ink-faint)}
.searchfield input[type=search]:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(138,26,15,.12)}
.searchfield:focus-within svg{stroke:var(--accent)}
/* the browser's own clear button is inconsistent, so we draw our own */
.searchfield input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.searchfield .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;cursor:pointer;line-height:1;padding:5px;border-radius:50%;
  color:var(--ink-faint);font-size:15px;display:none}
.searchfield .clr:hover{background:var(--paper);color:var(--ink)}
.searchfield.has-value .clr{display:block}
.searchcount{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.searchcount b{color:var(--ink);font-weight:600}
/* Compact variant for the calendar toolbar, where it sits beside the dropdowns. */
.searchfield.compact{min-width:0;width:180px;flex:0 0 auto}
.searchfield.compact input[type=search]{padding:8px 30px 8px 34px;font-size:13.5px}
.searchfield.compact svg{left:11px;width:15px;height:15px}





/* Notes under the allowance figures: one measured block, with anything that needs
   attention lifted out above it rather than buried in the same grey. */
.alw-note{color:var(--ink-soft);font-size:12.5px;line-height:1.7;margin:24px 0 0;max-width:560px}
.alw-note.faint{color:var(--ink-faint);font-size:11.5px;margin-top:6px;line-height:1.65}
.alw-flag{font-size:12.5px;font-weight:600;margin:16px 10px 0 0;padding:7px 13px;
  border-radius:999px;display:inline-block;letter-spacing:.01em}
.alw-flag.over{background:#fdf3e8;color:#a15c07}
.alw-flag.hold{background:#fceceb;color:#a81f1a}

/* The allowance panel. Generous space around the figures is most of what separates
   this from a dashboard widget: the numbers are given room rather than packed in. */
.alwcard{display:flex;gap:34px;align-items:center;flex-wrap:wrap;padding:26px 28px}
@media (max-width:760px){
  .alwcard{padding:22px 20px;gap:24px}
  .alwcard .ring{width:112px;height:112px;flex:0 0 112px}
  .alwcard .ring i{width:90px;height:90px}
  .alwcard .ring i b{font-size:25px}
  .stat{padding:2px 16px}
  .stat .v{font-size:24px}
}

/* Two-option switch. Showing both choices with the active one filled makes the current
   state obvious, where a single button labelled with its own state does not. */
.segmented{display:inline-flex;background:var(--paper);border:1px solid var(--line-strong);
  border-radius:999px;padding:2px;gap:2px}
.segmented .seg{border:0;background:none;cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink-soft);padding:5px 13px;border-radius:999px;
  white-space:nowrap;transition:background .15s ease,color .15s ease}
.segmented .seg:hover{color:var(--ink)}
.segmented .seg.on{background:var(--accent);color:#fff}

/* Calendar toolbar. The controls are given fixed widths so the row occupies the same
   space whether or not the teams have loaded yet: without this the empty team dropdown
   collapsed to nothing, the row rewrapped, and every control jumped as the data
   arrived or the scope changed. */
.calfilter{width:150px;flex:0 0 150px}
.toolbar .searchfield.compact{width:180px;flex:0 0 180px}
.toolbar .segmented{flex:0 0 auto}
@media (max-width:1100px){
  .calfilter{width:132px;flex:0 0 132px}
  .toolbar .searchfield.compact{width:160px;flex:0 0 160px}
}