/* PawsInn staff UI — utilitarian, readable, printable.
   Deliberately small and framework-free. */

* { box-sizing: border-box; }

:root {
  /* Brand palette */
  --brand-blue: #1DB3CB;
  --brand-blue-dark: #178ea3;
  --brand-orange: #FB913B;

  --bg: #f6fbfc;
  --fg: #1f2328;
  --muted: #6a737d;
  --accent: var(--brand-blue);
  --accent-fg: #fff;
  --accent-soft: #e2f4f8;
  --warn: #b7791f;
  --danger: #b02a37;
  --ok: #2d6a4f;
  --border: #cfe6ea;
  --card-bg: #fff;
  --chip-bg: #eef4f5;
}

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

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

.topnav {
  display: flex; align-items: center; gap: 1rem;
  background: var(--brand-blue); color: var(--accent-fg);
  padding: 0.5rem 1rem;
  border-bottom: 3px solid var(--brand-orange);
}
.topnav .brand { color: #fff; font-weight: 700; font-size: 1.1rem; }
.topnav .brand-accent { color: var(--brand-orange); }
.topnav ul { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; flex: 1; }
.topnav li a { color: #fff; padding: 0.4rem 0.75rem; border-radius: 4px; display: inline-block; }
.topnav li a:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.topnav li.active > a {
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 -3px 0 var(--brand-orange);
  text-decoration: none;
}

.topnav li.nav-group { position: relative; }
.topnav .nav-group-toggle {
  color: #fff; background: transparent; border: 0; cursor: pointer;
  padding: 0.4rem 0.75rem; border-radius: 4px;
  font: inherit; line-height: inherit;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.topnav .nav-group-toggle:hover,
.topnav li.nav-group.active > .nav-group-toggle,
.topnav li.nav-group.open > .nav-group-toggle {
  background: rgba(255,255,255,0.18);
}
.topnav li.nav-group.active > .nav-group-toggle {
  box-shadow: inset 0 -3px 0 var(--brand-orange);
}
.topnav .nav-caret { font-size: 0.75rem; opacity: 0.9; }
.topnav .nav-dropdown {
  position: absolute; top: 100%; left: 0;
  display: none; flex-direction: column;
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 4px; padding: 0.25rem;
  min-width: 10rem; z-index: 10;
  list-style: none;
}
.topnav li.nav-group:hover > .nav-dropdown,
.topnav li.nav-group:focus-within > .nav-dropdown,
.topnav li.nav-group.open > .nav-dropdown {
  display: flex;
}
.topnav .nav-dropdown li { display: block; }
.topnav .nav-dropdown a {
  display: block; white-space: nowrap;
  padding: 0.4rem 0.75rem; border-radius: 3px;
}
.topnav .nav-dropdown li.active > a,
.topnav .nav-dropdown a:hover { background: rgba(255,255,255,0.2); }
.topnav-right { display: flex; gap: 0.5rem; align-items: center; color: #fff; }
.topnav-right .user { opacity: 0.9; }
.topnav-booking {
  padding: 0.35rem 0.75rem; font-size: 0.9rem; border: 0;
  background: var(--brand-orange); color: #fff;
}
.topnav-booking:hover { filter: brightness(1.05); }
.logout-form button { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: #fff; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; }

main { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
body.bare main { max-width: 440px; }

.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-header h1 { margin: 0; font-size: 1.4rem; padding-bottom: 0.2rem; border-bottom: 3px solid var(--brand-orange); }
.tally { display: flex; gap: 1rem; color: var(--muted); }
.tally b { color: var(--fg); }

/* Daycare quick-book popout on today's Daily page (reuses .email-modal base).
   Tall box: the results list flows inline and fills the space between the
   search input and the action buttons. */
.daycare-modal { width: min(460px, 92vw); height: min(82vh, 40rem); }
.daycare-modal form { height: 100%; }
.daycare-modal .animal-picker {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.daycare-modal .animal-picker-list {
  position: static; flex: 1; max-height: none; overflow-y: auto;
  margin-top: 0.5rem; box-shadow: none;
}

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.card h2 { margin-top: 0; font-size: 1.1rem; }
.card-nested { margin-top: 0.75rem; }
.card-warn { background: #fef3c7; border-color: #f59e0b; }
.card-warn h2 { color: #92400e; }

.btn, .btn-nav, .btn-inline {
  display: inline-block; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--fg); cursor: pointer; font-size: 0.9rem; text-decoration: none;
}
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.warn { background: #fff7e6; border-color: #e6b800; color: #7a5a00; }
.btn.danger { background: #fff0f1; border-color: #e9aeb4; color: var(--danger); }
.btn:hover, .btn-nav:hover { text-decoration: none; filter: brightness(0.97); }
.btn-inline { padding: 0.2rem 0.5rem; font-size: 0.85rem; }

.filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.filters input, .filters select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; }
.filters input.live-filter { min-width: 18rem; }
.live-filter-count { font-size: 0.85rem; }

table { width: 100%; border-collapse: collapse; }
table.list th, table.list td, table.daily-table th, table.daily-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table th { background: #eef5f6; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; color: #555; }
table th a.sort-link { color: inherit; text-decoration: none; display: inline-block; }
table th a.sort-link:hover { text-decoration: underline; }
.right { text-align: right; }
.muted { color: var(--muted); }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.8rem; background: var(--chip-bg); }
.badge-pending_request { background: #fff5d6; color: #7a5a00; }
.badge-confirmed { background: #d8f0e4; color: var(--ok); }
.badge-cancelled { background: #eceff1; color: #555; text-decoration: line-through; }
.badge-warn { background: #fff5d6; color: #7a5a00; }
.badge-vax-ok { background: #d8f0e4; color: var(--ok); }
.badge-vax-warn { background: #fff5d6; color: #7a5a00; }
.badge-vax-expired { background: #ffd9de; color: var(--danger); }
.badge-vax-missing { background: #eceff1; color: #555; }

.chip { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 10px; background: var(--chip-bg); font-size: 0.8rem; color: #333; margin-right: 0.25rem; }
.chip-arr { background: #d8f0e4; color: var(--ok); }
.chip-dep { background: #fff5d6; color: #7a5a00; }
.chip-pending { background: #fff5d6; color: #7a5a00; }
.chip-in { background: #cfe8fb; color: #123f6b; }
.chip-out { background: #e0d8ef; color: #3b1d6e; }
.chip-paylater { background: #fde2e2; color: #991b1b; font-weight: 600; }
.paylater-bar { margin-top: 0.75rem; }
.paylater-form { margin-top: 0.75rem; gap: 0.75rem; align-items: center; }

.daily-table .strike td { text-decoration: line-through; color: var(--muted); }
.daily-table .strike td a { color: var(--muted); }
.daily-table .species { width: 1.8rem; text-align: center; font-size: 1.1rem; }

/* Daily page — 2x2 panel grid. */
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.daily-grid .panel { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.9rem 1rem; }
.daily-grid .panel h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; color: #444; background: #eef5f6; padding: 0.4rem 0.6rem; border-radius: 4px; border-left: 3px solid var(--brand-blue); }
.daily-grid .panel h3 .panel-count { font-variant-numeric: tabular-nums; color: #555; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0 0.45rem; min-width: 1.4rem; text-align: center; font-size: 0.85rem; }
.daily-grid .panel p.muted { margin: 0.5rem 0.6rem; }
.daily-grid .daily-table { font-size: 0.92rem; }
.daily-grid .daily-table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 0.82rem; color: #666; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
.daily-grid .daily-table td { padding: 0.35rem 0.5rem; vertical-align: middle; }
.daily-grid .daily-table tr { cursor: pointer; }
.daily-grid .lastname { font-weight: 600; letter-spacing: 0.02em; }
.daily-grid .animal { letter-spacing: 0.03em; text-transform: uppercase; font-weight: 500; }
.daily-grid .vax { font-size: 0.9rem; }
.colour-swatch {
  display: inline-block; width: 1rem; height: 1rem; border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15); vertical-align: middle;
}
.colour-swatch.colour-none { width: auto; height: auto; border: 0; color: var(--muted); }
.colour-blue    { background: #4a90e2; }
.colour-green   { background: #6cbf6b; }
.colour-peach   { background: #ffb88a; }
.colour-magenta { background: #d63ca8; }
.colour-orange  { background: #f08a24; }

/* Visual radio picker used wherever staff assign a pen colour. The native
   radio is hidden (but still focusable) and each swatch becomes the
   clickable target; the selected swatch gets a high-contrast ring. */
.colour-picker {
  display: inline-flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0; margin: 0; border: 0;
}
.colour-picker .colour-option {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.colour-picker input[type=radio] {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}
.colour-picker .colour-swatch {
  width: 1.6rem; height: 1.6rem; border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.15);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.colour-picker input[type=radio]:checked + .colour-swatch {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--fg);
  transform: scale(1.05);
}
.colour-picker input[type=radio]:focus-visible + .colour-swatch {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.colour-picker:hover .colour-swatch:hover { filter: brightness(1.05); }
.daily-grid .actions { white-space: nowrap; }
.daily-grid .edit-link { color: var(--accent); text-decoration: underline; }
.daily-grid form.row-action { display: none; } /* hidden; row click submits via JS */
.vax-ok { color: var(--ok); }
.vax-warn { color: #7a5a00; }
.vax-expired { color: var(--danger); }
.vax-missing { color: #555; }

@media (max-width: 900px) {
  .daily-grid { grid-template-columns: 1fr; }
}

.flash { padding: 0.6rem 0.9rem; border-radius: 4px; margin-bottom: 1rem; }
.flash-ok { background: #d8f0e4; color: var(--ok); }
.flash-warn { background: #fff5d6; color: #7a5a00; }
.flash-error { background: #ffd9de; color: var(--danger); }

.stack { display: flex; flex-direction: column; gap: 0.6rem; max-width: 440px; }
.stack.wide, .booking-form { max-width: 520px; }

.animal-picker { position: relative; }
.animal-picker-input {
  width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; background: var(--card-bg); color: var(--fg);
}
.animal-picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  z-index: 20; max-height: 14rem; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.animal-picker-option {
  padding: 0.45rem 0.6rem; cursor: pointer;
}
.animal-picker-option:hover,
.animal-picker-option.active {
  background: var(--accent-soft, #e8f0fe);
}
.animal-picker-empty {
  padding: 0.45rem 0.6rem; color: var(--muted, #666); font-style: italic;
}
.animal-picker-new {
  font-weight: 600; border-bottom: 1px solid var(--border);
}
.animal-picker-new::before { content: "＋ "; color: var(--brand-orange); }
.booking-colour-field[hidden] { display: none !important; }
.new-owner-field[hidden] { display: none !important; }

/* "Add other animals to this booking" checkbox list. */
.check-list { display: flex; flex-direction: column; gap: 0.1rem; }
.check-row {
  display: flex; flex-direction: row !important; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.5rem; border-radius: 4px; cursor: pointer;
}
.check-row:hover { background: var(--accent-soft); }
.check-row input { width: auto; }

/* Stay-dates range picker (single inline calendar). */
.range-picker { position: relative; }
.range-picker-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.55rem; text-align: left; appearance: none;
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; background: var(--card-bg); color: var(--fg); cursor: pointer;
}
.range-picker-input.is-empty { color: var(--muted); }
.range-picker-cal {
  position: fixed; z-index: 1000; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,0.22); padding: 0.85rem;
}
.range-picker-cal[hidden] { display: none; }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.rp-title { font-weight: 600; font-size: 1.05rem; }
.rp-nav {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--fg);
  border-radius: 4px; padding: 0.25rem 0.8rem; cursor: pointer; font: inherit;
  font-size: 1.1rem; line-height: 1.2;
}
.rp-nav:hover { background: var(--accent-soft); }
.rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-dow { text-align: center; font-size: 0.8rem; color: var(--muted); padding: 0.3rem 0; }
.rp-day {
  border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 1rem;
  padding: 0.6rem 0; cursor: pointer; border-radius: 4px; text-align: center;
}
.rp-day:hover { background: var(--accent-soft); }
.rp-day.rp-blank { visibility: hidden; cursor: default; }
.rp-day.rp-in-range { background: var(--accent-soft); border-radius: 0; }
.rp-day.rp-start, .rp-day.rp-end { background: var(--accent); color: var(--accent-fg); }
.rp-day.rp-start { border-radius: 4px 0 0 4px; }
.rp-day.rp-end { border-radius: 0 4px 4px 0; }
.rp-day.rp-start.rp-end { border-radius: 4px; }
.rp-hint { font-size: 0.85rem; color: var(--muted); margin: 0.6rem 0 0; }

/* Keep the top nav usable on phones: let it wrap so the brand and the
   "+ Booking" / user controls stay on the first row and the nav links wrap
   to their own scrollable row instead of pushing controls off-screen. */
@media (max-width: 560px) {
  .topnav { flex-wrap: wrap; row-gap: 0.5rem; }
  .topnav ul { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .topnav-right { margin-left: auto; }
}

/* iOS Safari zooms the page when you focus an input whose font-size is below
   16px. Our base font is 15px, so bump form controls to 16px on phones to
   stop the jarring zoom when tapping the date field (and other inputs).
   These selectors must match/exceed the specificity of `.stack input` etc.,
   which set `font: inherit` (15px) and would otherwise win. */
@media (max-width: 560px) {
  .range-picker-input,
  .animal-picker-input,
  .stack input, .stack select, .stack textarea,
  .booking-form input, .booking-form select, .booking-form textarea,
  .email-modal input, .email-modal textarea,
  .filters input, .filters select { font-size: 16px; }
}

/* Phones: render the calendar inline (bounded by the modal width so it can
   never be wider than the screen) with comfortable tap targets. */
@media (max-width: 560px) {
  .range-picker-cal {
    position: static; width: 100%; max-width: 100%; margin-top: 0.4rem;
    max-height: none; overflow: visible;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }
  .rp-head { margin-bottom: 0.5rem; }
  .rp-title { font-size: 1rem; }
  .rp-nav { padding: 0.35rem 0.9rem; font-size: 1.1rem; }
  .rp-dow { font-size: 0.75rem; padding: 0.3rem 0; }
  .rp-day { padding: 0.6rem 0; font-size: 1rem; }
  .rp-hint { font-size: 0.85rem; margin-top: 0.5rem; }
}
.stack label { display: flex; flex-direction: column; gap: 0.2rem; }
.stack input, .stack select, .stack textarea { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.inline-check { flex-direction: row !important; align-items: center; gap: 0.5rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.form-grid label { display: flex; flex-direction: column; gap: 0.2rem; }
.form-grid input, .form-grid select, .form-grid textarea { padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.form-grid .wide { grid-column: 1 / -1; }

.inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; margin-bottom: 0.75rem; }
.inline-form input, .inline-form select { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; }

.kv { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.notes { white-space: pre-wrap; font: inherit; margin: 0; }

.token-plain { display: block; margin-top: 0.5rem; padding: 0.5rem; background: #fff; border: 1px solid var(--border); word-break: break-all; }

.actions-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }

.calendar { table-layout: fixed; border: 2px solid #222; }
.calendar th { width: 14.285%; border: 1px solid #222; }
.calendar td { height: 5.5rem; vertical-align: top; padding: 0; border: 1px solid #222; }
.calendar td.blank { background: #eef5f6; }
.calendar .daycell {
  display: block; height: 100%; padding: 0.3rem;
  color: inherit; text-decoration: none;
}
.calendar .daycell:hover { background: #eef2f7; text-decoration: none; }
.calendar .daynum { font-weight: 400; font-size: 0.78rem; color: var(--muted); text-align: right; margin-bottom: 0.25rem; }
.calendar .daytally { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; line-height: 1.3; }
.calendar .daytally li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.12rem 0.4rem; border-radius: 4px; margin-bottom: 0.18rem;
  color: var(--fg); font-weight: 600;
}
.calendar .daytally strong { font-weight: 800; font-size: 1.05rem; line-height: 1; }
/* Count boldness scales with the same headcount bands as the pill opacity. */
.calendar .daytally .lvl1 strong { font-weight: 400; }
.calendar .daytally .lvl2 strong { font-weight: 650; }
.calendar .daytally .lvl3 strong { font-weight: 800; }

/* Brand-coloured tally pills whose opacity scales with the headcount: the
   busier the day, the more solid the colour (set via lvl1–lvl4 in calendar.ts). */
.calendar .tally-dogs.lvl1 { background: rgba(29, 179, 203, 0.18); }
.calendar .tally-dogs.lvl2 { background: rgba(29, 179, 203, 0.55); }
.calendar .tally-dogs.lvl3 { background: rgba(29, 179, 203, 1); }
.calendar .tally-cats.lvl1 { background: rgba(251, 145, 59, 0.18); }
.calendar .tally-cats.lvl2 { background: rgba(251, 145, 59, 0.55); }
.calendar .tally-cats.lvl3 { background: rgba(251, 145, 59, 1); }
.calendar .tally-pending { background: #fff5d6; color: #7a5b00; }
.calendar .tally-pending strong { color: #5a4400; }

.login, .owner-form { max-width: 420px; margin: 2rem auto; padding: 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.login h1, .owner-form h1 { margin-top: 0; }
.portal { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem 2rem; }
.portal-greeting { color: var(--muted, #666); margin-bottom: 1rem; }
.portal-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding: 0.75rem 1rem; background: #fff; border-bottom: 1px solid var(--border); }
.portal-nav a { text-decoration: none; color: inherit; }
.portal-nav a.active { font-weight: 600; text-decoration: underline; }
.portal-nav .portal-logout { margin-left: auto; }
.portal-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1rem 0; }
.portal-list { margin: 0.5rem 0; padding-left: 1.25rem; }
.hint { color: var(--muted, #666); font-size: 0.9rem; }
.animal-block { border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem; margin: 0.5rem 0; }

/* Booking detail — collapsible pricing summary. */
.price-total { margin: 0 0 0.5rem 0; font-size: 1.15rem; }
.price-total-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.balance-due    { color: #b91c1c; font-weight: 600; font-variant-numeric: tabular-nums; }
.balance-zero   { color: #047857; font-weight: 600; font-variant-numeric: tabular-nums; }
.balance-credit { color: #1d4ed8; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-details { margin-top: 0.25rem; }
.price-details summary {
  cursor: pointer; color: var(--accent); padding: 0.2rem 0;
  font-size: 0.9rem; user-select: none;
}
.price-details[open] summary { margin-bottom: 0.5rem; }
.price-details summary::-webkit-details-marker { color: var(--muted); }

/* On-site page — six kennel columns for one day. */
.onsite-section { margin: 1rem 0; }
.onsite-section h2 { margin: 0 0 0.4rem 0; font-size: 1.1rem; color: #444; }
.onsite-divider {
  border: 0; border-top: 2px solid var(--border); margin: 1.5rem 0;
}
table.onsite { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.onsite th, table.onsite td { border: 1px solid var(--border); padding: 0.35rem 0.5rem; vertical-align: top; }
table.onsite thead th { font-weight: 600; text-align: center; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.03em; color: #333; padding: 0.4rem 0.5rem; }
table.onsite .onsite-count { text-align: center; font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; padding: 0.25rem; color: #333; }
/* Reserve at least 8 chips worth of height per column. `height` on a <td>
   is treated as a minimum in table layout: the cell grows to fit content
   when there are more than 8 entries. Each chip is ~1.74rem incl. margin,
   so 15rem comfortably holds 8. */
table.onsite .onsite-chips td { height: 15rem; }

.onsite-col-daycare { background: #fff4b8; }  /* yellow */
.onsite-col-peach   { background: #ffe1cc; }
.onsite-col-green   { background: #d8ecd6; }
.onsite-col-blue    { background: #d5e6f7; }
.onsite-col-magenta { background: #f3d1e6; }
.onsite-col-orange  { background: #ffd29a; }

table.onsite thead th.onsite-col-daycare { background: #ffe880; }
table.onsite thead th.onsite-col-peach   { background: #ffc7a0; }
table.onsite thead th.onsite-col-green   { background: #b8dcb5; }
table.onsite thead th.onsite-col-blue    { background: #b6d3f0; }
table.onsite thead th.onsite-col-magenta { background: #e6a9cd; }
table.onsite thead th.onsite-col-orange  { background: #ffb26a; }

.onsite-chip {
  display: grid;
  grid-template-columns: 1.75rem 1fr 1.75rem;
  align-items: center;
  gap: 0.35rem;
  color: var(--fg); text-decoration: none;
  padding: 0.15rem 0.45rem; margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.6); border-radius: 3px;
  font-weight: 500; font-size: 0.9rem;
}
.onsite-chip:hover { background: rgba(255, 255, 255, 0.95); text-decoration: none; }
.onsite-chip-label {
  text-align: center;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  min-width: 0;
}
.onsite-mark {
  display: inline-block;
  color: #fff; background: var(--danger);
  font-weight: 800; font-size: 1.05rem; line-height: 1;
  min-width: 1.25rem; padding: 0.1rem 0.3rem;
  border-radius: 3px; text-align: center;
}
.onsite-plus  { justify-self: start; }
.onsite-minus { justify-self: end; }
.onsite-mark-placeholder {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.1rem 0.3rem;
  visibility: hidden;
}
.onsite-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.onsite-summary-left {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  justify-self: start;
}
.onsite-summary-center { justify-self: center; }
.onsite-summary-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600;
}

/* On-site page header — nav left, stats centre, date right. */
.onsite-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.onsite-header-date-block {
  justify-self: end; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem;
}
.onsite-header-date {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  color: var(--fg); line-height: 1.2; white-space: nowrap;
}
.onsite-header-nav {
  justify-self: start;
  display: flex; flex-wrap: nowrap; gap: 0.35rem;
}
.onsite-stats {
  justify-self: center;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 1rem; text-align: center;
  max-width: 24rem;
}
.onsite-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.onsite-stat-n {
  font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--brand-blue-dark); line-height: 1.1;
}
.onsite-stat-l {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted);
}

/* On-site — mobile: colour-coded list; sticky header with stats. */
.onsite-mobile { display: none; }

@media (max-width: 768px) {
  .onsite-desktop { display: none !important; }
  .onsite-mobile { display: block; }

  .onsite-header {
    position: sticky; top: 0; z-index: 20;
    margin: -1.25rem -1.25rem 0.75rem; padding: 0.65rem 1.25rem;
    background: var(--card-bg);
    border-bottom: 2px solid var(--brand-blue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }
  .onsite-header-nav {
    grid-column: 1; grid-row: 1;
    justify-self: start;
  }
  .onsite-header-nav .btn-nav { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
  .onsite-header-date-block {
    grid-column: 2; grid-row: 1;
    justify-self: end;
  }
  .onsite-stats {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: center;
    width: 100%; max-width: none;
    gap: 0.35rem 0.5rem;
  }
  .onsite-header-date { font-size: 0.85rem; }
  .onsite-stat-n { font-size: 1.35rem; }
  .onsite-stat-l { font-size: 0.65rem; }

  .onsite-mobile-list {
    display: flex; flex-direction: column; gap: 0.35rem;
    margin: 0 -1.25rem; padding: 0 1.25rem 1rem;
  }
  .onsite-mobile-empty { padding: 1rem 0; text-align: center; }

  .onsite-mobile-row {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center; gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    color: #1a1a1a; text-decoration: none; font-weight: 600; font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  .onsite-mobile-row:active { filter: brightness(0.97); }
  .onsite-mobile-label {
    text-align: center; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .onsite-mark-spacer { display: inline-block; width: 1.25rem; }

  .onsite-mobile-bg-daycare { background: #fff4b8; }
  .onsite-mobile-bg-peach   { background: #ffe1cc; }
  .onsite-mobile-bg-green   { background: #d8ecd6; }
  .onsite-mobile-bg-blue    { background: #d5e6f7; }
  .onsite-mobile-bg-magenta { background: #f3d1e6; }
  .onsite-mobile-bg-orange  { background: #ffd29a; }
}

/* Inbox Confirm/Decline email modal. Uses native <dialog> for a11y. */
.email-modal {
  width: min(640px, 92vw); max-width: 640px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.25rem; background: var(--card-bg); color: var(--fg);
}
.email-modal::backdrop { background: rgba(0, 0, 0, 0.35); }
.email-modal form { display: flex; flex-direction: column; gap: 0.6rem; }
.email-modal h3 { margin: 0; font-size: 1.1rem; }
.email-modal label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--muted); }
.email-modal input, .email-modal textarea {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; color: var(--fg); background: #fff;
}
.email-modal textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; line-height: 1.45; }
.email-modal .actions-bar { justify-content: flex-end; margin-top: 0.25rem; }

/* Global "+ Booking" nav modal (same form as /bookings/new). */
.booking-modal { width: min(520px, 94vw); max-height: 90vh; overflow-y: auto; }
.booking-modal-content { display: flex; flex-direction: column; gap: 0.6rem; }
.booking-modal-content h3 { margin: 0; font-size: 1.1rem; }
.booking-modal .booking-form { max-width: none; }
.booking-modal .animal-picker-list { max-height: 12rem; }

@media (max-width: 700px) {
  main { padding: 0.75rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Counter kiosk — tablet-first self-service at drop-off. */
body.bare.kiosk main { max-width: 720px; padding: 1.5rem; }
body.kiosk { font-size: 17px; -webkit-overflow-scrolling: touch; }

/* Pull-to-refresh indicator (iPad home-screen bookmark). */
.kiosk-ptr {
  position: fixed; top: 0; left: 0; right: 0; height: 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem;
  padding-bottom: 0.35rem; z-index: 50; pointer-events: none;
  color: var(--brand-blue); background: linear-gradient(to bottom, var(--accent-soft, #e8f0fe), transparent);
}
.kiosk-ptr-label { font-size: 0.9rem; font-weight: 600; }
.kiosk-ptr-spinner {
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--brand-blue); border-top-color: transparent;
  border-radius: 50%; flex-shrink: 0;
}
.kiosk-ptr-ready .kiosk-ptr-spinner { border-top-color: var(--brand-blue); }
.kiosk-ptr-loading .kiosk-ptr-spinner { animation: kiosk-ptr-spin 0.7s linear infinite; }
@keyframes kiosk-ptr-spin { to { transform: rotate(360deg); } }
body.kiosk .brand-accent { color: var(--brand-orange); }

.kiosk-header { text-align: center; margin-bottom: 1.5rem; }
.kiosk-header h1 { margin: 0 0 0.25rem; font-size: 2rem; color: var(--brand-blue); border: 0; padding: 0; }
.kiosk-subtitle { margin: 0; font-size: 1.15rem; color: var(--fg); font-weight: 600; }
.kiosk-hint, .kiosk-field-hint { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95rem; }
.kiosk-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }

.kiosk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.kiosk-card {
  display: block; padding: 1rem 1.15rem; min-height: 4.5rem;
  background: var(--card-bg); border: 2px solid var(--border); border-radius: 8px;
  color: var(--fg); text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.kiosk-card:hover, .kiosk-card:focus { border-color: var(--brand-blue); text-decoration: none; }
.kiosk-card-warn { border-color: #f59e0b; background: #fffbeb; }
.kiosk-card-animal { display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.15rem; }
.kiosk-species { font-weight: 500; font-size: 1rem; color: var(--muted); text-transform: capitalize; }
.kiosk-card-owner { display: block; font-size: 1.05rem; }
.kiosk-card-meta { display: block; font-size: 0.95rem; color: var(--muted); margin-top: 0.2rem; }
.kiosk-badge { margin-top: 0.5rem; font-size: 0.9rem; }

/* Details form fills the tablet screen, centred under the booking banner. */
.kiosk-form-section { min-height: calc(100vh - 3rem); display: flex; flex-direction: column; }
.kiosk-form-section .kiosk-header { text-align: center; }
.kiosk-form-section .kiosk-header h1 { font-size: 1.6rem; border: 0; padding: 0; }

/* Prominent "booked until" banner on the details form. */
.kiosk-booking-banner {
  background: var(--accent-soft); border: 2px solid var(--brand-blue);
  border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; text-align: center;
}
.kiosk-booking-line { margin: 0; font-size: 1.2rem; }
.kiosk-booking-date { margin: 0.25rem 0 0; font-size: 2.1rem; font-weight: 800; color: var(--brand-blue-dark); }
.kiosk-booking-list { margin: 0.5rem 0; padding: 0; list-style-position: inside; text-align: center; font-size: 1.15rem; }

.kiosk-form { flex: 1; display: flex; flex-direction: column; gap: 1rem; max-width: none; }
/* All the fields live in one bordered "Owner details" card, centred under the
   booking banner. */
.kiosk-details-box {
  margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.kiosk-details-box > legend {
  font-weight: 700; color: var(--brand-blue); padding: 0 0.5rem;
}
.kiosk-form label {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  font-size: 0.95rem; font-weight: 400; color: var(--muted);
}
/* Entered values are bolder/larger than their labels so the details customers
   are checking stand out. */
.kiosk-form input {
  width: 100%; text-align: left; font-size: 1.15rem; font-weight: 700; color: var(--fg);
  padding: 0.7rem 0.75rem; border: 1px solid var(--border); border-radius: 6px;
}
/* Two fields side by side; stack on narrow screens. */
.kiosk-pair { display: flex; gap: 0.9rem; }
.kiosk-pair > label { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) { .kiosk-pair { flex-direction: column; gap: 1rem; } }
.kiosk-field-hint { text-align: left; }
.kiosk-form-actions {
  display: flex; gap: 0.75rem; margin-top: auto; padding-top: 1rem; flex-wrap: wrap;
  width: 100%;
}
.kiosk-form-actions .btn { padding: 0.65rem 1.25rem; font-size: 1rem; min-height: 44px; }
.kiosk-submit { flex: 1; min-width: 10rem; }