:root {
  --ink: #2d2429;
  --muted: #74676d;
  --bg: #fff8f5;
  --card: #ffffff;
  --line: #eadde1;
  --surface: #faf2f6;
  --rose: #9d4564;
  --rose-dark: #713047;
  --rose-soft: #f7e7ed;
  --green: #31715a;
  --green-soft: #e4f3ec;
  --amber: #9a641f;
  --amber-soft: #fff0d7;
  --blue: #3d6093;
  --blue-soft: #e8eef9;
  --danger: #9f2f3f;
  --danger-soft: #fde8eb;
  --shadow: 0 16px 40px rgba(72, 41, 52, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, #f8dde6 0, transparent 26%),
    linear-gradient(135deg, #fffaf8, #fbf0ed);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Global keyboard focus ring. Components with their own focus treatment (.cf-form, .search-bar,
   .calendar-event, time-override inputs, lunula pickers) are all more specific and win, so this
   only rings controls that would otherwise show nothing — no double rings. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible { outline: 2px solid var(--brand, #9d4564); outline-offset: 2px; }

/* Subscription state pill in the sidebar */
.plan-pill { margin: 0 14px 10px; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; }
.plan-pill.trial { background: #fff7e0; color: #8a6d00; }
.plan-pill.lapsed { background: #fdecec; color: #b91c1c; }

/* Customer tag chips — colored objects, selectable on customer forms */
.tag-chip {
  --tag-color: #9d4564;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 12%, white);
  border: 1px solid color-mix(in srgb, var(--tag-color) 35%, white);
  white-space: nowrap;
}
.tag-chip.selectable { cursor: pointer; opacity: .5; user-select: none; }
.tag-chip.selectable input { position: absolute; opacity: 0; pointer-events: none; }
.tag-chip.selectable.selected { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color) 45%, white); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-picker-field .field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tag-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Multi-store assignment checkboxes on the staff profile (task #120) */
.store-assignment .field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.store-assignment-options { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; }
.checkbox-pill:has(input:checked) { border-color: var(--rose); background: var(--rose-soft); }
.checkbox-pill:has(input:disabled) { cursor: default; opacity: .85; }

/* ▲/▼ prior-month comparison badges (Performance by store) */
.delta-badge { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; }
.delta-good { color: #15803d; }
.delta-bad { color: #b91c1c; }
.delta-flat { color: var(--muted); }

/* No Show / Cancelled row on requested+confirmed pipeline cards */
.card-close-row { margin-top: 2px; }
.card-close-row button { font-size: 11px; padding: 3px 8px; color: var(--muted); }

.calendar-show-all { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.under-construction-banner {
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-size: 14px;
}

.csv-import-grid { display: grid; gap: 12px; margin-top: 8px; }

.shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
}

body.nav-collapsed .shell { display: block; }
body.nav-collapsed aside { display: none; }
body.nav-collapsed main {
  width: 100%;
  padding-left: clamp(68px, 6vw, 92px);
}

.nav-collapse {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.nav-collapse:hover { color: var(--ink); }

.nav-expand {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  width: 40px;
  height: 40px;
  display: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(72, 41, 52, .12);
  font-size: 18px;
  cursor: pointer;
}
body.nav-collapsed .nav-expand { display: grid; }

aside {
  padding: 24px 18px;
  background: rgba(255,255,255,.82);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--rose);
  border-radius: 13px;
  font-size: 14px;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #fff;
}

.user-card {
  margin-bottom: 20px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
}

.user-card strong { display: block; color: var(--ink); margin-bottom: 4px; }

.user-card-link {
  display: block; width: 100%; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.user-card-link:hover { border-color: var(--rose); box-shadow: 0 4px 14px rgba(72,41,52,.10); }
.user-card-hint { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--rose-dark); text-transform: uppercase; letter-spacing: .05em; }

nav button {
  width: 100%;
  margin-bottom: 6px;
  padding: 11px 12px;
  color: var(--muted);
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
}

nav button.active {
  color: var(--rose-dark);
  background: var(--rose-soft);
  font-weight: 800;
}

main {
  padding: 28px clamp(18px, 4vw, 56px) 56px;
  min-width: 0;
}

#content { min-width: 0; }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

h1, h2, h3 { margin: 0; letter-spacing: -.03em; }
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5vw, 50px);
  line-height: .98;
}

.subtitle { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.card, .panel {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow);
}

.card { padding: 18px; }
.card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card small { color: var(--green); }

.panel { padding: 20px; margin-bottom: 18px; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: start;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #fff8fb; }

.pill {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.pill.urgent, .pill.overdue { background: var(--danger-soft); color: var(--danger); }
.pill.overdue-cashout-pill { background: #fff1f2; color: #be123c; border: 1px solid #fda4af; font-weight: 700; }
.pill.high, .pill.due { background: var(--amber-soft); color: var(--amber); }
.pill.open { background: var(--rose-soft); color: var(--rose-dark); }
.pill.done, .pill.paid { background: var(--green-soft); color: var(--green); }
/* A refund is settled, not an error and not money coming in — so it reads inert rather than green
   (collected), amber (owing) or red (a problem). Same reasoning mutes the amount in the modal. */
.pill.refunded { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.checkout-summary.refunded strong { color: var(--muted); }

/* ── the refund slip (#46, arrangement B) ─────────────────────────────────────
   Canonical tokens throughout — they are defined globally in lunula.css, which loads after this
   file. `.caps` and `.num` come from there unscoped; `.gold` does NOT (it exists only inside
   .ringlet/.money-strip/.billing-panel), so money here needs its own rule or it renders as ink. */
.refund-slip { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 14px; }
.refund-slip .gold { color: var(--gold); }
.refund-slip label.caps { display: block; margin: 0 0 7px; }
.refund-slip input { width: 100%; border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 11px 14px; font: inherit; background: var(--paper); color: var(--ink); }
.refund-money { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.refund-hint { font-size: 12px; margin: 6px 0 0; }

.refund-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.refund-reason { border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--paper);
  padding: 11px 13px; font: inherit; font-size: 13.5px; color: var(--ink2); text-align: left; cursor: pointer; }
.refund-reason:hover { border-color: var(--ink3); }
.refund-reason.on { border-color: var(--brand); background: #fdf7f9; color: var(--brand-deep); font-weight: 600; }

.refund-slip .conseq { border: 1px solid var(--hair); border-radius: var(--r-md);
  background: var(--wash); padding: 16px 18px; }
.refund-slip .conseq h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.refund-slip .cline { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--hair); }
.refund-slip .cline:first-child { border-top: 0; padding-top: 0; }
.refund-slip .cline .lbl { color: var(--ink2); }
.refund-slip .cline .was { color: var(--ink3); text-decoration: line-through; margin-right: 7px;
  font-variant-numeric: tabular-nums; }
.refund-slip .cline .sub { grid-column: 1 / -1; color: var(--ink3); font-size: 12px; margin: 2px 0 0; }

.refund-history { margin: 18px 0 0; }
.refund-history .caps { display: block; margin: 0 0 8px; }
.refund-history .hrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; align-items: baseline; }
.refund-history .when { color: var(--ink3); font-size: 12px; }
.refund-history .amt { font-weight: 600; }

/* Below this the two columns stack, which is arrangement A with extra steps — the known cost of B. */
@media (max-width: 900px) { .refund-slip { grid-template-columns: 1fr; } }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filters button {
  padding: 8px 11px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.filters button.active {
  color: var(--rose-dark);
  background: var(--rose-soft);
  border-color: #deb2c3;
  font-weight: 800;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.filter-grid label { margin-bottom: 0; }

label {
  display: block;
  margin: 0 0 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

input, select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}

input[type="checkbox"] {
  width: auto;
  margin: 0 7px 0 0;
}

textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.form-grid .wide { grid-column: 1 / -1; }

/* Ledger summary strip (#55) — cheap SQL totals over the full filtered set, shown above the capped
   table so a wide date range still answers "how many / how much" instantly. */
.ledger-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin: 0 0 14px; padding: 12px 16px;
  background: var(--rose-soft); border: 1px solid var(--line); border-radius: 12px;
  font-size: 14px; color: var(--muted);
}
.ledger-summary b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.ledger-summary .ledger-owed { color: var(--danger); }
.ledger-summary .ledger-cap { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.primary, .secondary, .danger {
  padding: 10px 13px;
  border: 0;
  border-radius: 11px;
  font-weight: 800;
}
.primary { color: white; background: var(--rose); border: 1px solid var(--rose); }
/* A clear brand border so secondary/danger actions obviously read as tappable buttons
   (feedback: the faint borderless fills looked like non-clickable labels) — and so they
   match the phone's bordered secondary buttons. (#118) */
.secondary { color: var(--rose-dark); background: var(--rose-soft); border: 1px solid var(--rose); }
.danger { color: var(--danger); background: var(--danger-soft); border: 1px solid var(--danger); }
.link-button { display: inline-block; text-decoration: none; }

.message {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}
.message.error { background: var(--danger-soft); color: var(--danger); }

.toasts {
  position: fixed;
  z-index: 2000;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 9px;
  width: min(360px, calc(100vw - 36px));
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 15px;
  color: #185b46;
  background: #e7f8f1;
  border: 1px solid #a9dfcd;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(31,24,28,.18);
  animation: toast-in .2s ease-out;
}
.toast-icon { display: inline-flex; flex: none; }
.toast-text { min-width: 0; }
.toast.error { color: var(--danger); background: var(--danger-soft); border-color: #f0b5bd; }
.toast.toast-leaving { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(18px); } }
@keyframes payment-row-flash { 0% { background: var(--accent-soft, #e8f4fd); outline: 2px solid var(--accent, #3b82f6); } 60% { background: var(--accent-soft, #e8f4fd); outline: 2px solid var(--accent, #3b82f6); } 100% { background: transparent; outline: 2px solid transparent; } }
.payment-row-focus { animation: payment-row-flash 2.5s ease-out forwards; outline-offset: -2px; }
.payment-row-last-viewed { outline: 2px solid var(--blue, #3d6093); outline-offset: -2px; background: var(--blue-soft, #e8eef9); }

.nav-section {
  display: block;
  margin: 18px 9px 5px;
  color: #bfa8b1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
  line-height: 1.6;
}
.sidebar-booking { display: block; margin: 18px 0 10px; color: #fff; font-weight: 800; }
.store-bar { display: flex; justify-content: flex-end; align-items: flex-end; margin-bottom: 10px; gap: 8px; }
.store-picker-wrap { position: relative; }
.store-picker-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.store-picker-btn {
  display: flex; align-items: center; gap: 7px;
  width: min(240px, 100%); min-width: 140px;
  padding: 6px 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--ink);
  transition: border-color .15s;
}
.store-picker-btn:hover { border-color: var(--rose); }
.store-picker-caret { margin-left: auto; font-size: 11px; opacity: .45; }
.store-picker-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 100%; max-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(72,41,52,.13); z-index: 300;
  padding: 5px 0; display: none;
}
.store-picker-menu.open { display: block; }
.store-picker-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--ink); text-align: left;
  transition: background .1s;
}
.store-picker-opt:hover { background: var(--bg); }
.store-picker-opt.active { font-weight: 700; background: var(--rose-soft); color: var(--rose-dark); }
.store-dot-sm {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.12); display: inline-block;
}
/* Active-store color overlay — a page-level accent in the store's color (beyond the picker dots). */
.shell.store-accent::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 5px;
  background: var(--store-accent); z-index: 400; pointer-events: none;
}
.shell.store-accent .store-picker-btn {
  border-color: var(--store-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--store-accent) 30%, transparent);
}
.status-row.clickable { cursor: pointer; }
.status-row.clickable:hover { background: #fff8fb; }
.store-dot-sm.empty { border-color: rgba(0,0,0,.08); background: #f0eaec; }
.store-cell { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.dashboard-role-picker {
  min-width: 190px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dashboard-role-picker select { margin-top: 4px; }
.modal-close-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.muted { color: var(--muted); }
.hidden { display: none !important; }

.calendar-grid, .setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.calendar-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffafc;
}

.calendar-column h3 { margin-bottom: 10px; }

.calendar-card {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 11px;
  border-left: 4px solid var(--rose);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(72, 41, 52, .06);
}

.calendar-card.tentative { border-left-color: var(--amber); }
.calendar-card.completed { border-left-color: var(--green); opacity: .72; }
.calendar-card.cancelled { border-left-color: var(--danger); opacity: .58; }
.calendar-card span { font-size: 13px; }
.calendar-card small { color: var(--muted); }

.booking-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(205px, 1fr));
  gap: 12px;
  overflow-x: auto;
}
.booking-column {
  min-height: 180px;
  padding: 12px;
  background: #fff8fa;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.booking-column[data-status="requested"] { background: #f5f0ff; border-color: #d3bfff; }
.booking-column[data-status="requested"] .column-header { border-bottom-color: #7c5cbf; }
.booking-column[data-status="requested"] .column-header h3 { color: #7c5cbf; }
.booking-column[data-status="confirmed"] { background: #eff8ff; border-color: #bfdfff; }
.booking-column[data-status="confirmed"] .column-header { border-bottom-color: #2d7dd2; }
.booking-column[data-status="confirmed"] .column-header h3 { color: #2d7dd2; }
.booking-column[data-status="checked_in"] { background: #fffbe8; border-color: #ffe082; }
.booking-column[data-status="checked_in"] .column-header { border-bottom-color: #d97706; }
.booking-column[data-status="checked_in"] .column-header h3 { color: #d97706; }
.booking-column[data-status="in_service"] { background: #fff0f5; border-color: #ffbcd4; }
.booking-column[data-status="in_service"] .column-header { border-bottom-color: #e4557a; }
.booking-column[data-status="in_service"] .column-header h3 { color: #e4557a; }
.booking-column[data-status="checkout"] { background: #f0fdf4; border-color: #bbf7d0; }
.booking-column[data-status="checkout"] .column-header { border-bottom-color: #16a34a; }
.booking-column[data-status="checkout"] .column-header h3 { color: #16a34a; }
.booking-column h3 { text-transform: capitalize; }
.booking-card {
  display: grid;
  gap: 5px;
  margin-bottom: 9px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.booking-card .btn-row { margin-top: 5px; }
.booking-card .btn-row button { padding: 7px 9px; font-size: 12px; }
.checkout-column { background: var(--amber-soft); }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.record-form {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffafc;
}

.setup-grid > .record-form { margin: 0; }
.setup-grid > .employee-profile-form { grid-column: 1 / -1; }

.capability-grid, .permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 10px 0 16px;
}

.capability-categories { display: grid; gap: 8px; margin: 10px 0 16px; }
.capability-category { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.capability-category > summary {
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.capability-category > summary .cat-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.capability-category[open] > summary { border-bottom: 1px solid var(--line); }
.capability-category .capability-grid { margin: 0; padding: 10px 12px 12px; }
.cat-select-all-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--rose-dark);
  text-transform: none;
  letter-spacing: 0;
}

/* Services setup — category groups */
.service-cat-group { border: 1px solid var(--line); border-radius: 11px; background: #fff; margin-bottom: 8px; }
.service-cat-group > summary { cursor: pointer; padding: 10px 14px; display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.service-cat-group > summary .cat-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.service-cat-group[open] > summary { border-bottom: 1px solid var(--line); }
.service-cat-group .setup-grid { padding: 10px 12px 12px; margin: 0; }

/* Stores › Edit — grouped per-store settings sections (task #116) */
.store-cfg-sec > summary { font-weight: 700; font-size: 14px; color: var(--rose-dark); }
.store-cfg-sec > .form-grid { padding: 12px; margin: 0; }
.store-cfg-sec > .subtitle + .form-grid { padding-top: 4px; }
.store-edit-form > button[type="submit"] { margin-top: 6px; }

/* Service photo upload */
.service-photo-field .field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.service-photo-row { display: flex; gap: 12px; align-items: flex-start; }
.service-photo-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.service-photo-actions { display: grid; gap: 6px; }

.check-card {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
}

.check-card input { margin-top: 3px; }
.check-card span, .check-card small { display: block; }
.check-card small { margin-top: 3px; color: var(--muted); font-weight: 500; }
.service-capability { display: grid; }
.service-capability > label { display: flex; align-items: flex-start; margin: 0; text-transform: none; letter-spacing: 0; }
.service-capability .preference-check { padding-top: 8px; border-top: 1px solid var(--line); color: var(--rose-dark); font-size: 11px; }
.permission-card { min-height: 56px; }

.availability-list, .availability-exceptions {
  display: grid;
  gap: 8px;
  margin: 10px 0 16px;
}

.availability-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) repeat(2, minmax(100px, .8fr)) minmax(160px, 1.5fr);
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.availability-exception-row { grid-template-columns: repeat(4, minmax(110px, 1fr)) minmax(160px, 1.5fr) auto; }
.availability-row label { margin: 0; }
.availability-enabled { align-self: center; }

.booking-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 18px 64px;
  /* Match the FullSet phone app: Be Vietnam Pro throughout (owner 2026-06-14). */
  font-family: "Be Vietnam Pro", Inter, ui-sans-serif, system-ui, sans-serif;
}
.booking-page h1, .booking-page h2, .booking-page .booking-step-title {
  font-family: "Be Vietnam Pro", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Per-technician open-slot count on the day-&-technician step. */
.tech-card-open {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rose-dark);
  background: var(--rose-soft);
  border-radius: 999px;
}

.booking-hero {
  margin-bottom: 18px;
  padding: 28px;
  color: #fff;
  background: linear-gradient(145deg, var(--rose), var(--rose-dark));
  border-radius: 22px;
}

.booking-hero h1 { font-size: clamp(34px, 7vw, 58px); }

.trace-button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 24, 28, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: modal-backdrop-in .2s ease-out;
}
@keyframes modal-backdrop-in { from { opacity: 0; } }

.modal {
  width: min(980px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  animation: modal-pop-in .2s ease-out;
}
@keyframes modal-pop-in { from { opacity: 0; transform: scale(.97); } }

/* Scroll lock while any modal is open (toggled on <body> by refreshModalScrollLock). */
body.modal-open { overflow: hidden; }

/* confirmDialog() — a compact confirmation sheet reusing the modal system. */
.modal.confirm-sheet { width: min(440px, 100%); padding: 24px; }
.confirm-sheet .confirm-message {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--text, #2c2027);
}
.confirm-sheet .confirm-detail {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--muted);
}
.confirm-sheet .confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.confirm-sheet .confirm-actions button { min-width: 96px; }

/* Honor reduced-motion for the animations introduced in the chrome polish (modal entrance,
   toast enter/exit). The elements still appear/disappear — just without the motion. */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal,
  .toast,
  .toast.toast-leaving { animation: none; }
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.source-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.source-card strong { display: block; margin-bottom: 5px; }
.source-card pre {
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f4f5;
  border-radius: 10px;
  font-size: 12px;
}

.connection-card {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.module-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.module-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.module-card strong { display: block; margin-bottom: 5px; }
.module-card span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.module-card.clickable { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.module-card.clickable:hover { transform: translateY(-2px); border-color: #d69bb1; }

.store-performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.store-performance-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.store-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.store-kpis span, .store-performance-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.store-kpis strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
}

.metric-source {
  width: 100%;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.metric-source:hover {
  border-color: #d69bb1;
  background: var(--rose-soft);
}

.card.metric-source {
  border-color: var(--line);
  background: rgba(255,255,255,.8);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.card.metric-source:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(120,50,75,.11);
  border-color: #e6c9d5;
  background: #fff;
}

/* Polished KPI scorecards (#45) — brings the desktop Reports tiles up to the phone app's
   card feel: soft white cards, clean tabular-sans numbers (not heavy serif), a gentle hover lift. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-tile {
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px 15px;
  box-shadow: 0 1px 2px rgba(80,40,55,.05);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(120,50,75,.12);
  border-color: #e6c9d5;
}
.kpi-tile > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-tile > strong {
  display: block;
  margin-top: 8px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-tile > small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
/* Non-interactive kpi tiles (e.g. Config overview divs) shouldn't advertise a click. */
div.kpi-tile { cursor: default; }
div.kpi-tile:hover { transform: none; box-shadow: 0 1px 2px rgba(80,40,55,.05); border-color: var(--line); }
.kpi-tile.kpi-up > small { color: var(--green); }
.kpi-tile.kpi-down > small { color: var(--bad, #b5495f); }
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }

/* View navigation entrance (desktop↔phone parity polish) — a quiet fade+lift when loadView
   finishes rendering a screen. loadView removes the class, forces a reflow, then re-adds it so
   the animation restarts on every navigation. Internal re-renders (e.g. the board's 30s
   auto-refresh calling renderDeskBoard() directly) never touch #content's class list, so they
   stay motion-free — only real navigations animate. */
#content.view-enter { animation: view-enter-fade .18s ease-out; }
@keyframes view-enter-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quiet-luxury loading skeleton (replaces the plain "Loading..." text) — built by
   viewSkeletonHtml() in app.js and shown in #content while a view's data is being fetched. */
.view-skel { display: block; }
.skel-bar, .skel-tile, .skel-panel {
  position: relative;
  overflow: hidden;
  background: var(--hair, #eeeaf0);
  border-radius: 10px;
}
.skel-bar.skel-title { width: 220px; max-width: 60%; height: 26px; margin-bottom: 10px; border-radius: 8px; }
.skel-bar.skel-subtitle { width: 320px; max-width: 80%; height: 14px; margin-bottom: 22px; border-radius: 8px; }
.skel-kpi-grid { margin-bottom: 18px; }
.skel-tile { height: 92px; border-radius: 16px; }
.skel-panel { height: 220px; border-radius: 16px; }
.skel-bar::after, .skel-tile::after, .skel-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%);
  animation: skel-shimmer 1.7s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  #content.view-enter { animation: none; }
  .skel-bar::after, .skel-tile::after, .skel-panel::after { animation: none; display: none; }
}

/* Momentum strip (#267 desktop parity) — the desktop twin of the phone's swipeable momentum deck.
   A static, responsive row of narrative insight cards under the KPI grid. Eyebrow kicker in burgundy
   (never gold — gold is reserved for money), a calm serif-free headline, muted sub. */
.o-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.o-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--rose-soft) 0%, #fff 62%);
  box-shadow: 0 1px 2px rgba(80,40,55,.05);
}
.o-card .pe {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose);
}
.o-card-head {
  margin-top: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
}
.o-card-sub {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
/* #153 — the money card carries two figures, each with its own period label, so it can never be unclear
   which number is today's and which is the month's. The month figure is deliberately quieter: it is
   context for today, not a second headline. Mirrors .mom-* on the phone. */
.o-card .mom-big {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: 2px;
  color: var(--ink);
}
.o-card .mom-big.second {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
}
.o-card .mom-lbl {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.performance-bar {
  height: 9px;
  margin: 5px 0 12px;
  overflow: hidden;
  background: var(--rose-soft);
  border-radius: 999px;
}

.performance-bar span {
  display: block;
  height: 100%;
  min-width: 4px;
  background: var(--rose);
  border-radius: inherit;
}

.performance-bar.bookings span { background: var(--blue); }

.revenue-trend {
  display: grid;
  grid-template-columns: repeat(6, minmax(80px, 1fr));
  gap: 12px;
  min-height: 240px;
  overflow-x: auto;
}

.trend-column {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-width: 80px;
  text-align: center;
}
.trend-column.trend-drill { cursor: pointer; border-radius: 10px; transition: background .12s ease; }
.trend-column.trend-drill:hover, .trend-column.trend-drill:focus-visible { background: var(--rose-soft); outline: none; }
.trend-column.trend-drill:hover .trend-bar span { filter: brightness(1.05); }

.trend-bar {
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 175px;
  padding: 8px;
  background: #fff8fb;
  border-radius: 12px;
}

.trend-bar span {
  display: block;
  width: 34px;
  min-height: 3px;
  background: var(--rose);
  border-radius: 8px 8px 3px 3px;
}

.trend-column strong { margin-top: 7px; font-size: 13px; }
.trend-column small { color: var(--muted); }

.employee-calendar {
  display: grid;
  grid-template-columns: 90px repeat(auto-fit, minmax(170px, 1fr));
  /* Cap the height so the horizontal slider for all-tech columns is reachable, instead of
     sitting far below the fold (owner request 2026-06-14). Scrolls both ways inside the box. */
  overflow: auto;
  max-height: 74vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
/* Keep the time column pinned while scrolling across many technician columns. */
.duration-grid .calendar-cell.calendar-time,
.duration-grid .calendar-cell.calendar-corner { position: sticky; left: 0; z-index: 2; background: #fff; }

.calendar-cell {
  min-height: 74px;
  padding: 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.calendar-head {
  min-height: auto;
  color: var(--rose-dark);
  background: var(--rose-soft);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.calendar-time {
  color: var(--muted);
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
}

.calendar-event {
  margin-bottom: 6px;
  padding: 8px;
  border-left: 4px solid var(--rose);
  border-radius: 9px;
  background: #fff8fb;
}

.calendar-event strong, .calendar-event small { display: block; }
.calendar-event small { color: var(--muted); margin-top: 3px; }

/* Duration-proportional calendar: fixed-height slot rows; each ticket is absolutely
   positioned and sized as (booked minutes ÷ slot minutes), so a 75-minute service
   visually occupies 75 minutes of the grid. */
.duration-grid .calendar-cell { position: relative; height: 52px; min-height: 52px; padding: 2px 4px; overflow: visible; }
.duration-grid .calendar-cell.calendar-head { height: auto; min-height: 0; padding: 9px; }
/* All-stores view: a labelled colour band over each store's technician columns. */
.duration-grid .calendar-cell.store-band, .duration-grid .calendar-cell.calendar-corner { height: auto; min-height: 0; }
.calendar-cell.calendar-corner { background: var(--rose-soft); }
.calendar-cell.store-band {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink, #17121a); background: var(--wash, #faf8fb);
  border-left: 4px solid var(--store, var(--line));
  position: sticky; top: 0; z-index: 3;
}
.calendar-cell.store-band .store-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.duration-grid .calendar-cell.calendar-time { padding: 6px 8px; font-size: 11.5px; }
.duration-grid .calendar-event {
  position: absolute; left: 3px; right: 3px; margin: 0; padding: 4px 7px;
  overflow: hidden; z-index: 2; box-shadow: 0 1px 5px rgba(72, 41, 52, .12);
}
.duration-grid .calendar-event:hover, .duration-grid .calendar-event:focus-visible { z-index: 5; }
.duration-grid .calendar-event strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duration-grid .calendar-event small { margin-top: 1px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duration-grid .calendar-event .ce-time { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.field-with-action { display: flex; gap: 8px; align-items: stretch; }
.field-with-action select { flex: 1; min-width: 0; }
.field-with-action button { white-space: nowrap; }
.btn-sm { padding: 7px 11px; font-size: 12.5px; }

.checkout-summary {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.checkout-summary span, .checkout-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.checkout-summary strong {
  display: block;
  margin: 5px 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.checkout-lines {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.checkout-line-item {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(150px, 1.2fr) 70px 110px 100px auto;
  gap: 10px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.checkout-line-item:first-child { border-top: 0; }
.checkout-line-item label { margin: 0; }
.line-item-total { padding: 8px 0; }
.line-item-total span, .line-item-total strong { display: block; }
.line-item-total span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.line-item-total strong { margin-top: 4px; }

.tip-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.tip-presets button { padding: 5px 8px; font-size: 11px; }
.option-list { margin-bottom: 14px; }

/* Email templates (Configuration) — one editable card per email type */
.email-tpl-list { display: grid; gap: 16px; }
.email-tpl { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.email-tpl-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.email-tpl-head strong { font-size: 15px; }
.email-tpl-head .muted { font-size: 12.5px; line-height: 1.45; }
.email-tpl .et-body { font-family: inherit; resize: vertical; min-height: 96px; }
.email-tpl .et-ph { font-size: 12px; margin: 8px 0 12px; }
.email-tpl .et-ph code, .subtitle code { background: var(--wash, #faf8fb); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
.email-tpl .et-msg { margin-left: 4px; }

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

/* #148: pick-one rows whose label is a whole sentence — the walk-in rule chooser. Mirrors the phone's
   .pick-row so the same choice reads the same on both surfaces (desktop parity, #46). */
.pick-row {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 11px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; color: inherit;
}
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: var(--wash, #faf8fb); }
.pick-row strong { display: block; font-weight: 600; line-height: 1.3; }
.pick-row small { display: block; font-size: 12px; margin-top: 2px; line-height: 1.35; }
.pick-row.on { background: var(--wash, #faf8fb); }
.pick-check { margin-left: auto; color: var(--brand, #9d4564); font-weight: 700; flex: none; visibility: hidden; }
.pick-row.on .pick-check { visibility: visible; }

.logo-preview {
  display: block;
  max-width: 180px;
  max-height: 90px;
  margin: 8px 0;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

@media (max-width: 1050px) {
  .shell { grid-template-columns: 1fr; }
  aside { position: static; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .module-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  main { padding: 22px 14px 42px; }
  body.nav-collapsed main { padding-left: 62px; }
  .grid, .module-cards, .form-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .availability-row, .availability-exception-row { grid-template-columns: 1fr; }
  .checkout-line-item { grid-template-columns: 1fr 1fr; }
  .topbar, .panel-head { display: block; }
  .topbar .btn-row, .panel-head .btn-row { margin-top: 12px; }
}

.detail-photo {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-top: 6px;
}
.reference-preview {
  max-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-top: 6px;
}

/* Public booking — selected-services list (multi-service bookings) */
.selected-services { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.selected-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.selected-service-name { font-weight: 600; }
.selected-service-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.selected-service-total { background: transparent; border-style: dashed; }
.remove-selected-service {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.remove-selected-service:hover { background: var(--line); color: var(--ink); }

/* Public booking — multi-photo previews */
.photo-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-thumb-wrap { position: relative; }
.photo-thumb { max-width: 110px; max-height: 110px; object-fit: cover; margin-top: 0; }

/* Non-image booking attachments (PDFs, videos) render as named chips */
.file-chip-wrap { position: relative; display: inline-flex; align-items: center; }
.file-chip,
.attachment-chip {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.attachment-chip:hover { border-color: var(--rose); color: var(--rose-dark, #7c3550); }
.remove-photo {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(61, 44, 51, 0.18);
}

/* Staff detail modal — extra reference photos grid */
.appt-photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.appt-photo-grid img { max-width: 140px; max-height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  font-size: 13px;
  color: var(--muted);
}
.inline-field input { margin: 0; }

/* Nail-tech dashboard — service status list + status-coloured calendar events */
.status-list { display: flex; flex-direction: column; gap: 8px; }
.status-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 12px;
}
.status-row .status-when { font-weight: 800; color: var(--muted); white-space: nowrap; }
.status-row .status-main strong { display: block; }
.status-row .status-main span { color: var(--muted); font-size: 13px; }
.status-row.status-confirmed { border-left-color: var(--amber); }
.status-row.status-checked_in { border-left-color: var(--blue); }
.status-row.status-in_service { border-left-color: var(--green); }
.calendar-event.status-confirmed { border-left: 3px solid var(--amber); }
.calendar-event.status-checked_in { border-left: 3px solid var(--blue); }
.calendar-event.status-in_service { border-left: 3px solid var(--green); }
.calendar-event.status-requested { border-left: 3px solid var(--rose); }
.calendar-event.status-completed { opacity: .65; }
@media (max-width: 640px) {
  .status-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .status-row .status-when { grid-column: 1 / -1; }
}

/* Bookings calendar — readable, clickable event cards + legend */
.calendar-event { position: relative; }
.calendar-event[data-cal-appt] { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.calendar-event[data-cal-appt]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(72, 41, 52, .14); }
.calendar-event[data-cal-appt]:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.calendar-event.dragging { opacity: .35; cursor: grabbing; box-shadow: none; transform: none; }
.calendar-cell[data-cal-hour].drag-over { outline: 2px dashed var(--rose); background: var(--rose-soft); border-radius: 8px; }
.calendar-event .ce-time { display: block; font-size: 11px; font-weight: 800; color: var(--muted); }
.calendar-event .ce-status { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.ce-thumb { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(0,0,0,.1); cursor: zoom-in; flex-shrink: 0; transition: transform .1s ease, box-shadow .1s ease; }
.ce-thumb:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
/* Span its own full-width row under the date/slot/checkbox controls so the legend never
   collides with the "Only technicians with bookings" label (the grid columns are narrow). */
.calendar-legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.calendar-legend .legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: -4px; }
.calendar-legend .legend-photo { font-weight: 700; }
.legend-dot.status-requested { background: var(--rose); }
.legend-dot.status-confirmed { background: var(--amber); }
.legend-dot.status-checked_in { background: var(--blue); }
.legend-dot.status-in_service { background: var(--green); }


/* Cash drawer + end-of-day reconciliation (#233). */
.cash-drawer .cd-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cash-drawer .cd-controls label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.cd-status { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.cd-status.open { background: var(--green-soft, #e7f6ec); color: var(--green, #2e7d4f); }
.cd-status.closed { background: var(--rose-soft, #f7e7ee); color: var(--rose-dark, #8a2d4d); }
.cd-status.none { background: var(--line); color: var(--muted); }
.cd-recon { max-width: 420px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 16px; margin-bottom: 16px; }
.cd-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cd-line:last-child { border-bottom: 0; }
.cd-line span { color: var(--muted); font-size: 13.5px; }
.cd-line strong { font-variant-numeric: tabular-nums; }
.cd-total { border-top: 2px solid var(--ink); margin-top: 2px; }
.cd-total span, .cd-total strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.cd-os.ok strong { color: var(--green, #2e7d4f); }
.cd-os.over strong { color: var(--rose-dark, #8a2d4d); }
.cd-os.short strong { color: #b42318; }
.cd-forms { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-bottom: 16px; }
.cd-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cd-form input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.cd-form input[type="number"] { width: 130px; }
.cd-form input[type="text"] { flex: 1; min-width: 140px; }

/* ── Booking page: step progress ───────────────────────── */
.booking-progress {
  display: flex;
  align-items: center;
  margin: 16px 0 20px;
}
.booking-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.booking-progress-step.active { color: var(--rose-dark); }
.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8dde2;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.booking-progress-step.active .step-dot { background: var(--rose); color: #fff; }
.step-connector { flex: 1; height: 2px; background: #e8dde2; margin: 0 10px; }

/* ── Booking step panel ────────────────────────────────── */
.booking-step { padding: 24px 28px; }
.booking-step-title { margin-bottom: 20px; font-size: 20px; }
.booking-hero-sub { color: rgba(255,255,255,.82); margin: 6px 0 0; }
.booking-confirm .booking-hero-sub { color: var(--muted); }

/* ── Public booking store info (logo, address, hours, contact) ── */
.booking-hero-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.6);
  background: #fff;
  margin-bottom: 10px;
}
.store-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 14px;
}
.store-info-item { color: rgba(255,255,255,.92); text-decoration: none; }
a.store-info-item:hover { text-decoration: underline; color: #fff; }
.store-info-maps {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

/* ── Service preview card ──────────────────────────────── */
.service-preview { margin-top: 14px; }
.service-preview-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--rose-soft);
  border: 1px solid #f0d8e0;
  border-radius: 12px;
  font-size: 14px;
}
.service-preview-card strong { color: var(--rose-dark); margin-right: 4px; }
.service-preview-card span { color: var(--muted); }
.service-preview-desc { width: 100%; margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* ── Service catalog picker (step 1) ───────────────────── */
.svc-catalog-hint { margin: -10px 0 14px; font-size: 13px; }
.svc-cat { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 8px; }
.svc-cat > summary {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--rose-dark);
}
.svc-cat-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.svc-cat[open] > summary { border-bottom: 1px solid var(--line); }
.svc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 12px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.svc-card:hover { border-color: var(--rose); box-shadow: 0 1px 6px rgba(190, 24, 93, .12); }
.svc-card.selected { border-color: var(--rose); background: var(--rose-soft); }
.svc-card-photo { width: 100%; height: 86px; object-fit: cover; border-radius: 8px; margin-bottom: 2px; }
.svc-card-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.svc-card-meta { font-size: 12px; color: var(--muted); }
.svc-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
}
.svc-card.selected .svc-card-check { display: flex; }
.svc-card.selected .svc-card-photo { outline: 2px solid var(--rose); outline-offset: -2px; }

/* ── Technician photo cards (step 1) ───────────────────── */
.tech-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}
.tech-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.tech-card:hover { border-color: var(--rose); box-shadow: 0 1px 6px rgba(190, 24, 93, .12); }
.tech-card.selected { border-color: var(--rose); background: var(--rose-soft); }
.tech-card-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.tech-card-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-soft);
  color: var(--rose);
  font-size: 22px;
  font-weight: 700;
}
.tech-card-name { font-weight: 600; font-size: 13px; line-height: 1.3; text-align: center; }
.tech-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
}
.tech-card.selected .tech-card-check { display: flex; }
.tech-card.selected .tech-card-photo { outline: 2px solid var(--rose); outline-offset: -2px; }

/* ── Open-times slot cards (step 1) ────────────────────── */
.open-times-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.open-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.time-slot {
  padding: 10px 6px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: border-color .12s, background .12s;
}
.time-slot:hover { border-color: var(--rose); }
.time-slot.selected { border-color: var(--rose); background: var(--rose); color: #fff; }
.slots-hint { grid-column: 1 / -1; margin: 2px 0; font-size: 13px; }

/* ── Step 2 summary bar ────────────────────────────────── */
.service-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--rose-soft);
  border: 1px solid #f0d8e0;
  border-radius: 10px;
  font-size: 13px;
  color: var(--rose-dark);
  font-weight: 600;
}

/* ── Step navigation row ───────────────────────────────── */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}

/* ── Confirmation screen ───────────────────────────────── */
.booking-confirm {
  max-width: 480px;
  margin: 40px auto;
  text-align: center;
  padding: 0 18px 48px;
}
.confirm-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: #d4f0dc;
  color: #1f7a3a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 900;
}
.booking-confirm h1 { font-size: clamp(26px, 5vw, 40px); margin-bottom: 8px; }
.confirm-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 0;
  margin: 22px 0 20px;
  box-shadow: var(--shadow);
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.confirm-row:last-child { border-bottom: 0; }
.confirm-row span { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.confirm-photo-section {
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.confirm-photo-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin: 0 0 10px;
}
.confirm-photo-section .reference-preview {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 10px; margin-bottom: 12px; display: block;
}
.confirm-photo-replace {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-bottom: 8px;
}
.confirm-photo-replace input[type="file"] { display: none; }
.confirm-photo-section .btn-sm { margin-top: 4px; }

/* ── Nav improvements (declutter) ─────────────────────── */
nav button { padding: 9px 12px; margin-bottom: 3px; font-size: 14px; }
nav button:hover:not(.active) { background: rgba(0,0,0,.04); color: var(--ink); }
.nav-section { margin: 12px 9px 3px; font-size: 10px; }

/* ── Store color dot ──────────────────────────────────── */
.store-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}
.store-bar-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  vertical-align: middle;
  margin-right: 5px;
}

/* ── Link-style button ────────────────────────────────── */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--rose-dark);
  font-size: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--rose); }

/* ── KPI report cards ────────────────────────────────── */
.card.kpi-card small {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 700;
}
.card.kpi-up small { color: var(--green); }
.card.kpi-down small { color: var(--danger); }
.card.kpi-up { border-top: 3px solid var(--green); }
.card.kpi-down { border-top: 3px solid var(--danger); }

/* ── Filter bar panel ────────────────────────────────── */
.filter-bar-panel {
  padding: 14px 18px;
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
.filter-bar-panel + .panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-actions button { white-space: nowrap; }

/* ── Muted chip / inline text ────────────────────────── */
small.muted { color: var(--muted); font-weight: 500; font-size: 13px; }

/* ── Pipeline board — enhanced swimlane ───────────────── */
.booking-column { min-width: 200px; }
.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 8px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 10px;
}
.column-header h3 { font-size: 13px; font-weight: 900; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.col-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.col-badge.badge-alert { background: var(--amber-soft); color: var(--amber); }
.booking-column.checkout-column .column-header { border-bottom-color: var(--amber); }
.empty-lane { font-size: 13px; text-align: center; padding: 16px 0; }
.pipeline-clock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: #f5f5f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
code.customer-code-badge {
  display: inline-block; font-family: monospace; font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); vertical-align: middle; margin-left: 4px;
}
/* Customer/Staff list Name cell (#48/#52 parity) — a small avatar for warmth + scannability,
   mirroring the phone's .m-init monogram + tech photos. */
.cust-name-cell { display: flex; align-items: flex-start; gap: 10px; }
.cust-name-main { min-width: 0; }
.client-avatar {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--rose); background: var(--rose-soft); border: 1px solid var(--line);
  margin-top: 1px;
}
/* Staff list avatar (#52) — real booking photo, initials fallback; same footprint as .client-avatar. */
.list-avatar {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-top: 1px;
}
.list-avatar.mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--rose); background: var(--rose-soft);
}
#pipelineClock { font-weight: 800; color: var(--ink); }
.clock-margin { color: var(--muted); font-size: 12px; }
.time-override-ctrl {
  display: flex; align-items: center; gap: 5px;
  margin-left: 4px; padding-left: 8px;
  border-left: 1px solid var(--line);
}
.time-override-ctrl input[type="date"],
.time-override-ctrl input[type="time"] {
  padding: 3px 6px; font-size: 12px; height: 26px;
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink);
}
.time-override-ctrl input[type="date"] { width: 116px; }
.time-override-ctrl input[type="time"] { width: 86px; }
.time-override-ctrl input[type="date"]:focus,
.time-override-ctrl input[type="time"]:focus { border-color: var(--rose); outline: none; }
.time-override-badge {
  display: inline-block; padding: 1px 6px;
  background: #fef3c7; border: 1px solid #f59e0b;
  border-radius: 4px; font-size: 11px; font-weight: 700;
  color: #92400e; margin-right: 3px; vertical-align: middle;
}
.time-override-active { color: #b45309; font-weight: 800; }
.pipeline-alerts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 6px;
}
.pipeline-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.alert-checkin { background: #fffbe8; color: #b45309; border: 1px solid #ffe082; }
.alert-cashout { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-cashout-overdue { background: #fff1f2; color: #be123c; border: 1px solid #fda4af; }
.booking-card.card-cashout-overdue { border-left: 3px solid #be123c; background: #fff8f8; }
.store-mini-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.card-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.card-time { font-size: 15px; flex: 1; }
.card-id { font-size: 10px; padding: 2px 5px; background: #f0f0f0; color: var(--muted); border-radius: 4px; }
.card-client { display: block; font-weight: 800; font-size: 14px; margin-bottom: 2px; }
.card-service { display: block; color: var(--ink); font-size: 12px; margin-bottom: 2px; }
.card-tech, .card-store { display: block; font-size: 12px; color: var(--muted); }
.card-note {
  display: block;
  font-size: 11px;
  background: var(--amber-soft);
  color: var(--amber);
  padding: 3px 6px;
  border-radius: 5px;
  margin: 4px 0;
}
.booking-card.card-late { border-left: 3px solid var(--danger); }

/* ── Inventory search + thumbnail ─────────────────────── */
.search-bar { margin-bottom: 14px; }
.search-bar input {
  width: min(320px, 100%);
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}
.search-bar input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(179,75,106,.12); }
.inv-thumb {
  float: left;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin: 0 10px 4px 0;
}
.inv-photo-preview {
  max-width: 180px;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-top: 6px;
  display: block;
}

/* ── Sortable column headers ───────────────────────────── */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable::after { content: " ⇅"; opacity: 0.35; font-size: 0.68rem; }
th.sort-asc::after  { content: " ↑"; opacity: 1; color: var(--rose); }
th.sort-desc::after { content: " ↓"; opacity: 1; color: var(--rose); }
th.sortable:hover { background: rgba(0,0,0,0.03); }

/* ── Year-over-Year trend chart ────────────────────────── */
.yoy-column { flex: 1; min-width: 36px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trend-bar-pair { display: flex; gap: 2px; align-items: flex-end; height: 100%; width: 100%; }
.trend-bar-half { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 3px; }
.trend-bar-half span { display: block; min-height: 3px; border-radius: 3px 3px 0 0; transition: height .2s; }
.trend-bar-half.prior span { background: #dbc5d8; }
.trend-bar-half.current span { background: var(--rose, #8b2252); }
.yoy-legend { font-size: 0.73rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 2px; }
.yoy-prior-dot, .yoy-current-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.yoy-prior-dot { background: #dbc5d8; }
.yoy-current-dot { background: var(--rose, #8b2252); }

/* ── Reports filter bar ────────────────────────────────── */
.reports-filter { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.reports-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.reports-filter input[type="date"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; }
.reports-filter .btn-row { display: flex; gap: 8px; align-items: center; margin-top: auto; }

/* ── #172 Calendar colour settings ─────────────────────────────────────────────────────────────────
   Both pickers PREVIEW the result rather than showing an abstract swatch grid: the chip is not what
   anyone will ever see on a calendar, so choosing from chips alone is choosing blind. */
.cat-colour-table td { vertical-align: middle; }
.cat-preview { border-left: 4px solid var(--svc, #8b8189); background: color-mix(in srgb, var(--svc, #8b8189) 12%, transparent);
  border-radius: 8px; padding: 6px 10px; max-width: 260px; }
.cat-preview b { display: block; font-size: 13px; font-weight: 700; }
.cat-preview small { display: block; font-size: 12px; color: var(--ink2, #5c5460); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.cat-chip.on { border-color: var(--ink, #2c2430); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.cat-state { white-space: nowrap; }
/* The technician swatch on the Staff row — a button, because it opens its own picker and must not
   also open the staff record behind it. */
.tech-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
.tech-colour-preview { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
  background: var(--wash, #faf6f8); border: 1px solid var(--hair, #e9dfe4); }
.cal-who-preview { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   #176 — THE SHELL: an icon rail and a contextual panel.
   Replaces the 260px rail that listed all 26 screens at once. Appended last so it
   wins over the older .shell / aside / main rules without having to hunt them down
   and delete them one at a time; the leftovers below it are inert.
   ══════════════════════════════════════════════════════════════════════════════ */
.shell {
  display: grid;
  grid-template-columns: 76px 228px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
}
/* Today has no panel. The busiest screen in the salon gets the whole width — that is
   the point of the whole layout, not a detail of it. */
.shell.no-panel { grid-template-columns: 76px minmax(0, 1fr); }

/* ── the rail ─────────────────────────────────────────────────────────────── */
.rail {
  grid-column: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  /* Pinned to the viewport, not stretched down the document. Without this the rail grows to the
     full page height, and `.rail-foot { margin-top: auto }` anchors the language toggle and the
     sign-out button to the bottom of the DOCUMENT — off-screen on any page taller than the window.
     It looked fine only while the loading skeleton was short enough to fit. */
  position: sticky; top: 0;
  height: 100vh;          /* height, not min-height: the foot has to reach the viewport's bottom */
  overflow-y: auto;       /* a short window plus six destinations still reaches the toggle */
}
.rail-mark { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; margin-bottom: 12px; flex: none; }
.rail-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rail-dest {
  width: 60px; border: 0; background: none; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px; border-radius: 12px; color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.rail-dest svg { width: 19px; height: 19px; }
/* The label is not decoration. A bare icon rail is unkind to anyone reading Vietnamese
   first, which is most of the floor — flagged when this was chosen, and kept. */
.rail-dest span { font-size: 10px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center; }
.rail-dest:hover { background: rgba(157,69,100,.07); color: var(--ink); }
.rail-dest.on { background: var(--rose); color: #fff; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.rail-foot .lang-toggle { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.rail-foot .lang-toggle button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 6px; border-radius: 999px; }
.rail-foot .lang-toggle button.on { background: var(--rose); color: #fff; }
.rail-out { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.rail-out:hover { border-color: var(--danger); color: var(--danger); }
/* The privacy link borrows .rail-out's shape but not its meaning: the danger-red hover reads as
   "this will end something", which is right for sign-out and wrong for a policy page. */
.rail-out.rail-legal { text-decoration: none; }
.rail-out.rail-legal:hover { border-color: var(--rose); color: var(--rose); }

/* ── the panel ────────────────────────────────────────────────────────────── */
.panel-col {
  grid-column: 2;
  padding: 18px 14px; background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto; max-height: 100vh; position: sticky; top: 0;
}
.panel-col[hidden] { display: none; }
.panel-title { margin: 0 6px 14px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.panel-group { margin-bottom: 16px; }
.panel-group:last-child { margin-bottom: 0; }
.panel-group h3 {
  margin: 0 6px 5px; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.panel-col button[data-view] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  padding: 7px 10px; border-radius: 9px; margin-bottom: 1px;
  transition: background .16s ease, color .16s ease;
}
.panel-col button[data-view]:hover { background: rgba(0,0,0,.035); color: var(--ink); }
.panel-col button[data-view].active { background: var(--rose-soft); color: var(--rose-dark); font-weight: 600; }

/* ── main + the top strip ─────────────────────────────────────────────────── */
main { padding: 0; min-width: 0; display: flex; flex-direction: column; }
.topstrip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 20;
}
.panel-toggle { display: none; border: 1px solid var(--line); background: var(--card); border-radius: 9px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); place-items: center; }
.strip-store { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.strip-date { font-size: 13px; color: var(--muted); }
.strip-phone { margin-left: auto; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.strip-phone:hover { color: var(--rose); }
.strip-me { display: flex; align-items: center; gap: 9px; border: 0; background: none; cursor: pointer; font: inherit; padding: 3px 4px; border-radius: 10px; }
button.strip-me:hover { background: rgba(0,0,0,.035); }
.strip-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--rose-soft); color: var(--rose-dark); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; }
.strip-who { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.strip-who strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.strip-who small { font-size: 11px; color: var(--muted); }
.topstrip .plan-pill { margin: 0; }
#message { margin: 12px clamp(16px, 3vw, 40px) 0; }
#content { padding: 22px clamp(16px, 3vw, 40px) 60px; }

/* ── narrow screens: the panel slides over, the rail never leaves ──────────── */
@media (max-width: 900px) {
  .shell, .shell.no-panel { grid-template-columns: 76px minmax(0, 1fr); }
  .panel-col {
    position: fixed; top: 0; bottom: 0; left: 76px; width: 244px; z-index: 40;
    transform: translateX(-104%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 0 40px rgba(72,41,52,.18);
  }
  body.panel-open .panel-col { transform: none; }
  /* Starts at the rail's right edge, so the rail stays live while the drawer is open. */
  body.panel-open .panel-scrim {
    display: block; position: fixed; inset: 0 0 0 76px; z-index: 35;
    background: rgba(72, 41, 52, .3);
  }
  .panel-toggle { display: grid; }
  .shell.no-panel .panel-toggle { display: none; }
  .strip-date, .strip-phone { display: none; }
}
.panel-scrim { display: none; }
@media (prefers-reduced-motion: reduce) { .panel-col { transition: none; } }

/* ── #175 desktop training ────────────────────────────────────────────────── */
.train-head h2 { margin: 4px 0 2px; }
.train-role { margin: 0 0 10px; color: var(--ink2); font-weight: 600; }
.train-bar, .tc-track { height: 6px; border-radius: 999px; background: var(--wash); overflow: hidden; margin: 12px 0 6px; }
.train-bar i, .tc-track i { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.train-list { display: flex; flex-direction: column; gap: 2px; }
.train-lesson { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
.train-lesson:last-child { border-bottom: 0; }
.train-lesson.now { background: var(--wash); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.tl-tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; }
.train-lesson.done .tl-tick { background: var(--brand); border-color: var(--brand); }
.tl-body b { display: block; font-size: 14.5px; }
.tl-body small { color: var(--ink2); }
.train-lesson.done .tl-body b { color: var(--ink2); font-weight: 500; }
.tl-state { color: var(--ink3); font-size: 12.5px; }

/* Docked bottom-right, above the FAB, so it stays put while she works on a real screen. */
.train-coach { position: fixed; right: 20px; bottom: 20px; width: min(300px, calc(100vw - 110px)); z-index: 60;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 14px;
  padding: 14px 16px 12px; box-shadow: var(--shadow-pop); }
.tc-step { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.train-coach h4 { margin: 4px 0 4px; font-size: 15px; }
.train-coach p { margin: 0; color: var(--ink2); font-size: 13.5px; }
.tc-row { display: flex; gap: 8px; margin-top: 10px; }
.tc-go { flex: 1; background: var(--brand); color: #fff; border: 0; border-radius: 9px; padding: 8px 10px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.tc-skip { background: none; border: 1px solid var(--hair); color: var(--ink2); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; }
/* The coach docks where the quick-actions button already lives, so the button steps aside for it
   rather than being buried under it. Both move together — the menu opens off the same corner. */
body.coach-on .desk-fab, body.coach-on .desk-fab-menu { right: calc(min(300px, 100vw - 110px) + 44px); }
@media (max-width: 900px) { .train-coach { right: 12px; } }