/* Layout: a fixed top bar with tabs; each tab is one working view — calendar grids for the rota and leave, lists for requests. */
/* Brand: topdog travel systems. Navy #02102a, purple #700efd, teal #19face, lilac #ab58f2. */
:root {
  --brand-navy: #02102a;
  --brand-purple: #700efd;
  --brand-teal: #19face;
  --brand-grad: linear-gradient(90deg, #19face 0%, #477ce6 55%, #700efd 100%);
  --bg: #f4f3f9;
  --surface: #ffffff;
  --ink: #0b1630;
  --muted: #5a6078;
  --line: #dfdde9;
  --accent: #700efd;
  --accent-ink: #ffffff;
  --accent-soft: #efe6ff;
  --early: #b86e00;  --early-bg: #fff1dc;
  --middle: #0b8a8c; --middle-bg: #dcf7f2;
  --late: #6a2fd6;   --late-bg: #ece3fc;
  --weekend-sh: #2f6fe0; --weekend-sh-bg: #e3edfc;
  --mine: #2f6fe0; --mine-bg: #d6e6ff;
  --swap: #c2187a; --swap-bg: #fbd7ee;
  --unav: #9a7400; --unav-bg: #fff3b0;
  --sick: #b4470c; --sick-bg: #ffe2cc;
  --bday: #a21caf; --bday-bg: #fae8ff;
  --ok: #1f7a3d; --ok-bg: #e1f3e6;
  --warn: #9a6200; --warn-bg: #fdf0d5;
  --bad: #b3261e; --bad-bg: #fbe3e1;
  --weekend: #efeef5;
  --bh: #fff6e5;
  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #02102a; --surface: #0b1a3a; --ink: #e8eaf4; --muted: #9aa2c0; --line: #1f2d52;
    --accent: #a77bff; --accent-ink: #0b0420; --accent-soft: #231a52;
    --early: #f0a83a; --early-bg: #3a2a10; --middle: #19face; --middle-bg: #0c3440; --late: #b996ff; --late-bg: #2a1d5c; --weekend-sh: #7fb0ff; --weekend-sh-bg: #142a4a; --mine: #7fb0ff; --mine-bg: #17325e; --swap: #ff8ad0; --swap-bg: #4a1838; --unav: #f5d46a; --unav-bg: #3d3410; --sick: #ffa46b; --sick-bg: #44230e; --bday: #f0abfc; --bday-bg: #3b0f42;
    --ok: #5fcf85; --ok-bg: #12321e; --warn: #f0b84a; --warn-bg: #3a2c0e; --bad: #ff8a80; --bad-bg: #3d1614;
    --weekend: #071630; --bh: #2a2312;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #02102a; --surface: #0b1a3a; --ink: #e8eaf4; --muted: #9aa2c0; --line: #1f2d52;
  --accent: #a77bff; --accent-ink: #0b0420; --accent-soft: #231a52;
  --early: #f0a83a; --early-bg: #3a2a10; --middle: #19face; --middle-bg: #0c3440; --late: #b996ff; --late-bg: #2a1d5c; --weekend-sh: #7fb0ff; --weekend-sh-bg: #142a4a; --mine: #7fb0ff; --mine-bg: #17325e; --swap: #ff8ad0; --swap-bg: #4a1838; --unav: #f5d46a; --unav-bg: #3d3410; --sick: #ffa46b; --sick-bg: #44230e; --bday: #f0abfc; --bday-bg: #3b0f42;
  --ok: #5fcf85; --ok-bg: #12321e; --warn: #f0b84a; --warn-bg: #3a2c0e; --bad: #ff8a80; --bad-bg: #3d1614;
  --weekend: #071630; --bh: #2a2312;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: .01em; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

header.top { background: var(--brand-navy); color: #fff; position: sticky; top: 0; z-index: 20; }
header.top::after { content: ""; display: block; height: 3px; background: var(--brand-grad); }
.topin { display: flex; align-items: center; gap: 18px; padding: 10px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 34px; width: auto; display: block; }
.brand h1 { font-size: 18px; font-weight: 700; color: #fff; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); letter-spacing: .02em; }
nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
nav.tabs a { padding: 7px 12px; border-radius: 6px; color: #b9bfd6; text-decoration: none; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
nav.tabs a:hover { background: rgba(255,255,255,.08); color: #fff; }
nav.tabs a.on { background: rgba(112,14,253,.35); color: #fff; box-shadow: inset 0 -2px 0 var(--brand-teal); }
header.top :focus-visible { outline-color: var(--brand-teal); }
.badge { background: var(--brand-teal); color: var(--brand-navy); font-weight: 700; border-radius: 9px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.who .btn.ghost { color: #fff; }
.who .btn.ghost:hover { background: rgba(255,255,255,.08); border-color: transparent; }
.role { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(25,250,206,.14); border: 1px solid rgba(25,250,206,.4); color: var(--brand-teal); }
.menu .pop { color: var(--ink); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; display: grid; gap: 18px; }
.banner { padding: 10px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.banner.info { background: var(--accent-soft); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.grid2 > .panel { align-self: start; }
.tbl td.num { white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

.btn { border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 11px; cursor: pointer; }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.neutral { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.pill.early { background: var(--early-bg); color: var(--early); }
.pill.middle { background: var(--middle-bg); color: var(--middle); }
.pill.late { background: var(--late-bg); color: var(--late); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Rota calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal .dh { padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
.cal .day { min-height: 120px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; }
.cal .day:hover { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.cal .day.out { background: var(--bg); opacity: .55; }
.cal .day.we { background: var(--weekend); }
.cal .day.bh { background: var(--bh); }
.cal .day.today .dn { background: var(--accent); color: var(--accent-ink); }
.dn { font-weight: 600; font-size: 12px; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; }
.bhl { font-size: 10.5px; color: var(--warn); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh { display: flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 4px; padding: 2px 5px 2px 0; border-left: 3px solid; background: var(--bg); min-width: 0; }
.sh .tag { font-family: var(--font-display); font-weight: 700; font-size: 11px; width: 16px; text-align: center; flex: none; }
.sh .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sh.early { border-color: var(--early); } .sh.early .tag { color: var(--early); }
.sh.middle { border-color: var(--middle); } .sh.middle .tag { color: var(--middle); }
.sh.late { border-color: var(--late); } .sh.late .tag { color: var(--late); }
.sh.empty .nm { color: var(--muted); font-style: italic; }
.sh.mine { background: var(--accent-soft); font-weight: 600; }
.sh.dim { opacity: .35; }
.sh.conflict { background: var(--bad-bg); }
.sh.pconflict { background: var(--warn-bg); }
.sh .ic { font-size: 11px; flex: none; }
.offl { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: auto; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.legend span { display: inline-flex; gap: 5px; align-items: center; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Leave planner */
.planwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.plan { border-collapse: collapse; font-size: 12px; min-width: 100%; }
table.plan th, table.plan td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: center; height: 28px; }
table.plan th.nm, table.plan td.nm { text-align: left; padding: 0 10px; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 170px; }
table.plan thead th { background: var(--bg); font-weight: 600; color: var(--muted); padding: 3px 0; min-width: 26px; }
table.plan thead th .wd { display: block; font-size: 10px; font-weight: 500; }
table.plan td.we, table.plan th.we { background: var(--weekend); }
table.plan td.bh, table.plan th.bh { background: var(--bh); }
table.plan td.today, table.plan th.today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
table.plan tr.dept td { background: var(--bg); font-weight: 600; text-align: left; padding: 4px 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.lv { display: block; height: 18px; margin: 0 1px; border-radius: 3px; cursor: pointer; }
.lv.approved { background: var(--ok); }
.lv.pending { background: repeating-linear-gradient(45deg, var(--warn) 0 3px, transparent 3px 6px); border: 1px solid var(--warn); }
.lv.other { background: var(--muted); }
.lv.half { width: 50%; }
.lv.half.pm { margin-left: auto; }

/* Tables and lists */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tblwrap { overflow-x: auto; }
.list { display: grid; gap: 8px; }
.item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--line); }
.item.s-pending, .item.s-awaiting { border-left-color: var(--warn); }
.item.s-approved { border-left-color: var(--ok); }
.item.s-declined, .item.s-cancelled, .item.s-stale { border-left-color: var(--bad); }
.item .body { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.empty { color: var(--muted); padding: 10px 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tile b { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile.hi { background: var(--accent-soft); border-color: transparent; }
.tile.hi b { color: var(--accent); }
.meter { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; display: flex; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; }

/* Forms and dialogs */
.field { display: grid; gap: 4px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 8px; min-width: 0; }
textarea { resize: vertical; min-height: 60px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.overlay { position: fixed; inset: 0; background: rgba(10, 16, 22, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(560px, 100%); max-height: calc(100% - 32px); overflow: auto; padding: 20px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.wide { width: min(760px, 100%); }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.note { font-size: 12.5px; padding: 8px 10px; border-radius: 6px; background: var(--bg); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.toasts { position: fixed; bottom: 16px; right: 16px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--ink); color: var(--surface); padding: 10px 14px; border-radius: 8px; max-width: 360px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast.err { background: var(--bad); color: #fff; }
.results { border: 1px solid var(--line); border-radius: 6px; max-height: 180px; overflow: auto; }
.results button { display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.results button:hover { background: var(--bg); }
.results img { width: 22px; height: 22px; border-radius: 50%; }

@media (max-width: 760px) {
  main { padding: 12px; }
  .cal .day { min-height: 92px; padding: 3px; }
  .sh { font-size: 10.5px; gap: 2px; }
  .sh .tag { width: 11px; }
  .cal .dh { padding: 4px; font-size: 10px; }
  .offl, .bhl { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Sign-in screens */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; width: min(420px, 100%); display: grid; gap: 14px; }
.auth { background: var(--brand-navy); }
.auth .card { overflow: hidden; padding-top: 0; }
.auth .brand { margin: 0 -24px 6px; padding: 18px 24px; background: var(--brand-navy); border-bottom: 3px solid; border-image: var(--brand-grad) 1; }
.auth input { width: 100%; }
.err { color: var(--bad); font-size: 13px; min-height: 1em; }
.menu { position: relative; }
.menu .btn { display: inline-flex; gap: 6px; align-items: center; }
.menu .pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; min-width: 180px; padding: 4px; z-index: 30; }
.menu .pop button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu .pop button:hover { background: var(--bg); }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; user-select: all; }
a.btn { text-decoration: none; color: inherit; display: inline-block; }
.menu .pop[hidden], .results[hidden] { display: none; }

/* Weekend shift colour and initials badges */
.sh.weekend { border-color: var(--weekend-sh); } .sh.weekend .tag { color: var(--weekend-sh); }
.pill.weekend { background: var(--weekend-sh-bg); color: var(--weekend-sh); }
.ini { display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border-radius: 4px; color: #fff; font: 700 10.5px/1 var(--font-display); letter-spacing: .03em; flex: none; }

/* Rota cell states (match the previous system's colours) */
.sh.mine { background: var(--mine-bg); font-weight: 600; }
.sh.swapped { background: var(--swap-bg); }
.sh.unav { background: var(--unav-bg); }
.sh.me { font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--mine); }
.sh.gap { background: var(--bad-bg); } .sh.gap .nm { color: var(--bad); font-weight: 600; }
.sh .ic { color: var(--swap); font-weight: 700; }
.al { font-size: 11px; color: var(--bad); background: var(--bad-bg); border-radius: 4px; padding: 1px 5px; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al + .al { margin-top: 2px; }
.al.pend { color: var(--warn); background: var(--warn-bg); }
.pill.swap { background: var(--swap-bg); color: var(--swap); }
.pill.unav { background: var(--unav-bg); color: var(--unav); }
.cal .sh { flex: none; height: 22px; }
@media (max-width: 760px) { .cal .sh { height: 18px; } }
.al.sick { color: var(--sick); background: var(--sick-bg); }
.pill.sick { background: var(--sick-bg); color: var(--sick); }
.lv.sick { background: var(--sick); }
.closed { font-size: 11px; font-weight: 600; color: var(--muted); background: repeating-linear-gradient(45deg, var(--bg) 0 6px, var(--surface) 6px 12px); border: 1px dashed var(--line); border-radius: 4px; padding: 3px 6px; text-align: center; }

/* ---------- Printing ---------- */
#printArea { display: none; }
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  html, body { background: #fff !important; color: #000 !important; height: auto; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block; font: 9.5pt/1.25 var(--font-body); color: #000; }
  .ppage { page-break-after: always; break-after: page; display: flex; flex-direction: column; gap: 3mm; height: 190mm; }
  .ppage:last-child { page-break-after: auto; break-after: auto; }
  .ppage header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 2mm; }
  .ppage h1 { font: 700 16pt/1.1 var(--font-display); margin: 0 0 1mm; }
  .pmeta { text-align: right; font-size: 8pt; color: #444; }
  .pkey { display: flex; flex-wrap: wrap; gap: 1mm 5mm; font-size: 8pt; }
  .pkey i.pk { display: inline-block; width: 3mm; height: 3mm; border: 1px solid #888; margin-right: 1mm; vertical-align: -0.4mm; }
  .ppage footer { display: flex; justify-content: space-between; gap: 6mm; border-top: 1px solid #999; padding-top: 1.5mm; }
  table.pcal { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
  table.pcal th { font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; border: 1px solid #000; padding: 1mm; background: #eee; }
  table.pcal td { border: 1px solid #000; vertical-align: top; padding: 1mm 1.2mm; overflow: hidden; }
  table.pcal td.out { background: #f4f4f4; color: #999; }
  table.pcal td.we { background: #f7f7f7; }
  .pd { display: flex; gap: 2mm; align-items: baseline; margin-bottom: .6mm; }
  .pd b { font-size: 10pt; }
  .pbh { font-size: 7pt; font-style: italic; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ps { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .8mm; border-radius: 1mm; }
  .ps b { display: inline-block; width: 3.4mm; }
  .ps em { font-weight: 700; }
  .pl { font-size: 8pt; font-weight: 600; padding: 0 .8mm; border-radius: 1mm; margin-top: .4mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pclosed { font-size: 8pt; font-weight: 700; text-align: center; border: 1px dashed #000; padding: .6mm; }
  .colour, .colour * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .colour .ps.swap, .colour i.pk.swap { background: #fbd7ee; }
  .colour .pl.pal, .colour i.pk.pal { background: #fbe3e1; color: #8a1c14; }
  .colour .pl.psick, .colour i.pk.psick { background: #ffe2cc; color: #8a3a0a; }
  .colour td.bh { background: #fff6e5; }
  .ps.me { font-weight: 700; box-shadow: inset 0 0 0 1.2px #2f6fe0; }
  .colour .ps.me:not(.swap), .colour i.pk.me { background: #d6e6ff; }
  .colour i.pk.me { border-color: #2f6fe0; }
  .mono .ps.me { box-shadow: inset 0 0 0 1.2px #000; }
  .mono .pl { border: 1px solid #000; }
}

/* Working from home */
.wfh { flex: none; font: 700 9.5px/1 var(--font-display); letter-spacing: .02em; color: #fff; background: #0b8a8c; border-radius: 3px; padding: 2px 4px; margin-left: auto; white-space: nowrap; }
.sh .wfh + .ic { margin-left: 2px; }
.al.wfhl { color: #0b6b6d; background: #dcf7f2; }
.pill.wfhp { background: #dcf7f2; color: #0b6b6d; }
.wfhbox details summary { color: var(--accent); }
@media print { .pwfh { font-size: 7pt; font-weight: 700; border: 1px solid #000; border-radius: 1mm; padding: 0 .6mm; margin-left: .6mm; } }

/* Birthdays */
.al.bday { color: var(--bday); background: var(--bday-bg); }
.note.bdaynote { background: var(--bday-bg); color: var(--bday); font-weight: 600; }
@media print { .colour .pl.pbday { background: #fae8ff; color: #7a1584; } .mono .pl.pbday { font-style: italic; } }

/* two-step sign-in */
.codein { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .2em; max-width: 220px; }
.qr { margin: 10px 0; }
.qr svg { display: block; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.steps2 { padding-left: 20px; } .steps2 li { margin-bottom: 14px; }
.recov { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 28px; font-size: 17px; }
.auth .card.wide2 { max-width: 520px; }
.tfh { margin-top: 0; }

/* department rotas */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deptsel { font-weight: 600; min-width: 150px; }
.deptname { font-family: var(--font-display); font-size: 15px; margin-right: 4px; }
.drota { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.drota summary { cursor: pointer; padding: 4px 0; }
.drota[open] summary { margin-bottom: 8px; }
table.pattern select { min-width: 120px; }
table.pattern td, table.pattern th { padding: 5px; }