/* ILLA Spa payroll — phone-first. Palette and type carried over from the prototype. */
:root {
  --paper: #F6F4EE;
  --paper-raised: #FFFFFF;
  --ink: #24312B;
  --ink-soft: #5B6660;
  --pine: #3F5C4C;
  --pine-dark: #2C4238;
  --brass: #B98B4E;
  --brass-soft: #F4EADB;
  --line: #DAD3C0;
  --line-soft: #E8E3D6;
  --brick: #A6462F;
  --brick-soft: #F1E1DC;
  --ok: #3F5C4C;
  --ok-soft: #E3ECE6;
  --tap: 44px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
a { color: var(--pine-dark); }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--pine-dark); }
h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- Top bar & nav ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--pine-dark); color: #fff;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar .brand { white-space: nowrap; font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: #fff; text-decoration: none; }
.topbar .who { font-size: 13px; display: flex; align-items: center; gap: 10px; }
.topbar .who > :not(.bell) { opacity: .85; }
.topbar .who-name { color: inherit; text-decoration: none; }
.topbar .who-name:hover { text-decoration: underline; }
.topbar form { margin: 0; }
.topbar button { white-space: nowrap; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); min-height: 34px; padding: 4px 10px; }
.nav {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper-raised); border-bottom: 1px solid var(--line);
  padding: 0 8px; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; padding: 12px 12px; text-decoration: none; color: var(--ink-soft);
  font-size: 14px; font-weight: 500; border-bottom: 3px solid transparent;
}
.nav a.active { color: var(--pine-dark); border-bottom-color: var(--brass); }
.nav .badge { background: var(--brass); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }

/* Admin side menu: a <details> so it works without JS; the backdrop is the open summary's ::after. */
.topbar-left { display: flex; align-items: center; gap: 10px; }
.sidemenu > summary { list-style: none; }
.sidemenu > summary::-webkit-details-marker { display: none; }
.menu-btn {
  position: relative; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; font-size: 22px; line-height: 1; border-radius: 6px; color: #fff;
}
.menu-btn:hover, .sidemenu[open] .menu-btn { background: rgba(255,255,255,.12); }
.menu-btn .badge { position: absolute; top: -2px; right: -6px; background: var(--brass); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; line-height: 18px; }
.sidemenu[open] > summary::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; cursor: default; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 21; width: min(280px, 85vw); overflow-y: auto;
  background: var(--paper-raised); box-shadow: 4px 0 20px rgba(0,0,0,.15);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
}
/* The close button is the menu button inverted (dark ☰ on the light drawer), in the same spot. */
.topbar .drawer-close { position: absolute; padding: 0; top: 10px; left: 16px; width: 40px; height: 40px; border: 0; border-radius: 6px; background: none; font-size: 22px; line-height: 1; color: var(--pine-dark); cursor: pointer; }
.topbar .drawer-close:hover { background: var(--line-soft); }
.topbar .drawer-add { display: flex; align-items: center; width: calc(100% - 24px); min-height: var(--tap); margin: 48px 12px 4px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--pine-dark); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.topbar .drawer-add:hover { background: var(--pine); }
.topbar .drawer-add + .drawer-add { margin-top: 8px; }
.drawer-group { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); padding: 14px 20px 4px; }
.drawer a {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--tap);
  padding: 0 20px; text-decoration: none; color: var(--ink); font-weight: 500; border-left: 3px solid transparent;
}
.drawer a:hover { background: var(--line-soft); }
.drawer a.active { border-left-color: var(--brass); background: var(--line-soft); color: var(--pine-dark); }
.topbar .drawer-logout { margin: 12px 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.topbar .drawer-logout button { width: 100%; min-height: var(--tap); color: var(--pine-dark); border-color: var(--pine-dark); font-weight: 600; }
.drawer .badge { background: var(--brass); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; }

/* Whole-row links (data-href); the real link inside stays for keyboard and no-JS use. */
[data-href] { cursor: pointer; }
[data-href]:hover { filter: brightness(.98); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px 80px; }

/* ---------- Panels & cards ---------- */
.panel {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; margin-bottom: 16px;
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.prose h2 { margin-top: 20px; }
.prose ul { padding-left: 20px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label, .label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 5px; font-weight: 500; }
input[type=text], input[type=search], input[type=date], input[type=time], input[type=number], input[type=password], input[type=email], input[type=tel],
input[inputmode], select, textarea {
  width: 100%; min-height: var(--tap);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pine); outline-offset: 0; background: #fff; }
input[readonly] { background: var(--line-soft); color: var(--ink-soft); }
[hidden] { display: none !important; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 0; }
.keep-values { display: flex; flex-wrap: wrap; column-gap: 20px; }
.help { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.payout {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--line-soft); border-radius: 6px; padding: 12px 14px; min-height: var(--tap);
}
.payout .amt { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--pine-dark); }

/* ---------- Buttons ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 10px 16px;
  font: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--pine); color: #fff; }
.btn-primary:hover { background: var(--pine-dark); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--pine-dark); border-color: var(--pine); }
.btn-ghost:hover { background: var(--line-soft); }
.btn-danger { background: var(--brick); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--brick); border-color: var(--brick); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* The "ok" action sits on the right, after the "no" ones. */
.btn-row > .push-right { margin-left: auto; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Messages ---------- */
.flash { border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.flash.success { background: var(--ok-soft); color: var(--pine-dark); }
.flash.error { background: var(--brick-soft); color: var(--brick); }
.flash.info, .flash.warn { background: var(--brass-soft); color: #6d4f25; }

/* ---------- Summary tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin: 0; }
.tile .value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--pine-dark); }
.tile.pending .value { color: #8a6632; }
.tile .sub { font-size: 12px; color: var(--ink-soft); }


/* ---------- Day groups & entry rows (card list on phones, grid on desktop) ---------- */
.day { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.day > summary, .day-head {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 10px 14px; background: var(--line-soft);
}
.day > summary::-webkit-details-marker { display: none; }
/* A day's select box sits over its header but outside the <summary>, so it isn't a control inside a control. */
.day-pick { position: relative; }
.day-pick > input[data-pick-day] { position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; margin: 0; z-index: 1; }
.day-pick > input[data-pick-day] + .day > summary { padding-left: 40px; }
.day .date-label { font-family: 'Fraunces', serif; font-weight: 600; color: var(--pine-dark); }
.day .day-totals { font-size: 13px; color: var(--ink-soft); }
.day .day-totals b { color: var(--ink); }

/* Every row is three lines of fixed height: who | money, what | tip, then the note line (kept even when empty). */
.entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 22px 20px 20px; gap: 0 12px; padding: 10px 14px; border-top: 1px solid var(--line-soft); align-items: center; }
.entry:first-child { border-top: none; }
.entry .pick { grid-row: 1 / span 3; align-self: start; padding-top: 1px; }
.entry .pick input { width: 22px; height: 22px; margin: 0; }
.entry .who, .entry .what, .entry .meta { grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry .who { grid-row: 1; font-weight: 600; }
.entry .what { grid-row: 2; font-size: 14px; color: var(--ink-soft); }
.entry .money, .entry .tip { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.entry .money { grid-row: 1; font-weight: 600; }
.entry .tip { grid-row: 2; font-size: 13px; color: var(--ink-soft); }
.entry .meta { grid-row: 3; grid-column: 2 / span 2; font-size: 13px; color: var(--ink-soft); }
.entry .meta > * + * { margin-left: 8px; }
.entry .who .tag { margin-left: 6px; font-weight: 500; vertical-align: 1px; }
.entry .meta .reason { color: var(--brick); }
.entry .actions { grid-column: 2 / span 2; display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.entry.no-pick { grid-template-columns: minmax(0, 1fr) auto; }
.entry.no-pick .who, .entry.no-pick .what { grid-column: 1; }
.entry.no-pick .money, .entry.no-pick .tip { grid-column: 2; }
.entry.no-pick .meta, .entry.no-pick .actions { grid-column: 1 / span 2; }
.entry.is-void .who, .entry.is-void .money { text-decoration: line-through; color: var(--ink-soft); }
.entry a.rowlink { color: inherit; text-decoration: none; }

/* Entry status as colour: a stripe down the left edge and a light tint (key: partials/status-key). */
.entry { border-left: 4px solid transparent; }
.entry.st-pending { border-left-color: var(--brass); background: #FBF6EE; }
.entry.st-approved { border-left-color: var(--pine); background: #F1F6F2; }
.entry.st-rejected { border-left-color: var(--brick); background: #FBF1EE; }
.entry.st-void { border-left-color: #B5B0A3; background: var(--paper); }
.entry.st-adjustment { border-left-color: #4A6FA5; background: #EFF3F9; }
.entry.vf-ok { border-left-color: var(--pine); background: #F1F6F2; }
.entry.vf-check { border-left-color: var(--brass); background: #FBF6EE; }
.entry.vf-bad { border-left-color: var(--brick); background: #FBF1EE; }
.entry.vf-none { border-left-color: #B5B0A3; background: var(--paper); }
.status-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
.status-key .k { display: inline-flex; align-items: center; gap: 6px; }
.status-key .k::before { content: ''; width: 10px; height: 14px; border-radius: 2px; background: currentColor; }
.status-key .st-pending::before { background: var(--brass); }
.status-key .st-approved::before { background: var(--pine); }
.status-key .st-rejected::before { background: var(--brick); }
.status-key .st-void::before { background: #B5B0A3; }
.status-key .st-adjustment::before { background: #4A6FA5; }
.status-key .vf-ok::before { background: var(--pine); }
.status-key .vf-check::before { background: var(--brass); }
.status-key .vf-bad::before { background: var(--brick); }
.status-key .vf-none::before { background: #B5B0A3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.status { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; border-radius: 10px; padding: 1px 8px; }
.status.pending { background: var(--brass-soft); color: #8a6632; }
.status.approved { background: var(--ok-soft); color: var(--pine-dark); }
.status.rejected { background: var(--brick-soft); color: var(--brick); }
.status.void { background: var(--line-soft); color: var(--ink-soft); }
.tag { display: inline-block; font-size: 12px; background: var(--line-soft); border-radius: 10px; padding: 1px 8px; color: var(--ink-soft); }
.tag.lock { background: var(--pine-dark); color: #fff; }
.tag.paid { background: var(--ok-soft); color: var(--pine-dark); }
.tag.hold { background: var(--brass-soft); color: #8a6632; }

/* Data tables (payouts) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 8px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.table th { font-weight: 600; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.table .num { text-align: right; white-space: nowrap; }
.table tr.is-void td { color: var(--ink-soft); text-decoration: line-through; }

/* Sticky bulk-action bar at the bottom of the pending queue. */
.bulkbar {
  position: sticky; bottom: 0; z-index: 5; margin: 0 -16px;
  background: var(--paper-raised); border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(0,0,0,.05);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center;
}
.bulkbar .count { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }
.bulkbar.is-empty { display: none; }
/* A long list scrolls inside its block (about six rows) so the page stays short. */
.scroll-list { max-height: min(500px, 55vh); overflow-y: auto; }
.day > .empty { margin: 0; padding: 10px 14px; text-align: left; }
label.entry { cursor: pointer; font-weight: inherit; margin: 0; }
.day .adj-row { padding: 10px 14px; border-left: 4px solid #4A6FA5; background: #EFF3F9; }
.adj-text { min-width: 0; }
.adj-text > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.adj-text > [data-adj-left] { white-space: normal; }
.adj-who { font-weight: 600; }
.bulkbar { animation: bulkbar-in .15s ease-out; }
@keyframes bulkbar-in { from { transform: translateY(100%); } }
.bulkbar .count { order: -2; }
.bulkbar > button:only-of-type { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .bulkbar { display: flex; flex-wrap: nowrap; }
  .bulkbar .count { flex: 0 0 auto; }
  .bulkbar > .push-right { margin-left: auto; }
}

/* ---------- Filters ---------- */
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.filters .field { margin: 0; min-width: 0; }
.filters .span-2 { grid-column: span 2; }
/* Audit filter: the date switch shows either From/To dates or one day with times. */
.filters .segmented { margin: 0; }
.filters:has(input[name=mode][value=day]:checked) .when-multi,
.filters:has(input[name=mode][value=""]:checked) .when-day { display: none; }
@media (min-width: 900px) { .filters { grid-template-columns: repeat(6, 1fr); align-items: end; } .filters .span-2 { grid-column: auto; } }

/* Ledger: one-line filter summary with pay period arrows; compact filter form. */
.ledger-filter { padding: 4px 8px; }
.ledger-filter .arrow { flex: 0 0 var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; text-decoration: none; color: var(--pine-dark); border-radius: 6px; }
.ledger-filter a.arrow:hover { background: var(--line-soft); }
.ledger-filter .filter-summary { flex: 1; text-align: center; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--pine-dark); cursor: pointer; }
.compact-form { padding: 0 6px 8px; }
.compact-form .field { margin-bottom: 6px; min-width: 0; }
.compact-form .row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.compact-form label { font-size: 11px; margin-bottom: 2px; }
.compact-form select, .compact-form input { min-height: 38px; padding: 6px 8px; min-width: 0; }
.compact-form input[type=date] { padding: 6px 4px; font-size: 14px; }
.totals-line { padding: 12px 14px; }
.by-therapist { margin-top: 8px; }
.by-therapist > summary { cursor: pointer; color: var(--pine-dark); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.by-therapist .table td, .by-therapist .table th { padding: 6px 4px; }

/* ---------- Tables (desktop-ish data like audit, periods) ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.list > li:first-child { border-top: none; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }
.kv .linklike { display: inline; min-height: 0; }
.diff { font-size: 13px; background: var(--paper); border-radius: 4px; padding: 6px 8px; margin-top: 6px; overflow-wrap: anywhere; }
.diff .from { color: var(--brick); text-decoration: line-through; }
.diff .to { color: var(--pine-dark); }

/* Rate grid */
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
@media (min-width: 700px) { .rate-grid { grid-template-columns: repeat(3, 1fr); } }
.rate-grid label { font-size: 13px; color: var(--ink-soft); display: block; margin-bottom: 3px; }
.rate-grid input.override { border-color: var(--brass); background: var(--brass-soft); }

.copybox { display: flex; gap: 8px; }
.copybox input { flex: 1; font-size: 14px; }

.empty { text-align: center; padding: 40px 16px; color: var(--ink-soft); }
.empty .big { font-family: 'Fraunces', serif; font-size: 20px; color: var(--pine-dark); margin-bottom: 6px; }

.pager { display: flex; justify-content: space-between; margin-top: 12px; }

/* Auth pages */
.auth { max-width: 400px; margin: 40px auto; padding: 0 16px; }
.auth h1 { text-align: center; font-size: 26px; }
.auth .sub { text-align: center; color: var(--ink-soft); margin-bottom: 20px; }

@media print {
  .topbar, .nav, .bulkbar, .no-print, .sidemenu { display: none !important; }
  body { background: #fff; }
}

/* Page tabs (Payouts) */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.tabs a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--tap); text-decoration: none; font-weight: 600; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--pine-dark); border-bottom-color: var(--pine); }
/* Pop-up tabs are buttons: drop the button corners and size so they match page tabs. */
.tabs button { flex: 1; min-height: var(--tap); padding: 0; background: none; border: 0; border-radius: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; font: inherit; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.tabs button.active { color: var(--pine-dark); border-bottom-color: var(--pine); }
/* Long names stay on one line: cut off with "…" (full text on hover), or swiped sideways where it must be readable. */
.one-line { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.swipe-line { min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.entry[data-line] { cursor: pointer; }
/* A long value (a voucher code) shares the top line with the line's name; both get cut off before either runs over. */
.entry[data-line] .money { min-width: 0; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }

/* Owed now: one row per therapist */
.owed-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.owed-amt { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 17px; }
.list > li.is-void .owed-row a, .list > li.is-void .owed-amt { text-decoration: line-through; color: var(--ink-soft); }
.list a.rowlink { color: inherit; text-decoration: none; }
.period-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.period-text { flex: 1; min-width: 0; }
.period-text > div { height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--ink-soft); }
.period-text > .pline1 { height: 24px; line-height: 24px; font-size: 16px; color: var(--ink); }
.period-text .n-paid, .period-key .paid { color: var(--pine); font-weight: 600; }
.period-text .n-owed, .period-key .owed { color: var(--brick); font-weight: 600; }
.period-text .n-pend, .period-key .pend { color: #8a6632; font-weight: 600; }
.period-text .n-tot { color: var(--ink); }
.period-key .paid::before { background: var(--pine); }
.period-key .owed::before { background: var(--brick); }
.period-key .pend::before { background: var(--brass); }
.period-key .tot::before { background: var(--ink); }
/* Current period is bolder; a locked one is greyed out. */
.list > li.is-current .pline1 { font-weight: 700; color: var(--pine-dark); }
.list > li.is-locked .period-text { opacity: .5; }
.btn[aria-disabled="true"] { opacity: .5; }
.period-row > .btn-row { flex: none; flex-wrap: nowrap; }
/* On phones the two buttons stack so the three text lines keep their room. */
@media (max-width: 600px) {
  .period-row > .btn-row { flex-direction: column; gap: 4px; }
  .period-row > .btn-row .btn { min-height: 30px; padding: 2px 10px; width: 76px; font-size: 14px; }
}

/* Pop-up forms */
dialog.dialog { border: 1px solid var(--line); border-radius: 10px; padding: 16px; width: min(420px, calc(100vw - 32px)); background: var(--paper-raised); color: var(--ink); }
dialog.dialog.dialog-wide { width: min(560px, calc(100vw - 32px)); }
/* Every pop-up sits just under the top bar, so opening a different one doesn't jump and a form that grows stretches down. */
/* dvh follows Chrome mobile's address bar showing and hiding (vh assumes it hidden); vh is the fallback. */
dialog.dialog { margin: 72px auto auto; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
dialog.dialog::backdrop { background: rgba(36, 49, 43, .45); }
dialog.dialog h2 { font-size: 16px; margin: 0 0 8px; }
dialog.dialog .dialog-head h2 { margin: 0; }
dialog.dialog .btn-row { justify-content: flex-end; margin-top: 12px; }

/* Joined range bar: one button split into parts */
.segmented { display: flex; border: 1px solid var(--pine); border-radius: 8px; overflow: hidden; margin: 0 0 12px; }
.segmented a, .segmented button { flex: 1; border: 0; border-radius: 0; background: none; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--pine-dark); }
.segmented a + a, .segmented button + button { border-left: 1px solid var(--pine); }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.segmented a.on, .segmented button.on { background: var(--pine); color: #fff; }
.custom-range { margin: -4px 0 12px; }

/* Pay screen: totals laid out like a sum, amounts on the right */
.sum { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.sum > :nth-child(even) { text-align: right; }
.sum .sum-net { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 4px; font-size: 17px; }
.adj-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; }
.adj-row > input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
.adj-text > .small { display: block; }
.adj-input { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.adj-input input { width: 72px; min-height: 38px; text-align: right; }
dialog.dialog .list { max-height: 45vh; overflow-y: auto; }

/* Lists styled like Ledger days: a bordered box, rows padded like entries. Services adds the day header. */
.list.day > li, .day > .list > li { padding: 12px 14px; }
.list.day { margin-bottom: 12px; }
.day-head { cursor: default; }

/* Joined choice made of radios (same look as the range bar). */
.segmented-radio label { flex: 1; display: flex; cursor: pointer; margin: 0; }
.segmented-radio label + label { border-left: 1px solid var(--pine); }
.segmented-radio input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-radio span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--pine-dark); }
.segmented-radio input:checked + span { background: var(--pine); color: #fff; }
.segmented-radio input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: -2px; }

/* Settings: each row is a button that opens its pop-up; name left, value right on one line. */
.list > li:has(> .set-row) { padding: 0; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 12px 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.set-row { cursor: pointer; }
a.set-row { text-decoration: none; }
button.set-row:hover { background: var(--paper); }
.set-value.danger { color: var(--brick); font-weight: 600; }
.set-name { font-weight: 600; flex-shrink: 0; }
.set-name.one-line { display: block; flex-shrink: 1; }
.set-row > div { min-width: 0; }
.set-row > .btn { flex-shrink: 0; }
/* Statement check: a tick box or row choice, then the entry or row it picks. */
.set-row.pick-row { justify-content: flex-start; flex-wrap: wrap; }
.list > li.set-row.pick-row { padding: 0 14px; }
.set-row.pick-row .check { margin: 0; }
.day .list > li:has(> .set-row) { padding: 0; }
.set-value { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: right; }
.affix { display: flex; align-items: center; gap: 8px; }
.affix input { flex: 1; }
.affix span { color: var(--ink-soft); }
.field-error { color: var(--brick); font-size: 14px; margin-top: 4px; }
/* Statements upload: drop a file on the box or tap it to choose one. */
.field .dropzone { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 88px; padding: 12px; margin: 0;
  border: 2px dashed var(--line); border-radius: 8px; color: var(--ink-soft); font-size: 15px; font-weight: 400; cursor: pointer; }
.field .dropzone.is-over, .field .dropzone:focus-within { border-color: var(--pine); color: var(--ink); }
.field .dropzone:has(:focus-visible) { outline: 2px solid var(--pine); outline-offset: 2px; }
/* One line only, so a long file name can't make the box taller. */
.field .dropzone [data-drop-text] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.field .dropzone.is-error { border-color: var(--brick); color: var(--brick); }
.char-count { color: var(--ink-soft); font-size: 12px; text-align: right; margin-top: 2px; font-variant-numeric: tabular-nums; }
.char-count.near { color: var(--brass); }
.char-count.full { color: var(--brick); font-weight: 600; }

/* Statement lines, coloured by status like entries (key: partials/statement-days). */
.entry.st-line-matched { border-left-color: var(--pine); background: #F1F6F2; }
.entry.st-line-open { border-left-color: var(--brass); background: #FBF6EE; }
.entry.st-line-dismissed, .entry.st-line-void { border-left-color: #B5B0A3; background: var(--paper); }
.status-key .st-line-matched::before { background: var(--pine); }
.status-key .st-line-open::before { background: var(--brass); }
.status-key .st-line-dismissed::before { background: #B5B0A3; }
.map-row { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 8px; align-items: center; margin-bottom: 8px; }
.map-row > div > span { padding-left: 2px; }
.map-head { margin-bottom: 4px; }
.map-summary > span { display: block; }
/* Phones: still one row per field, with tighter boxes; long names are cut off in the closed box. */
@media (max-width: 520px) {
  .map-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 6px; }
  .map-row select, .map-row input { min-width: 0; padding-left: 8px; padding-right: 4px; text-overflow: ellipsis; }
}
/* Statement tags and pills: verified (green), match waiting to be confirmed (blue), partial (brass), no match (brick). */
.tag.st-verified, .status.st-verified { background: var(--ok-soft); color: var(--pine-dark); }
.tag.st-match, .status.st-match { background: #E3EAF4; color: #3D5F8F; }
.tag.st-partial, .status.st-partial { background: var(--brass-soft); color: #8a6632; }
.tag.st-none, .status.st-none { background: var(--brick-soft); color: var(--brick); }
.status.st-off { background: var(--line-soft); color: var(--ink-soft); }
/* Entry page: Payout and Tip are one tap area, lined up with the other rows, with a › on the right. */
.kv-tap { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: inherit; position: relative;
  margin: 0 -8px; padding: 4px 32px 4px 8px; border-radius: 8px; }
.kv-tap[role="button"] { cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-soft); }
.kv-tap[role="button"]:hover, .kv-tap[role="button"]:active { background: var(--paper); }
.kv-tap:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; }
.kv-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--ink-soft); }

/* Therapist bell: rejected entries in a panel over the page. The dimmed backdrop is the open summary's ::after. */
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.topbar .bell .menu-btn { color: rgba(255,255,255,.4); }
.topbar .bell .menu-btn.has { color: var(--brass); }
.bell .menu-btn.has svg { fill: currentColor; }
.bell .menu-btn .badge { background: var(--brick); }
.bell[open] > summary::after { content: ''; position: fixed; inset: 0; z-index: 21; background: rgba(0,0,0,.35); cursor: default; }
.bell-panel {
  position: fixed; top: 60px; right: 16px; z-index: 22; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
  font-size: 15px;
}
.bell-panel > p { margin: 0; padding: 12px 14px; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.bell-head form { margin: 0; }
.topbar .bell-panel button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 14px; border: 0; border-radius: 0; background: none; color: var(--ink); text-align: left; font: inherit; white-space: normal; cursor: pointer; }
.topbar .bell-panel button.link { display: inline; width: auto; padding: 0; min-height: 0; color: var(--pine); font-size: 14px; text-decoration: underline; }
.note-row { margin: 0; border-left: 3px solid; border-top: 1px solid var(--line-soft); }
.note-row.st-pending { border-left-color: var(--brass); }
.note-row.st-approved { border-left-color: var(--pine); }
.note-row.st-rejected { border-left-color: var(--brick); }
.note-row.st-void { border-left-color: #B5B0A3; }
.topbar .note-row button:hover { background: var(--line-soft); }
.day-sub { padding: 8px 14px 2px; }
.payout-entries { max-height: 45vh; overflow-y: auto; margin-top: 12px; }
.payout-entries > li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }

/* Full-size pop-ups (therapist side): sized by what's in them up to a cap; past it the title row and the bottom buttons stay put while the middle scrolls. */
dialog.dialog-full { max-height: min(600px, calc(100vh - 88px)); max-height: min(600px, calc(100dvh - 88px)); overflow-y: auto; overscroll-behavior: contain; padding-top: 0; padding-bottom: 16px; }
.dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 8px; background: var(--paper-raised); }
.dialog-head h2 { margin: 0; min-width: 0; }
dialog.dialog:has(> .dialog-head) { padding-top: 0; } /* the title row brings its own top space */
dialog [data-step] .set-row { padding-left: 0; padding-right: 0; } /* line up with the title */
.dialog-x { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-soft); cursor: pointer; }
.dialog-x:hover { background: var(--line-soft); }
.dialog-x svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
dialog.dialog-full form > .btn-row:last-child { position: sticky; bottom: -16px; z-index: 1; background: var(--paper-raised); margin: 12px 0 -16px; padding: 12px 0 16px; }
.btn-row .btn-left { margin-right: auto; align-self: center; }
.dialog-back { flex: none; font-size: 26px; line-height: 1; text-decoration: none; color: var(--pine-dark); padding: 0 6px 0 0; }
.dialog-head h2 { flex: 1; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pill { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 2px 10px; background: var(--line-soft); color: var(--ink-soft); }
.pill.st-approved, .pill.st-paid { background: var(--ok-soft); color: var(--pine-dark); }
.pill.st-pending { background: var(--brass-soft); color: #8a6632; }
.pill.st-rejected { background: var(--brick-soft); color: var(--brick); }
.pill.st-locked { background: var(--pine-dark); color: #fff; }
/* History rows are always three lines; a long last line is cut off until the row is tapped. */
.hist > li.hist-row { padding: 8px 0; cursor: pointer; }
.hist-line { min-height: 1.45em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hist-row.open .hist-line { white-space: normal; }
.payout-row { display: flex; align-items: center; gap: 6px; padding: 12px 14px !important; }
.payout-row strong { margin-left: auto; }
.payout-entries > li .rowlink { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-filter .filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: var(--tap); }
.dialog-head h2:focus { outline: none; }
/* A therapist's totals block: the breakdown is kept short enough for one line, so the block is always the same height. */
.totals-fixed .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.totals-fixed .link { min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--pine); text-decoration: underline; cursor: pointer; }
.payout-line { display: flex; justify-content: space-between; gap: 12px; }
/* Entry page: a statement row opens its side's pop-up. */
.ledger-filter button.arrow { padding: 0; border: 0; background: none; cursor: pointer; }
.ledger-filter button.arrow:hover { background: var(--line-soft); }
/* Match pop-up: the whole row picks the line. */
.pick-lines > li { padding: 0; display: flex; align-items: stretch; }
.pick-line { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px 12px 14px; min-height: var(--tap); cursor: pointer; }
.pick-line .pl-val { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tag { color: var(--pine-dark); font-weight: 600; }
.pl-open { display: flex; align-items: center; justify-content: center; width: var(--tap); flex-shrink: 0; font-size: 22px; color: var(--ink-soft); text-decoration: none; }
.pl-open:hover { background: var(--line-soft); }
/* Green is the current statement, blue the one picked in the list (as the table's checks). */
.pick-lines > li.is-current { background: var(--ok-soft); }
/* Statements pop-up: the details, filter bar and buttons stay put; only the list scrolls between them (at least
   about two rows; on a tinier screen the pop-up itself scrolls). */
#statements[open] { display: flex; flex-direction: column; }
#statements [data-tabs], #statements [data-tab-panel]:not([hidden]), #statements form[id^="pick-"], #statements [data-picker] {
  display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
#statements .pick-lines { flex: 0 1 auto; min-height: 96px; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
#statements .btn-row { flex-shrink: 0; }
.pick-line input { position: absolute; opacity: 0; pointer-events: none; }
.pick-lines > li:has(input:checked) { background: #E3EAF4; font-weight: 600; }
/* Statements pop-up: the entry's details, each with boxed marks: green for the current statement, blue for the
   picked one, muted red where it differs. */
.cmp { margin: 0 0 14px; }
.cmp dd { display: flex; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.cmp .marks { display: inline-flex; gap: 4px; flex-shrink: 0; }
.cmp .marks > span:empty { display: none; }
.mk { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; font-size: 13px; font-weight: 700; color: #fff; line-height: 1; }
.mk-cur { background: var(--pine); }
.mk-sel { background: #3D5F8F; }
.mk-no { background: #C9877A; }
.pick-lines > li:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: -2px; }