/* ═══════════════════════════════════════════════════════════════════
   Condition Zebra — Leave Portal
   Palette sampled directly from the logo:
     red  #AD2025   green #073F21   lime #A3C224
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cz-red:        #AD2025;
  --cz-red-dark:   #8C1A1E;
  --cz-red-soft:   #FBEDED;
  --cz-green:      #073F21;
  --cz-green-mid:  #0E5A31;
  --cz-green-soft: #EAF2ED;
  --cz-lime:       #A3C224;
  --cz-lime-soft:  #F3F8E2;

  --ink:        #15201B;
  --ink-2:      #3C4A43;
  --ink-3:      #6B7770;
  --ink-4:      #9AA39E;

  --bg:         #F4F5F2;
  --surface:    #FFFFFF;
  --surface-2:  #FAFAF8;
  --line:       #E2E4DE;
  --line-2:     #EDEEE9;

  --amber:      #B4690E;
  --amber-soft: #FDF3E4;
  --blue:       #1F5B8F;
  --blue-soft:  #ECF3F9;

  --radius:     9px;
  --radius-sm:  6px;
  --shadow:     0 1px 2px rgba(21, 32, 27, .05), 0 1px 3px rgba(21, 32, 27, .04);
  --shadow-lg:  0 10px 30px rgba(21, 32, 27, .10);

  --sidebar-w:  246px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cz-green-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.011em; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

code, .mono { font-family: var(--mono); font-size: .9em; }

/* ── Layout ───────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--cz-green);
  color: #D8E3DB;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* The logo's wordmark is dark green and red, so it needs a light plate
   to stay legible against the green sidebar. */
.brand-plate {
  display: block;
  background: #fff;
  border-radius: 5px;
  padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.brand-plate img { display: block; width: 100%; max-width: 178px; height: auto; }
.sidebar__brand span {
  display: block;
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(216, 227, 219, .6);
}

.sidebar__nav { padding: 12px 10px; flex: 1; }

.nav-group + .nav-group { margin-top: 18px; }
.nav-group__label {
  padding: 0 10px 7px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(216, 227, 219, .45);
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: #C9D8CF;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-item.is-active { background: rgba(163, 194, 36, .16); color: #fff; }
.nav-item.is-active .nav-item__icon { color: var(--cz-lime); }

.nav-item__icon { width: 17px; height: 17px; flex: 0 0 17px; color: rgba(201, 216, 207, .75); }
.nav-item__label { flex: 1; }

.nav-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--cz-red);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
  line-height: 17px;
}
.nav-count--muted { background: rgba(255, 255, 255, .16); color: #D8E3DB; }

.sidebar__foot {
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 12px;
  color: rgba(216, 227, 219, .55);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { font-size: 17px; font-weight: 640; }
.topbar__spacer { flex: 1; }

.content { padding: 24px; max-width: 1440px; width: 100%; }

/* ── User chip ────────────────────────────────────────────────────── */

.userchip { display: flex; align-items: center; gap: 10px; }
.userchip__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cz-green); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
  flex: 0 0 32px;
}
.userchip__name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.userchip__role { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }

/* ── Cards ────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.card__head h2 { font-size: 15px; }
.card__head .spacer { flex: 1; }
.card__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.card__body { padding: 18px; }
.card__body--tight { padding: 0; }
.card__foot {
  padding: 11px 18px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13px;
}

/* ── Grid ─────────────────────────────────────────────────────────── */

/* Every modifier below names minmax(0, 1fr) rather than 1fr, because a
   grid item's automatic minimum size is its MIN-CONTENT, not zero — so a
   plain `1fr` track is floored by the widest thing inside it. The bare
   .grid and .stack need the same floor: without an explicit track their
   single implicit column sizes to max-content, and one wide table then
   stretches the card, the grid, the page and the sticky topbar with it.
   With the floor at 0 the card shrinks to the viewport and .table-wrap's
   own `overflow-x: auto` does its job — the table scrolls inside the
   card instead of dragging the whole document sideways. */
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

/* ── Stat tiles ───────────────────────────────────────────────────── */

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 3px; background: var(--cz-green);
}
.stat--red::before  { background: var(--cz-red); }
.stat--lime::before { background: var(--cz-lime); }
.stat--amber::before{ background: var(--amber); }
.stat--blue::before { background: var(--blue); }

.stat__label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.stat__value {
  font-size: 27px; font-weight: 660; letter-spacing: -.02em;
  margin-top: 5px; line-height: 1.05;
}
.stat__value small { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.stat__meta { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

/* ── Balance cards ────────────────────────────────────────────────── */

.balance {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
}
.balance__top { display: flex; align-items: baseline; gap: 8px; }
.balance__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; align-self: center; }
.balance__name { font-size: 13.5px; font-weight: 600; flex: 1; }
.balance__avail { font-size: 24px; font-weight: 660; letter-spacing: -.02em; }
.balance__unit { font-size: 12px; color: var(--ink-3); font-weight: 500; }

.meter {
  height: 6px; border-radius: 3px; background: var(--line-2);
  margin: 10px 0 8px; overflow: hidden; display: flex;
}
.meter__used    { background: var(--cz-green); height: 100%; }
.meter__pending { background: var(--cz-lime);  height: 100%; }

.balance__legend {
  display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-3); flex-wrap: wrap;
}
.balance__legend b { color: var(--ink-2); font-weight: 600; }

/* ── Tables ───────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left;
  padding: 9px 14px;
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.tight { white-space: nowrap; }

.t-name { font-weight: 600; }
.t-sub  { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* ── Badges ───────────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--ok    { background: var(--cz-green-soft); color: var(--cz-green);   border-color: #CFE0D6; }
.badge--bad   { background: var(--cz-red-soft);   color: var(--cz-red-dark);border-color: #F0D2D2; }
.badge--warn  { background: var(--amber-soft);    color: var(--amber);      border-color: #F2E0C3; }
.badge--info  { background: var(--blue-soft);     color: var(--blue);       border-color: #CFE0EF; }
.badge--muted { background: #F0F1EE;              color: var(--ink-3);      border-color: var(--line); }
.badge--lime  { background: var(--cz-lime-soft);  color: #5D7014;           border-color: #E2EDBC; }

.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 600; background: #F0F1EE; color: var(--ink-2);
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 600 13.5px/1.3 var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: #D3D6CF; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--cz-lime); outline-offset: 1px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--cz-green); border-color: var(--cz-green); color: #fff; }
.btn--primary:hover { background: var(--cz-green-mid); border-color: var(--cz-green-mid); }

.btn--danger { background: var(--cz-red); border-color: var(--cz-red); color: #fff; }
.btn--danger:hover { background: var(--cz-red-dark); border-color: var(--cz-red-dark); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: #EDEEE9; }

.btn--sm { padding: 5px 11px; font-size: 12.5px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: 7px; }

/* ── Forms ────────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 5px;
}
.label .req { color: var(--cz-red); margin-left: 2px; }

.input, .select, .textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #D6D9D2;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: 14px/1.45 var(--font);
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--cz-green-mid);
  box-shadow: 0 0 0 3px rgba(14, 90, 49, .10);
}
.input.is-error, .select.is-error, .textarea.is-error {
  border-color: var(--cz-red);
  box-shadow: 0 0 0 3px rgba(173, 32, 37, .09);
}
.textarea { min-height: 88px; resize: vertical; }
.select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7770' d='M6 8.2 1.8 4h8.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
}

.hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.error-text { font-size: 12.5px; color: var(--cz-red-dark); margin-top: 5px; font-weight: 500; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--cz-green); flex: 0 0 15px; }
.check__text { font-size: 13.5px; }
.check__sub  { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.radio-cards { display: grid; gap: 8px; }
.radio-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.radio-card:hover { border-color: #C6CBC2; background: var(--surface-2); }
.radio-card input { margin: 2px 0 0; accent-color: var(--cz-green); flex: 0 0 15px; width: 15px; height: 15px; }
.radio-card:has(input:checked) { border-color: var(--cz-green-mid); background: var(--cz-green-soft); }
.radio-card__title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.radio-card__desc  { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.filters {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 13px 18px; background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.filters .field { margin: 0; min-width: 150px; }
.filters .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ── Flash messages ───────────────────────────────────────────────── */

.flash {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.flash--success { background: var(--cz-green-soft); border-color: #CBDFD3; color: #0A3D22; }
.flash--error   { background: var(--cz-red-soft);   border-color: #EFD0D0; color: #7C1619; }
.flash--warning { background: var(--amber-soft);    border-color: #F0DCBE; color: #7A470A; }
.flash--info    { background: var(--blue-soft);     border-color: #CEDFEE; color: #1A4A75; }
.flash svg { flex: 0 0 17px; margin-top: 1px; }

/* ── Notice board ─────────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cz-green);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 14px 16px;
  display: flex; gap: 13px; align-items: flex-start;
}
.notice--urgent { border-left-color: var(--cz-red); background: var(--cz-red-soft); border-color: #F0D6D6; }
.notice__body { flex: 1; min-width: 0; }
.notice__title { font-size: 14.5px; font-weight: 640; }
.notice__text  { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; white-space: pre-line; }
.notice__meta  { font-size: 12px; color: var(--ink-3); margin-top: 7px; }
.notice__dismiss { border: 0; background: none; cursor: pointer; color: var(--ink-4); padding: 2px; border-radius: 4px; }
.notice__dismiss:hover { background: rgba(0,0,0,.06); color: var(--ink-2); }

/* ── Timeline ─────────────────────────────────────────────────────── */

.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -22px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-4);
}
.tl-item--ok::before   { border-color: var(--cz-green); background: var(--cz-green); }
.tl-item--bad::before  { border-color: var(--cz-red);   background: var(--cz-red); }
.tl-item--wait::before { border-color: var(--amber); }
.tl-item__title { font-size: 13.5px; font-weight: 600; }
.tl-item__meta  { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.tl-item__note  { font-size: 13px; color: var(--ink-2); margin-top: 5px; padding: 7px 10px;
                  background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--line-2); }

/* ── Calendar ─────────────────────────────────────────────────────── */

.cal { width: 100%; border-collapse: separate; border-spacing: 3px; }
.cal th {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; padding-bottom: 5px; text-align: center;
}
.cal td { vertical-align: top; width: 14.28%; }

.cal-day {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 5px 6px;
}
.cal-day--outside  { background: transparent; border-color: transparent; }
.cal-day--nonwork  { background: #F0F1ED; }
.cal-day--holiday  { background: var(--cz-red-soft); border-color: #EEDADA; }
.cal-day--today    { border-color: var(--cz-green); box-shadow: 0 0 0 1px var(--cz-green); }

.cal-day__num { font-size: 11.5px; font-weight: 650; color: var(--ink-2); }
.cal-day--nonwork .cal-day__num { color: var(--ink-4); }
.cal-day__hol { font-size: 10px; color: var(--cz-red-dark); line-height: 1.25; margin-top: 1px; font-weight: 600; }

.cal-chip {
  display: block;
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10.5px; font-weight: 600;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip--tentative { opacity: .58; }
.cal-more { font-size: 10px; color: var(--ink-3); margin-top: 3px; font-weight: 600; }

/* ── Heatmap ──────────────────────────────────────────────────────────
   Concurrent absence is a MAGNITUDE, so the fill is a single-hue
   sequential ramp (green, light → dark), not a green-amber-red rainbow.
   "Understaffed" is a separate judgement, so it rides a separate
   channel: a red ring plus a visible marker, never hue alone.        */

.heat { display: flex; gap: 3px; flex-wrap: wrap; }
.heat__cell {
  position: relative;
  width: 30px; height: 38px;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-size: 11px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--surface);
}
/* The date is what makes a crunch actionable — "week of the 20th",
   not "somewhere in the middle of the strip". */
.heat__date { font-size: 8.5px; font-weight: 600; opacity: .72; letter-spacing: -.01em; }

/* A gap before each Monday so weeks are countable at a glance. */
.heat__cell[data-weekstart="1"] { margin-left: 11px; }
.heat__cell:first-child { margin-left: 0; }
.heat__cell[data-level="0"] { background: var(--surface);  color: var(--ink-4); }
.heat__cell[data-level="1"] { background: #E3EFE8; color: #1D4F33; border-color: #D2E4D9; }
.heat__cell[data-level="2"] { background: #C2DCCC; color: #17492D; border-color: #AFD0BC; }
.heat__cell[data-level="3"] { background: #94C2A9; color: #103B23; border-color: #7FB598; }
.heat__cell[data-level="4"] { background: #55A077; color: #FFFFFF; border-color: #48926A; }
.heat__cell[data-level="5"] { background: #1B7A47; color: #FFFFFF; border-color: #166A3D; }

/* Second channel for the risk threshold — shape and a marker, not colour. */
.heat__cell.is-risk {
  border: 2px solid var(--cz-red);
  box-shadow: 0 0 0 1px #fff inset;
}
.heat__cell.is-risk::after {
  content: '!';
  position: absolute; top: -5px; right: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cz-red); color: #fff;
  font-size: 9px; line-height: 12px; font-weight: 700;
  text-align: center;
}

.heat-scale { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }
.heat-scale__swatch { width: 17px; height: 13px; border-radius: 3px; border: 1px solid var(--line); }

/* ── Bar chart ────────────────────────────────────────────────────── */

.bars { display: grid; gap: 11px; }
.bar__row { display: grid; grid-template-columns: 132px 1fr 84px; gap: 11px; align-items: center; }
.bar__label { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { height: 20px; background: var(--line-2); border-radius: 4px; overflow: hidden; display: flex; }
.bar__fill  { height: 100%; }
.bar__value { font-size: 12.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 96px; }
.spark__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.spark__bar { width: 100%; background: var(--cz-green); border-radius: 3px 3px 0 0; min-height: 2px; }
.spark__lbl { font-size: 10px; color: var(--ink-3); }

/* ── Empty state ──────────────────────────────────────────────────── */

.empty { padding: 34px 22px; text-align: center; color: var(--ink-3); }
.empty svg { color: var(--ink-4); margin-bottom: 10px; }
.empty__title { font-size: 14.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; }
.empty__text { font-size: 13px; max-width: 400px; margin: 0 auto; }

/* ── Login ────────────────────────────────────────────────────────── */

.bare {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 20px;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(163, 194, 36, .13), transparent 62%),
    radial-gradient(760px 420px at 92% 6%, rgba(173, 32, 37, .09), transparent 60%),
    var(--bg);
}
.bare__panel { width: 100%; max-width: 460px; }
.bare__panel--wide { max-width: 740px; }

.login-logo { display: block; width: 214px; height: auto; margin: 0 auto 26px; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.login-card__head { padding: 26px 28px 20px; text-align: center; border-bottom: 1px solid var(--line-2); }
.login-card__head h1 { font-size: 19px; }
.login-card__head p  { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 0; }
.login-card__body { padding: 22px 28px 26px; }

.ms-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 12px 18px;
  background: #2F2F2F; color: #fff;
  border: 0; border-radius: var(--radius-sm);
  font: 600 14.5px var(--font); cursor: pointer; text-decoration: none;
}
.ms-btn:hover { background: #1F1F1F; text-decoration: none; }

.dev-banner {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--amber-soft);
  border: 1px solid #F0DCBE;
  color: #7A470A;
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.people { display: grid; gap: 16px; max-height: 440px; overflow-y: auto; padding-right: 4px; }
.people__group-label {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650; margin-bottom: 6px;
}
.person {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  margin-bottom: 5px;
  transition: border-color .12s, background .12s;
}
.person:hover { border-color: var(--cz-green-mid); background: var(--cz-green-soft); }
.person__name { font-size: 13.5px; font-weight: 600; }
.person__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ── Misc ─────────────────────────────────────────────────────────── */

.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 620; }
.num { font-variant-numeric: tabular-nums; }
.tar { text-align: right; }
.tac { text-align: center; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 550; }

.divider-label {
  display: flex; align-items: center; gap: 11px;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 650;
  margin: 18px 0 11px;
}
.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.preview-box {
  border: 1px dashed #C9CDC4;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 13px 15px;
  font-size: 13px;
}
.preview-box__days { font-size: 21px; font-weight: 660; letter-spacing: -.02em; }

.skip-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-3); }
.skip-list li { padding: 2px 0; display: flex; gap: 8px; }
.skip-list li span:first-child { min-width: 112px; color: var(--ink-2); font-weight: 550; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab {
  padding: 8px 14px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--cz-green); border-bottom-color: var(--cz-green); }

/* ── Collapsible navigation ───────────────────────────────────────────
   The nav lives in a <details>. Above 900px that element is not a drawer
   at all: the summary is hidden and the nav is shown whatever the
   open/closed state, so desktop never depends on it.

   Revealing a CLOSED <details>' contents takes two rules, because
   browsers hide them two different ways:

     - Older engines put `display: none` on the slotted content, which
       the first rule overrides.
     - Chrome 131+, Firefox 139+ and Safari 18.4+ instead skip the
       ::details-content pseudo with `content-visibility`, which ignores
       `display` on the child entirely. Overriding only the first way
       leaves getComputedStyle() reporting `display: block` on a nav that
       paints nothing — an empty sidebar that measures as present.

   Engines that do not know ::details-content simply drop that rule. */

.nav-drawer > .sidebar__nav { display: block; }
.nav-drawer::details-content { content-visibility: visible; block-size: auto; }
.nav-drawer__toggle { display: none; }

/* The drawer is now the sidebar's flex child, so it inherits the growth
   that used to sit on .sidebar__nav — without this the footer rides up
   under the last link instead of resting at the bottom of the column. */
.nav-drawer { flex: 1; min-height: 0; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; }
  .nav-drawer { flex: none; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }

  /* Collapsed by default, so the page opens on its content rather than
     on fourteen links. Previously the groups were dissolved with
     `display: contents` and their labels hidden, which left every item
     in one ragged wrap with nothing to separate Governance from Me. */
  .nav-drawer:not([open]) > .sidebar__nav { display: none; }
  /* Undo the desktop reveal, both ways, or the drawer never shuts. */
  .nav-drawer:not([open])::details-content {
    content-visibility: hidden;
    block-size: 0;
  }

  .nav-drawer__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0;
    color: #E8F0EA;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  /* Safari still paints the disclosure triangle without this. */
  .nav-drawer__toggle::-webkit-details-marker { display: none; }

  .nav-drawer__toggle:hover { background: rgba(255, 255, 255, .07); }
  .nav-drawer__toggle:focus-visible {
    outline: 2px solid var(--cz-lime);
    outline-offset: -2px;
  }

  .nav-drawer__label { flex: 1; }

  /* Two columns: fourteen items in one column is a lot of scrolling,
     and the labels are short enough to pair up at phone width. */
  .nav-drawer[open] > .sidebar__nav { padding-bottom: 8px; }
  .nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
  .nav-group__label { grid-column: 1 / -1; }
  .nav-item { margin-bottom: 0; }
}

/* One column below ~460px — two columns start truncating "Year-end
   rollover" and "Public holidays" on a narrow phone. */
@media (max-width: 460px) {
  .nav-group { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .sidebar, .topbar, .btn, .filters { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}


/* ── Classes replacing former inline style attributes ─────────────────
   The Content-Security-Policy carries a nonce and forbids inline styles,
   so style="" is not available. Most former attributes became generated
   rules via App\Core\Style; these few are in the LAYOUT, which renders
   after the <head> that prints that block — so they have to be real
   classes here instead. */

.dev-badge        { color: var(--cz-lime); font-weight: 600; }
.userchip--link   { color: inherit; text-decoration: none; }
.form--inline     { margin: 0; }

/* Pagination footer (partials/pagination.php). */
.pagination__pos  { padding: 0 10px; white-space: nowrap; }

/* Rows the recalculation screen wants flagged for a human decision. */
.row--needs-review { background: var(--cz-red-soft); }

/* Live preview box on the leave application form. These were style=""
   attributes inside app.js until the CSP dropped 'unsafe-inline' — a
   style attribute is blocked even when a trusted script writes it. */
.preview-box__error  { color: var(--cz-red-dark); font-weight: 550; }
.preview-box__head   { gap: 14px; align-items: baseline; }
.preview-box__short  { color: var(--cz-red-dark); font-weight: 600; }
.preview-box__hint   { margin-top: 6px; }
.preview-box__clash  { margin: 10px 0 0; }