/*
 * Digica Absence — the app's one stylesheet (BACKLOG.md P2-3, stage 1).
 *
 * Every style used to be an inline `style="..."` string in index.html or a
 * string concatenated in the component class, so a colour change was a
 * search-and-replace and a breakpoint could not be written at all (an inline
 * attribute cannot hold a @media query — BACKLOG.md P4-6). Markup now carries
 * class names only; state the component knows about (active tab, focused row,
 * request status) is a modifier class the component picks, never a style.
 *
 * Conventions: tokens on :root, and no raw colour outside it; components as
 * flat classes; state modifiers as `is-*`, scoped to their component.
 * Page-width breakpoints live at the end of the file; a container query sits
 * with the component it resizes.
 */

:root {
  --bg: #0A0A0B;
  --surface: #131316;   /* panels, modals, sticky table headers */
  --sunken: #0d0d0f;    /* insets inside a panel; calendar padding days */
  --field: #08080A;     /* form controls */
  --line: #262629;      /* panel borders and rules */
  --line-strong: #2e2e33; /* control borders */
  --row-line: #1c1c1f;  /* between table rows and list items */
  --text: #fff;
  --text-2: #e8e8ea;
  --text-3: #d4d4d8;
  --muted: #9a9aa0;
  --dim: #5c5c62;
  --accent: #E81E24;
  --accent-soft: #ff9a9e;
  --accent-deep: #3a1416; /* rule inside the red unmatched-users panel */
  --accent-rgb: 232,30,36; /* for washes: rgba(var(--accent-rgb), a) */
  --white-rgb: 255,255,255;
  --black-rgb: 0,0,0;     /* shadows and the modal backdrop */
  --warn: #f2cf6b;
  --warn-line: #E8B41E;
  --warn-rgb: 232,180,30;
  --run-line: #1e1e21;  /* between sync-history rows */
  --font-body: 'Outfit', sans-serif;
  --font-display: 'Zilla Slab', serif;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); }
input, select, textarea, button { font-family: var(--font-body); }
input::placeholder, textarea::placeholder { color: var(--dim); }
select option { background: var(--surface); color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* ---------- page frame ---------- */

.page-pad { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; padding: 28px 32px 56px; color-scheme: dark; }
.page-inner { max-width: 1600px; margin: 0 auto; }

.app-header { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 22px; }
.brand-logo { height: 100px; width: auto; display: block; }
.brand-rule { width: 1px; height: 100px; background: var(--line); }
.brand-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 32px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.brand-tagline { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-weight: 400; }
.user-box { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }

/* ---------- sign-in gate and bootstrap failure ---------- */

.gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 110px 0; }
.gate.is-error { gap: 18px; }
.gate-text { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.gate-text strong { color: var(--text); }
.btn-signin { background: var(--accent); color: var(--text); text-decoration: none; padding: 14px 28px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.devlogin { margin-top: 8px; padding: 18px 22px; border: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.devlogin-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.devlogin-row { display: flex; gap: 8px; }
.devlogin-input { background: var(--field); border: 1px solid var(--line-strong); color: var(--text); padding: 10px 12px; font-size: 13px; outline: none; min-width: 260px; }
.devlogin-hint { font-size: 11px; color: var(--dim); line-height: 1.6; text-align: center; }

/* ---------- alerts ---------- */

.alert { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.08); color: var(--accent-soft); font-size: 13px; }
.alert-banner { margin-top: 18px; padding: 12px 16px; }
.alert-bootstrap { max-width: 520px; padding: 16px 20px; line-height: 1.6; text-align: center; }
.alert-block { padding: 14px 16px; line-height: 1.5; }
.alert-warn { padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--warn-line); background: rgba(var(--warn-rgb), 0.1); color: var(--warn); font-size: 13px; line-height: 1.5; font-weight: 600; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 1000; padding: 13px 20px; border: 1px solid var(--text-2); background: rgba(var(--white-rgb), 0.10); color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 10px 34px rgba(var(--black-rgb), 0.5); }
.toast.is-error { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

/* ---------- buttons ---------- */

/* The everyday outline button: Withdraw, Edit, Retry sync, Cancel… */
.btn-small { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); padding: 7px 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.btn-signout { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); padding: 7px 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.btn-signout:hover { border-color: var(--accent); color: var(--text); }
/* Red outline: Deny, Confirm cancel, Connect. */
.btn-danger { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
/* Solid red, table-row size: Approve. */
.btn-solid { background: var(--accent); border: 1px solid var(--accent); color: var(--text); padding: 7px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
/* Dialog-size variants of the two above. */
.btn-solid.is-large, .btn-danger.is-large { padding: 9px 18px; }
/* Big solid red: Submit Request, Sync Napta now, Enter, Try again. */
.btn-primary { background: var(--accent); border: none; color: var(--text); font-weight: 700; text-transform: uppercase; cursor: pointer; }
.btn-submit { width: 100%; padding: 15px; font-size: 13px; letter-spacing: 0.14em; }
.btn-submit:hover { filter: brightness(1.12); }
.btn-sync { padding: 12px 18px; font-size: 12px; letter-spacing: 0.12em; }
.btn-retry { padding: 12px 24px; font-size: 12px; letter-spacing: 0.12em; }
.btn-enter { padding: 10px 16px; font-size: 12px; letter-spacing: 0.08em; text-transform: none; }
/* A button that cannot be pressed right now (an approve or a save in flight). */
.btn-small:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-solid:disabled, .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-solid.is-quiet:disabled { opacity: 0.4; }
/* Export links styled as buttons. */
.btn-export { display: inline-block; text-decoration: none; background: transparent; border: 1px solid var(--line-strong); color: var(--muted); padding: 9px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.btn-export.is-primary { border-color: var(--accent); color: var(--accent); }
.btn-connect { flex: none; text-decoration: none; }
/* ‹ › month arrows. */
.btn-arrow { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.btn-arrow.is-picker { flex: none; width: 40px; height: 40px; }

/* ---------- navigation ---------- */

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-top: 0; }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 16px 26px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; margin-bottom: -1px; }
.tab.is-active { border-bottom-color: var(--accent); color: var(--text); }

/* A switch within one screen: Full days / Hours, One absence / CSV import. */
.seg { display: flex; gap: 0; border: 1px solid var(--line-strong); width: fit-content; }
.seg-btn { background: transparent; color: var(--muted); border: none; padding: 9px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; }
.seg-btn.is-active { background: var(--accent); color: var(--text); }

/* Sub-views of Manager, HR and Admin (BACKLOG.md D-5, P1-22): the segmented
   control with more room. `is-attention` flags a sub-view holding news the
   admin has not asked for (a failing sync, unmatched accounts). */
.subtabs { display: flex; border: 1px solid var(--line-strong); width: fit-content; }
.subtab { background: transparent; color: var(--muted); border: none; padding: 11px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.subtab.is-active { background: var(--accent); color: var(--text); }
.subtab.is-attention { color: var(--accent-soft); }

/* ---------- panels ---------- */

.view { margin-top: 28px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.panel { border: 1px solid var(--line); background: var(--surface); }
.panel.is-failing { border-color: var(--accent); }
.panel-pad { padding: 18px 20px; }
.panel-body { padding: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.panel-bar { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.eyebrow-icon { display: inline-block; vertical-align: middle; margin-right: 8px; flex: none; }
/* A panel title bar that is itself the eyebrow (no right-hand content). */
.panel-title { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.count-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.empty { padding: 28px 20px; text-align: center; font-size: 12px; color: var(--dim); letter-spacing: 0.08em; }

/* ---------- form fields ---------- */

.field { margin-bottom: 20px; }
.field-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 9px; }
.input { width: 100%; background: var(--field); border: 1px solid var(--line-strong); color: var(--text); padding: 12px 14px; font-size: 14px; outline: none; }
.input.is-text { line-height: 1.6; resize: vertical; font-weight: 300; }
.input.is-invalid { border-color: var(--accent); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* Small print under a field. */
.note { margin-top: 9px; font-size: 12px; color: var(--dim); line-height: 1.5; }
.note.is-muted { color: var(--muted); }
.note.is-error { color: var(--accent); }
.note-warn { font-size: 12px; color: var(--warn); line-height: 1.5; }
.msg { margin-bottom: 14px; font-size: 12px; color: var(--text-2); }
.msg.is-error { color: var(--accent); }
.form-error { font-size: 12px; color: var(--accent); line-height: 1.5; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- employee view ---------- */

.emp-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 28px; }
.form-body { padding: 24px 20px; }
.side-col { display: flex; flex-direction: column; gap: 24px; align-self: start; }

/* My balance strip (BACKLOG.md P3-2). */
.balance { margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--line); background: var(--sunken); }
.balance-heading { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.balance-pools { display: flex; flex-wrap: wrap; gap: 22px; }
.pool-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.pool-value { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.pool-value.is-negative { color: var(--accent); }
.pool-detail { font-size: 11px; color: var(--dim); margin-top: 2px; }

/* Google Calendar connect strip. */
.cal-connect { padding: 14px 20px; }
.cal-connect-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-connect-row.is-top { align-items: flex-start; }
.cal-connect-text { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* My requests (capped and scrolled in place — BACKLOG.md D-3). */
.my-list { max-height: 520px; overflow-y: auto; }
.req-card { padding: 16px 20px; border-bottom: 1px solid var(--row-line); }
.req-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.req-card-type { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.req-card-line { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.req-card-line.is-extra { margin-top: 4px; }
.req-card-id { font-size: 11px; color: var(--dim); letter-spacing: 0.1em; margin-top: 6px; }
.req-card-actions { margin-top: 10px; display: flex; gap: 8px; }

/* The row a notification deep link points at (BACKLOG.md P1-15). */
.req-card.is-focused, .tr.is-focused { border-left: 3px solid var(--accent); background: rgba(var(--accent-rgb), 0.07); }

/* ---------- request-form date picker (BACKLOG.md P1-24) ---------- */

/* Two months side by side, dropping to one when the *form column* is narrow
   rather than the viewport: the form is the left 60% of a two-column grid, so
   a viewport query would keep two months in a column far too thin for them. */
.date-picker { container-type: inline-size; margin-bottom: 20px; padding: 14px 14px 12px; border: 1px solid var(--line); background: var(--sunken); }
.date-picker-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@container (max-width: 480px) {
  .date-picker-months { grid-template-columns: 1fr; }
  .date-picker-second { display: none; }
}
.pick-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pick-hint { font-size: 12px; color: var(--muted); text-align: center; }
.pick-month-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.pick-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pick-weekday { padding: 4px 0 6px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: center; }
.pick-cell { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 13px; user-select: none; }
.pick-day { cursor: pointer; color: var(--text-3); }
.pick-day.is-off { color: var(--dim); }
.pick-day.is-preview { background: rgba(var(--accent-rgb), 0.10); }
.pick-day.is-range { background: rgba(var(--accent-rgb), 0.22); color: var(--text); }
.pick-day.is-range.is-off { color: var(--muted); }
.pick-day.is-end { background: var(--accent); color: var(--text); font-weight: 600; }
.pick-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
/* Past days stay clickable — retroactive sick leave is allowed — just quieter. */
.pick-day.is-past { opacity: 0.7; }
/* Underline for a day the employee already has a request on: solid once
   anything on it is decided, dashed while it all waits. */
.pick-mark { display: none; }
.pick-mark.is-shown { display: inline; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 0; border-top: 2px dashed var(--muted); }
.pick-mark.is-decided { border-top-style: solid; border-top-color: var(--text-2); }
.pick-mark.on-end { border-top-color: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch-selected { width: 12px; height: 12px; background: var(--accent); }
.swatch-off { color: var(--dim); font-size: 12px; letter-spacing: 0; }
.swatch-absence { width: 14px; height: 2px; background: var(--text-2); }
.swatch-pending { width: 14px; border-top: 2px dashed var(--muted); }
.pick-note { margin-top: 10px; }

/* ---------- tables ---------- */

.scroll-x { overflow-x: auto; }
/* Two-axis scroll for the long lists (BACKLOG.md D-3). */
.scroll-xy { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.scroll-xy.is-short { max-height: 50vh; }
.scroll-x.is-ruled { border-top: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; }
.table.w-720 { min-width: 720px; }
.table.w-900 { min-width: 900px; }
.table.w-980 { min-width: 980px; }
.table.w-1000 { min-width: 1000px; }
.table.w-1140 { min-width: 1140px; }
.table.w-1180 { min-width: 1180px; }

.th { text-align: left; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.th.is-right { text-align: right; }
/* Narrow numeric header, paired with `.td-num`. */
.th.is-num { text-align: right; padding: 13px 10px; }
/* Header row for the tables that scroll vertically inside their own container
   (BACKLOG.md D-3). Only those: `position:sticky` in a container that does not
   scroll resolves against the *page*, which would peel the People and
   sync-history headers off and float them at the top of the viewport. The
   background is required — the body scrolls underneath — and the bottom rule
   is a box-shadow rather than a border because with `border-collapse:collapse`
   a collapsed border belongs to the table, not to the sticky cell, so it stays
   behind while the header moves. */
.th.is-sticky { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: none; box-shadow: inset 0 -1px 0 var(--line); }

.tr { border-bottom: 1px solid var(--row-line); }
.tr.is-inactive { opacity: 0.55; }
/* Sync history rows are ruled above, not below. */
.tr-run { border-top: 1px solid var(--run-line); }

.td { padding: 13px 16px; font-size: 13px; color: var(--text-3); vertical-align: middle; white-space: nowrap; }
.td-muted { padding: 13px 16px; font-size: 12px; color: var(--muted); vertical-align: middle; }
/* Right-aligned numeric cell for the HR panel's columns of days and hours
   (BACKLOG.md P4-9). Narrower padding than `.td` because twelve columns at 16px
   pushed the table past 1300px and the Edit and Dates buttons off a 1440 screen.
   Tabular figures so a right-aligned column lines up. */
.td-num { padding: 13px 10px; font-size: 13px; color: var(--text-3); vertical-align: middle; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-num.is-negative { color: var(--accent); font-weight: 600; }
/* Free-form cells: 12px padding by default, 15px in the manager's own table. */
.td-box { padding: 12px 16px; vertical-align: middle; }
.td-box.is-roomy { padding: 15px 16px; }
.td-box.is-top { vertical-align: top; }
.td-box.is-right { text-align: right; }
.td-box.is-nowrap { white-space: nowrap; }
.td-box.is-days { font-size: 14px; font-weight: 600; text-align: right; }
.td-box.is-check { font-size: 12px; line-height: 1.5; }
.cell-title { font-size: 14px; font-weight: 600; }
.cell-name { font-size: 13px; color: var(--text-2); }
.cell-sub { font-size: 11px; color: var(--dim); }
.cell-actions { display: inline-flex; gap: 8px; }
.check-error { color: var(--accent); }
.check-warn { color: var(--warn); }
.check-ok { color: var(--dim); }

/* Request status badge. Pending and cancel-requested take the default. */
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid currentColor; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.badge.is-approved { color: var(--text-2); }
.badge.is-denied { color: var(--accent); }
.badge.is-withdrawn { color: var(--dim); }
/* Napta sync state, in the admin's All requests table. */
.sync-state { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sync-state.is-synced { color: var(--text-2); }
.sync-state.is-failed { color: var(--accent); }

/* ---------- modals ---------- */

.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1200; background: rgba(var(--black-rgb), 0.74); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: 100%; max-width: 500px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 26px 74px rgba(var(--black-rgb), 0.66); }
.modal.is-wide { max-width: 620px; max-height: 88vh; overflow-y: auto; }
.modal-title { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.modal-title.is-danger { color: var(--accent-soft); }
.modal-body { padding: 22px 20px; }
.modal-lead { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.modal-lead.is-spaced { margin-bottom: 6px; }
.modal-sub { font-size: 12px; color: var(--dim); letter-spacing: 0.04em; margin-bottom: 20px; }
.history { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.history-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.history-item { padding: 8px 0; border-bottom: 1px solid var(--row-line); }
.history-summary { font-size: 12px; color: var(--text-3); }
.history-byline { font-size: 11px; color: var(--dim); margin-top: 2px; }
.history-note { font-size: 11px; color: var(--muted); margin-top: 3px; font-style: italic; }

/* ---------- HR panel ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.filter-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.filter { background: var(--field); border: 1px solid var(--line-strong); color: var(--text); padding: 10px 12px; font-size: 13px; outline: none; min-width: 150px; }
.filter-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-bottom: 11px; cursor: pointer; }
.spacer { flex: 1; }
.exports { display: flex; gap: 8px; padding-bottom: 6px; }
.summary-line { margin-top: 14px; font-size: 12px; color: var(--dim); line-height: 1.6; }
.detail-empty { padding: 22px 20px; font-size: 12px; color: var(--dim); }

/* Record past absences (BACKLOG.md P1-23). */
.bf-intro { font-size: 12px; color: var(--dim); line-height: 1.6; margin-bottom: 18px; }
.bf-csv-help { font-size: 12px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.bf-file-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-file { font-size: 12px; color: var(--muted); }
.bf-napta { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-3); cursor: pointer; line-height: 1.5; }
.bf-napta input { margin-top: 3px; }
.bf-napta-hint { font-size: 12px; color: var(--dim); }
.bf-actions { display: flex; gap: 10px; margin-top: 18px; }
.bf-preview { border-top: 1px solid var(--line); }
.bf-summary { padding: 12px 20px; font-size: 12px; color: var(--muted); }
.bf-summary.is-error { color: var(--accent); }

/* ---------- admin ---------- */

.default-manager-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.default-manager-row { display: flex; gap: 8px; align-items: flex-start; max-width: 520px; }
.sync-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.sync-msg { font-size: 12px; color: var(--muted); }
/* Napta sync health (BACKLOG.md P1-13): the eyebrow and label take the
   health colour; the panel border turns red only while failing. */
.health { color: var(--muted); }
.health.is-unconfigured { color: var(--dim); }
.health.is-failing { color: var(--accent); }
.health.is-never { color: var(--accent-soft); }
.health-label { font-size: 12px; }
.health-body { padding: 14px 20px; font-size: 13px; color: var(--text-3); line-height: 1.7; }
.health-body strong { color: var(--text); }
.health-failure { margin-top: 8px; color: var(--accent-soft); }
.no-runs { padding: 0 20px 16px; font-size: 12px; color: var(--dim); }
.unmatched { border: 1px solid var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.unmatched-title { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--accent-deep); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-soft); font-weight: 600; }
.unmatched-body { padding: 12px 20px; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.unmatched-lead { margin-bottom: 8px; color: var(--accent-soft); }
.unmatched-item { padding: 4px 0; }

/* ---------- team calendar ---------- */

.cal-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-nav { display: flex; align-items: center; gap: 14px; }
.cal-month { font-size: 18px; font-weight: 600; min-width: 170px; text-align: center; }
.cal-legend { display: flex; gap: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cal-legend-item { display: flex; align-items: center; gap: 7px; }
.swatch-approved { width: 14px; height: 12px; background: rgba(var(--white-rgb), 0.14); border-left: 2px solid var(--text-2); }
.swatch-cal-pending { width: 13px; height: 11px; border: 1px dashed var(--dim); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-bottom: none; }
.cal-weekday { padding: 10px 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; border-right: 1px solid var(--line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
/* A day of the month, or one of the blanks padding the grid to whole weeks. */
.cal-cell { min-height: 104px; padding: 7px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sunken); }
.cal-cell.is-day { background: var(--surface); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-num { font-size: 11px; font-weight: 600; text-align: right; margin-bottom: 2px; color: var(--text-3); }
.cal-cell.is-today .cal-num { color: var(--accent); }
.chip { font-size: 10px; line-height: 1.35; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; border: 1px dashed var(--dim); color: var(--muted); }
.chip.is-approved { background: rgba(var(--white-rgb), 0.10); border: none; border-left: 2px solid var(--text-2); color: var(--text-2); }
.cal-more { font: inherit; font-size: 10px; text-align: left; color: var(--muted); background: transparent; border: none; border-radius: 2px; padding: 1px 4px; cursor: pointer; }
.cal-more:hover, .cal-more[aria-expanded="true"] { color: var(--text-2); background: rgba(var(--white-rgb), 0.06); }
.cal-more:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* The day popover (BACKLOG.md P4-14): fixed, positioned by DayPopover through
   the CSSOM below its "+N more" button. Hidden until placed, then grows out of
   the button (transform-origin is the button's centre). */
.day-pop { position: fixed; left: 0; top: 0; z-index: 50; width: 260px; max-height: min(360px, 70vh); display: flex; flex-direction: column; font-family: var(--font-body); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 12px 32px rgba(var(--black-rgb), 0.55); opacity: 0; outline: none; }
.day-pop.is-placed { animation: day-pop-in 150ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes day-pop-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
.day-pop-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; font-size: 12px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--row-line); }
.day-pop-count { margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.day-pop-close { background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.day-pop-close:hover { color: var(--text); }
.day-pop-close:focus-visible { outline: 1px solid var(--accent); }
.day-pop-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
/* Rows echo the chips: dashed for pending, solid with a left bar for approved. */
.day-pop-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border: 1px dashed var(--dim); color: var(--muted); }
.day-pop-row.is-approved { border: none; border-left: 2px solid var(--text-2); background: rgba(var(--white-rgb), 0.08); color: var(--text-2); }
.day-pop-name { font-size: 12px; }
.day-pop-meta { font-size: 10px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .day-pop.is-placed { animation: none; opacity: 1; } }

/* ---------- spacing utilities ---------- */

.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* ---------- small screens (BACKLOG.md P1-24; the rest is P4-6) ---------- */

@media (max-width: 640px) {
  .page-pad { padding: 20px 16px 40px; }
  .emp-grid { grid-template-columns: minmax(0, 1fr); }
  .app-header { flex-wrap: wrap; gap: 14px; }
  /* Every pixel of picker padding is a seventh of a pixel off each day. */
  .date-picker { padding: 12px 6px 10px; }
}