/* ============================================================================
   COREIDON.AI · Human Resources — design system
   Mobile-first. Base rules render correctly at 360px with no media query
   applied; min-width breakpoints layer enhancements on top.
   Breakpoint ladder: base 0–639 · sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Theme tokens ─────────────────────────────────────────────────────── */
/* `color-scheme` is not decoration. The list a <select> drops down is painted
   by the operating system, not by this stylesheet — no rule on `option` can
   reach it, which is why the dark theme showed white option lists. This is the
   one property the OS reads, and it also fixes scrollbars, date pickers and
   the caret in every input. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --canvas:        #FFFFFF;
  --section:       #F8F5F0;
  --surface:       #FFFFFF;
  --surface-2:     #F8F5F0;
  --surface-sunk:  #F8F5F0;
  --border:        #E5E7EB;
  --divider:       #E5E7EB;
  --text:          #000000;
  --text-2:        #2B303B;
  --text-muted:    #5B6472;

  --navy:          #091C3A;
  --navy-hover:    #0E2A57;
  --cyan:          #0284C7;
  --cyan-soft:     rgba(2, 132, 199, 0.10);
  --success:       #16A34A;
  --success-soft:  rgba(22, 163, 74, 0.12);
  --on-success:    #04210F;
  --warning:       #B45309;
  --warning-soft:  rgba(180, 83, 9, 0.12);
  --danger:        #DC2626;
  --danger-soft:   rgba(220, 38, 38, 0.10);
  --focus:         #0284C7;

  --on-navy:       #FFFFFF;
  /* Confirm on an association row: the same blue the "already stored" rail uses,
     so accepting a guess reads as "this becomes stored". Strong here, because a
     pale button on a white card disappears; see the dark block for the inverse.
     One step deeper than --cyan (#0284C7) because the label is small: that shade
     against white is 4.1:1, under the 4.5 a 13px button needs. This is 5.6:1. */
  --confirm:       #0369A1;
  --on-confirm:    #FFFFFF;
  --confirm-edge:  transparent;   /* it already stands off a white card */
  --nav-bg:        #FFFFFF;
  --header-bg:     rgba(255, 255, 255, 0.86);
  --shadow-sheet:  0 24px 60px rgba(9, 28, 58, 0.18);

  --radius:        8px;
  --radius-sm:     6px;
  --tap:           44px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:        #0A1220;
  --section:       #0A1220;
  --surface:       #121B2A;
  --surface-2:     #243447;
  --surface-sunk:  #0E1626;
  --border:        #2D3D52;
  --divider:       #1F2A3C;
  --text:          #FFFFFF;
  --text-2:        rgba(248, 245, 240, 0.75);
  --text-muted:    rgba(248, 245, 240, 0.45);

  --navy:          #091C3A;
  --navy-hover:    #12294A;
  --cyan:          #38BDF8;
  --cyan-soft:     rgba(56, 189, 248, 0.14);
  --success:       #34D399;
  --success-soft:  rgba(52, 211, 153, 0.15);
  --on-success:    #04210F;
  --warning:       #FBBF24;
  --warning-soft:  rgba(251, 191, 36, 0.16);
  --danger:        #FB7185;
  --danger-soft:   rgba(251, 113, 133, 0.14);
  --focus:         #38BDF8;

  --on-navy:       #FFFFFF;
  /* Deep navy, not a bright cyan: a light fill is a hole punched in a dark page.
     It sits close to the row behind it, so it takes the same visible edge the
     primary button uses on dark — raised rather than dissolved. */
  --confirm:       #1E3A5C;
  --on-confirm:    #FFFFFF;
  --confirm-edge:  #35608F;
  --nav-bg:        #2B303B;
  --header-bg:     rgba(18, 27, 42, 0.86);
  --shadow-sheet:  0 24px 60px rgba(0, 0, 0, 0.55);

  /* Dark primary button needs to lift off the navy-ink canvas: keep the navy
     fill (brand rule: navy stays the dominant action color) but add a visible
     edge so the button reads as raised rather than dissolving into the page. */
  --navy:          #0B2145;
  --btn-primary-edge: #24406A;
}
:root[data-theme="light"] { --btn-primary-edge: var(--navy); }

/* ── Base typography ──────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--section);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-name, .btn { font-family: 'Space Grotesk', 'Inter', sans-serif; }

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--navy); color: var(--on-navy);
  border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ── App shell ────────────────────────────────────────────────────────── */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 16px;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
/* No `display:block` here — it would out-specify the .logo-light/.logo-dark
   `display:none` below (0,1,1 beats 0,1,0) and render BOTH marks stacked. The
   visible one gets display:block from its theme rule instead. */
.brand-logo svg { width: 100%; height: 100%; }
.logo-light, .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }
:root[data-theme="dark"]  .logo-dark  { display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.brand-name { font-size: clamp(0.95rem, 3.4vw, 1.05rem); letter-spacing: 0.02em; }
/* "Human Resources" is chrome — hidden by default so the 360px header fits the
   hamburger, wordmark and the widget cluster; restored once there's room. */
.brand-sub  { display: none; font-size: 0.68rem; color: var(--text-muted); font-weight: 500;
              text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 480px) { .brand-sub { display: block; } }

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.icon-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-sun, .icon-moon { display: none; }
:root[data-theme="light"] .icon-moon { display: block; }
:root[data-theme="dark"]  .icon-sun  { display: block; }

/* ── Body / layout ────────────────────────────────────────────────────── */
.app-body { flex: 1; display: flex; align-items: flex-start; }
.app-main { flex: 1 1 auto; min-width: 0; width: 100%; padding: 20px 16px 64px; }

/* Nav: off-canvas drawer from the LEFT on mobile; persistent left rail at lg. */
.app-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(84vw, 320px);
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  /* visibility (not just transform) keeps the closed drawer out of the tab
     order and the accessibility tree. */
  visibility: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
  overflow-y: auto;
}
.app-nav.is-open { visibility: visible; }
.app-nav.is-open { transform: translateX(0); }
.nav-inner { padding: 18px 16px; display: flex; flex-direction: column; min-height: 100%; }
.nav-heading { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
               color: var(--text-muted); font-weight: 700; margin-bottom: 12px; }
.nav-list { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 700; font-size: 0.92rem;
  width: 100%; text-align: left; background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nav-item .nav-ic { width: 20px; height: 20px; flex: 0 0 auto; color: currentColor; }
.nav-item:hover:not(.is-disabled) { background: var(--cyan-soft); color: var(--cyan); }
.nav-item.is-active {
  background: var(--navy); color: var(--on-navy); border-color: var(--btn-primary-edge);
}
.nav-item.is-active:hover { background: var(--navy); color: var(--on-navy); }
.nav-item.is-disabled { color: var(--text-muted); cursor: default; }
/* Pending-approvals count on the nav item */
.nav-item .nav-count {
  margin-left: auto; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700;
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--cyan); color: #fff;
}
.nav-item.is-active .nav-count { background: var(--on-navy); color: var(--navy); }

.nav-item .nav-soon {
  margin-left: auto; font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px;
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(9, 28, 58, 0.45);
  border: 0;
}

@media (min-width: 1024px) {
  .app-body { max-width: 1360px; margin: 0 auto; width: 100%; }
  /* The nav COLUMN stretches to the full page height so its divider runs the
     whole length of the content; the menu itself sticks inside it. */
  .app-body { align-items: stretch; }
  .app-main { padding: 28px 28px 72px; }
  .nav-toggle { display: none; }
  .app-nav {
    position: static; inset: auto; height: auto;
    width: 248px; flex: 0 0 248px;
    transform: none; visibility: visible; background: transparent; border-right: 1px solid var(--border);
  }
  .nav-inner { position: sticky; top: 60px; min-height: 0; }
  .nav-scrim { display: none; }
}

/* ── Reusable primitives ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title { font-size: 1rem; }
.card-hint  { font-size: 0.78rem; color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px; width: 100%;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--on-navy); border-color: var(--btn-primary-edge); }
.btn-primary:hover:not(:disabled) { background: var(--navy-hover); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.btn-success { background: var(--success); color: var(--on-success); border-color: var(--success); }
.btn-success:hover:not(:disabled) { filter: brightness(0.95); transform: translateY(-1px); }
.btn-danger  { background: transparent; color: var(--danger); border-color: var(--border); }
.btn-danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.btn-ghost   { background: transparent; color: var(--text-2); border-color: transparent; width: auto; padding: 0 10px; }
.btn-ghost:hover:not(:disabled) { color: var(--cyan); }
.btn-sm { min-height: 38px; font-size: 0.82rem; padding: 0 14px; }
@media (min-width: 640px) { .btn-auto { width: auto; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-pending  { color: var(--cyan);    background: var(--cyan-soft);    border-color: var(--cyan-soft); }
.pill-approved { color: var(--success); background: var(--success-soft); border-color: var(--success-soft); }
.pill-denied   { color: var(--danger);  background: var(--danger-soft);  border-color: var(--danger-soft); }
/* Cancellation requested: still live, but being unwound — amber reads as
   "action needed" without claiming the danger colour, which means denied. */
.pill-cancelling { color: var(--leave-exchange-fg); background: var(--leave-exchange-bg);
                   border-color: var(--leave-exchange-bg); }
.pill-cancelled  { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
/* Escalated: sits alongside the status pill rather than replacing it — the
   request is still Pending, it just landed on a different desk. */
.pill-escalated  { color: var(--cyan); background: var(--cyan-soft); border-color: var(--cyan); }
.pill-escalated::before { display: none; }
.pill-escalated svg { width: 12px; height: 12px; }

/* ── Page header ──────────────────────────────────────────────────────── */
.page-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.page-title { font-size: clamp(1.5rem, 6vw, 2rem); letter-spacing: -0.01em; }
.page-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }
.page-head-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) {
  .page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .page-head-actions { flex-direction: row; }
}

/* ── Stat row ─────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
              color: var(--text-muted); font-weight: 700; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 7vw, 2rem);
              line-height: 1.1; margin-top: 6px; }
.stat-value .stat-unit { font-size: 0.8rem; color: var(--text-muted); margin-left: 4px; font-family: 'Inter', sans-serif; }
.stat.is-accent .stat-value { color: var(--cyan); }
.stat.is-remaining .stat-value { color: var(--success); }

.meter { margin-bottom: 24px; background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); padding: 16px 18px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.meter-top .meter-title { font-weight: 700; font-size: 0.9rem; }
.meter-top .meter-legend { font-size: 0.76rem; color: var(--text-muted); }
.meter-track { height: 12px; border-radius: 999px; background: var(--surface-sunk);
               border: 1px solid var(--border); overflow: hidden; display: flex; }
.meter-seg { height: 100%; width: var(--seg, 0%); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.meter-seg.seg-approved { background: var(--success); }
.meter-seg.seg-pending  { background: var(--cyan); opacity: 0.9; }
.meter-keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 0.76rem; color: var(--text-2); }
.meter-key { display: inline-flex; align-items: center; gap: 6px; }
.meter-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, var(--border)); }
.meter-key.k-approved::before { background: var(--success); }
.meter-key.k-pending::before  { background: var(--cyan); }
.meter-key.k-free::before     { background: var(--surface-sunk); border: 1px solid var(--border); }

/* ── Two-column workspace ─────────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .workspace { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; } }

/* ── Calendar ─────────────────────────────────────────────────────────── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.cal-month { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav .icon-btn { width: 38px; height: 38px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: 0.04em; color: var(--text-muted); }
/* Uniform row height so a row holding a named leave day doesn't tower over the
   rows that don't. */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
            grid-auto-rows: minmax(62px, auto); }
.cal-cell {
  position: relative; min-height: var(--tap); padding: 6px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2);
  font-size: 0.86rem; font-weight: 500;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.cal-cell.is-blank { border-color: transparent; background: transparent; pointer-events: none; }
.cal-cell.is-weekend { color: var(--text-muted); background: var(--surface-sunk); }
.cal-cell.is-selectable:hover { border-color: var(--cyan); color: var(--cyan); }
.cal-cell.is-today { border-color: var(--cyan); }
.cal-cell.is-today::after { content: "today"; font-size: 0.52rem; letter-spacing: 0.04em;
                            text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.cal-cell.in-range { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.cal-cell.range-end { background: var(--cyan); color: #fff; border-color: var(--cyan); }
.cal-cell.is-past { opacity: 0.5; }
.cal-cell.has-earn { border-color: var(--leave-exchange-fg); }
/* Earnings marker (overtime / worked holiday) — top-right corner; the day was
   worked, so it never fills the cell like an absence does. */
.cal-earn { position: absolute; top: 3px; right: 3px; z-index: 1; line-height: 1;
            font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em; }
.cal-earn.is-ot { padding: 2px 4px; border-radius: 999px;
                  background: var(--leave-exchange-bg); color: var(--leave-exchange-fg); }
.cal-earn.is-wd { width: 7px; height: 7px; border-radius: 50%; background: var(--leave-exchange-fg); }
.cal-earn.is-pending { opacity: 0.5; }
.disp-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.disp-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
            border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
            font-size: 0.86rem; flex: 1 1 auto; }
.disp-opt:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); }
.cal-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 0.74rem; color: var(--text-2); }
.cal-legend { display: inline-flex; align-items: center; gap: 6px; }

/* ── Request list ─────────────────────────────────────────────────────── */
.req-list { display: flex; flex-direction: column; gap: 10px; }
.req {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.req-body { flex: 1; min-width: 0; }
.req-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.req-name { font-weight: 700; font-size: 0.92rem; }
.req-dates { font-size: 0.86rem; color: var(--text); font-weight: 600; }
.req-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.req-note { font-size: 0.82rem; color: var(--text-2); margin-top: 8px;
            padding-top: 8px; border-top: 1px dashed var(--divider); }
.req-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.req-actions .btn { width: auto; flex: 1 1 auto; }

/* Approvals → approved-requests + leave-documents list */
.apprv-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.apprv-filters select { width: auto; flex: 1 1 auto; min-width: 130px; }
.apprv-list { display: flex; flex-direction: column; gap: 8px; }
.apprv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
             background: var(--surface); flex-wrap: wrap; }
.apprv-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.apprv-name { font-weight: 700; font-size: 0.9rem; }
.apprv-when { font-size: 0.84rem; color: var(--text); font-weight: 600; }
.apprv-act { flex: 0 0 auto; }
.apprv-nodocs { font-size: 0.8rem; color: var(--text-muted); }

.empty { text-align: center; padding: 34px 16px; color: var(--text-muted); }
.empty svg { width: 34px; height: 34px; margin-bottom: 10px; opacity: 0.7; }
.empty p { font-size: 0.88rem; }

.section-gap { margin-top: 24px; }

/* Team allowance editor row */
.policy-row { display: flex; flex-direction: column; gap: 12px; }
.policy-field { display: flex; flex-direction: column; gap: 6px; }
.policy-field label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--text-muted); }
.field-input {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.field-input:focus-visible { border-color: var(--cyan); outline: 2px solid var(--focus); outline-offset: 1px; }
textarea.field-input { min-height: 92px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
/* The OS paints an open <select> from the control's OWN background and colour.
   Every state tint here is translucent, and over the popup's white base that
   came out cream with unreadable text — `color-scheme` cannot override an
   explicit background. So the options get opaque tokens of their own; the tint
   and the left rail stay on the closed field where they belong. */
select option { background: var(--surface); color: var(--text); }
@media (min-width: 640px) {
  .policy-row { flex-direction: row; align-items: flex-end; }
  .policy-field { flex: 1; }
  .policy-row .btn { width: auto; }
}

/* ── Modal / sheet ────────────────────────────────────────────────────── */
.sheet {
  border: none; padding: 0; color: var(--text);
  background: var(--surface); border-radius: 14px 14px 0 0;
  width: 100%; max-width: 100%;
  margin: auto auto 0; /* dock to bottom on mobile */
  box-shadow: var(--shadow-sheet);
}
.sheet::backdrop { background: rgba(9, 28, 58, 0.5); backdrop-filter: blur(2px); }
.sheet[open] { animation: sheet-up .22s cubic-bezier(.2,.7,.2,1); }
@keyframes sheet-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 18px; border-bottom: 1px solid var(--border); }
.sheet-head h3 { font-size: 1.05rem; }
.sheet-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.sheet-foot { display: flex; gap: 10px; padding: 0 18px 18px; }
.sheet-foot .btn { flex: 1; }
.sheet-close { width: 36px; height: 36px; border: none; background: transparent; color: var(--text-muted);
               border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.sheet-close:hover { background: var(--cyan-soft); color: var(--cyan); }
.sheet-close svg { width: 16px; height: 16px; }
.summary-box { background: var(--surface-sunk); border: 1px solid var(--border);
               border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.88rem; }
.summary-row .k { color: var(--text-muted); }
.summary-row .v { font-weight: 700; }
.summary-row.is-total .v { color: var(--cyan); font-family: 'Space Grotesk', sans-serif; }
@media (min-width: 640px) {
  .sheet { max-width: 460px; border-radius: 14px; margin: auto; }
}

/* ── Toasts ───────────────────────────────────────────────────────────── */
.toast-stack { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
               display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; align-self: center; width: 100%; max-width: 420px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 0.86rem; font-weight: 500;
  box-shadow: var(--shadow-sheet);
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast .toast-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.toast.is-success { border-color: var(--success); }
.toast.is-success .toast-ic { color: var(--success); }
.toast.is-error { border-color: var(--danger); }
.toast.is-error .toast-ic { color: var(--danger); }

/* ── Banner (demo / info) ─────────────────────────────────────────────── */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 18px;
  background: var(--cyan-soft); border: 1px solid var(--cyan);
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 0.82rem;
}
.banner svg { width: 18px; height: 18px; color: var(--cyan); flex: 0 0 auto; }
.banner strong { color: var(--text); }
.banner.is-error { background: var(--danger-soft); border-color: var(--danger); }
.banner.is-error svg { color: var(--danger); }

/* Leave-type editor (HR Admin) */
.lt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lt-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px;
          border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.lt-deduct { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--text-2); white-space: nowrap; }
.lt-deduct input { width: 20px; height: 20px; accent-color: var(--cyan); flex: 0 0 auto; }
.lt-row .btn { width: 100%; }
@media (min-width: 640px) {
  .lt-row { grid-template-columns: 1.4fr 1.2fr auto auto; align-items: center; }
  .lt-row .btn { width: auto; }
}
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-actions .btn { width: auto; flex: 1 1 auto; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field-err { display: none; margin-top: 4px; font-size: 0.74rem; color: var(--danger); }
.field-err.is-on { display: block; }
.field-err.is-on.is-ok { color: var(--text-muted); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.summary-row .v.is-neg { color: var(--danger); }

.loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; color: var(--text-muted); }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border);
           border-top-color: var(--cyan); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Role tag + leave-code bits ───────────────────────────────────────── */
.role-tag { display: inline-block; font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.role-admin { background: var(--cyan-soft); color: var(--cyan); }
.role-mgr   { background: var(--success-soft); color: var(--success); }
.cat-tag { font-weight: 700; color: var(--text-2); }
.stat .stat-value.is-neg { color: var(--danger); }
.policy-row.align-top { align-items: flex-start; }

/* Secondary balance chips (SL / ML / exchange) */
.substats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.substat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; min-width: 96px;
           border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.subk { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.subv { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; line-height: 1.1; }
.substat.is-hl { border-color: var(--cyan); }
.substat.is-hl .subv { color: var(--cyan); }

/* Meter: Taken (green) · Scheduled (cyan) · Pending (hatched) */
.meter-seg.seg-sched { background: var(--cyan); }
.meter-seg.seg-pending {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--cyan) 55%, transparent) 0 4px,
    color-mix(in srgb, var(--cyan) 18%, transparent) 4px 8px);
}
.meter-key.k-sched::before { background: var(--cyan); }
.meter-key.k-pending::before {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--cyan) 60%, transparent) 0 3px,
    color-mix(in srgb, var(--cyan) 20%, transparent) 3px 6px);
}

/* Calendar day: number + status code chip */
/* One token pair per leave code — swap these to match a source spreadsheet
   without touching any rule below. */
:root, :root[data-theme="light"] {
  --leave-taken-bg:    #D6F0DF;  --leave-taken-fg:    #0B5B2E;
  --leave-sched-bg:    #D3E9F7;  --leave-sched-fg:    #08507A;
  --leave-special-bg:  #E2DFF6;  --leave-special-fg:  #37307A;
  --leave-medical-bg:  #FBDDDD;  --leave-medical-fg:  #8A1F1F;
  --leave-exchange-bg: #FCEBCF;  --leave-exchange-fg: #7A4A06;
  --leave-holiday-bg:  #E7E3DA;  --leave-holiday-fg:  #5B5344;
}
:root[data-theme="dark"] {
  --leave-taken-bg:    #17452C;  --leave-taken-fg:    #9FE7BC;
  --leave-sched-bg:    #123A55;  --leave-sched-fg:    #9AD5F5;
  --leave-special-bg:  #2C2960;  --leave-special-fg:  #C3BEF5;
  --leave-medical-bg:  #4B1F22;  --leave-medical-fg:  #F5AFAF;
  --leave-exchange-bg: #4A3612;  --leave-exchange-fg: #F2CE8E;
  --leave-holiday-bg:  #33302A;  --leave-holiday-fg:  #C8C0B0;
}

.cal-num { font-size: 0.86rem; line-height: 1; }
/* Full leave-type name, not an abbreviation. A 360px viewport gives each cell
   ~45px, so the chip is a full-bleed strip that wraps to two lines and breaks
   mid-word rather than overflowing the day. */
.cal-code {
  width: 100%; margin-top: auto; padding: 2px 3px 3px;
  font-family: 'Inter', sans-serif; font-size: 0.5rem; font-weight: 700;
  line-height: 1.15; letter-spacing: 0.01em; text-align: center;
  color: inherit; overflow-wrap: anywhere; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cal-code-sp { min-height: 14px; display: block; }
@media (min-width: 640px) { .cal-code { font-size: 0.58rem; } }
@media (min-width: 1280px) { .cal-code { font-size: 0.64rem; -webkit-line-clamp: 3; } }

/* Whole-day fill */
.cal-cell.has-leave { border-color: transparent; }
.cal-cell.code-taken    { background: var(--leave-taken-bg);    color: var(--leave-taken-fg); }
.cal-cell.code-sched    { background: var(--leave-sched-bg);    color: var(--leave-sched-fg); }
.cal-cell.code-special  { background: var(--leave-special-bg);  color: var(--leave-special-fg); }
.cal-cell.code-medical  { background: var(--leave-medical-bg);  color: var(--leave-medical-fg); }
.cal-cell.code-exchange { background: var(--leave-exchange-bg); color: var(--leave-exchange-fg); }
.cal-cell.code-worked,
.cal-cell.code-other    { background: var(--surface-2);         color: var(--text-2); }
.cal-cell.is-holiday    { background: var(--leave-holiday-bg);  color: var(--leave-holiday-fg); }
/* Pending reads as the same colour, outlined rather than committed */
.cal-cell.has-leave.is-pending { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
/* Cancellation requested: still booked (so still filled), but struck through so
   it's obvious the day is on its way out. */
.cal-cell.has-leave.is-cancelling { box-shadow: inset 0 0 0 2px currentColor; }
.cal-cell.is-cancelling .cal-code { text-decoration: line-through; }
.cal-cell.is-holiday.is-past, .cal-cell.has-leave.is-past { opacity: 0.62; }
/* Hover and range selection must outrank the fill — they share specificity with
   the rules above but are declared earlier, so restate them here. */
.cal-cell.has-leave.is-selectable:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
.cal-cell.has-leave.in-range  { background: var(--cyan-soft); color: var(--cyan);
                                box-shadow: inset 0 0 0 1px var(--cyan); }
.cal-cell.has-leave.range-end { background: var(--cyan); color: #fff; }

/* Legend swatches mirror the day fills */
.cal-swatch { display: inline-block; width: 18px; height: 14px; border-radius: 3px;
              flex: 0 0 auto; background: var(--surface-2); }
.cal-swatch.code-taken    { background: var(--leave-taken-bg); }
.cal-swatch.code-sched    { background: var(--leave-sched-bg); }
.cal-swatch.code-special  { background: var(--leave-special-bg); }
.cal-swatch.code-medical  { background: var(--leave-medical-bg); }
.cal-swatch.code-exchange { background: var(--leave-exchange-bg); }
.cal-swatch.code-holiday  { background: var(--leave-holiday-bg); }
.cal-swatch.is-pending    { background: transparent; box-shadow: inset 0 0 0 2px var(--text-muted); }

/* HR Admin — allocations */
.alloc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.alloc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); }
/* The name absorbs all the slack. Without `flex: 1`, space-between splits the
   leftover width evenly BETWEEN the three children, so the first input drifts
   with the length of each person's name and the columns stop lining up. */
.alloc-name { display: flex; flex-direction: column; font-weight: 700; font-size: 0.9rem;
              min-width: 0; flex: 1 1 auto; }
.alloc-dept { font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }
.alloc-input { width: 88px; flex: 0 0 auto; text-align: center; }

/* HR Admin — employment type rows */
.alloc-row[data-emp] { flex-wrap: wrap; }
/* Wrapped rows put the controls on their own line, so the name must NOT eat the
   row — reset it until there's room for one line. */
.alloc-row[data-emp] .alloc-name { flex: 0 1 auto; }
.emp-controls { display: flex; gap: 8px; flex: 1 1 100%; }
.emp-type { flex: 1; min-width: 120px; }
.emp-hours { width: 88px; flex: 0 0 auto; text-align: center; }
@media (min-width: 640px) {
  .emp-controls { flex: 0 0 auto; }
  .alloc-row[data-emp] .alloc-name { flex: 1 1 auto; }
}

/* HR Admin — category rows (extends .lt-row) */
.lt-code { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--text-muted); text-align: center; }

/* HR Admin — holidays */
.hol-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hol-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 10px 12px;
           border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); }
.hol-row .btn { width: 100%; }
@media (min-width: 640px) {
  .hol-row { grid-template-columns: 170px 1fr auto; align-items: center; }
  .hol-row .btn { width: auto; }
}

/* ── Settle prompt (hours owed → vacation day) ────────────────────────── */
.settle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
          padding: 14px 16px; margin-bottom: 20px; border-radius: var(--radius);
          background: var(--cyan-soft); border: 1px solid var(--cyan); }
.settle svg { width: 22px; height: 22px; color: var(--cyan); flex: 0 0 auto; }
.settle-body { flex: 1 1 220px; font-size: 0.88rem; }
.settle .btn { width: 100%; }
@media (min-width: 640px) { .settle .btn { width: auto; } }

/* Stat foot (carry-over note) + hours sub-stats */
.stat-foot { margin-top: 6px; font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.substat.is-warn { border-color: var(--danger); }
.substat.is-warn .subv { color: var(--danger); }
.substat.is-good .subv { color: var(--success); }

/* Inline warnings */
.banner.mb { margin-bottom: 14px; }
.req-warn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px;
            border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 0.8rem; }
.req-warn svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Same shape, but stating a fact rather than raising an alarm — a pending
   cancellation is not a problem, so it must not read in the danger colour. */
.req-warn.is-info { background: var(--leave-exchange-bg); color: var(--leave-exchange-fg); }
.sum-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.8rem; }
.sum-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sum-note.is-err { color: var(--danger); }
.sum-note.is-warn { color: var(--cyan); }

/* HR policies grid */
/* Matches .alloc-list — the grid must not sit flush against its Save button. */
.pol-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.pol-grid .policy-field { align-content: start; }
.field-hint { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
@media (min-width: 640px)  { .pol-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pol-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pol-subhead { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; margin: 4px 0 2px; }
.pol-check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 0.9rem; }
.pol-check input { width: 18px; height: 18px; }

/* ── Leave-request attachments ────────────────────────────────────────── */
.docs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.docs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.docs-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.92rem; }
.doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.doc-item { display: flex; align-items: center; gap: 10px;
            padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface-sunk); }
.doc-ic { flex: 0 0 auto; color: var(--text-2); display: inline-flex; }
.doc-ic svg { width: 18px; height: 18px; }
.doc-name { flex: 1 1 auto; min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--cyan);
            text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name:hover { text-decoration: underline; }
.doc-remove { flex: 0 0 auto; }
.doc-cat { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
           background: var(--surface-2); border-radius: 4px; padding: 2px 6px; }
.doc-pend { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700;
            color: var(--leave-exchange-fg); background: var(--leave-exchange-bg);
            border-radius: 4px; padding: 2px 6px; }
.doc-actions { flex: 0 0 auto; display: inline-flex; gap: 6px; margin-left: auto; }
.doc-item.is-pending-del { border-color: var(--leave-exchange-fg); }
/* Birthday cake — sits inline with a name, no layout shift. */
.cake { font-size: 0.95em; }

/* ── Approval delegation ──────────────────────────────────────────────── */
.deleg-form { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 640px) { .deleg-form { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; } }
.deleg-list { display: flex; flex-direction: column; gap: 8px; }
.deleg-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
              background: var(--surface-sunk); }
.deleg-who { font-weight: 700; font-size: 0.9rem; }
.deleg-when { font-size: 0.8rem; color: var(--text-muted); margin-right: auto; }

/* ── Team timeline (who's off) ────────────────────────────────────────── */
.tl-nav { display: inline-flex; align-items: center; gap: 8px; }
.tl-nav .icon-btn { width: 34px; height: 34px; }
.tl-nav .icon-btn svg { width: 16px; height: 16px; }
.tl-nav .card-hint { min-width: 8.5ch; text-align: center; }

.tl-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
             border: 1px solid var(--border); border-radius: var(--radius); }
.tl-grid { display: inline-block; min-width: 100%; }
.tl-row { display: flex; align-items: stretch; }
.tl-row + .tl-row { border-top: 1px solid var(--divider); }
.tl-name { flex: 0 0 92px; width: 92px; position: sticky; left: 0; z-index: 2;
           display: flex; align-items: center; padding: 0 8px; background: var(--surface);
           border-right: 1px solid var(--border); font-size: 0.72rem; font-weight: 700;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 26px; }
.tl-h, .tl-cov, .tl-c { width: 26px; height: 28px; display: flex; align-items: center;
                        justify-content: center; font-size: 0.6rem; font-weight: 700; }
.tl-headrow .tl-name, .tl-coverrow .tl-name { background: var(--surface-2); }
.tl-headrow { background: var(--surface-2); }
.tl-h { color: var(--text-muted); }
.tl-h.is-off { color: var(--text-muted); opacity: 0.5; }
.tl-h.is-today, .tl-c.is-today { box-shadow: inset 0 0 0 1.5px var(--cyan); }
.tl-coverrow { background: var(--surface-sunk); }
.tl-cov { color: var(--text-2); }
.tl-cov.is-off { opacity: 0.3; }
.tl-cov.is-some { color: var(--cyan); }
.tl-cov.is-breach { background: #DC2626; color: #fff; border-radius: 4px; }
.tl-c { color: var(--text-2); }
.tl-c.is-off { background: var(--surface-sunk); }
/* Same palette as the calendar; the timeline column is 26px wide so it keeps
   the short code rather than the full leave-type name. */
.tl-c.code-taken    { background: var(--leave-taken-bg);    color: var(--leave-taken-fg); }
.tl-c.code-sched    { background: var(--leave-sched-bg);    color: var(--leave-sched-fg); }
.tl-c.code-special  { background: var(--leave-special-bg);  color: var(--leave-special-fg); }
.tl-c.code-medical  { background: var(--leave-medical-bg);  color: var(--leave-medical-fg); }
.tl-c.code-exchange { background: var(--leave-exchange-bg); color: var(--leave-exchange-fg); }
.tl-c.code-other, .tl-c.code-worked { background: var(--surface-2); color: var(--text-2); }
.tl-c.is-pending { opacity: 0.55; }
.tl-c + .tl-c, .tl-h + .tl-h, .tl-cov + .tl-cov { border-left: 1px solid var(--divider); }
.tl-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tl-swatch.is-breach { background: #DC2626; }
.tl-swatch.is-some { background: var(--cyan-soft); border: 1px solid var(--cyan); }

/* ── Monthly breakdown table (days worked / off, per leave type) ───────── */
.bd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
             border: 1px solid var(--border); border-radius: var(--radius); }
.bd-table { width: 100%; border-collapse: collapse; font-size: 0.82rem;
            font-variant-numeric: tabular-nums; }
.bd-table th, .bd-table td { padding: 8px 12px; text-align: right; white-space: nowrap;
                             border-bottom: 1px solid var(--divider); }
.bd-table thead th { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: 0.04em; color: var(--text-muted);
                     background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.bd-table tbody tr:last-child td { border-bottom: 0; }
.bd-table tbody tr:hover td { background: var(--surface-2); }
/* First column: names/period, left-aligned and pinned while the row scrolls. */
.bd-table .bd-name { text-align: left; font-weight: 700; position: sticky; left: 0;
                     background: var(--surface); border-right: 1px solid var(--border); }
.bd-table thead .bd-name { background: var(--surface-2); z-index: 2; }
.bd-table tbody tr:hover .bd-name { background: var(--surface-2); }
.bd-table .bd-worked { font-weight: 700; color: var(--text); }
.bd-zero { color: var(--text-muted); opacity: 0.5; }

/* ── Vacations: My-requests year filter + clickable cards ─────────────── */
.reqyear { display: inline-flex; align-items: center; gap: 8px; }
.reqyear label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.reqyear select.field-input { width: auto; min-height: 38px; padding: 0 30px 0 12px; }
/* A cancellation waiting on a manager is time-critical — the leave may start
   today — so it gets an edge the ordinary pending card doesn't. */
.req.is-cancel-req { border-color: var(--leave-exchange-fg); }
/* Escalated up to you: not your report, so it needs to stand out in a queue
   that is otherwise entirely your own team. */
.req.is-escalated { border-color: var(--cyan); border-left-width: 3px; }
.req[role="button"] { cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.req[role="button"]:hover { border-color: var(--cyan); }
.req[role="button"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Avatars (presence-ringed) ────────────────────────────────────────── */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
          border-radius: 50%; color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
          width: 36px; height: 36px; font-size: 0.82rem; }
.avatar.sm { width: 30px; height: 30px; font-size: 0.72rem; }
.avatar.lg { width: 44px; height: 44px; font-size: 0.95rem; }
.av-0 { background: #091C3A; } .av-1 { background: color-mix(in srgb, #091C3A 65%, #0284C7); }
.av-2 { background: #0E3A63; } .av-3 { background: color-mix(in srgb, #091C3A 42%, #0284C7); }
.av-4 { background: #0B2A4A; }
.avatar.pr-in       { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success); }
.avatar.pr-leave    { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cyan); }
.avatar.pr-sick     { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }
.avatar.pr-inactive { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-muted); opacity: 0.85; }

/* ── Chips ────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700;
        padding: 3px 9px; border-radius: 999px; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; }
.chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: 0.8rem; line-height: 1;
               padding: 0; opacity: 0.7; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.chip button:hover { opacity: 1; }
button.chip { cursor: pointer; }
button.chip:hover { filter: brightness(0.97); }
.chip-cyan  { background: var(--cyan-soft); color: var(--cyan); }
.chip-navy  { background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--text); }
:root[data-theme="dark"] .chip-navy { background: var(--surface-2); }
.chip-green { background: var(--success-soft); color: var(--success); }
.chip-amber { background: var(--warning-soft); color: var(--warning); }
.chip-muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.kbd { font-size: 0.66rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; border: 1px solid currentColor; opacity: 0.6; margin-left: 2px; }

/* ── People directory ─────────────────────────────────────────────────── */
.ppl-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
@media (min-width: 640px) { .ppl-toolbar { grid-template-columns: 1fr auto auto; } }
.ppl-search { position: relative; display: flex; align-items: center; }
.ppl-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.ppl-search .ppl-q { padding-left: 36px; }
.ppl-skillfilter { margin-bottom: 14px; font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px)  { .ppl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ppl-grid { grid-template-columns: repeat(3, 1fr); } }
.ppl-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; min-height: var(--tap);
            background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
            cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.ppl-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.ppl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ppl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ppl-name { font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.ppl-role { font-size: 0.8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-sub  { font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ooo { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; flex: 0 0 auto; }
.ooo.pr-leave { background: var(--cyan-soft); color: var(--cyan); }
.ooo.pr-sick  { background: var(--danger-soft); color: var(--danger); }

.ppl-grid .empty { grid-column: 1 / -1; }

/* Multi-select for bulk user actions (admin). The card is wrapped so the
   checkbox is a sibling of the button, not nested inside it. */
.ppl-cardwrap { position: relative; display: flex; }
.ppl-cardwrap > .ppl-card { flex: 1; min-width: 0; padding-left: 40px; }
.ppl-check { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); z-index: 2; display: flex; }
.ppl-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--cyan); margin: 0; }
.ppl-cardwrap.is-selected > .ppl-card { border-color: var(--cyan); background: var(--cyan-soft); }
/* Inline bulk-action toolbar (sits in the page flow, above the grid) */
.bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0;
            padding: 10px 14px; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: var(--radius); }
.bulk-count { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.bulk-field { width: auto; min-width: 170px; min-height: 38px; }
.bulk-hint { flex-basis: 100%; font-size: 0.74rem; color: var(--text-muted); }

/* Roles & skills catalog */
.cat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cat-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cat-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }
.cat-row .btn { width: auto; flex: 0 0 auto; }

/* ── Person page tabs & sections ──────────────────────────────────────── */
.ps-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: 0 0 auto; }
.ps-tab { background: none; border: none; padding: 12px; font-weight: 700; font-size: 0.84rem; color: var(--text-muted);
          border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.ps-tab:hover { color: var(--text); }
.ps-tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.ps-section { margin-bottom: 22px; }
/* "Book leave for …" action at the top of a person's Time-off tab */
.pt-book-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pt-book-row .card-hint { margin: 0; }
/* Reusable page-level tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: 18px; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 14px;
       font-weight: 700; font-size: 0.86rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--cyan); border-bottom-color: var(--cyan); }
.ps-section h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; margin-bottom: 12px; }
.ps-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-actions .btn { width: auto; flex: 1 1 auto; }
.pv-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
@media (min-width: 480px) { .pv-grid { grid-template-columns: 1fr 1fr; } }
.pv-field { min-width: 0; }
.pv-field + .pv-field { margin-top: 14px; }
.pv-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.pv-val { font-size: 0.9rem; word-break: break-word; }
.chipwrap { display: flex; flex-wrap: wrap; gap: 6px; }

/* Person edit form */
.pf-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; }
@media (min-width: 480px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
.pf-form .policy-field { display: flex; flex-direction: column; gap: 6px; }
.pf-form .policy-field span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.pf-active-row { flex-direction: row; align-items: center; gap: 8px; }
.pf-active-row input { width: 20px; height: 20px; accent-color: var(--cyan); }
.pf-field { margin-bottom: 16px; }
.chk { display: flex; flex-wrap: wrap; gap: 8px; }
.chk-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; padding: 6px 10px;
            border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); cursor: pointer; }
.chk-item input { accent-color: var(--cyan); width: 16px; height: 16px; }

/* Compensation */
.comp-roles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.comp-role { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunk); }
@media (min-width: 480px) { .comp-role { grid-template-columns: 1fr 90px 110px auto; align-items: center; } }
.comp-role-name { font-weight: 700; font-size: 0.88rem; }
.comp-role .btn { width: auto; }
.comp-est { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--cyan-soft); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 0.88rem; }
.comp-est strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; color: var(--cyan); }
.bonus-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bonus-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bonus-amt { font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.bonus-meta { font-size: 0.74rem; color: var(--text-muted); }
.bonus-row .btn { width: auto; flex: 0 0 auto; }
.bonus-add { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .bonus-add { grid-template-columns: 1fr 1fr auto auto; align-items: center; } .bonus-add .btn { width: auto; } }

/* Org tab */
.org-chain { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.org-arrow { color: var(--text-muted); font-size: 0.9rem; margin-left: 16px; }
.org-node { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); width: 100%; }
.org-node[data-goperson] { cursor: pointer; }
.org-node[data-goperson]:hover { border-color: var(--cyan); }
.org-node[data-goperson]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.org-node.is-me { border-color: var(--cyan); background: var(--cyan-soft); }
.org-txt { display: flex; flex-direction: column; min-width: 0; }
.org-name { font-weight: 700; font-size: 0.86rem; }
.org-role { font-size: 0.74rem; color: var(--text-muted); }
.org-reports { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .org-reports { grid-template-columns: 1fr 1fr; } }
/* Selectable direct reports (admin) + move bar */
.org-reports-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.org-reports-head h4 { margin: 0; }
.org-goto { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.org-goto:hover .org-name { color: var(--cyan); }
.org-check { display: flex; flex: 0 0 auto; }
.org-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--cyan); }
.org-report { cursor: default; }
.org-report:hover { border-color: var(--cyan); }
.org-report.is-selected { border-color: var(--cyan); background: var(--cyan-soft); }
.org-movebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
               padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.org-movebar[hidden] { display: none; }
.org-move-lbl { font-size: 0.8rem; color: var(--text-muted); }

/* Manage lists */
.inline-add { display: flex; gap: 8px; margin-top: 10px; }
.inline-add .field-input { flex: 1; }
.inline-add .btn { width: auto; flex: 0 0 auto; }

/* Command palette */
.palette { width: min(560px, calc(100vw - 32px)); max-width: calc(100vw - 32px); margin: 10vh auto auto; border-radius: 12px; }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.pal-head svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
.pal-input { flex: 1; border: none; background: none; font: inherit; font-size: 1rem; color: var(--text); outline: none; }
.pal-list { max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; }
.pal-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; }
.pal-row:hover { background: var(--surface-2); }
.pal-row.is-sel { background: var(--cyan-soft); box-shadow: inset 0 0 0 2px var(--cyan); }
.pal-txt { display: flex; flex-direction: column; min-width: 0; }
.pal-name { font-weight: 700; font-size: 0.88rem; }
.pal-sub { font-size: 0.74rem; color: var(--text-muted); }

/* ── Person page (full page, replaces the old drawer) ─────────────────── */
.backlink { background: none; border: none; color: var(--cyan); font-weight: 700; font-size: 0.86rem;
            cursor: pointer; padding: 6px 0; margin-bottom: 6px; min-height: var(--tap); display: inline-flex; align-items: center; }
.backlink:hover { text-decoration: underline; }
.person-head { align-items: flex-start; }
.ph-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ph-txt { min-width: 0; }
.avatar.xl { width: 60px; height: 60px; font-size: 1.25rem; }
#person-view .ps-tabs { margin-bottom: 16px; padding: 0; }
.ps-page-body { padding: 18px; }
.ps-page-body .ps-section:last-child { margin-bottom: 0; }

/* ── List / Hierarchy toggle ──────────────────────────────────────────── */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; }
.vt-btn { background: transparent; border: none; padding: 0 16px; min-height: var(--tap); font-weight: 700; font-size: 0.84rem; color: var(--text-2); cursor: pointer; }
.vt-btn + .vt-btn { border-left: 1px solid var(--border); }
.vt-btn:hover { color: var(--cyan); }
.vt-btn.is-active { background: var(--navy); color: var(--on-navy); }

/* ── People reporting tree ────────────────────────────────────────────── */
.tree-root, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--divider); }
.tree-item { margin: 4px 0; }
.tree-node { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; min-height: var(--tap);
             background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s ease; }
.tree-node:hover { border-color: var(--cyan); }
.tree-node:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tree-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tree-name { font-weight: 700; font-size: 0.86rem; }
.tree-role { font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); flex: 0 0 auto; }
/* Drag-and-drop reassignment */
.tree-node[draggable="true"] { cursor: grab; }
.tree-check { display: flex; flex: 0 0 auto; }
.tree-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--cyan); }
.tree-node.is-selected { border-color: var(--cyan); background: var(--cyan-soft); box-shadow: inset 0 0 0 1px var(--cyan); }
.tree-node.is-dragging { opacity: 0.45; }
.tree-node.drop-target { border-color: var(--cyan); background: var(--cyan-soft); box-shadow: inset 0 0 0 2px var(--cyan); }
.tree-dnd-hint { margin-bottom: 8px; }
.tree-drop-top { padding: 10px 12px; margin-bottom: 10px; border: 1px dashed var(--border);
                 border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.78rem; text-align: center; }
.tree-drop-top.drop-target { border-style: solid; border-color: var(--cyan); background: var(--cyan-soft); color: var(--cyan); }

/* ── Departments tree ─────────────────────────────────────────────────── */
.dep-root, .dep-children { list-style: none; margin: 0; padding: 0; }
.dep-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--divider); }
.dep-item { margin: 6px 0; }
.dep-node { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
            border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.dep-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dep-name { font-weight: 700; font-size: 0.9rem; }
.dep-count { cursor: pointer; }
.dep-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.dep-actions .btn { width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Attendance · association ─────────────────────────────────────────── */
/* Grid, not flex. `.btn` and `.field-input` are both `width: 100%` globally,
   which in a flex row makes the button claim the whole line and squeezes the
   selects to their arrows. Fixed columns end the negotiation: each control
   fills a cell it cannot leave. */
/* --att-cols is set inline from JS: one column per configured integration, so a
   company with one system and a company with five share this rule. Falls back to
   2 if the attribute is ever missing, which is the shape this screen had when
   the two sources were hardcoded. */
.att-row, .att-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(var(--att-cols, 2), 220px) 104px;
  align-items: center;
  gap: 10px;
}
.att-head {
  padding: 0 12px 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.att-row .alloc-name { min-width: 0; }
.att-row .alloc-name > span,
.att-row .alloc-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-row .att-sel     { width: 100%; min-width: 0; }

/* The colour IS the screen — an admin scans eighty rows looking for what still
   needs a decision, and a faint tint alone doesn't survive that. Each state
   carries a solid left rail as well. */
/* The legend swatches share these rules on purpose — a key painted by different
   declarations than the thing it explains is a key that goes quietly wrong. */
.att-sel.is-green,  .att-swatch.is-green  { border-color: var(--success); box-shadow: inset 3px 0 0 var(--success); background: var(--success-soft); }
.att-sel.is-yellow, .att-swatch.is-yellow { border-color: var(--warning); box-shadow: inset 3px 0 0 var(--warning); background: var(--warning-soft); }
/* Stored, not proposed — cyan rather than green, so "already true" never reads
   as "about to be written". */
.att-sel.is-saved,  .att-swatch.is-saved  { box-shadow: inset 3px 0 0 var(--cyan); background: var(--cyan-soft); }
/* The FIELD carries the warning colour — it is the thing that is uncertain. The
   button is the action, so it is filled and blue, not a second warning. */
/* The FIELD carries the warning colour — it is the thing that is uncertain. The
   button is the action, so it is filled, not a second warning. It overrides
   .btn-sm back to the field's own height and type size: it sits in the same
   row as the dropdowns it answers, and a shorter control there reads as an
   afterthought rather than the decision. */
.att-row .att-ok    { background: var(--confirm); color: var(--on-confirm);
                      border-color: var(--confirm-edge); padding: 0 10px;
                      min-height: var(--tap); font-weight: 700; }
.att-row .att-ok:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-1px); }
/* Confirmed: the decision is made and the row is in the save. Shown as a filled
   green — the same colour Save is about to write — with the row carrying a rail
   so a screenful of accepted work reads at a glance. Still a button, because a
   confirmation you cannot take back is a trap. */
.att-row.is-confirmed { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.att-row .att-ok-done { background: var(--success); color: var(--on-success);
                        border-color: transparent; }
/* How much is left, said in the header. Coloured so it is findable, but plainly
   a label — no underline, no hover, nothing to click. */
.att-waiting { color: var(--cyan); font-weight: 700; }

/* The colour key. Lighter than a banner — it is a reference you glance at, not
   a notice you must read — and it wraps to as many lines as the screen needs. */
.att-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 14px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunk); font-size: 0.8rem; color: var(--text-2);
}
.att-legend-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Shaped like the field it stands for: same tint, same left rail, smaller. */
.att-swatch {
  width: 26px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
/* The sentence that the colours cannot say: colour tells you what a row IS,
   this tells you what happens next. Pushed to the end of the line so it reads
   as the footnote it is. */
.att-legend-note { margin-left: auto; color: var(--text-muted); }
@media (max-width: 860px) {
  .att-legend-note { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 860px) {
  .att-head { display: none; }
  .att-row  { grid-template-columns: 1fr 1fr; }
  .att-row .alloc-name { grid-column: 1 / -1; white-space: normal; }
  .att-row .att-ok     { grid-column: 1 / -1; }
}

/* ── Attendance · day view ────────────────────────────────────────────── */
/* One card per day, one line per event. The time column is fixed-width and
   tabular so the eye can scan down it — a day is read vertically, not across. */
.att-day                { margin-bottom: 12px; }
.att-ev-list            { display: flex; flex-direction: column; gap: 6px; }
/* Type first, because "was this an arrival or a departure" is the question the
   eye asks before it reads the clock. Fixed width so the times line up. */
.att-ev                 { display: grid; grid-template-columns: 68px 116px auto 1fr; align-items: center; gap: 10px;
                          padding: 8px 12px; border: 1px solid var(--border);
                          border-radius: var(--radius-sm); background: var(--surface-sunk); }
.att-ev-type            { justify-content: center; width: 100%; }
/* Your own clock card and the raw drawer carry a variable number of chips and
   no type column, so they opt out of the fixed grid rather than being padded
   into it. */
.att-ev-flow            { display: flex; flex-wrap: wrap; }
.att-ev-time            { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
                          font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.att-ev-note            { font-size: 0.78rem; color: var(--text-muted);
                          display: flex; align-items: center; gap: 6px; }
/* A row that stands for several. Opening it is the whole point, so it looks
   pressable — and the children are indented and sunk so they read as evidence
   under a conclusion, not as more conclusions. */
.att-ev-fold            { cursor: pointer; }
.att-ev-fold:hover      { border-color: var(--cyan); }
.att-ev-fold:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.att-ev-caret           { margin-left: auto; opacity: 0.6; }
.att-ev-child           { margin-left: 22px; background: var(--surface); opacity: 0.75;
                          border-style: dashed; }
/* Day-by-day person picker: somebody with no link to any connected system is
   dimmed but still selectable — they may have clocked by hand before the device
   arrived, and those hours are real. iOS and some native pickers ignore colours
   on <option>, which is why the list is also sorted linked-first and the dimmed
   entries carry a trailing marker. */
option.att-opt-unlinked { color: var(--text-muted); }
@media (max-width: 560px) {
  .att-ev               { grid-template-columns: 68px 1fr; }
  .att-ev > .chip:not(.att-ev-type) { grid-column: 2; justify-self: start; }
  .att-ev-note          { grid-column: 1 / -1; }
  .att-ev-child         { margin-left: 12px; }
}

/* ── Attendance · clocking ────────────────────────────────────────────── */
/* Your own state and the one button you press, above the roster. The button
   is the thing people come to this page for, so it keeps its own column and
   never wraps under the status until the screen is genuinely narrow.
   .btn is width:100% globally, hence .btn-auto in the markup. */
.clock-card             { margin-bottom: 16px; }
.clock-now              { display: grid; grid-template-columns: 1fr auto; align-items: center;
                          gap: 12px; margin-bottom: 10px; }
.clock-state            { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Bigger than the day-view stamps: this is the number being read at a glance,
   and tabular-nums (inherited from .att-ev-time) keeps it from jittering as
   the minutes tick over. */
.clock-state .att-ev-time { font-size: 1.05rem; font-weight: 600; }
@media (max-width: 560px) {
  .clock-now            { grid-template-columns: 1fr; }
}

/* ── Attendance · raw activity ────────────────────────────────────────── */
/* The evidence behind a day, opened on demand. Sunk and slightly dimmed so it
   reads as a drawer under the conclusion rather than a second list competing
   with it. A folded row stays legible — it is the one being looked for. */
.att-raw-btn            { margin-top: 10px; }
.att-raw                { margin-top: 10px; padding: 10px; border: 1px solid var(--border);
                          border-radius: var(--radius-sm); background: var(--surface-sunk);
                          display: flex; flex-direction: column; gap: 4px; }
.att-raw-head           { font-size: 0.74rem; color: var(--text-muted);
                          text-transform: uppercase; letter-spacing: 0.04em;
                          padding-bottom: 4px; }
.att-raw-row            { background: var(--surface); }
.att-raw-id             { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
                          font-size: 0.7rem; color: var(--text-muted); }

/* ── Attendance · integrations ────────────────────────────────────────── */
/* Name, state, and the two actions. Not the association grid: this row has a
   fixed shape regardless of how many integrations exist. */
.attcfg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
}
.attcfg-row .btn        { width: auto; }

/* The integration form is a document being filled in, not a question being
   answered, so it gets more room than a normal sheet — but only where there is
   room to give. Mobile keeps the single column every other sheet uses: one field
   at a time, docked to the bottom, thumb-reachable. Desktop is where a long
   single column stops being focus and starts being scrolling. */
.sheet.sheet-wide       { max-width: 100%; }

@media (min-width: 760px) {
  .sheet.sheet-wide     { max-width: 900px; }

  /* Two columns for the short fields. Headings, notes, endpoint blocks and the
     raw view span both: a section heading sitting in one column reads as a label
     for the field beside it, which is worse than no heading at all. */
  .sheet-wide .sheet-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .sheet-wide .sheet-body > .pol-subhead,
  .sheet-wide .sheet-body > .card-hint,
  .sheet-wide .sheet-body > .field-hint,
  .sheet-wide .sheet-body > .cfg-sub,
  .sheet-wide .sheet-body > .cfg-block,
  .sheet-wide .sheet-body > .cfg-adv,
  .sheet-wide .sheet-body > .btn,
  .sheet-wide .sheet-body > #acs-probe,
  .sheet-wide .cfg-wide { grid-column: 1 / -1; }

  /* A section heading needs air above it once fields sit beside each other, or
     it collides with the row it is introducing. */
  .sheet-wide .sheet-body > .pol-subhead { margin-top: 10px; }

  /* An endpoint block is a small form of its own, so it gets the same treatment
     rather than staying a stack inside a two-column layout. */
  .sheet-wide .cfg-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 12px;
    align-items: start;
  }
  .sheet-wide .cfg-block > .cfg-sub-head,
  .sheet-wide .cfg-block > .cfg-sub,
  .sheet-wide .cfg-block > .cfg-wide { grid-column: 1 / -1; }
}
.cfg-kv                 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.cfg-kv .btn            { width: auto; padding: 0 10px; }
.cfg-sub                { border: 1px solid var(--border); border-radius: var(--radius-sm);
                          padding: 10px; background: var(--surface-sunk);
                          display: flex; flex-direction: column; gap: 8px; }
.cfg-sub-head           { display: flex; align-items: center; justify-content: space-between;
                          font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
                          letter-spacing: 0.04em; color: var(--text-muted); }
.cfg-sub-head .btn      { width: auto; }
/* One endpoint. Bordered so several of them read as separate calls rather than
   one long list of fields. */
.cfg-block              { border: 1px solid var(--border); border-radius: var(--radius-sm);
                          padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cfg-adv summary        { cursor: pointer; font-size: 0.8rem; font-weight: 600;
                          color: var(--text-muted); padding: 6px 0; }
.cfg-sample             { overflow: auto; max-height: 180px; margin: 6px 0 0; font-size: 0.75rem;
                          font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
/* A test result reads as two findings under one verdict, so each half gets its
   own block rather than becoming one paragraph of numbers. */
.cfg-probe-sec          { border: 1px solid var(--border); border-radius: var(--radius-sm);
                          padding: 10px; margin-top: 8px; background: var(--surface-sunk); }
.cfg-probe-head         { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
                          letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.cfg-probe-note         { font-size: 0.82rem; }
/* Narrow: a key/value pair cannot survive three columns — the key collapses to
   "acti…" and the delete button wraps to a line of its own. Give the first
   control the full width and let the second share a row with the button. Works
   for all three uses: name/value/delete, credential name/value, and
   timestamp field/transform. */
@media (max-width: 560px) {
  .cfg-kv               { grid-template-columns: 1fr auto; }
  .cfg-kv > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .attcfg-row           { grid-template-columns: 1fr auto; }
  .attcfg-row .alloc-name { grid-column: 1 / -1; }
}