/* ===== Today board — Direction C's tonal fast-scan structure + Direction A's typographic discipline ===== */
.today-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
.today-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--space-lg); overflow-x: auto; padding-bottom: var(--space-sm); }
.staff-column { display: flex; flex-direction: column; gap: var(--space-xs); min-height: 420px; }
.staff-column-header { display: flex; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-xs); margin-bottom: var(--space-2xs); border-bottom: 1px solid var(--text); }
.staff-column-header .name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); }
.staff-column-header .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-faint); }

.booking-card {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.booking-card:hover { border-color: var(--gold-mid); transform: translateY(-1px); }
.booking-card.tone-held { background: var(--status-held-bg); }
.booking-card.tone-confirmed { background: var(--status-confirmed-bg); }
.booking-card.tone-inservice { background: var(--status-inservice-bg); }
.booking-card.tone-completed { background: var(--status-completed-bg); }
.booking-card.tone-forfeited { background: var(--status-forfeited-bg); }
.booking-card.tone-cancelled { background: var(--status-cancelled-bg); opacity: 0.72; }
.booking-card.tone-pending { background: var(--status-pending-bg); }
.booking-card .time { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.booking-card .client { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); margin: 2px 0 2px; }
.booking-card .service { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-xs); }
.booking-card .quick-actions { display: flex; gap: var(--space-2xs); margin-top: var(--space-xs); }
.booking-card .unpaid-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--status-error); margin-top: var(--space-2xs); }

.open-window { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); text-align: center; color: var(--text-faint); font-size: var(--text-xs); font-style: italic; font-family: var(--font-display); }

/* ===== dashboards ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); }
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.bar-chart { display: flex; align-items: flex-end; gap: var(--space-sm); height: 200px; padding-top: var(--space-md); }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); height: 100%; justify-content: flex-end; }
.bar-chart .bar { width: 100%; max-width: 32px; background: var(--gold-mid); transition: height var(--dur-slow) var(--ease-out); }
.bar-chart .bar-label { font-size: var(--text-xs); color: var(--text-faint); }

.legend-row { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }

/* ===== front desk responsive ===== */
@media (max-width: 640px) {
  .today-board { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
}

.mobile-tabbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-raised); border-top: 1px solid var(--border); z-index: var(--z-sticky); padding: var(--space-xs) 0; }
.mobile-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-faint); padding: var(--space-2xs) 0; }
.mobile-tabbar a.is-active { color: var(--gold-text); }
@media (max-width: 640px) { .mobile-tabbar { display: flex; } .app-main { padding-bottom: 72px; } }

/* ===== approval pop-up badge on nav ===== */
.approval-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--status-error); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--radius-pill); margin-left: auto;
}

/* =========================================================
   Phase 1 additions — composed only from the approved tokens and components
   (no new colours, fonts, radii or motion). These replace patterns the prototype
   wrote as inline styles, so the real pages stay identical in look.
   ========================================================= */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.page-head h1 { font-size: var(--text-2xl); margin-bottom: 0; }
.page-head .actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.card-title { font-size: var(--text-base); margin-bottom: var(--space-md); }
.stack > * + * { margin-top: var(--space-lg); }

.notice { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); color: var(--text); }
.notice p { color: var(--text); margin: 0; }
.card.notice-warning { background: var(--status-warning-bg); border-color: var(--status-warning); }
.card.notice-info { background: var(--status-pending-bg); border-color: var(--gold-mid); }
.card.notice-error { background: var(--status-error-bg); border-color: var(--status-error); }
.card.notice-success { background: var(--status-confirmed-bg); border-color: var(--status-confirmed); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-lg); }
.form-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--space-md); }
.input-suffix { display: flex; align-items: center; gap: var(--space-xs); }
.input-suffix span { font-size: var(--text-sm); color: var(--text-faint); white-space: nowrap; }
.check-row { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xs) 0; cursor: pointer; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--gold-mid); flex-shrink: 0; }
.check-row .t { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.check-row .d { display: block; font-size: var(--text-xs); color: var(--text-faint); font-weight: 400; }
.day-picks { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.day-picks label { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-sm); min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--text); cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.day-picks input { accent-color: var(--gold-mid); }
.badge-open { color: var(--status-pending); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.settings-group { display: grid; grid-template-columns: 0.7fr 1.6fr; gap: var(--space-xl); padding: var(--space-xl) 0; border-top: 1px solid var(--border); }
.settings-group:first-of-type { border-top: 1px solid var(--text); }
.settings-group h2 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
@media (max-width: 860px) { .settings-group { grid-template-columns: 1fr; gap: var(--space-md); } }

.row-actions { display: flex; gap: var(--space-2xs); justify-content: flex-end; }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table .muted { color: var(--text-faint); }
.data-table tr.is-inactive td { color: var(--text-faint); }
.cat-head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.cat-head h2 { font-size: var(--text-xl); margin: 0; }
.cat-head .icon-lg { color: var(--gold-mid); }
.cat-head .actions { margin-left: auto; display: flex; gap: var(--space-2xs); }

.checklist-row { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--border); }
.checklist-row:last-child { border-bottom: none; }
.checklist-row .mark { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.checklist-row .mark .icon { width: 22px; height: 22px; }
.checklist-row .mark.done { color: var(--status-confirmed); }
.checklist-row .mark.todo { color: var(--text-faint); }
.checklist-row .body { flex: 1; min-width: 0; }
.checklist-row .body strong { color: var(--text); }
.checklist-row .body p { margin: 2px 0 0; font-size: var(--text-sm); }
.checklist-row .side { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-xs); }

.diff-old { text-decoration: line-through; color: var(--text-faint); }
.kv { display: grid; grid-template-columns: minmax(120px, 0.6fr) 1.4fr; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.kv dt { color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-xs); overflow-wrap: anywhere; }
.pager { display: flex; gap: var(--space-xs); align-items: center; justify-content: flex-end; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--text-muted); }
.filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); align-items: end; margin-bottom: var(--space-md); }
.filter-bar .field { margin-bottom: 0; }
.secret-box { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--text-xl); letter-spacing: 0.04em; color: var(--text); background: var(--surface-raised); border: 1px dashed var(--gold-mid); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); display: inline-block; user-select: all; }

/* sidebar / tabbar sign-out is a POST form; make its button look exactly like the sidebar links */
.nav-form { margin: 0; }
.nav-form button { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: none; background: none; border-radius: var(--radius-sm); color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-align: left; }
.nav-form button:hover { color: var(--text); }
.mobile-tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 11px; color: var(--text-faint); padding: var(--space-2xs) 0; background: none; border: none; cursor: pointer; }
.drawer-nav a, .drawer-nav .nav-form button { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: var(--text-sm); border-radius: 0; }
.drawer-nav a.is-active { color: var(--gold-text); }

/* full logo always sits on an ivory plate, never directly on a dark surface (approved rule) */
.logo-plate { background: #FFFDF8; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); display: inline-block; }

/* =========================================================
   Phase 2 additions — bookings, calendar, approvals (approved tokens/components only)
   ========================================================= */
.booking-card { position: relative; }
.booking-card a.stretch { color: inherit; }
.booking-card a.stretch::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); }
.booking-card .quick-actions { position: relative; z-index: 1; }
.booking-card .quick-actions form { margin: 0; }
a.open-window { display: block; color: var(--text-faint); }
a.open-window:hover { border-color: var(--gold-mid); color: var(--gold-text); }

/* calendar: one column per staff member, 72px per hour */
.cal { display: grid; grid-template-columns: 56px repeat(var(--cal-cols, 4), minmax(170px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; background: var(--surface-raised); }
.cal-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm); font-family: var(--font-display); font-size: var(--text-base); color: var(--text); background: var(--surface); border-bottom: 1px solid var(--text); border-left: 1px solid var(--border); }
.cal-head.cal-gutter { border-left: none; }
.cal-gutter { position: relative; }
.cal-hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.cal-hour:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 72px); }
.cal-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 6px, var(--surface) 6px 12px); opacity: 0.85; display: flex; align-items: center; justify-content: center; }
.cal-off span { font-family: var(--font-display); font-style: italic; color: var(--text-faint); font-size: var(--text-sm); }
.cal-slot { position: absolute; left: 0; right: 0; z-index: 1; display: flex; align-items: center; padding-left: var(--space-xs); }
.cal-slot span { display: none; font-size: var(--text-xs); color: var(--gold-text); font-weight: 600; }
.cal-slot:hover { background: var(--status-completed-bg); }
.cal-slot:hover span { display: inline; }
.cal-block { position: absolute; left: 4px; right: 4px; z-index: 2; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 4px var(--space-xs); color: var(--text); }
.cal-block .client { font-size: var(--text-sm); margin: 0; line-height: 1.2; }
.cal-block .service, .cal-block .time { font-size: 11px; line-height: 1.2; }
.cal-block .status { font-size: 10px; }
.cal-buffer { position: absolute; left: 4px; right: 4px; z-index: 2; border: 1px dashed var(--status-held); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: repeating-linear-gradient(45deg, transparent 0 5px, var(--status-held-bg) 5px 10px); }
.cal-now { position: absolute; left: 0; right: 0; z-index: 4; height: 0; border-top: 2px solid var(--status-error); pointer-events: none; }

details > summary { list-style: revert; }
.check-row.has-error .t { color: var(--status-error); }

/* icons inside option labels and field labels sit inline with the text */
.check-row .t .icon, .field > label .icon, .card-title .icon, .eyebrow .icon { display: inline-block; vertical-align: -2px; }
.check-row > span { display: block; }
.field label.check-row { display: flex; text-transform: none; letter-spacing: 0; font-size: var(--text-base); font-weight: 400; color: var(--text); }
/* grid columns may shrink below their content (wide tables scroll inside .table-wrap instead of widening the page) */
.dash-grid > *, .stat-grid > * { min-width: 0; }
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stat-grid-4 { grid-template-columns: 1fr; } }