:root {
  /* Thyme — herb-leaning dark palette. The base sits in the
   * blue-green range (#0f1512 has a green tint over the previous
   * neutral grey). The accent is sage/thyme-leaf green; warm enough
   * to pair with foliage colours on charts but desaturated so it
   * doesn't clash with the per-project colours we layer on top. */
  --bg: #0f1512;
  --surface: #18211c;
  --surface-2: #212c25;
  --border: #2c3a30;
  --text: #e6efe6;
  --muted: #8aa292;
  --accent: #8bc34a;            /* thyme leaf */
  --accent-soft: #6b9a3a;
  --leaf-deep: #4a6b2c;

  /* Per-classification fallback colours (used by chips + stripe bars
   * when a specific project hasn't supplied its own). Per-project
   * colours from the DB always win over these. */
  --rd: #3b82f6;
  --commercialisation: #10b981;
  --admin: #f59e0b;
  --other: #888888;
  --vacation_public: #a78bfa;
  --vacation_bank: #34d399;
  --vacation_sick: #f87171;
  --vacation_other: #9ca3af;
  --vacation_deferred: #fbbf24;
  --pause: #5b6e62;

  --danger: #e36b66;
  --warn: #e0a44c;
  --ok: #7cc26b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* While a slot is being dragged or resized, lock down anything that
 * could cause repaints/reflows from cursor wander. Text selection
 * flashes were the worst offender; pointer-events on siblings stops
 * hover styles flickering. */
body.is-dragging {
  user-select: none;
  cursor: grabbing;
}
body.is-dragging .slot:not(.dragging) {
  pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Subtle leafy gradient at the page edges. Doesn't interfere with the
 * day-bar / cards because they have solid surfaces. */
body {
  background:
    radial-gradient(ellipse at top left, rgba(139,195,74,0.05), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(139,195,74,0.04), transparent 40%),
    var(--bg);
  background-attachment: fixed;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background:
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(139,195,74,0.08);
}
.topbar .brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
/* Primary nav rules live under .primary-nav further down so the
 * desktop layout and the mobile drawer share the same selectors
 * — see "Hamburger / responsive nav" near the end of this file. */
.topbar .who {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
}
.topbar .who:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.topbar .who-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--warn);
  color: black;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.day-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.day-header h1 { margin: 0; font-size: 24px; }
.day-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.today-link { color: var(--muted); font-size: 13px; }

.add-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.add-entry h2 { margin: 0 0 12px; font-size: 16px; color: var(--muted); }
.add-entry .row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.add-entry .row.mode-row { gap: 24px; align-items: center; }
.add-entry label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.add-entry .grow { flex: 1; }
.add-entry input[type="text"],
.add-entry input[type="time"],
.add-entry input[type="number"],
.add-entry select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
.add-entry .grow input { width: 100%; }
.add-entry button {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.day-content h2 {
  margin: 24px 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.total-big .label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}
.total-big .value { font-size: 28px; font-weight: 600; }
.class-totals { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; }
.class-totals li { text-align: right; }
.class-totals .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}
.class-totals .value { font-weight: 600; }

.entry-list { list-style: none; padding: 0; margin: 0; }
.entry {
  display: grid;
  grid-template-columns: 130px 80px 1fr 2fr 32px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border-left: 4px solid var(--other);
  border-bottom: 1px solid var(--border);
}
.entry:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.entry:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.entry.untimed { grid-template-columns: 80px 1fr 2fr 32px; }
.entry .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.entry .duration { font-weight: 600; font-variant-numeric: tabular-nums; }
.entry .desc { color: var(--muted); }
.group-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: white;
  margin-right: 6px;
}
.delete {
  background: transparent;
  color: var(--muted);
  border: 0;
  cursor: pointer;
  font-size: 18px;
}
.delete:hover { color: var(--danger); }

.empty { color: var(--muted); padding: 12px 0; }

/* ---- Day grid (daily view) ---- */
.day-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  margin-top: 16px;
  /* Don't stretch — the chart has its own height. Stretching used to
   * couple the chart to the aside, but a tall form (edit mode, lots of
   * project chips) could push the chart taller than its 1440px inner,
   * collapsing scroll range to 0 and snapping the view back to midnight
   * mid-edit. */
  align-items: start;
}

.day-bar-wrap {
  display: grid;
  grid-template-columns: 56px 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 720px;
  overflow: hidden;
  position: relative;
}
/* Chart container: anchors the absolutely-positioned scroll box. Fixed
 * viewport-relative height so the chart stays stable through aside
 * resizes (entry form opening/closing). The inner 1440*zoom box scrolls
 * inside this fixed frame. */
.day-chart {
  position: relative;
  min-height: 540px;
  height: 70vh;
  max-height: 900px;
}
.day-bar-scroll {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.day-bar-inner {
  display: grid;
  grid-template-columns: 56px 1fr;
  position: relative;
  width: 100%;
}
.hour-axis {
  position: relative;
  border-right: 1px solid var(--border);
}
.hour-axis .tick {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.day-bar {
  position: relative;
  background: var(--bg);
  /* Block 3 (drag-create) no longer preventDefaults pointerdown — that
     was suppressing the synthetic click on missing slots. Without it,
     a slow drag would select the slot text on some browsers, so we
     disable selection on the bar itself. */
  user-select: none;
  -webkit-user-select: none;
}
.day-bar .slot {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.day-bar .slot:hover { filter: brightness(1.1); }
.day-bar .slot .slot-label { font-weight: 500; line-height: 1.2; }
.day-bar .slot .slot-label .desc { font-weight: 400; opacity: 0.8; }
/* "Missing description" nag on a logged work entry. A self-coloured red
 * pill so it stays legible on top of any project background (plain red
 * text would vanish on a red/pink project). Details are "almost
 * mandatory" — the entry exists, but the chart keeps prompting until
 * it's described. */
.day-bar .slot .slot-label .desc-missing {
  display: inline-block;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(220, 38, 38, 0.9);
  padding: 0 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.day-bar .slot .slot-when {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.day-bar .slot.untimed {
  /* Diagonal hatch overlay so placed-untimed entries are visually
     distinct from real timed entries. */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.07) 0 6px,
    transparent 6px 12px
  );
}
/* Pause slot: a deliberate break in the day. Override the per-project
 * background (set inline) with a translucent diagonal hatch so the
 * slot reads as "not working" against whichever colour the project
 * carries. Border stays subtle, label muted. */
.day-bar .slot.class-pause {
  background: rgba(255, 255, 255, 0.04) !important;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.08) 0 6px,
    transparent 6px 14px
  ) !important;
  color: var(--muted) !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.day-bar .slot.class-pause .slot-label .proj {
  font-style: italic;
  opacity: 0.85;
}
/* Drag-to-create preview rectangle. Lives inside .day-bar so its
 * position is computed in the same coordinate space as slots.
 * The [hidden] override matters: with bare `display: flex` here, the
 * UA stylesheet's `[hidden] { display: none }` loses the cascade
 * (same specificity, author rule wins) and the empty preview paints
 * as a 2px dashed line at top:0 because no `top`/`height` style is
 * set until the first drag. */
.drag-preview {
  position: absolute;
  left: 4px;
  right: 4px;
  background: rgba(88, 166, 255, 0.25);
  border: 1px dashed var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}
.drag-preview[hidden] { display: none; }
/* Form-driven phantom slot. Visually similar to .drag-preview but
 * persistent — it mirrors the form's currently-selected timed range so
 * the user can see their planned entry on the chart, not just in the
 * side form. Solid fill (vs the dashed border of drag-preview) reads
 * "this is what'll be added on submit" rather than "this is the
 * gesture in progress". */
.form-phantom {
  position: absolute;
  left: 4px;
  right: 4px;
  background: rgba(88, 166, 255, 0.22);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.form-phantom .phantom-when { opacity: 0.85; font-weight: 500; }
.form-phantom .phantom-cancel {
  position: absolute;
  top: 2px;
  right: 4px;
  pointer-events: auto;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.form-phantom .phantom-cancel:hover { background: rgba(88, 166, 255, 0.18); }
/* While the phantom is being placed, hide the underlying missing
 * slots — their dashed borders + "+Xh missing" labels overlap the
 * phantom and make it unreadable. The missing slots reappear as soon
 * as the phantom is dismissed (mode switch, edit, or invalid range). */
.day-bar.phantom-active .slot.missing { display: none; }
.day-bar .slot.dragging {
  opacity: 0.85;
  cursor: grabbing;
  z-index: 6;
}
.day-bar .slot.timed { cursor: grab; }
.day-bar .slot.untimed { cursor: pointer; }
.resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 7;
}
.resize-handle.top { top: 0; }
.resize-handle.bottom { bottom: 0; }
.resize-handle:hover { background: rgba(255,255,255,0.2); }
.day-bar .slot.missing {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.day-bar .slot.missing:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(88, 166, 255, 0.05);
}
/* ⌘/Ctrl+click picks a missing part into a multi-part draft set; the
 * "Draft selected" tool turns the set into one grouped draft. */
.day-bar .slot.missing.missing-selected {
  border-style: solid;
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}
.day-bar .slot.out-of-window {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.02) 0 8px,
    rgba(255,255,255,0.04) 8px 16px
  );
  border: 0;
  pointer-events: none;
}

/* ---- Day-start line ----
 * A draggable horizontal line marking where the day starts (the
 * anchor for Missing-slot rationing and the form-fill default). Sits
 * above hour ticks but below dragging slots. */
.day-start-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  cursor: ns-resize;
  z-index: 5;
  /* Bigger hit-area: an invisible 12px-tall band centered on the
     2px line. Without this the line is too thin to grab on touch. */
}
.day-start-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -5px;
}
.day-start-line:hover { height: 3px; filter: brightness(1.15); }
.day-start-line.dragging { height: 3px; filter: brightness(1.2); }
/* Long-press armed (touch): the moment between the hold firing and the
 * release. A glow signals the element is now "grabbed" and follows the
 * finger — paired with a short vibration in the JS. */
.day-start-line.press-armed { height: 4px; box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.45); }
.day-bar .slot.press-armed { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 0 5px rgba(88, 166, 255, 0.35); }
.day-start-label {
  position: absolute;
  /* Sit fully above the line (bottom edge meets the line + a small
     gap) rather than straddling it — straddling overlapped the title
     of whatever entry starts right at the day-start time. */
  bottom: calc(100% + 3px);
  left: 12px;
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ---- Draft entries (calendar imports without a project yet) ----
 * Visually distinct from timed slots: dashed amber border, hatched
 * background, white text. Inline project picker + delete button sit on
 * top of the body so the user can finalize without leaving the chart.
 */
.day-bar .slot.draft {
  background: rgba(251, 191, 36, 0.18);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(251, 191, 36, 0.10) 0 6px,
    transparent 6px 12px
  );
  border: 1px dashed #fbbf24;
  color: var(--fg);
  cursor: grab;
}
.day-bar .slot.draft .proj {
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.day-bar .slot .slot-delete {
  position: absolute;
  top: 2px;
  right: 4px;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  z-index: 8;
}
.day-bar .slot .slot-delete:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
  opacity: 1;
}
.day-bar .slot.draft .slot-delete { color: var(--muted); opacity: 1; }
/* A part of a multi-part draft: a solid left edge ties the parts
 * together visually so they read as one drafted block split across
 * gaps, and the "· part" label (set in the template) hints they
 * finalise together. */
.day-bar .slot.draft.draft-grouped {
  border-left: 3px solid #fbbf24;
}

/* Draft-day indicator. Replaces the standalone banner that used to
 * sit between the totals and the day-grid — its appearing/disappearing
 * shifted the bar up/down a few dozen pixels mid-edit, which made
 * finalising drafts feel jumpy. As a chip inline with the h1, it
 * stretches the centred title horizontally instead; the day-grid
 * stays put. */
.draft-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f1512;
  background: #fbbf24;
  border-radius: 999px;
  line-height: 1.6;
  cursor: help;
}
.draft-chip-icon {
  font-size: 11px;
  line-height: 1;
}

/* ---- Day side panel ---- */
.day-side { display: flex; flex-direction: column; gap: 16px; }
.entry-form-card,
.overflow-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  scroll-margin-top: 16px;
}
.entry-form-card.prefilled {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

/* Mode-aware framing for the entry form. The picker behaves
 * differently in edit vs add mode (chip click changes *this* entry vs
 * primes a project for the next drag-create), so the card needs a
 * loud visual cue telling the user which one is live. */
.entry-form-card.mode-edit {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(139, 195, 74, 0.2);
  background: linear-gradient(180deg, rgba(139, 195, 74, 0.07), var(--surface) 80px);
}
.entry-form-card.mode-edit-draft {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.18);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06), var(--surface) 80px);
}
/* Multi-edit: the red framing matches the red multi-select tint on the
 * bar, so the form and the selected slots read as the same "editing
 * several at once" state. */
.entry-form-card.mode-edit-multi {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(227, 107, 102, 0.22);
  background: linear-gradient(180deg, rgba(227, 107, 102, 0.07), var(--surface) 80px);
}

/* Edit banner sits above the form so the user always sees what they're
 * about to change. The coloured chip mirrors the day-bar swatch of the
 * entry being edited — same colour they just clicked on. */
.edit-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px -4px 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.mode-edit .edit-banner { border-color: rgba(139, 195, 74, 0.45); }
.mode-edit-draft .edit-banner { border-color: rgba(251, 191, 36, 0.4); }
.mode-edit-multi .edit-banner { border-color: rgba(227, 107, 102, 0.5); }
.edit-banner.saving {
  opacity: 0.6;
  transition: opacity 0.12s ease-out;
}
.edit-banner.saving::after {
  content: "saving…";
  position: absolute;
  right: 12px;
  bottom: -16px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}
.edit-banner { position: relative; }
.edit-banner-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.edit-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--edit-chip-color, var(--surface-2));
  color: var(--edit-chip-text, var(--text));
  font-size: 12px;
  font-weight: 600;
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edit-chip-text, var(--text));
  opacity: 0.65;
}
.edit-banner-time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.edit-banner-cancel {
  margin-left: auto;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}
.edit-banner-cancel:hover {
  background: var(--surface-2);
  color: var(--text);
}
.edit-hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.edit-hint strong { color: var(--text); }

/* Parts list shown when finalising a multi-part draft — the per-gap
 * ranges, in place of the single start/end picker. */
.draft-parts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px;
  max-height: 160px;
  overflow-y: auto;
}
.draft-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 9px;
  border: 1px dashed #fbbf24;
  border-left: 3px solid #fbbf24;
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.08);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.draft-part-when { color: var(--text); }
.draft-part-dur { color: var(--muted); }

/* Add-mode chips read "click me to prime a project for the next
 * drag" — give them a subtle dashed outline so they don't look identical
 * to the active selection in edit mode. */
.mode-add .project-chip {
  border-style: dashed;
}
.mode-add .project-chip.active {
  border-style: solid;
}
html { scroll-behavior: smooth; }
.entry-form-card h3,
.overflow-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.entry-form-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.entry-form-card label,
.entry-form-card .mode-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.entry-form-card .mode-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.entry-form-card .mode-tabs a {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.entry-form-card .mode-tabs a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.entry-form-card .time-row {
  display: flex;
  gap: 12px;
}

/* HH:MM picker built from selects. Both timed (start+end) and untimed
 * (duration h+m) pickers use this layout. */
.picker-block {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.picker-block[hidden] { display: none; }
.hm-row {
  display: grid;
  grid-template-columns: 80px auto auto auto;
  gap: 4px;
  align-items: center;
}
.hm-row .picker-label {
  font-size: 13px;
  color: var(--muted);
}
.hm-row .hm-sep {
  color: var(--muted);
  font-weight: 600;
}
.hm-row select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.entry-form-card .mode-tabs button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.entry-form-card .mode-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.fill-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.4;
}
.fill-hint strong { color: var(--text); }

.form-error {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  font-size: 13px;
  padding: 8px 10px;
  margin: 0;
}

/* Defer-overtime toggle in banks card */
.defer-toggle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.defer-toggle label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.defer-toggle .defer-copy { display: flex; flex-direction: column; gap: 2px; }
.defer-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Day window override card (daily side panel) */
.day-window-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.day-window-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.window-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.window-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 100px;
}
.window-form select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
.window-form button {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.day-window-card .hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Day setup card — combined Reimport + Start time. Same surface as
 * day-window-card; rows separated by the existing tools-divider. */
.day-setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.day-setup-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.day-setup-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-setup-row .hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.day-setup-row .btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
  text-align: center;
  cursor: pointer;
}
.day-setup-row .btn.primary {
  background: var(--accent);
  color: #0f1512;
}
.day-setup-row .btn.primary:hover { background: #9bd45a; text-decoration: none; }
.day-setup-row .btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.day-setup-row .btn.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.day-setup-row .window-form { margin: 0; }

/* Profile page */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.profile-grid .banks-card,
.profile-grid .settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.profile-grid h2 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.profile-grid .hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px;
}
.profile-grid .banks-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-grid .banks-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.profile-grid .banks-list li:last-child { border-bottom: 0; }
.profile-grid .bank-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
}
.profile-grid .bank-label .hint { font-size: 11px; opacity: 0.7; margin: 0; }
.profile-grid .bank-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.profile-grid .bank-value small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}
.profile-grid li.negative .bank-value { color: var(--danger); }
.profile-grid .admin-form-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.admin-tag {
  background: var(--warn);
  color: black;
  font-weight: 700;
  padding: 1px 8px;
}

/* Friendly form-error page */
.error-page {
  max-width: 560px;
  margin: 80px auto;
  padding: 0 24px;
}
.error-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 24px 28px;
}
.error-card h1 {
  margin: 0 0 12px;
  font-size: 22px;
}
.error-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0;
}
.error-card p strong { color: var(--text); }
.error-card .actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}
.error-card .btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  font-size: 14px;
}
.error-card .btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ---- Home (landing) ---- */
.hero {
  background: linear-gradient(160deg, var(--surface), var(--surface-2) 70%, rgba(139,195,74,0.12));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 32px 28px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -20%, rgba(139,195,74,0.18), transparent 50%);
  pointer-events: none;
}
.hero-eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.hero-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text);
}
.hero-sub {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 56ch;
}
.hero-cta {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-cta {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-cta.primary {
  background: var(--accent);
  color: #0f1512;
}
.btn-cta.primary:hover { background: #9bd45a; text-decoration: none; }
.btn-cta.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-cta.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.hero-progress {
  margin-top: 22px;
  max-width: 480px;
}
.hero-progress-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.hero-progress-bar .fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #d4e157);
  border-radius: 4px;
}
.hero-progress-label {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-hint { font-size: 12px; color: var(--muted); }
.stat-card.streak.streak-hot {
  border-color: var(--warn);
  background: linear-gradient(145deg, var(--surface), rgba(224,164,76,0.12));
}

.home-expenses {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.home-expenses header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.home-expenses h2 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.home-expenses .more-link { font-size: 12px; color: var(--muted); }
.home-expenses-list { list-style: none; padding: 0; margin: 0; }
.home-expense-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.home-expense-row:last-child { border-bottom: 0; }
.home-expense-icon { font-size: 16px; text-align: center; }
.home-expense-body { color: var(--text); }
.home-expense-body strong { font-weight: 600; }
.home-expense-amount { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }

.overtime-warning {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, rgba(224,164,76,0.10), var(--surface));
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 16px;
}
.overtime-warning .overtime-icon {
  font-size: 24px;
  color: var(--warn);
}
.overtime-warning-body { flex: 1; font-size: 14px; color: var(--text); line-height: 1.4; }
.overtime-warning-body strong { display: block; margin-bottom: 2px; }

.streak-nudge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, rgba(224,164,76,0.10), var(--surface));
  border: 1px solid var(--warn);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.streak-nudge .streak-icon {
  font-size: 28px;
  line-height: 1;
}
.streak-nudge-body { flex: 1; font-size: 14px; color: var(--text); }
.streak-nudge-body strong { display: block; font-weight: 600; margin-bottom: 2px; }

.leaderboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.leaderboard-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.leaderboard-card h2 {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.leaderboard-card .my-rank {
  font-size: 12px;
  color: var(--muted);
}
.leaderboard {
  list-style: none;
  padding: 0;
  margin: 0;
}
.leaderboard li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li.me {
  background: linear-gradient(90deg, rgba(139,195,74,0.10), transparent 60%);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
  border-bottom-color: transparent;
}
.leaderboard .rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.leaderboard li:first-child .rank { color: var(--warn); }
.leaderboard .name { font-weight: 500; }
.leaderboard .name small { color: var(--muted); font-weight: 400; }
.leaderboard .length {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

/* ---- Team view ---- */
.period-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.period-tabs a {
  padding: 8px 16px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.period-tabs a:hover { color: var(--text); }
.period-tabs a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.team-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.team-emp-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.emp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.emp-chip:hover { border-color: var(--accent); }
.emp-chip input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.emp-chip-name { font-weight: 500; }
.team-toggle-buttons {
  display: flex;
  gap: 6px;
}
.team-toggle-buttons button {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.team-toggle-buttons button:hover { color: var(--accent); border-color: var(--accent); }

.team-aggregate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) {
  .team-aggregate-grid {
    grid-template-columns: 1fr;
  }
}
.team-totals-card,
.team-pie-card,
.team-projects-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.team-totals-card h3,
.team-pie-card h3,
.team-projects-card h3 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.team-headline-totals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.team-headline-totals li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.team-headline-totals .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-headline-totals .value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.team-pie-card { text-align: center; }
.team-pie-card .pie-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.team-pie-card .pie-card-head h3 { margin: 0; }
.pie-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.pie-toggle button {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pie-toggle button.active {
  background: var(--accent);
  color: #0f1512;
  font-weight: 600;
}
.team-pie-card canvas { max-width: 240px; margin: 0 auto; }
.team-pie-card .class-chips {
  margin-top: 12px;
  justify-content: center;
}

.team-projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.team-projects-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.team-projects-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.team-projects-table tbody tr:last-child td { border-bottom: 0; }
.team-projects-table .proj-group {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.team-projects-table .proj-minutes,
.team-projects-table .proj-pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.team-projects-table .empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 14px 8px;
}

/* Employees admin */
.employees-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.employees-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.employees-list li:last-child { border-bottom: 0; }
.employees-list .emp-name { flex: 1; font-weight: 500; }
.employees-list .emp-email { color: var(--muted); font-size: 13px; }
.vac-bank-form {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.vac-bank-form input[type="number"] {
  width: 70px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  text-align: right;
}
.vac-bank-form button {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}
.vac-bank-form button:hover { color: var(--accent); border-color: var(--accent); }
.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* Unified entry-form: fields stack vertically, project + description
 * at the top so they're consistent across all modes. */
.entry-form-card .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.entry-form-card .field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.entry-form-card input[type="text"],
.entry-form-card input[type="time"],
.entry-form-card input[type="number"],
.entry-form-card select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
.entry-form-card .form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.entry-form-card button[type="submit"] {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.entry-form-card .cancel { color: var(--muted); font-size: 13px; }

/* Project picker — quick-pick chip buttons backed by a grouped select.
 * Used in the day-side add-entry form and once per row in the calendar
 * import modal. The select is the canonical input; chips are a
 * shortcut that writes to it. */
.project-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.project-chip:hover { border-color: var(--accent); }
.project-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.project-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent));
}
.project-chip.active {
  background: var(--chip-color, var(--accent));
  color: var(--chip-text, #0f1512);
  border-color: var(--chip-color, var(--accent));
}
.project-chip.active .chip-dot {
  background: var(--chip-text, #0f1512);
  opacity: 0.6;
}

/* Day-bar tools card — selection-driven actions (Edit / Duplicate /
 * Split / Delete) plus the multi-select toggle and zoom controls, all
 * grouped in one box so the user has a single place to reach for any
 * bar manipulation. */
.day-tools-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(139, 195, 74, 0.05), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.day-tools-card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-tools-card h3::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  display: inline-block;
}
.tools-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 4px 0 0;
}
.day-tools-tip {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.day-tools-tip kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.day-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
/* The icon-only action row packs four equal buttons (duplicate, split,
   delete, paintbrush). Icons are sized up since there's no caption. */
.day-tools-actions {
  grid-template-columns: repeat(4, 1fr);
}
.day-tools-actions .day-tool-btn {
  font-size: 17px;
  line-height: 1;
  padding: 8px 0;
}
.day-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.day-tool-btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(139, 195, 74, 0.25);
}
.day-tool-btn.armed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.day-tool-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}
.day-tool-btn.danger { color: var(--danger); border-color: rgba(227, 107, 102, 0.4); }
.day-tool-btn.danger:hover:not(:disabled) {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
  box-shadow: 0 0 0 1px rgba(227, 107, 102, 0.35);
}
.day-tool-btn.danger:disabled { color: var(--muted); border-color: var(--border); }

.tool-status {
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
  font-style: italic;
}

.zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zoom-row-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  flex: 1;
}
.zoom-controls-inline {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
}

/* While split is armed the bar shows a crosshair cursor; the cut line
 * follows the cursor (see .split-cut-indicator). */
body.tool-armed-split,
body.tool-armed-split .day-bar,
body.tool-armed-split .day-bar * { cursor: crosshair !important; }

/* While the pinceau is armed the whole bar shows a "copy" cursor — every
 * slot click paints the captured source's project + description onto the
 * clicked entry (see the pinceau handlers in daily.html). */
body.tool-armed-pinceau,
body.tool-armed-pinceau .day-bar,
body.tool-armed-pinceau .day-bar * { cursor: copy !important; }

/* When 2+ entries are Cmd+click-selected, slots tinted in danger red
 * (the only operation available is bulk Delete). With one selected we
 * use the green accent — same colour as the editing-this-entry cue.
 * Drafts get the same treatment so multi-select reads identically. */
.day-bar .slot.timed.selected,
.day-bar .slot.draft.selected {
  outline: 3px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px rgba(139, 195, 74, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  filter: brightness(1.18);
  z-index: 3;
}
body.has-multi-selection .day-bar .slot.timed.selected,
body.has-multi-selection .day-bar .slot.draft.selected {
  outline-color: var(--danger);
  border-color: var(--danger);
  box-shadow:
    0 0 0 2px rgba(227, 107, 102, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.45);
  filter: brightness(0.85);
}

/* Split-on-drag preview: two horizontal cut lines that mark where the
 * container entry will be cliped when the dragged slot is released.
 * The container itself gets `.will-split` (outline + brightness shift)
 * and the dragged slot gets `.split-target-source` (z-index bump so it
 * stays readable on top of the highlighted container). */
.split-preview-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 0;
  border-top: 2px dashed var(--accent);
  pointer-events: none;
  z-index: 9;
  transform: translateY(-50%);
}
.split-preview-line .split-preview-label {
  position: absolute;
  top: -10px;
  left: 8px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.day-bar .slot.timed.will-split {
  outline: 2px dashed var(--accent);
  outline-offset: -1px;
  filter: brightness(0.78) saturate(0.85);
  z-index: 2;
}
.day-bar .slot.split-target-source {
  z-index: 10;
  box-shadow:
    0 0 0 2px rgba(88, 166, 255, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.5);
}

/* Cut indicator: solid red horizontal line that follows the cursor when
 * split is armed. Bumped to a 3px solid red bar (with a soft glow) so
 * it stays legible on top of any slot colour. */
.split-cut-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--danger);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 6px rgba(231, 76, 60, 0.55);
  pointer-events: none;
  z-index: 20;
  transform: translateY(-50%);
}
.split-cut-indicator .split-cut-label {
  position: absolute;
  right: 6px;
  top: -10px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Day-bar zoom buttons (lives inside the Tools card now). */
.zoom-btn {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  min-width: 28px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
}
.zoom-btn:hover { background: var(--surface-2); color: var(--accent); }
.zoom-btn.zoom-reset {
  font-size: 11px;
  min-width: 44px;
  color: var(--muted);
}
.zoom-btn.zoom-reset:hover { color: var(--accent); }
.entry-form-card form.danger {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.entry-form-card form.danger button {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.entry-form-card form.danger button:hover {
  background: var(--danger);
  color: white;
}

.overflow-card ul { list-style: none; padding: 0; margin: 0; }
.overflow-card li {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.missing-total .label { color: var(--danger); }
.missing-total .value { color: var(--danger); }
.overtime-total .label { color: var(--warn); }
.overtime-total .value { color: var(--warn); }
.vacation-total .label { color: var(--vacation_bank); }
.vacation-total .value { color: var(--vacation_bank); }
.active-break-total .label { color: #4f8d4a; }
.active-break-total .value { color: #4f8d4a; }
.total-big .sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Vacation banner */
.vacation-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.vacation-banner .vac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid rgba(0,0,0,0.25);
}
.vacation-banner .vac-name { font-weight: 600; }
.vacation-banner .vac-dur {
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.vacation-banner .vac-desc { font-weight: 400; opacity: 0.85; font-size: 13px; }

/* Quota line on day-bar */
.day-bar .quota-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--muted);
  z-index: 5;
  pointer-events: none;
}
.day-bar .quota-line .quota-label {
  position: absolute;
  right: 4px;
  top: -6px;
  font-size: 10px;
  color: var(--muted);
  background: var(--bg);
  padding: 0 4px;
}

/* Overtime slot styling */
.day-bar .slot.overtime {
  outline: 2px solid var(--warn);
  outline-offset: -2px;
}
.day-bar .slot .overtime-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 2px;
  background: var(--warn);
  color: black;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Banks panel */
.banks-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.banks-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.banks-card ul { list-style: none; padding: 0; margin: 0; }
.banks-card li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.banks-card li:last-child { border-bottom: 0; }
.banks-card .bank-label {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.banks-card .bank-label .hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}
.banks-card .bank-value {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.banks-card .bank-value small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}
.banks-card li.negative .bank-value { color: var(--danger); }

/* ---- Weekly view ---- */
.week-grid {
  --week-day-header-height: 44px;
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  height: 720px;
}
.week-axis {
  position: relative;
  border-right: 1px solid var(--border);
  margin-right: -6px;
  display: flex;
  flex-direction: column;
}
.week-axis .axis-header-spacer {
  /* Matches .week-day header so ticks line up with the day-bar area. */
  height: var(--week-day-header-height);
  flex: none;
}
.week-axis .axis-ticks {
  position: relative;
  flex: 1;
}
.week-axis .axis-ticks .tick {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.week-day {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid transparent;
  overflow: hidden;
}
.week-day.today { border-color: var(--accent); }
.week-day:hover { border-color: var(--accent); }
.week-day.weekend { background: var(--surface); opacity: 0.85; }
.week-day.weekend header { background: rgba(255,255,255,0.02); }
.week-day header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  padding: 6px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  align-items: baseline;
  gap: 0 8px;
  /* Fixed height so all day-bars share a uniform top edge that matches
     the hour-axis spacer — ticks then line up with real time even when
     a day has events or off-window markers. */
  height: var(--week-day-header-height);
  box-sizing: border-box;
  flex: none;
  overflow: hidden;
}
.week-day header .weekday {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.week-day header .day-num {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  align-self: center;
}
.week-day header .day-total {
  grid-row: 2;
  grid-column: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.week-day header .day-missing { color: var(--danger); }
.day-bar.mini {
  position: relative;
  flex: 1;
  background: var(--bg);
}
.day-bar.mini .slot {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25);
}
.day-bar.mini .slot.untimed {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.07) 0 4px,
    transparent 4px 8px
  );
}
.day-bar.mini .slot.missing {
  background: transparent;
  border: 1px dashed var(--border);
}
.day-bar.mini .slot.class-pause {
  background: rgba(255, 255, 255, 0.05) !important;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.08) 0 4px,
    transparent 4px 8px
  ) !important;
  border-color: rgba(255, 255, 255, 0.12);
}
.day-bar.mini .slot.overtime {
  outline: 2px solid var(--warn);
  outline-offset: -1px;
}
.day-bar.mini .quota-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--muted);
  z-index: 5;
  pointer-events: none;
}
.week-day .day-overtime { color: var(--warn); font-size: 10px; margin-left: 4px; }
.week-day .day-missing { color: var(--danger); font-size: 10px; margin-left: 4px; }
.week-day .vac-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.off-window {
  /* Overlay markers at the very top/bottom edge of .day-bar.mini, so
     they don't compress the day-bar (which would misalign slots with
     the hour axis). */
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  display: block;
  font-size: 10px;
  text-align: center;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.off-window.early { top: 0; border-bottom: 1px solid var(--border); }
.off-window.late { bottom: 0; border-top: 1px solid var(--border); }
.week-day .vac-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Period (day/week/month/year) headers. Arrows are anchored to fixed
 * grid columns so changing the title length doesn't shift them around. */
.period-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 24px;
}
.period-header h1 { margin: 0; font-size: 22px; text-align: center; }
.period-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.period-relative {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.period-nav {
  display: grid;
  grid-template-columns: 28px minmax(280px, auto) 28px;
  align-items: center;
  gap: 16px;
}
.period-nav .nav-arrow {
  display: inline-block;
  width: 28px;
  text-align: center;
  font-size: 18px;
  color: var(--muted);
  text-decoration: none;
}
.period-nav .nav-arrow:hover { color: var(--accent); }
.period-nav .nav-arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.period-links { display: flex; gap: 12px; font-size: 13px; }

/* ---- Classification breakdown (above month/year cal) ---- */
.class-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.class-stack {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}
.class-stack-seg {
  height: 100%;
  min-width: 4px;
  display: block;
}
.class-stack-seg.class-rd { background: var(--rd); }
.class-stack-seg.class-commercialisation { background: var(--commercialisation); }
.class-stack-seg.class-admin { background: var(--admin); }
.class-stack-seg.class-other { background: var(--other); }
.class-stack-seg.class-vacation_public { background: var(--vacation_public); }
.class-stack-seg.class-vacation_bank { background: var(--vacation_bank); }
.class-stack-seg.class-vacation_sick { background: var(--vacation_sick); }
.class-stack-seg.class-vacation_other { background: var(--vacation_other); }
.class-stack-seg.class-vacation_deferred { background: var(--vacation_deferred); }
.class-stack-seg.class-pause { background: var(--pause); }

.class-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.class-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}
.class-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.class-chip.class-rd .dot { background: var(--rd); }
.class-chip.class-commercialisation .dot { background: var(--commercialisation); }
.class-chip.class-admin .dot { background: var(--admin); }
.class-chip.class-other .dot { background: var(--other); }
.class-chip.class-vacation_public .dot { background: var(--vacation_public); }
.class-chip.class-vacation_bank .dot { background: var(--vacation_bank); }
.class-chip.class-vacation_sick .dot { background: var(--vacation_sick); }
.class-chip.class-vacation_other .dot { background: var(--vacation_other); }
.class-chip.class-vacation_deferred .dot { background: var(--vacation_deferred); }
.class-chip.class-pause .dot { background: var(--pause); }
.class-chip .chip-label { color: var(--muted); }
.class-chip .chip-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.class-chip .chip-pct {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  margin-left: 2px;
}
.class-chip-link {
  text-decoration: none;
  color: inherit;
}
.class-chip-link:hover { background: var(--surface-3, var(--surface-2)); }

/* ---- Monthly calendar ---- */
.month-cal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.cal-head, .cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-head {
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: center;
}
.cal-week + .cal-week { margin-top: 6px; }
.cal-day {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px;
  height: 84px;
  text-decoration: none;
  color: var(--text);
}
.cal-day:hover { border-color: var(--accent); }
.cal-day.out { opacity: 0.3; pointer-events: none; }
.cal-day.today { border-color: var(--accent); }
.cal-day.weekend { background: var(--surface-2); }
.cal-day header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--muted);
}
.cal-day header .num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.cal-day .cal-bar {
  margin-top: auto;
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
}
.cal-day .cal-bar .seg {
  height: 100%;
}
.cal-day .cal-bar .seg.class-rd { background: var(--rd); }
.cal-day .cal-bar .seg.class-commercialisation { background: var(--commercialisation); }
.cal-day .cal-bar .seg.class-admin { background: var(--admin); }
.cal-day .cal-bar .seg.class-other { background: var(--other); }
.cal-day .cal-bar .seg.class-vacation_public { background: var(--vacation_public); }
.cal-day .cal-bar .seg.class-vacation_bank { background: var(--vacation_bank); }
.cal-day .cal-bar .seg.class-vacation_sick { background: var(--vacation_sick); }
.cal-day .cal-bar .seg.class-vacation_other { background: var(--vacation_other); }
.cal-day .cal-bar .seg.class-vacation_deferred { background: var(--vacation_deferred); }
.cal-day .cal-bar .seg.class-pause { background: var(--pause); }

/* Status colour-coding for past days/months. Today + future stays
 * neutral grey; past in-window slots get a left accent + tinted bg. */
.cal-day { border-left: 3px solid transparent; }
.cal-day.status-under {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(248,81,73,0.12), var(--bg) 60%);
}
.cal-day.status-on {
  border-left-color: #2ecc71;
  background: linear-gradient(90deg, rgba(46,204,113,0.12), var(--bg) 60%);
}
.cal-day.status-over {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, rgba(255,165,0,0.12), var(--bg) 60%);
}
.cal-day.today {
  border-color: var(--accent);
  border-left-color: var(--accent);
}

.year-month { border-left: 3px solid transparent; }
.year-month.status-under {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(248,81,73,0.12), var(--bg) 60%);
}
.year-month.status-on {
  border-left-color: #2ecc71;
  background: linear-gradient(90deg, rgba(46,204,113,0.12), var(--bg) 60%);
}
.year-month.status-over {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, rgba(255,165,0,0.12), var(--bg) 60%);
}

.week-day.status-under header { box-shadow: inset 3px 0 0 var(--danger); }
.week-day.status-on    header { box-shadow: inset 3px 0 0 #2ecc71; }
.week-day.status-over  header { box-shadow: inset 3px 0 0 var(--warn); }

/* ---- Yearly summary ---- */
.year-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.year-month {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px;
  height: 200px;
  gap: 8px;
}
.year-month:hover { border-color: var(--accent); }
.year-month.empty { opacity: 0.5; }
.year-month header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
}
.year-month header .month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.year-month .bar-stack {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  margin-top: auto;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  min-height: 2px;
}
.year-month .bar-stack .seg { width: 100%; min-height: 1px; }
.year-month .bar-stack .seg.class-rd { background: var(--rd); }
.year-month .bar-stack .seg.class-commercialisation { background: var(--commercialisation); }
.year-month .bar-stack .seg.class-admin { background: var(--admin); }
.year-month .bar-stack .seg.class-other { background: var(--other); }
.year-month .bar-stack .seg.class-vacation_public { background: var(--vacation_public); }
.year-month .bar-stack .seg.class-vacation_bank { background: var(--vacation_bank); }
.year-month .bar-stack .seg.class-vacation_sick { background: var(--vacation_sick); }
.year-month .bar-stack .seg.class-vacation_other { background: var(--vacation_other); }
.year-month .bar-stack .seg.class-vacation_deferred { background: var(--vacation_deferred); }
.year-month .bar-stack .seg.class-pause { background: var(--pause); }

/* Per-project bar list (monthly + yearly) */
.project-totals { list-style: none; padding: 0; margin: 0; }
.project-totals li {
  display: grid;
  grid-template-columns: 140px 1fr 3fr 80px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.project-totals li:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.project-totals li:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.project-totals .proj-name { font-weight: 500; }
.project-totals .proj-bar {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.project-totals .fill { display: block; height: 100%; border-radius: 4px; }
.project-totals .proj-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Dashboard charts */
.range-form {
  display: flex;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.range-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.range-form input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
}
.range-form button {
  background: var(--accent);
  color: white;
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.chart-card h2 { margin-top: 0; font-size: 14px; color: var(--muted); }

/* Projects admin */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.admin-form input,
.admin-form select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
.admin-form button {
  align-self: flex-start;
  background: var(--accent);
  color: white;
  border: 0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.project-list, .group-list { list-style: none; padding: 0; margin: 0; }
.project-list li, .group-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.project-list li.archived { opacity: 0.55; }
.project-list .proj-name { flex: 1; }

.hint-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.groups-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.group-card.vacation { background: var(--surface-2); }
.group-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.group-class {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.group-projects {
  list-style: none;
  padding: 0;
  margin: 0;
}
.group-projects li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent 30%);
}
.proj-swatch.lg {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
}
.proj-class {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 999px;
}
.proj-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.proj-row-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.proj-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.group-projects li:last-child { border-bottom: 0; }
.group-projects li.archived { opacity: 0.55; }
.group-projects .proj-name { flex: 1; }
.group-projects .empty-li {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.inline-add {
  display: flex;
  gap: 6px;
}
.inline-add input[type="text"] {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13px;
}
.inline-add button {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.add-group-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 24px;
}
.add-group-section h2 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--surface-2);
  color: var(--muted);
}
form.inline { margin: 0; }
form.inline button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
form.inline button:hover { color: var(--text); }

/* ------------------------------------------------------------
 * Projects page — edit popover + archived section
 * ------------------------------------------------------------ */
/* Anchor the edit popover to its row, and let the open card escape the
 * card's stacking order so it sits above neighbouring group cards. */
.group-projects li { position: relative; }
.group-card { position: relative; }
.group-card:has(.proj-edit[open]) { z-index: 10; }

.group-projects .proj-name { flex: none; font-weight: 500; }
.proj-text > .proj-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-edit > summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  white-space: nowrap;
  user-select: none;
}
.proj-edit > summary::-webkit-details-marker { display: none; }
.proj-edit > summary::marker { content: ""; }
.proj-edit > summary:hover { color: var(--text); border-color: var(--muted); }
.proj-edit[open] > summary { color: var(--text); border-color: var(--accent); }

.proj-edit-body {
  position: absolute;
  top: calc(100% - 4px);
  right: 8px;
  z-index: 30;
  width: 280px;
  max-width: calc(100vw - 48px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.epf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.epf-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.epf-grid label.epf-full { grid-column: 1 / -1; }
.epf-grid input[type="text"],
.epf-grid select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
}
.epf-grid input[type="color"] {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.epf-actions { margin-top: 12px; }
.epf-actions button {
  width: 100%;
  background: var(--accent);
  color: #0f1512;
  border: 0;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.epf-actions button:hover { background: var(--accent-soft); }
.epf-archive {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.epf-archive button {
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
}
.epf-archive button:hover { color: var(--text); border-color: var(--muted); }

.archived-section { margin: 24px 0; }
.archived-section > details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
  user-select: none;
}
.archived-section > details > summary:hover { color: var(--text); }
.archived-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.archived-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  opacity: 0.7;
}
.archived-list li:last-child { border-bottom: 0; }
.archived-list .proj-text { flex: 1; }

/* ============================================================
 * Auth — login page + topbar logout button
 * ============================================================ */
.login-card {
  max-width: 440px;
  margin: 60px auto;
  padding: 40px 32px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 1px 0 rgba(139,195,74,0.06);
}
.login-card h1 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--text);
}
.login-card .login-blurb {
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.login-card .login-foot {
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 13px;
}
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: white;
  color: #1f1f1f;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid #d8d8d8;
  transition: box-shadow 0.15s;
}
.google-btn:hover {
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139,195,74,0.25);
  color: #1f1f1f;
}
.google-btn .g-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4 0% 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%);
  color: white;
  font-weight: 700;
  font-size: 14px;
}

.profile-signout { margin-top: 24px; }
.signout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
}
.signout-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
 * Calendar import — side card on day view + modal-style page
 * ============================================================ */
.calendar-import-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.calendar-import-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text);
}
.calendar-import-card .hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.calendar-import-card .btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}
.calendar-import-card .btn.primary {
  background: var(--accent);
  color: #0f1512;
}
.calendar-import-card .btn.primary:hover { background: #9bd45a; text-decoration: none; }
.calendar-import-card .btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.calendar-import-card .btn.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Modal-style import page. Renders as a centred card on top of a
 * dark backdrop so it feels overlaid even though it's a real URL. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: block;
}
.import-modal {
  position: relative;
  z-index: 20;
  max-width: 720px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.import-head h1 {
  margin: 0;
  font-size: 20px;
  color: var(--text);
}
.import-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
}
.import-close:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.import-sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.import-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--muted);
}
/* Calendar import modal — every selector lives under `.import-modal`
 * so the modal's own `.event-list`, `.event-row`, `.event-when`, and
 * friends don't collide with the home page's "coming up" list, which
 * uses the same generic class names. */
.import-modal .event-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 4px;
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}
.import-modal .event-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.import-modal .event-row.is-disabled { opacity: 0.7; }
.import-modal .event-row.is-conflict { opacity: 0.55; }
.import-modal .event-row.is-removed { opacity: 0.45; }
.import-modal .event-row.is-removed .event-fields { opacity: 0.5; }
.import-modal .event-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.import-modal .event-title-block { flex: 1; min-width: 0; }
.import-modal .event-title-text {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-modal .event-row-meta {
  min-height: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.import-modal .event-remove-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.2;
}
.import-modal .event-remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.import-modal .event-remove-btn.is-restoring { color: var(--accent); border-color: var(--accent); }
.import-modal .event-remove-btn.is-restoring:hover { color: var(--accent); }
.import-modal .event-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.import-modal .event-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.import-modal .event-time-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.import-modal .event-time,
.import-modal .event-desc,
.import-modal .project-picker .project-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
}
.import-modal .event-time {
  font-variant-numeric: tabular-nums;
  padding: 5px 8px;
}
.import-modal .event-time:focus,
.import-modal .event-desc:focus,
.import-modal .project-picker .project-select:focus {
  border-color: var(--accent);
  outline: none;
}
.import-modal .event-time-sep { color: var(--muted); }
.import-modal .event-time-arrow { color: var(--muted); margin: 0 8px; }
.import-modal .event-desc { width: 100%; }
.import-modal .badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.import-modal .badge-imported {
  background: rgba(139,195,74,0.18);
  color: var(--accent);
  border: 1px solid rgba(139,195,74,0.4);
}
.import-modal .badge-conflict {
  background: rgba(227,107,102,0.18);
  color: var(--danger);
  border: 1px solid rgba(227,107,102,0.45);
}
.import-modal .badge-warn {
  background: rgba(255,193,7,0.15);
  color: #e0a800;
  border: 1px solid rgba(255,193,7,0.4);
}
.import-modal .badge-removed {
  background: rgba(140,140,140,0.18);
  color: var(--muted);
  border: 1px solid var(--border);
}
.import-modal .import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.import-modal .import-actions-spacer { flex: 1; }
.import-modal .import-count {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.import-modal .btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.import-modal .btn.primary {
  background: var(--accent);
  color: #0f1512;
  border-color: var(--accent);
}
.import-modal .btn.primary:hover:not(:disabled) { background: #9bd45a; }
.import-modal .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.import-modal .btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.import-modal .btn.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.import-modal .project-picker { gap: 8px; }
.import-modal .project-recent { gap: 6px; }

@media (max-width: 600px) {
  .import-modal .event-time-row { gap: 4px; }
  .import-modal .event-time-arrow { margin: 0 4px; }
}

/* Flat per-employee entries table — used by /employees/{id}/entries.
 * Same visual language as .team-projects-table but a few extra cols. */
.entries-summary {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin: 12px 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.entries-summary strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.entries-summary .emp-email { margin-left: auto; }

.entries-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.entries-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}
.entries-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.entries-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.entries-table th.num,
.entries-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entries-table .date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.entries-table .weekday { color: var(--muted); }
.entries-table .desc {
  color: var(--muted);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entries-table .source {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.entries-table .row-actions a { font-size: 12px; }
.entries-table .classification {
  color: var(--muted);
  font-size: 12px;
}
.entries-table .proj-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
}

.empty-block {
  color: var(--muted);
  font-style: italic;
  padding: 24px 8px;
  text-align: center;
}

.emp-entries-link {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}
.emp-entries-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* Inline button styled as a link — used for "edit" cells and modal
 * triggers in the period-header. */
.link-button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.entries-table .link-button { color: var(--accent); font-size: 12px; }

/* Modal used by the entries view for editing a single row + the CSV
 * import dialog. Centered over a dimmed backdrop. */
.entry-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.entry-modal[hidden] { display: none; }
.entry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.entry-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px 16px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.entry-modal-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.entry-modal-head h2 { margin: 0; font-size: 18px; flex: 1; }
.entry-modal-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.entry-modal-close:hover { color: var(--text); }
.entry-edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entry-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.entry-edit-form input[type="text"],
.entry-edit-form input[type="date"],
.entry-edit-form input[type="time"],
.entry-edit-form select,
.entry-edit-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
}
.entry-edit-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.entry-edit-form code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.entry-edit-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.entry-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.entry-modal-spacer { flex: 1; }
.entry-modal .btn {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.entry-modal .btn.primary {
  background: var(--accent);
  color: #0f1512;
  border-color: var(--accent);
}
.entry-modal .btn.primary:hover { background: #9bd45a; }
.entry-modal .btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.entry-modal .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.entry-modal .btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
.entry-modal .btn.danger:hover { border-color: var(--danger); }
.entry-modal .hidden { display: none; }

/* ===== Impersonation banner ===========================================
 * Sticks to the top while an admin is "view-as" another employee. Loud
 * amber so it's impossible to forget you're not seeing your own data.
 */
.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: linear-gradient(180deg, #5a3a07, #3a2705);
  border-bottom: 2px solid var(--warn);
  color: #ffe7b3;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.impersonation-banner strong { color: var(--warn); }
.impersonation-icon {
  font-size: 16px;
  flex: 0 0 auto;
}
.impersonation-text { flex: 1; }
.impersonation-exit {
  background: var(--warn);
  color: black;
  border: 0;
  border-radius: 4px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.impersonation-exit:hover { background: #f6b961; }
/* Subtle outline on the page itself so you don't lose the cue once
 * you scroll past the banner. */
body.impersonating {
  outline: 3px solid rgba(224, 164, 76, 0.55);
  outline-offset: -3px;
}

/* "View as" button on the employees + vacations rows. */
.view-as-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.view-as-btn:hover {
  border-color: var(--warn);
  color: var(--warn);
}
.view-as-btn.active {
  background: var(--warn);
  border-color: var(--warn);
  color: black;
  font-weight: 600;
  cursor: default;
}

/* ===== Busted banks ====================================================
 * Used on the profile and vacations pages. A "busted" bank is one
 * where the balance has gone negative (vacation/sick over quota,
 * deferred over what's been earned). Has to be visually unmissable —
 * red border, red wash, and a "BUSTED" pill on the row.
 */
.busted-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 16px 0;
  background: rgba(227, 107, 102, 0.12);
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.busted-summary-icon {
  font-size: 18px;
  color: var(--danger);
}
.busted-pill {
  display: inline-block;
  background: var(--danger);
  color: black;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
/* Profile page: the whole banks card flips to a danger border when any
 * bank is busted, and individual bank rows get their own red wash. */
.banks-card.busted {
  border-color: var(--danger);
  border-left-width: 4px;
  box-shadow: 0 0 0 1px rgba(227, 107, 102, 0.25);
}
.banks-list li.busted {
  background: rgba(227, 107, 102, 0.08);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.bank-busted-value {
  color: var(--danger);
  font-weight: 700;
}

/* ===== Vacations page ================================================ */
.vacations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
/* Placeholder shown for years other than the current one, which have
 * no banks: past = unavailable, future = to be determined. */
.vacations-empty {
  margin-top: 16px;
  padding: 48px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
}
.vacations-empty-title {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--text);
}
.vacations-empty-sub { margin: 0; font-size: 14px; }
.vacation-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vacation-card.busted {
  border-color: var(--danger);
  border-left-width: 4px;
  box-shadow: 0 0 0 1px rgba(227, 107, 102, 0.25);
}
.vacation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vacation-card-head h3 {
  margin: 0;
  font-size: 16px;
}
.vacation-banks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bank-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px;
  border-radius: 4px;
}
.bank-row.busted {
  background: rgba(227, 107, 102, 0.10);
  border: 1px solid rgba(227, 107, 102, 0.45);
}
.bank-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.bank-row .bank-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
}
.bank-row .bank-label .hint {
  font-size: 11px;
  opacity: 0.7;
  margin: 0;
}
.bank-row .bank-stat {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bank-row .bank-stat strong { font-weight: 700; color: var(--text); }
.bank-row .bank-stat small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.bank-bar {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.bank-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0%;
  transition: width 200ms ease;
}
.bank-bar-fill.busted { background: var(--danger); }
/* "Planned" segment: vacation entries dated after today. Sits to the
 * right of the solid taken-fill via `left: <taken_pct>%`, but the
 * server-side computation already caps planned_pct so we never paint
 * past 100%. Lighter/striped so it reads as "committed but not
 * spent". */
.bank-bar-planned {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    var(--accent),
    var(--accent) 4px,
    rgba(255, 255, 255, 0.15) 4px,
    rgba(255, 255, 255, 0.15) 8px
  );
  opacity: 0.7;
  transition: width 200ms ease, left 200ms ease;
}
.bank-bar-overflow {
  position: absolute;
  inset: 0 0 0 0;
  background: repeating-linear-gradient(
    45deg,
    var(--danger),
    var(--danger) 4px,
    rgba(0, 0, 0, 0.4) 4px,
    rgba(0, 0, 0, 0.4) 8px
  );
  opacity: 0.85;
}
.vacation-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.vacation-link {
  color: var(--muted);
  font-size: 12px;
}
.vacation-link:hover { color: var(--accent); }

/* Admin payroll table — one row per employee, columns sum to the
 * month's open hours. Mismatching rows turn red so payroll can spot
 * gaps at a glance. */
.payroll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.payroll-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.payroll-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.payroll-table th.num,
.payroll-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payroll-table td.total { font-weight: 600; }
.payroll-table tr.mismatch td {
  background: rgba(227, 107, 102, 0.08);
  color: var(--danger);
}
.payroll-table tr.mismatch td.delta { font-weight: 600; }
.payroll-table td.row-actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.payroll-exclude {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
}
.payroll-exclude:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Drag-handle column for admin reorder of the employees roster. The
 * handle itself is the only grab point; the rest of the row stays
 * selectable so cells can be copied. `.dragging` dims the row while
 * it's in flight. */
.employees-table th.drag-col,
.employees-table td.drag-handle {
  width: 18px;
  padding-left: 4px;
  padding-right: 4px;
}
.employees-table td.drag-handle {
  color: var(--muted);
  cursor: grab;
  user-select: none;
  text-align: center;
  letter-spacing: -2px;
}
.employees-table td.drag-handle:active {
  cursor: grabbing;
}
.employees-table tr.dragging {
  opacity: 0.45;
}

.payroll-excluded {
  margin-top: 24px;
}
.payroll-excluded h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.payroll-excluded ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.payroll-excluded li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}

/* Admin accounting view: per-employee pay roll-up + a journal-style
 * debit/credit table at the bottom. Same visual rhythm as the payroll
 * table, with a slightly heavier total row. */
.section-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 24px 0 8px;
}
.accounting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
}
.accounting-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.accounting-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.accounting-table th.num,
.accounting-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.accounting-table tr.wage-unset td { color: var(--muted); }
.accounting-table tr.wage-unset td .muted { color: var(--muted); }
.accounting-table.journal tr.account-credit td:first-child {
  padding-left: 28px;
  color: var(--muted);
}
.accounting-table.journal tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--border);
  border-bottom: none;
}
.accounting-table.journal tfoot tr.mismatch td {
  color: var(--danger);
}

/* /admin/employees: a wide tabular layout. Existing employees
 * rendered as a full-width table; "add employee" sits below as a
 * narrow card so the list breathes. */
.employees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.employees-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.employees-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.employees-table th.num,
.employees-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.employees-table .row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.employees-table .muted { color: var(--muted); }
.settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.settings-card-head h2 { margin: 0; }
.add-employee-form { display: flex; flex-direction: column; gap: 8px; }

.comp-set-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.comp-set-form label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.comp-set-form input[type="number"] {
  width: 80px;
  font-variant-numeric: tabular-nums;
}
.comp-set-form input[type="month"] {
  font-variant-numeric: tabular-nums;
}
.comp-set-form input[type="text"],
.comp-set-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
}
.comp-history-table {
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12px;
}
.comp-history-table th,
.comp-history-table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
}
.comp-history-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-align: left;
}
.comp-history-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.comp-history-table .delete {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.comp-history-table .delete:hover { color: var(--danger); }

/* Per-employee edit modal. Replaces the inline rename input and the
 * collapsible compensation panel — admins click "Edit" on a row to
 * open a focused dialog with both forms together. Lives at the bottom
 * of the page, hidden until JS reveals it. */
.emp-edit-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.emp-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.emp-name-cell { font-weight: 500; }

.emp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 30;
}
.emp-edit-modal {
  position: fixed;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
body.emp-modal-open { overflow: hidden; }
.emp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.emp-modal-head h2 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}
.emp-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.emp-modal-close:hover { color: var(--text); border-color: var(--accent); }
.emp-modal-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.emp-modal-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.emp-modal-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.emp-modal-body { display: contents; }
.emp-modal-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.emp-modal-danger { justify-content: flex-start; }
.emp-email-display {
  margin: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.danger-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.danger-btn:hover {
  background: var(--danger);
  color: #fff;
}
.emp-modal-form input[type="text"] {
  flex: 1;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
}

/* Bulk-fill toolbar on /week and /month. Off by default; the form
 * panel only appears once the user enters autofill mode. */
.autofill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.autofill-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.autofill-toggle {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.autofill-toggle:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.autofill.active .autofill-toggle {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.autofill-hint { color: var(--muted); font-size: 12px; }
.autofill-toggle .autofill-toggle-off,
.autofill-hint .autofill-hint-on { display: none; }
.autofill.active .autofill-toggle .autofill-toggle-on,
.autofill.active .autofill-hint .autofill-hint-off { display: none; }
.autofill.active .autofill-toggle .autofill-toggle-off,
.autofill.active .autofill-hint .autofill-hint-on { display: inline; }
.autofill-form {
  display: none;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.autofill.active .autofill-form { display: flex; }
.autofill-field {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 4px;
}
.autofill-field select,
.autofill-field input[type="text"] {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  min-width: 200px;
}
.autofill-field select option,
.autofill-field select optgroup {
  background: var(--bg);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.autofill-desc { flex: 1 1 240px; }
.autofill-submit {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
  transition: filter 120ms ease;
}
.autofill-submit:hover:not(:disabled) { filter: brightness(1.1); }
.autofill-submit:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Day-cell selection state. Visible on both .week-day and .cal-day —
 * we attach .day-cell on both. While in autofill mode, the cells'
 * default click-target becomes the selection toggle (the JS calls
 * preventDefault on the anchor click). */
body.autofill-mode .day-cell { cursor: pointer; }
body.autofill-mode .day-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(124, 179, 66, 0.25);
}
body.autofill-mode .day-cell.selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
}
.day-cell { position: relative; }

/* Mood picker on /home. Nine emoji buttons in a row, ordered worst →
 * best so the row reads as a happiness gradient. The currently-set
 * mood gets a coloured ring; clicking another emoji re-submits to
 * /mood and reloads. */
.mood-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 16px 0;
}
.mood-card header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.mood-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.mood-current { font-size: 22px; }
.mood-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mood-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.mood-row-label {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.mood-row-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
  flex: 1 1 auto;
}
/* Bad band: warm red wash so the row reads as one "category pick"
 * instead of a gradient.*/
.mood-emoji.mood-band-bad { background: rgba(227, 107, 102, 0.08); }
.mood-emoji.mood-band-bad.active {
  background: var(--surface);
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(227, 107, 102, 0.25);
}
/* Good band: the green wash gradient still reads left-to-right as
 * intensity. */
.mood-emoji.mood-band-neutral { background: var(--surface-2); }
.mood-emoji.mood-good-1 { background: rgba(124, 179, 66, 0.05); }
.mood-emoji.mood-good-2 { background: rgba(124, 179, 66, 0.08); }
.mood-emoji.mood-good-3 { background: rgba(124, 179, 66, 0.12); }
.mood-emoji.mood-good-4 { background: rgba(124, 179, 66, 0.18); }
.mood-emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
  transition: background 120ms ease, border-color 120ms ease,
              transform 80ms ease;
}
.mood-emoji:hover {
  background: var(--surface);
  border-color: var(--border);
  transform: translateY(-1px);
}
.mood-emoji.active {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(124, 179, 66, 0.25);
}
.mood-emoji-glyph { font-size: 24px; line-height: 1; }
.mood-emoji-label {
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.mood-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Happiness page: chart + summary stats + emoji legend. */
.happiness-summary {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}
.happiness-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.happiness-stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.happiness-stat .value {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
}
.happiness-stat-emoji { font-size: 20px; }
.happiness-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.happiness-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.happiness-legend-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.legend-band-label {
  flex: 0 0 100%;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.happiness-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}
.happiness-legend .legend-glyph { font-size: 16px; }
.happiness-legend .legend-score {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
}
.happiness-legend .legend-label { color: var(--text); }

/* Mood incognito row sits below the main 9-emoji grid. Same button
 * shape, lone column, lighter weight. */
.mood-incognito-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.mood-incognito {
  flex: 0 0 auto;
  width: max-content;
  padding-left: 14px;
  padding-right: 14px;
  background: transparent;
  border-style: dashed;
  border-color: var(--border);
}
.mood-incognito.active {
  background: var(--surface);
  border-style: solid;
  border-color: var(--accent);
}

/* Subtle mood badge in the day header. Plain text, no chrome — feels
 * like a glyph next to the date label rather than a notification. */
.day-mood {
  font-size: 18px;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.85;
}

/* Day-view event banner: a stack of pill-cards above the totals. */
.day-events {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.day-event-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
}
.day-event-pill[data-kind="birthday"] { border-color: #f472b6; }
.day-event-pill[data-kind="holiday"] { border-color: #34d399; }
.day-event-icon { font-size: 16px; }
.day-event-name { font-weight: 600; }
.day-event-desc { color: var(--muted); font-size: 12px; }

/* Week view: compact event chips per day (icon + name, no description). */
.week-day-events {
  /* Overlay at the top of .day-bar.mini so events don't push slots
     down — keeps every day-bar the same height as the hour axis. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--border);
}
.week-day-event {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.week-day-event-icon { flex: none; font-size: 12px; }
.week-day-event-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Month view: emoji-only stack in the day header. */
.cal-day-events {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
}
.cal-day-event { font-size: 12px; line-height: 1; }

/* Home page upcoming-events card. */
.home-events {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 16px 0;
}
.home-events header h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.event-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.event-item.today {
  background: rgba(124, 179, 66, 0.08);
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
.event-icon { font-size: 16px; text-align: center; }
.event-link { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.event-link:hover .event-name { color: var(--accent); }
.event-name { font-weight: 600; }
.event-desc { color: var(--muted); font-size: 12px; }
.event-when { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Admin /admin/events table. */
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.events-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.events-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.events-table tr.past td { color: var(--muted); }
.events-table tr.today td {
  background: rgba(124, 179, 66, 0.06);
  color: var(--text);
}
.events-table .date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.events-table .desc { color: var(--muted); }
.events-table .delete {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}
.events-table .delete:hover { color: var(--danger); }
.event-add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.event-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.event-add-form input,
.event-add-form select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.event-add-form .event-add-desc { flex: 1 1 200px; }
.event-add-form button {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  cursor: pointer;
}
.event-icon-input {
  width: 4ch;
  text-align: center;
  font-size: 16px;
}
.events-edit-table input,
.events-edit-table select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.events-edit-table .event-icon-input { width: 4ch; }
.events-edit-table td.date input { font-variant-numeric: tabular-nums; }
.events-edit-table .event-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.events-edit-table .save {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}
.events-edit-table .save:hover { color: var(--accent-hot, var(--accent)); }

/* Team mood card: full-width line chart matching pie-card spacing. */
.team-mood-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  grid-column: 1 / -1;
}
.team-mood-card .hint {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}

/* ============================================================
 * Hamburger / responsive nav.
 *
 * Desktop default: nav is laid out inline (legacy behaviour),
 * the .nav-toggle button is hidden, the .nav-profile-link
 * (mobile-only profile shortcut inside the drawer) is hidden.
 * Mobile (<= 800px): nav becomes a slide-down drawer triggered
 * by .nav-toggle. The desktop .who chip is hidden — the drawer
 * carries the profile link instead so the topbar collapses to
 * brand + hamburger.
 * ============================================================ */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.nav-profile-link { display: none; }
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.primary-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
  flex: 1;
  align-items: center;
}
.primary-nav a { color: var(--text); font-size: 14px; white-space: nowrap; }
.primary-nav a:hover { color: var(--accent); text-decoration: none; }
.primary-nav .nav-sep { color: var(--border); margin: 0 4px; }
.primary-nav .nav-section-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Dropdown group (Admin menu on desktop). On mobile the @media block
 * below flattens the menu so all links render inline in the drawer. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group-trigger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-group-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.nav-group-trigger:hover,
.nav-group.is-open .nav-group-trigger {
  border-color: var(--border);
  color: var(--accent);
}
.nav-group.is-open .nav-group-trigger::after { transform: rotate(180deg); }
.nav-group-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  padding: 10px 12px;
  z-index: 80;
}
.nav-group.is-open .nav-group-menu { display: block; }
.nav-group-section { display: flex; flex-direction: column; }
.nav-group-section + .nav-group-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.nav-group-section .nav-section-label { padding: 0 4px 4px; }
.nav-group-section a {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text);
}
.nav-group-section a:hover {
  background: var(--bg);
  color: var(--accent);
  text-decoration: none;
}
/* Keep the legacy .topbar nav rules from cascading into the new
 * .primary-nav (the original selectors above still apply when an
 * older template uses bare <nav>, but our drawer needs identical
 * styles when rendered as a flex row). */

@media (max-width: 800px) {
  .topbar {
    gap: 12px;
    padding: 10px 14px;
    position: relative;
  }
  .topbar .brand { font-size: 17px; flex: 1; }
  .topbar .who { display: none; }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.45);
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 64px 16px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav a {
    padding: 12px 12px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .primary-nav a:hover { background: var(--bg); }
  .primary-nav .nav-section-label {
    margin-top: 14px;
    padding: 0 12px;
    font-size: 10px;
  }
  .primary-nav .nav-section-label:first-child { margin-top: 0; }
  .primary-nav .nav-sep { display: none; }
  /* Flatten the Admin dropdown into the drawer: hide the trigger,
   * show the menu inline, render each section like the inline ones. */
  .nav-group { display: block; width: 100%; }
  .nav-group-trigger { display: none; }
  .nav-group-menu {
    display: block;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .nav-group-section + .nav-group-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .nav-group-section .nav-section-label {
    margin-top: 14px;
    padding: 0 12px;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .nav-group-section a {
    padding: 12px 12px;
    border-radius: 6px;
    font-size: 16px;
  }
  .nav-group-section a:hover { background: var(--bg); }
  .nav-profile-link {
    display: block;
    margin-top: 18px;
    padding: 14px 12px !important;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--accent) !important;
    font-weight: 600;
  }
  body.nav-open { overflow: hidden; }
}

/* ============================================================
 * Generic responsive layout adjustments.
 * ============================================================ */
@media (max-width: 800px) {
  main {
    padding: 14px;
  }
  /* Day/week/month/year period header collapses gracefully. */
  .period-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .period-nav {
    grid-template-columns: 36px 1fr 36px;
    gap: 8px;
  }
  .period-nav h1,
  .period-header h1 { font-size: 18px; }
  .period-nav .nav-arrow {
    font-size: 22px;
    padding: 4px 0;
  }
  .period-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .period-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .period-tabs a { white-space: nowrap; flex: none; }

  /* Totals strip wraps so the values stay legible. */
  .totals {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }
  .total-big .value { font-size: 22px; }
  .class-totals {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 14px;
  }
}

/* ============================================================
 * Daily view — chart + side panel stack on mobile.
 * The chart loses its fixed 720px height (which crushes slots)
 * and gets a smaller min-height so it's still scrollable but
 * fits viewport. Resize handles grow into thumb-sized targets.
 * ============================================================ */
@media (max-width: 800px) {
  .day-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .day-bar-wrap { height: auto; }
  .day-chart { min-height: 480px; height: 70vh; }
  /* Touch-action is set to none on .day-bar so panning the chart
   * vertically doesn't fire native scroll. The outer .day-bar-scroll
   * handles vertical scroll via overflow-y. */
  .day-bar-scroll { -webkit-overflow-scrolling: touch; }

  .add-entry .row { gap: 8px; }
  .add-entry .row.mode-row { gap: 12px; }

  /* Mobile day view trims to essentials: the calendar-import card
   * (top of the side panel) plus the entry form. The Tools card
   * (split/duplicate/delete/zoom) and the per-day start-time
   * override are desktop-only — selection-driven editing on mobile
   * happens by tapping a slot, which navigates straight to the
   * entry form. */
  .day-side .day-tools-card,
  .day-side .day-window-card,
  .day-side .day-setup-card { display: none; }

  /* Form controls want larger tap targets and full width. */
  .entry-form-card form { gap: 14px; }
  .entry-form-card input[type="text"],
  .entry-form-card input[type="number"],
  .entry-form-card select,
  .entry-form-card .hm-row select {
    min-height: 38px;
    font-size: 15px;
  }
  .hm-row {
    grid-template-columns: 64px auto auto auto;
  }
  .entry-form-card button[type="submit"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
  }
  .entry-form-card .form-actions { flex-wrap: wrap; }

  .day-window-card .window-form { flex-direction: column; align-items: stretch; }
  .day-window-card .window-form button { width: 100%; padding: 10px 12px; }

  .calendar-import-card .btn { display: block; text-align: center; }
}

/* ============================================================
 * Mobile day view: calendar-first, full-screen layout.
 * The page itself doesn't scroll. The header (topbar) and a
 * compact navbar (period header + totals) sit at the top at their
 * natural height; the chart absorbs all remaining viewport height
 * and scrolls only inside its own .day-bar-scroll. The empty
 * "Add entry" placeholder is dropped — tapping a slot still opens
 * the edit-sheet (mode-edit / mode-edit-draft), handled below.
 * ============================================================ */
@media (max-width: 800px) {
  body.day-view {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.day-view main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* The base `main` is `max-width:960px; margin:0 auto`; on a flex
     * column body those auto side-margins stop it stretching, so it
     * shrinks to content width and wastes horizontal space. Force it
     * full-width and trim the side padding so the calendar is as wide
     * as possible. */
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px 8px;
  }
  /* The summary block (navbar + totals) keeps its natural — but
   * deliberately small — height; only the chart flexes. */
  body.day-view #day-summary { flex: none; }

  /* Keep the top matter to a thin band so the calendar dominates. */
  body.day-view .period-header { gap: 6px; margin-bottom: 0; }
  body.day-view .period-nav { gap: 6px; }
  body.day-view .period-nav h1,
  body.day-view .period-header h1 { font-size: 16px; }
  body.day-view .period-nav .nav-arrow { font-size: 20px; padding: 0; }
  body.day-view .period-relative { display: none; }
  body.day-view .period-links { gap: 6px 12px; font-size: 13px; }
  body.day-view .totals {
    padding: 8px 10px;
    gap: 6px 12px;
    margin-top: 8px;
  }
  body.day-view .total-big .value { font-size: 18px; }
  body.day-view .total-big .label,
  body.day-view .total-big .sub { font-size: 11px; }

  /* Single flexing column so the chart can take every spare pixel.
   * align-items must be stretch (the base .day-grid sets `start` for
   * the desktop grid): the chart's only in-flow content is an
   * absolutely-positioned scroll box, so without stretch it collapses
   * to zero width on the cross axis and the calendar vanishes. */
  body.day-view .day-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    margin-top: 10px;
  }
  body.day-view .day-chart {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
  }
  /* Drop the "Add entry" placeholder: there's no add-by-form path
   * on mobile and it pushed the chart off-screen. The edit sheet
   * (mode-edit / mode-edit-draft) is a different mode, untouched. */
  body.day-view .entry-form-card.mode-empty { display: none; }

  /* Compact mobile autofill (desktop's lives in the hidden Tools card).
   * A thin full-width button in the top matter — flex:none so it keeps
   * its natural height and the chart still takes the rest. */
  body.day-view .day-autofill-mobile { display: block; flex: none; margin-top: 8px; }
  body.day-view .day-autofill-mobile button {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid rgba(139, 195, 74, 0.4);
    border-radius: 6px;
    cursor: pointer;
  }
  body.day-view .day-autofill-mobile button:active { background: var(--surface-2); }
}

/* Desktop / wide: the inline mobile autofill never shows (the Tools
 * card carries it there). */
.day-autofill-mobile { display: none; }

/* Thumb-friendly resize handles on touch devices regardless of
 * viewport width — a 6px target is unhittable with a fingertip. */
@media (pointer: coarse) {
  .resize-handle { height: 18px; }
  .resize-handle::before {
    /* Visible grab indicator in the centre of the now-larger handle. */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
  }
  .day-bar .slot { font-size: 13px; }
  .day-bar .slot .slot-when { font-size: 11px; }
}

/* Mobile touch model: the chart itself allows vertical pan so users
 * can scroll the page through it (the earlier `touch-action: none`
 * trapped every touch as a create gesture, which made phones
 * effectively unscrollable). Move/resize gestures still need touch to
 * stay with JS, so individual slot elements and the day-start drag
 * line opt back out via `touch-action: none`. Drag-to-create is
 * therefore desktop-only — mobile users create via the side form. */
.day-bar { touch-action: pan-y; }
.day-bar-scroll { touch-action: pan-y; }
.day-bar .slot.timed,
.day-bar .slot.draft,
.day-bar .day-start-line { touch-action: none; }

/* Coarse-pointer model: slot bodies stay tap-to-edit and let vertical
 * drags pan the chart (touch-action: pan-y). The two drag affordances
 * that ARE offered on touch — resizing an entry by an edge handle, and
 * moving the day-start line — engage via a long-press (daily.html
 * blocks 4 and 4c): hold to arm, then drag. Those targets must own the
 * gesture outright (touch-action: none) so the post-hold vertical drag
 * resizes / repositions instead of scrolling. They're thin bands, so
 * losing scroll-through on them is unnoticeable — scroll from the slot
 * body or the chart background instead. */
@media (pointer: coarse) {
  .day-bar .slot.timed,
  .day-bar .slot.draft { touch-action: pan-y; }
  .day-bar .day-start-line,
  .day-bar .resize-handle { touch-action: none; }
}

/* ---- Mobile edit-sheet ----
 * When ?edit=N / ?edit_draft=N is in the URL on a narrow viewport, the
 * entry-form-card lifts out of normal flow and becomes a bottom sheet
 * over the chart so the user can keep the chart context visible
 * above. body.editing-entry is added client-side by an IIFE in
 * daily.html. The .edit-sheet-backdrop element is appended by the
 * same IIFE; click dismisses by navigating to /day/{date}. */
.edit-sheet-backdrop { display: none; }

@media (max-width: 800px) {
  body.editing-entry { overflow: hidden; }
  body.editing-entry .edit-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 55;
  }
  body.editing-entry .day-side .entry-form-card.mode-edit,
  body.editing-entry .day-side .entry-form-card.mode-edit-draft {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 60;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
    animation: edit-sheet-up 0.22s ease-out;
    /* The mode-edit gradients are only 6% opaque at the top, which
     * lets the chart bleed through when the card is floated over it.
     * Force an opaque surface underneath so the sheet stays solid. */
    background-color: var(--surface);
  }
  @keyframes edit-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ============================================================
 * Week / month / year views on mobile.
 * Week grid loses its 8-column layout; days stack vertically
 * with the hour axis hidden (the fixed-time visual is only
 * useful when columns sit side-by-side). Month/year grids
 * collapse rows and shrink cells.
 * ============================================================ */
@media (max-width: 800px) {
  .week-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 8px;
    gap: 8px;
  }
  .week-axis { display: none; }
  .week-day {
    flex-direction: row;
    align-items: stretch;
    height: 80px;
    overflow: hidden;
  }
  .week-day header {
    flex: 0 0 100px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 6px 8px;
  }
  .week-day header .day-num {
    grid-row: 1;
    grid-column: 1;
    text-align: left;
    font-size: 16px;
  }
  .week-day header .day-total { grid-row: 2; grid-column: 1; }
  .day-bar.mini { flex: 1; min-height: 60px; }
  .week-day-events {
    /* Hide the overlay header on mobile — there's no room to read it
     * over a horizontal mini-bar. */
    position: static;
    background: transparent;
    border-bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 2px 4px;
  }

  .month-cal { padding: 6px; }
  .cal-head, .cal-week { gap: 3px; }
  .cal-day {
    height: 60px;
    padding: 4px;
    font-size: 11px;
  }
  .cal-day header .num { font-size: 12px; }
  .cal-day-events { font-size: 10px; }

  .year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }
  .year-month {
    height: 150px;
    padding: 10px;
  }

  .class-breakdown { padding: 10px 12px; }
  .class-stack { height: 8px; }

  .vacation-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .vacation-banner .vac { justify-content: space-between; }
}

/* ============================================================
 * Tables + list/grid views — admin pages.
 *
 * Tables get an outer scroll container (.table-wrap if a
 * template wraps them; otherwise we let the table itself scroll
 * via overflow-x on its parent). Cards/grids collapse to a
 * single column.
 * ============================================================ */
@media (max-width: 800px) {
  /* Wide tables stay wide but become horizontally scrollable
   * within their parent container so they don't blow out the
   * viewport. We target the common case where the table is the
   * direct child of an <article> wrapper. */
  .settings-card,
  .home-expenses,
  .leaderboard-card {
    overflow-x: auto;
  }
  .employees-table,
  .payroll-table,
  .accounting-table,
  .entries-table,
  .events-table,
  .team-projects-table {
    min-width: 560px;
  }
  /* A scroll wrapper directly on tables that aren't already inside
   * a card — kept conservative so single-column small tables don't
   * gain a needless horizontal scrollbar. */
  main > table,
  main > .table-wrap { overflow-x: auto; display: block; }

  .admin-grid,
  .charts-grid,
  .team-aggregate-grid,
  .vacations-grid,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .groups-section { grid-template-columns: 1fr; }

  .add-employee-card { max-width: 100%; }
  .add-employee-form input,
  .add-employee-form button { width: 100%; }
  .vac-bank-form { flex-wrap: wrap; }
  .vac-bank-form input[type="number"] { width: 100%; }

  .employees-list li {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .employees-table .row-actions { gap: 6px; }
  .comp-set-form { flex-direction: column; align-items: stretch; }
  .comp-set-form label { width: 100%; }
  .comp-set-form input[type="number"] { width: 100%; }

  .event-add-form { flex-direction: column; align-items: stretch; }
  .event-add-form label { width: 100%; }
  .event-add-form input,
  .event-add-form select { width: 100%; }
  .event-add-form button { width: 100%; padding: 10px 12px; }

  .range-form { flex-wrap: wrap; }
  .range-form button { width: 100%; }

  .autofill-bar { gap: 8px; }
  .autofill-form { flex-direction: column; align-items: stretch; }
  .autofill-field { width: 100%; }
  .autofill-field select,
  .autofill-field input[type="text"] { min-width: 0; width: 100%; }
  .autofill-submit { width: 100%; padding: 10px 12px; }

  .team-toolbar { gap: 8px; }
  .team-emp-toggles { gap: 6px; }
  .emp-chip { padding: 5px 10px; font-size: 12px; }

  .pie-card-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .pie-toggle { align-self: flex-start; }

  .entries-summary {
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .entries-summary .emp-email { margin-left: 0; }

  /* Project totals: 4-column grid is too dense for narrow screens.
   * Stack name + value on top, bar below. */
  .project-totals li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "group value"
      "bar bar";
    gap: 4px 12px;
  }
  .project-totals .proj-name { grid-area: name; }
  .project-totals .proj-group { grid-area: group; }
  .project-totals .proj-bar { grid-area: bar; }
  .project-totals .proj-value { grid-area: value; align-self: center; }
}

/* ============================================================
 * Home, profile, projects, happiness, login.
 * ============================================================ */
@media (max-width: 800px) {
  .hero { padding: 22px 18px 18px; }
  .hero-title { font-size: 22px; }
  .hero-cta .btn-cta { flex: 1 1 calc(50% - 6px); text-align: center; }
  .home-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-stats .stat-card { padding: 12px 14px; }
  .home-stats .stat-value { font-size: 20px; }
  .leaderboard li { grid-template-columns: 28px 1fr auto; gap: 8px; }

  .mood-row { flex-direction: column; gap: 6px; }
  .mood-row-label { flex: 0 0 auto; }
  .mood-row-buttons {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  }
  .mood-emoji { padding: 8px 4px; }
  .mood-emoji-glyph { font-size: 22px; }

  .happiness-summary {
    flex-wrap: wrap;
    gap: 12px;
  }
  .happiness-stat {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .login-card {
    margin: 24px 12px;
    padding: 28px 20px;
  }

  .error-page { margin: 24px auto; padding: 0 14px; }
  .error-card .actions { flex-direction: column; }
  .error-card .btn { text-align: center; }

  .import-modal {
    margin: 12px 8px;
    padding: 16px 14px;
    max-width: none;
  }
  .import-modal .event-row { padding: 12px 0; }
  .import-modal .event-time-row { flex-wrap: wrap; gap: 6px; }
  .import-modal .event-time-arrow { display: none; }
  .import-modal .import-actions { flex-wrap: wrap; gap: 8px; }
  .import-modal .import-actions-spacer { display: none; }
  .import-modal .btn { flex: 1 1 calc(50% - 4px); text-align: center; }

  .entry-modal { padding: 12px; }
  .entry-modal-card {
    width: 100%;
    padding: 14px 14px 12px;
    max-height: 88vh;
  }
  .entry-edit-times { grid-template-columns: 1fr; }

  .impersonation-banner {
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .impersonation-text { flex: 1 1 100%; }
  .impersonation-exit { padding: 6px 14px; min-height: 36px; }

  /* Bigger tap-friendly buttons across forms. */
  button,
  .btn,
  .btn-cta,
  input[type="submit"] {
    min-height: 36px;
  }
}

/* Even narrower (very small phones) — tighten further. */
@media (max-width: 420px) {
  main { padding: 10px; }
  .hero-cta .btn-cta { flex: 1 1 100%; }
  .home-stats { grid-template-columns: 1fr; }
  .year-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Expense receipts — list, totals, detail, review queues.
 * Reuses .settings-card / .period-header for the page shell;
 * the rules below only style the bits unique to this feature.
 * ============================================================ */
.expense-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
@media (max-width: 720px) {
  .expense-totals { grid-template-columns: 1fr; }
}
.expense-total-card h3 {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.expense-total-amount {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.expense-total-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.expense-total-card--highlight {
  border-color: var(--accent-soft);
}
.expense-total-card--highlight .expense-total-amount {
  color: var(--accent);
}

.expense-add-form {
  display: grid;
  grid-template-columns: 1fr 160px 1fr auto;
  gap: 12px;
  align-items: end;
}
.expense-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.expense-add-form input[type="text"],
.expense-add-form input[type="number"],
.expense-add-form input[type="file"] {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 14px;
  min-height: 34px;
  box-sizing: border-box;
}
.expense-add-form button {
  background: var(--accent);
  color: #0a0f0a;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.expense-add-form button:hover { background: var(--accent-soft); color: var(--text); }
@media (max-width: 720px) {
  .expense-add-form { grid-template-columns: 1fr; }
}

.expenses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.expenses-table th,
.expenses-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.expenses-table th {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.expenses-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.expenses-table .date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.expense-row-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}
.expense-row-actions { white-space: nowrap; text-align: right; }
.expense-row-actions .action-link,
.expense-row-actions form.inline { display: inline-block; }
.expense-row-actions .action-link + .action-link,
.expense-row-actions .action-link + form,
.expense-row-actions form + .action-link {
  margin-left: 8px;
}

.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.status-pill--pending  { background: rgba(224, 164, 76, 0.15); color: var(--warn); border-color: var(--warn); }
.status-pill--approved { background: rgba(124, 194, 107, 0.12); color: var(--ok); border-color: var(--ok); }
.status-pill--rejected { background: rgba(227, 107, 102, 0.15); color: var(--danger); border-color: var(--danger); }
.status-pill--paid     { background: rgba(139, 195, 74, 0.18); color: var(--accent); border-color: var(--accent-soft); }

.action-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
}
.action-link:hover { color: var(--text); }

.expense-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .expense-detail-grid { grid-template-columns: 1fr; }
}
.kv-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
}
.expense-detail-amount {
  font-size: 20px;
  font-weight: 600;
}
.expense-detail-note { grid-column: 1 / -1; }
.expense-detail-receipt { margin-top: 8px; }

.button-link {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  text-decoration: none;
}
.button-link:hover { border-color: var(--accent-soft); }

.expense-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.approve-btn, .pay-btn, .reject-btn {
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.approve-btn { background: var(--ok); color: #0a0f0a; }
.pay-btn     { background: var(--accent); color: #0a0f0a; }
.reject-btn  { background: var(--danger); color: #fff; }
.approve-btn:hover, .pay-btn:hover { background: var(--accent-soft); }
.reject-btn:hover { filter: brightness(1.1); }

.expense-reject-form { display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
.expense-reject-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.expense-reject-form button { align-self: flex-start; }

.expense-delete-form { margin-top: 12px; }
.danger-link {
  background: transparent;
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

/* ============================================================
 * Expenses — v2 polish: styled file input + card-style review
 * queue.
 * ============================================================ */

/* Visually-hidden but accessible to screen readers / keyboards. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Styled <input type="file"> wrapper. The native input is layered
 * over the pseudo-button so the click target is real, but visually
 * the input is invisible. The label keeps the field's text label
 * outside the button so the layout matches surrounding fields. */
.file-field { display: flex; flex-direction: column; gap: 4px; }
.file-field-label {
  font-size: 12px;
  color: var(--muted);
}
.file-field-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px 6px 6px;
  min-height: 34px;
}
.file-field-control input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Native picker text overflows in some browsers; clip to be safe. */
  font-size: 0;
}
.file-field-button {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.file-field-name {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.file-field.has-file .file-field-name { color: var(--text); }
.file-field-control:hover .file-field-button { border-color: var(--accent-soft); }
.file-field-control:focus-within {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

/* Primary "submit" button — used by the expense forms. */
.primary-btn {
  background: var(--accent);
  color: #0a0f0a;
  border: 0;
  border-radius: 6px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.primary-btn:hover { background: var(--accent-soft); color: var(--text); }

/* ---- Review queue: tabs + card grid ---- */

.review-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 8px 0 16px;
}
.review-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.review-tab:hover { color: var(--text); background: var(--surface); }
.review-tab--active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  position: relative;
}
.review-tab--active::after {
  /* Hide the seam between tab and content. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--surface);
}
.review-tab-count {
  background: var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.review-tab-total {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.review-section { display: none; margin-bottom: 28px; }
.review-section--active { display: block; }
.review-section-title {
  margin: 12px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-card--approved {
  border-color: var(--accent-soft);
  background: linear-gradient(0deg, var(--surface), var(--surface));
}
.review-card--paid { opacity: 0.85; }
.review-card--rejected { opacity: 0.85; }

.review-card-status {
  font-weight: 500;
}
.review-card-status--paid { color: var(--accent); }
.review-card-status--rejected { color: var(--danger, #c44); }

.review-card-note {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
}
.review-card-note-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.review-card-titles { min-width: 0; flex: 1 1 auto; }
.review-card-employee {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.review-card-title { margin: 2px 0 0; font-size: 15px; }
.review-card-title a { color: var(--text); text-decoration: none; }
.review-card-title a:hover { color: var(--accent); }
.review-card-amount {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.review-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.review-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: auto;
}
.review-card-actions > form,
.review-card-actions > .review-reject-toggle {
  flex: 1 1 0;
  display: flex;
}
.review-card-actions .approve-btn,
.review-card-actions > .review-reject-toggle > summary.reject-btn {
  width: 100%;
  text-align: center;
}

/* Inline reject toggle: <details> + <summary> styled as a button.
 * Expanding it reveals the textarea + confirm button without
 * navigating away from the queue. */
.review-reject-toggle { min-width: 0; }
.review-reject-toggle summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.review-reject-toggle summary::-webkit-details-marker { display: none; }
.review-reject-toggle[open] {
  flex-basis: 100%;
}
.review-reject-toggle[open] > summary { display: none; }
.review-reject-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review-reject-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
}
.reject-btn--confirm { align-self: flex-start; }

/* ============================================================
 * Advantages — per-employee + admin month grid.
 *
 * Same visual language as .payroll-table / .expenses-table:
 * thin uppercase headers, tabular-num right-aligned money columns,
 * subtle row borders, status pills + kind chips for at-a-glance
 * scanning.
 * ============================================================ */
.advantages-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.advantages-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.advantages-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.advantages-table th.num,
.advantages-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.advantages-table td.total,
.advantages-table th.total { font-weight: 600; }
.advantages-table td.ym {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.advantages-table .row-actions,
.advantages-table .row-actions-th {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.advantages-table tbody tr:hover td {
  background: rgba(139, 195, 74, 0.04);
}
.advantages-table tr.empty-row td { color: var(--muted); }
.advantages-table tfoot th {
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding-top: 12px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* Kind chip. Green for bus pass (non-taxable), amber for bicycle and
 * insurance (taxable QC). Same chrome family as .status-pill. */
.advantage-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.advantage-kind--bus_pass {
  background: rgba(124, 194, 107, 0.12);
  color: var(--ok);
  border-color: var(--ok);
}
.advantage-kind--bicycle,
.advantage-kind--insurance {
  background: rgba(224, 164, 76, 0.15);
  color: var(--warn);
  border-color: var(--warn);
}

/* Numeric cell with a trailing "taxable" badge: keep both pieces on
 * the same baseline and a small gap between them. */
.advantages-table .cell-amount {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.advantages-table .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.advantages-table .badge-warn {
  background: rgba(224, 164, 76, 0.15);
  color: var(--warn);
  border-color: var(--warn);
}

/* Side-by-side "from receipt" + "manual" forms on the per-employee
 * admin page. Stacks on narrow viewports. */
.advantages-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .advantages-forms { grid-template-columns: 1fr; }
  .advantages-table,
  .advantages-month-table { min-width: 560px; }
}
.advantages-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.advantages-add-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.advantages-add-form input,
.advantages-add-form select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}
.advantages-add-form button { align-self: flex-start; }

/* Self-view totals card: two big numbers side-by-side at the top. */
.advantages-totals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.advantages-total-amount {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .advantages-totals-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Employee self-view advantage cards. Each kind gets its own
 * card with a big iconic status glyph and a colored left
 * border that encodes the state at a glance:
 *   plan      → accent (call to action)
 *   on        → ok (green)
 *   off       → muted (gray)
 * The admin month grid reuses .advantage-card--plan to surface
 * the same PDF call-to-action above the totals table.
 * ============================================================ */
.advantage-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 16px 0;
}
.advantage-card-icon {
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
  width: 36px;
  text-align: center;
  color: var(--muted);
}
.advantage-card-body { flex: 1 1 auto; min-width: 0; }
.advantage-card-title {
  margin: 0 0 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.advantage-card-status {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.advantage-card-text {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.advantage-card-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.advantage-card-body > :last-child { margin-bottom: 0; }

.advantage-card--plan {
  border-left-color: var(--accent);
}
.advantage-card--plan .advantage-card-icon { color: var(--accent); }

.advantage-card.is-on { border-left-color: var(--ok); }
.advantage-card.is-on .advantage-card-icon { color: var(--ok); }
.advantage-card.is-off { border-left-color: var(--border); }
.advantage-card.is-off .advantage-card-icon { color: var(--muted); }

@media (max-width: 600px) {
  .advantage-card {
    gap: 12px;
    padding: 14px 14px;
  }
  .advantage-card-icon { font-size: 22px; width: 28px; }
  .advantage-card-status { font-size: 17px; }
}

/* ---- Site footer ----
 * A low-key bar at the bottom of every page with a link out to the
 * GitHub repo for bug reports. Kept off the full-screen mobile day
 * view, which is a fixed-height flex column with its own overflow. */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 16px 28px;
  font-size: 12px;
  color: var(--muted);
}
.site-footer-brand { font-weight: 600; }
.site-footer-sep { color: var(--border); }
.site-footer-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.site-footer-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
@media (max-width: 800px) {
  body.day-view .site-footer { display: none; }
}