/* ═══════════════════════════════════════════════════════════════════
   LIGHT ROLLOUT — page-scoped overrides for migrated legacy pages.
   Batch 1A: Dashboard (.dash-page), Daily Operations (ops-*),
   Daily Crew Plan (.crew-page).
   Rules: token-driven, page-scoped only — never restyle shared globals.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Branded recovery screens ───────────────────────────────────────
   Error pages deliberately sit outside the authenticated application
   chrome: a broken deep link should still offer a calm, dependable way
   back into SIMCO without assuming that browser history exists. */
body.error-shell {
  min-height: 100dvh;
  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* ── Booking media: records console ───────────────────────────────── */
body.admin-page .admin-container.booking-media-page {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 0;
  background: transparent; border: 0; box-shadow: none; color: var(--text-primary);
  font-family: var(--font-admin-ui);
}
.booking-media-page__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.booking-media-page__header h1 { margin: 0; color: var(--text-primary); font-size: clamp(1.6rem, 2.5vw, 2.15rem); letter-spacing: -.04em; }
.booking-media-page__intro { max-width: 690px; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-md); line-height: 1.55; }
.booking-media-page__key { display: grid; flex: 0 0 auto; gap: 3px; min-width: 170px; padding: 10px 14px; color: var(--text-muted); background: var(--surface-subtle); border-left: 2px solid var(--brand-primary); font-size: var(--text-xs); }
.booking-media-page__key strong { color: var(--green-deep); font-size: var(--text-sm); letter-spacing: .02em; }
.booking-media-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--space-4); padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--surface-base); font-size: var(--text-sm); line-height: 1.45; }
.booking-media-notice__mark { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: var(--status-completed); }
.booking-media-notice--success { background: var(--green-wash); border-color: var(--brand-primary-border); }
.booking-media-notice--error { background: var(--danger-soft); border-color: var(--danger); }
.booking-media-notice--error .booking-media-notice__mark { background: var(--danger); }
.booking-media-layout { display: grid; gap: var(--space-4); }
.booking-media-section { padding: var(--space-5); margin: 0; }
.booking-media-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.booking-media-section__header h2 { margin: 0; color: var(--text-primary); font-size: var(--text-lg); letter-spacing: -.02em; }
.booking-media-section__count { padding: 4px 8px; color: var(--text-muted); background: var(--surface-muted); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
.booking-media-section__hint { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.booking-media-section__records { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.booking-media-record { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3); background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.booking-media-record:hover { border-color: var(--brand-primary-border); transform: translateY(-1px); }
.booking-media-record--hidden { background: var(--surface-subtle); }
.booking-media-record__image { display: block; height: 132px; overflow: hidden; background: var(--surface-muted); border-radius: var(--radius-sm); }
.booking-media-record__image:focus-visible { outline: 2px solid var(--green-action); outline-offset: 3px; }
.booking-media-record__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); }
.booking-media-record__image:hover img { transform: scale(1.035); }
.booking-media-record__body { min-width: 0; }
.booking-media-record__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.booking-media-record__meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.booking-media-record__filename { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.booking-media-record__id { color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; white-space: nowrap; }
.booking-media-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.booking-media-page .form-group { min-width: 0; margin: 0; }
body.admin-page .booking-media-page .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary) !important; font-size: var(--text-xs); font-weight: 700; }
.booking-media-page .form-group label span { color: var(--text-muted); font-weight: 500; }
.booking-media-page .form-group input, .booking-media-page .form-group select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; color: var(--text-primary); background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.booking-media-detail-grid__submit { grid-column: 1 / -1; }
.booking-media-detail-grid .btn, .booking-media-record__actions .btn { min-height: 34px; padding: 6px 12px; font-size: var(--text-xs); }
.booking-media-record__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.booking-media-record__actions form { margin: 0; }
.booking-media-remove { color: var(--danger) !important; }
.booking-media-remove:hover { background: var(--danger-soft) !important; border-color: var(--danger) !important; }
.booking-media-upload { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-3); background: var(--surface-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.booking-media-upload__label { display: grid; grid-column: 1 / -1; gap: 3px; color: var(--text-primary); font-size: var(--text-sm); font-weight: 700; }
.booking-media-upload__label small { color: var(--text-muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.booking-media-upload__submit { grid-column: 1 / -1; }
.booking-media-upload__submit .btn { min-width: 160px; min-height: 38px; white-space: nowrap; }
.booking-media-reorder { display: flex; align-items: end; gap: var(--space-3); padding: var(--space-3); background: var(--green-wash); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-md); }
.booking-media-reorder .form-group { flex: 1; }
.booking-media-reorder .field-hint { margin: 5px 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }
.booking-media-reorder .btn { min-height: 38px; white-space: nowrap; }
.booking-media-journey { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.booking-media-journey__label { display: block; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.booking-media-journey strong { color: var(--green-deep); font-size: var(--text-sm); }
.booking-media-journey p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.4; }
.booking-media-preview { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--nav-canvas); border-radius: var(--radius-md); }
.booking-media-preview .ui-eyebrow { color: var(--brand-primary); }
.booking-media-preview strong, .booking-media-preview span { display: block; }
.booking-media-preview strong { color: var(--nav-text); font-size: var(--text-md); }
.booking-media-preview span { margin-top: 3px; color: var(--nav-text-muted); font-size: var(--text-xs); }
.booking-media-preview .btn { min-height: 40px; color: var(--nav-text); background: transparent; border-color: var(--nav-text-muted); white-space: nowrap; }
.booking-media-preview .btn:hover { color: var(--brand-on-primary); background: var(--brand-primary); border-color: var(--brand-primary); }
@media (max-width: 900px) {
  .booking-media-record { grid-template-columns: 1fr; gap: var(--space-3); }
  .booking-media-record__image { height: 180px; }
}
@media (max-width: 767px) {
  body.admin-page .admin-container.booking-media-page { padding: 0 4px; }
  .booking-media-page__header { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .booking-media-page__key { width: 100%; min-width: 0; box-sizing: border-box; }
  .booking-media-section { padding: var(--space-4) var(--space-3); }
  .booking-media-record__image { height: 185px; }
  .booking-media-detail-grid, .booking-media-upload { grid-template-columns: 1fr; }
  .booking-media-page .form-group input,
  .booking-media-page .form-group select { min-height: 44px; }
  .booking-media-upload__submit .btn, .booking-media-detail-grid__submit .btn { width: 100%; min-height: 44px; }
  .booking-media-record__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-media-record__actions form, .booking-media-record__actions .btn { width: 100%; }
  .booking-media-record__actions .btn { min-height: 44px; }
  .booking-media-reorder, .booking-media-journey, .booking-media-preview { align-items: stretch; flex-direction: column; }
  .booking-media-reorder .btn, .booking-media-journey .btn, .booking-media-preview .btn { width: 100%; min-height: 44px; }
}
body.error-shell .header {
  min-height: 76px;
  padding: 0;
  background: var(--nav-canvas);
  border: 0;
  box-shadow: none;
}
body.error-shell .header .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 1280px;
  min-height: 76px;
  padding: 0 32px;
}
body.error-shell .logo-link {
  display: inline-flex;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
}
body.error-shell .logo-bg {
  display: block;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
body.error-shell .logo {
  display: block;
  width: 122px;
  max-width: 122px;
  max-height: none;
}
body.error-shell .main-content {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 40px 0 56px;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(31, 73, 52, .045) calc(50% - 1px), rgba(31, 73, 52, .045) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--surface-canvas);
}
body.error-shell .main-content > .container {
  max-width: 1120px;
  padding: 0 32px;
}
body.error-shell .footer { display: none; }

.simco-error {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.simco-error__signal {
  position: relative;
  display: flex;
  min-height: 440px;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px;
  color: var(--nav-text);
  background: var(--nav-canvas);
  overflow: hidden;
}
.simco-error__signal::after {
  position: absolute;
  right: -66px;
  bottom: -76px;
  width: 230px;
  height: 230px;
  border: 34px solid rgba(125, 193, 66, .18);
  border-radius: 50%;
  content: "";
}
.simco-error__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--nav-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.simco-error__code {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--brand-primary);
  font-size: clamp(5.5rem, 12vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: .8;
}
.simco-error__status {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--nav-text-muted);
  font-size: var(--text-sm);
}
.simco-error__status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  content: "";
}
.error-500-page .simco-error__code { color: var(--warning); }
.error-500-page .simco-error__status::before { background: var(--warning); }
.simco-error__content {
  display: flex;
  max-width: 580px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 64px;
}
.simco-error__content h1 {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.12;
}
.simco-error__content p {
  max-width: 475px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}
.simco-error__actions {
  display: grid;
  width: max-content;
  max-width: 100%;
  gap: 12px;
  margin-top: 32px;
}
.simco-error__actions a {
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.simco-error__actions .error-action-primary {
  color: var(--brand-on-primary);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.simco-error__actions .error-action-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}
.simco-error__actions .error-action-secondary {
  color: var(--text-primary);
  background: var(--surface-base);
  border-color: var(--border-strong);
}
.simco-error__actions .error-action-secondary:hover { background: var(--surface-hover); }
.simco-error__actions a:focus-visible,
body.error-shell .logo-link:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}
.simco-error__help {
  margin-top: 28px !important;
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
}

@media (max-width: 767px) {
  body.error-shell .header { min-height: 64px; }
  body.error-shell .header .container { min-height: 64px; padding: 0 20px; }
  body.error-shell .logo { width: 106px; max-width: 106px; }
  body.error-shell .main-content { align-items: flex-start; padding: 24px 0 32px; background: var(--surface-canvas); }
  body.error-shell .main-content > .container { padding: 0 16px; }
  .simco-error { display: block; }
  .simco-error__signal { min-height: 205px; padding: 24px; }
  .simco-error__signal::after { right: -44px; bottom: -102px; width: 190px; height: 190px; }
  .simco-error__code { font-size: 6rem; }
  .simco-error__content { padding: 32px 24px 28px; }
  .simco-error__content h1 { font-size: 1.85rem; }
  .simco-error__actions { width: 100%; margin-top: 28px; }
}

/* ── Dashboard ─────────────────────────────────────────────── */
body.admin-page .dash-page .analytics-card {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
body.admin-page .dash-page .analytics-number { color: var(--text-primary); }
body.admin-page .dash-page .analytics-label { color: var(--text-muted); }
body.admin-page .dash-page .analytics-card.analytics-highlight {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-border);
}
body.admin-page .dash-page .analytics-card.analytics-highlight .analytics-number { color: var(--brand-primary-active); }

body.admin-page .dash-page .source-chart-container {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
body.admin-page .dash-page .source-chart-container h3 { color: var(--text-primary); }
body.admin-page .dash-page .chart-label { color: var(--text-secondary); }
body.admin-page .dash-page .chart-bar-container { background: var(--surface-muted); }
body.admin-page .dash-page .chart-value,
body.admin-page .dash-page .chart-total { color: var(--text-muted); }
body.admin-page .dash-page .chart-total { border-top-color: var(--border-subtle); }

body.admin-page .dash-page .filter-label { color: var(--text-secondary); }
body.admin-page .dash-page .btn-filter {
  background: var(--surface-base); border: 1px solid var(--border-default);
  color: var(--text-secondary);
}
body.admin-page .dash-page .btn-filter:hover { background: var(--surface-hover); color: var(--text-primary); }
body.admin-page .dash-page .btn-filter.active {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-border);
  color: var(--brand-primary-active); font-weight: 650;
}

/* The dashboard status controls are intentionally compact only on phones:
   six filters fit in a 3 × 2 grid while preserving a 44px touch target. */
@media (max-width: 768px) {
  body.admin-page .dash-page .status-filter-controls {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 18px;
  }
  body.admin-page .dash-page .status-filter-controls .filter-label {
    width: 100%;
  }
  body.admin-page .dash-page .status-filter-controls .filter-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  body.admin-page .dash-page .status-filter-controls .btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
  }
}

body.admin-page .dash-page .table-wrapper {
  /* Foundation comes from the shared ui-card primitive. */
  overflow: hidden;
}
@media (min-width: 769px) {
  body.admin-page .dash-page .dashboard-bookings-panel {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }
}
body.admin-page .dash-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .dash-page .bookings-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .dash-page .bookings-table tr:hover { background: var(--surface-hover); }
/* Fit all columns on desktop without horizontal scroll: tighter cells,
   wrappable email, and action buttons stacked vertically so the Action
   column stays one button wide. */
body.admin-page .dash-page .bookings-table th,
body.admin-page .dash-page .bookings-table td { padding: 0.55rem 0.5rem; }
body.admin-page .dash-page .bookings-table td[data-label="Email"] {
  overflow-wrap: anywhere; word-break: break-word; max-width: 220px;
}
body.admin-page .dash-page .bookings-table td[data-label="Phone"] { white-space: nowrap; }
body.admin-page .dash-page .bookings-table .action-buttons {
  flex-direction: column; align-items: stretch; gap: 6px;
}
body.admin-page .dash-page .bookings-table .action-buttons .btn {
  white-space: nowrap; text-align: center;
}
body.admin-page .dash-page .no-data {
  background: var(--surface-base); border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); color: var(--text-secondary); padding: 48px 24px; text-align: center;
}
/* Mobile booking cards (already light-toned) — align borders/shadows */
body.admin-page .dash-page .booking-card-mobile {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* ── Light modal variant (additive class, shared modal untouched) ── */
body.admin-page .modal-overlay.light-modal .modal-box {
  background: var(--surface-base); color: var(--text-primary);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-overlay);
}
body.admin-page .modal-overlay.light-modal .modal-box h3 { color: var(--text-primary); }
body.admin-page .modal-overlay.light-modal .modal-box p { color: var(--text-secondary); }
body.admin-page .modal-overlay.light-modal .modal-warning { color: var(--danger); }
body.admin-page .modal-overlay.light-modal .form-control {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}
body.admin-page .modal-overlay.light-modal label,
body.admin-page .modal-overlay.light-modal .sched-field-label { color: var(--text-secondary); }
body.admin-page .modal-overlay.light-modal .sched-from-booking-client {
  background: var(--surface-subtle); color: var(--text-primary); border: 1px solid var(--border-subtle);
}

/* ── Reusable light banners (dashboard + operations) ─────────── */
body.admin-page .light-banner-warning {
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--text-primary);
}
body.admin-page .light-banner-warning strong { color: var(--status-in-progress); }
body.admin-page .light-banner-warning .banner-sub { font-size: 0.85rem; color: var(--text-secondary); }
body.admin-page .light-banner-warning a.banner-link { color: var(--status-in-progress); text-decoration: underline; }
body.admin-page .light-banner-warning a.banner-cta {
  background: var(--status-in-progress); color: #fff; padding: 7px 16px; border-radius: 7px;
  font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
}

/* ── Crew Plans (list + edit) ─────────────────────────────────── */
body.admin-page .crew-page .data-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .crew-page .data-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .crew-page .data-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .crew-page .data-table tr:hover { background: var(--surface-hover); }
body.admin-page .crew-page h3 { color: var(--text-primary); }
body.admin-page .crew-page .form-control {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}
body.admin-page .crew-page label { color: var(--text-secondary); }

/* Container neutralization for legacy light-migrated pages */
body.admin-page .admin-container.dash-page,
body.admin-page .admin-container.crew-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .admin-container.dash-page h2,
body.admin-page .admin-container.crew-page h2,
body.admin-page .admin-container.dash-page .page-header h2,
body.admin-page .admin-container.crew-page h3 { color: var(--text-primary); text-shadow: none; }
body.admin-page .admin-container.crew-page p { text-shadow: none; }
body.admin-page .crew-page .btn-secondary.crew-back {
  background: var(--surface-base); color: var(--text-primary); border: 1px solid var(--border-default);
}
/* Edit link in the plans table was near-invisible (dark ghost style on a light page) */
body.admin-page .crew-page .data-table .btn-secondary.crew-edit-btn {
  background: #17221E; color: #ffffff; border: 1px solid #17221E; font-weight: 600;
}
body.admin-page .crew-page .data-table .btn-secondary.crew-edit-btn:hover {
  background: #24352e; border-color: #24352e; color: #ffffff;
}

@media (max-width: 600px) {
  body.admin-page .light-banner-warning { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.admin-page .light-banner-warning a.banner-cta { align-self: stretch; text-align: center; }
}

body.admin-page .admin-container.dash-page h2,
body.admin-page .admin-container.crew-page h2,
body.admin-page .admin-container.dash-page .page-header h2 { color: var(--text-primary) !important; }

/* ── Batch 1A correction: mobile crew-member cards (crew plan edit) ── */
@media (max-width: 767px) {
  .crew-page .member-table-wrap { overflow-x: visible !important; }
  .crew-page .member-table thead { display: none; }
  .crew-page .member-table,
  .crew-page .member-table tbody,
  .crew-page .member-table tr,
  .crew-page .member-table td { display: block; width: 100%; }
  .crew-page .member-table tr.member-row {
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .crew-page .member-table td {
    border: none !important;
    padding: 8px 0 !important;
  }
  .crew-page .member-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 4px;
  }
  .crew-page .member-table td.member-name-cell {
    font-size: 1.05rem;
    color: var(--text-primary);
    padding-bottom: 4px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 6px;
  }
  .crew-page .member-table .member-row .form-control {
    width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    font-size: 0.95rem !important;
  }
  .crew-page .member-table .member-jobsite-text { display: inline-block; padding: 10px 0; }
  .crew-page .member-table td.member-save-cell,
  .crew-page .member-table td.member-remove-cell {
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: top;
    margin-top: 6px;
  }
  .crew-page .member-table td.member-save-cell { margin-right: 6px; }
  .crew-page .member-table td.member-remove-cell form { display: block !important; width: 100%; }
  .crew-page .member-table .member-save-btn,
  .crew-page .member-table td.member-remove-cell button {
    width: 100%;
    min-height: 44px;
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
    border-radius: 8px;
  }
  .crew-page .member-table .member-save-btn:focus-visible,
  .crew-page .member-table td.member-remove-cell button:focus-visible,
  .crew-page .member-table .member-row .form-control:focus-visible {
    outline: 2px solid var(--accent-primary, #2f7d32);
    outline-offset: 2px;
  }

  /* Days-to-create selectors: 44px effective touch area */
  .crew-page .week-day-check {
    min-width: 52px;
    min-height: 44px;
    justify-content: center;
    padding: 10px 14px !important;
  }
  .crew-page .week-day-check .week-day-input { width: 20px; height: 20px; }
}

/* ── Batch 1B: Ready to Schedule, Completed Jobs, Letters, Booking detail ── */
/* ── Backup & Recovery ───────────────────────────────────────────────
   A contained, records-first treatment: the two deliberate copy paths are
   visibly distinct while schedule state remains a quiet, permanent reference. */
body.admin-page .admin-container.backup-page {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--font-admin-ui);
}
.backup-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.backup-page__header h1,
.backup-action h2,
.backup-schedule h2,
.backup-contents h2 { margin: 0; color: var(--text-primary); letter-spacing: -.035em; }
.backup-page__header h1 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.backup-page__header > div:first-child > p:last-child { max-width: 610px; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-md); line-height: 1.55; }
.backup-page__format { display: grid; flex: 0 0 auto; gap: 2px; min-width: 112px; padding: 10px 14px; border-left: 2px solid var(--brand-primary); background: var(--surface-subtle); color: var(--text-muted); font-size: var(--text-xs); }
.backup-page__format strong { color: var(--text-primary); font-size: var(--text-sm); letter-spacing: .07em; }
.backup-result { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 13px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-base); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.backup-result__mark { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; background: var(--status-completed); }
.backup-result strong, .backup-result span { display: block; }
.backup-result strong { color: var(--text-primary); margin-bottom: 2px; }
.backup-result--success { border-color: var(--brand-primary-border); background: var(--green-wash); }
.backup-result--accepted { border-color: var(--brand-primary-border); background: var(--green-wash); }
.backup-result--duplicate { border-color: rgba(91,150,232,.35); background: var(--info-soft); }
.backup-result--duplicate .backup-result__mark { background: var(--info); }
.backup-result--unknown { border-color: rgba(232,163,61,.45); background: var(--warning-soft); }
.backup-result--unknown .backup-result__mark { background: var(--warning); }
.backup-result--error { border-color: rgba(224,82,82,.38); background: var(--danger-soft); }
.backup-result--failed { border-color: rgba(224,82,82,.38); background: var(--danger-soft); }
.backup-result--error .backup-result__mark { background: var(--danger); }
.backup-result--failed .backup-result__mark { background: var(--danger); }
.backup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.backup-action { min-width: 0; padding: 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-panel); box-shadow: var(--shadow-sm); }
.backup-action--download { border-top: 3px solid var(--brand-primary); }
.backup-action--email { border-top: 3px solid var(--border-strong); }
.backup-action__topline { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.backup-action__number { display: grid; place-items: center; width: 24px; height: 24px; color: var(--green-deep); background: var(--green-wash); border-radius: 50%; font-size: 10px; }
.backup-action h2 { font-size: var(--text-xl); }
.backup-action > p { min-height: 66px; margin: var(--space-2) 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; }
.backup-action__button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; text-decoration: none; }
.backup-action form { margin: 0; }
.backup-action__note { min-height: 0 !important; margin: var(--space-3) 0 0 !important; color: var(--text-muted) !important; font-size: var(--text-xs) !important; }
.backup-unavailable { display: grid; gap: 5px; padding: 12px; border-left: 2px solid var(--warning); background: var(--warning-soft); color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.45; }
.backup-unavailable strong { color: var(--text-primary); font-size: var(--text-sm); }
.backup-unavailable code { color: var(--green-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .94em; }
.backup-schedule { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr); gap: var(--space-5); align-items: center; margin-bottom: var(--space-4); }
.backup-schedule__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.backup-schedule h2, .backup-contents h2 { font-size: var(--text-lg); }
.backup-schedule__detail { padding-left: var(--space-5); border-left: 1px solid var(--border-subtle); }
.backup-schedule__detail strong, .backup-schedule__detail span { display: block; }
.backup-schedule__detail strong { color: var(--text-primary); font-size: var(--text-sm); }
.backup-schedule__detail span { margin-top: 4px; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.backup-schedule__detail b { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.backup-schedule__detail--muted strong { color: var(--text-secondary); }
.backup-runs { margin-bottom: var(--space-4); }
.backup-runs__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.backup-runs__heading h2 { margin: 0; color: var(--text-primary); font-size: var(--text-lg); }
.backup-runs__heading > span { color: var(--text-muted); font-size: var(--text-xs); text-align: right; }
.backup-runs__list { display: grid; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.backup-run { display: grid; grid-template-columns: minmax(190px,1fr) auto minmax(120px,.55fr); align-items: center; gap: var(--space-4); padding: 12px 14px; background: var(--surface-base); }
.backup-run + .backup-run { border-top: 1px solid var(--border-subtle); }
.backup-run > div { display: grid; gap: 2px; min-width: 0; }
.backup-run > div:last-child { grid-template-columns: repeat(2,minmax(0,1fr)); color: var(--text-secondary); font-size: var(--text-xs); text-align: right; }
.backup-run strong { color: var(--text-primary); font-size: var(--text-sm); }
.backup-run div:first-child span { color: var(--text-muted); font-size: var(--text-xs); }
.backup-run__status--accepted { color: var(--status-completed); background: var(--status-completed-soft); }
.backup-run__status--failed { color: var(--danger); background: var(--danger-soft); }
.backup-run__status--unknown, .backup-run__status--claimed { color: #7a4b00; background: var(--warning-soft); }
.backup-run__blocked { grid-column: 1 / -1; margin: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--border-subtle); color: #7a4b00; font-size: var(--text-xs); line-height: 1.45; }
.backup-contents { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: var(--space-5); padding: 20px 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-subtle); }
.backup-contents ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.backup-contents li { position: relative; padding-left: 14px; }
.backup-contents li::before { position: absolute; left: 0; top: .48em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-primary); content: ""; }
@media (max-width: 1023px) and (min-width: 768px) {
  .backup-actions, .backup-schedule, .backup-contents { grid-template-columns: 1fr; }
  .backup-action > p { min-height: 0; }
  .backup-schedule__detail { padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .backup-run { grid-template-columns: minmax(190px,1fr) auto; }
  .backup-run > div:last-child { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 767px) {
  body.admin-page .admin-container.backup-page { padding: 0 4px; }
  .backup-page__header { align-items: flex-start; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
  .backup-page__format { min-width: 0; width: 100%; box-sizing: border-box; }
  .backup-actions, .backup-schedule, .backup-contents { grid-template-columns: 1fr; }
  .backup-action { padding: 20px; }
  .backup-action > p { min-height: 0; }
  .backup-action__button, .backup-action form .btn { width: 100%; }
  .backup-schedule { gap: var(--space-4); }
  .backup-schedule__detail { padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .backup-runs__heading { align-items: flex-start; flex-direction: column; }
  .backup-runs__heading > span { text-align: left; }
  .backup-run { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-2); }
  .backup-run > div:last-child { grid-column: 1 / -1; text-align: left; }
  .backup-contents { gap: var(--space-4); padding: 20px; }
  .backup-contents ul { grid-template-columns: 1fr; }
}

body.admin-page .b1b-page h2 { color: var(--text-primary); }
body.admin-page .b1b-page h3 { color: var(--text-primary); }
body.admin-page .b1b-page label { color: var(--text-secondary); }
body.admin-page .b1b-page .form-control {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}
body.admin-page .b1b-page .data-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .b1b-page .data-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .b1b-page .data-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .b1b-page .data-table tr:hover { background: var(--surface-hover); }

/* detail sections (booking detail + completed detail) */
body.admin-page .b1b-page .detail-section {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  color: var(--text-primary); box-shadow: var(--shadow-sm);
}
body.admin-page .b1b-page .detail-section h3 {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .b1b-page .detail-section a:not(.btn) { color: var(--status-completed); }
body.admin-page .b1b-page .detail-label { color: var(--text-muted); }
body.admin-page .b1b-page .detail-value,
body.admin-page .b1b-page .description-text { color: var(--text-primary); }
body.admin-page .b1b-page .edit-form .detail-section { background: var(--surface-base); }
body.admin-page .b1b-page .section-header-row h3 { color: var(--text-primary); }

/* completed jobs list table */
body.admin-page .b1b-page .cj-table thead tr { border-bottom: 1px solid var(--border-default); }
body.admin-page .b1b-page .cj-table thead th { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
body.admin-page .b1b-page .cj-table tbody tr { border-bottom: 1px solid var(--border-subtle); }
body.admin-page .b1b-page .cj-table tbody tr:hover { background: var(--surface-hover); }
body.admin-page .b1b-page .cj-muted { color: var(--text-muted); }
body.admin-page .b1b-page .cj-filter-input {
  background: var(--surface-base); color: var(--text-primary); border: 1px solid var(--border-default);
}

/* Mobile: ready-to-schedule tables become cards */
@media (max-width: 767px) {
  .b1b-page .b1b-table-wrap { overflow-x: visible !important; }
  .b1b-page .b1b-table thead { display: none; }
  .b1b-page .b1b-table,
  .b1b-page .b1b-table tbody,
  .b1b-page .b1b-table tr,
  .b1b-page .b1b-table td { display: block; width: 100%; }
  .b1b-page .b1b-table { border: none; box-shadow: none; background: transparent; }
  .b1b-page .b1b-table tr {
    background: var(--surface-base); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .b1b-page .b1b-table td { border: none !important; padding: 7px 0 !important; white-space: normal !important; }
  .b1b-page .b1b-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 3px;
  }
  .b1b-page .b1b-table td.rq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .b1b-page .b1b-table td.rq-actions .btn,
  .b1b-page .b1b-table td.rq-actions form button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    flex: 1; font-size: 0.9rem !important; padding: 10px 12px !important;
  }
  .b1b-page .b1b-table td.rq-actions form { display: flex !important; flex: 1; }
  /* Ready page create form collapses to one column */
  .b1b-page form[action="/admin/ready-to-schedule"] { grid-template-columns: 1fr !important; }
  .b1b-page form[action="/admin/ready-to-schedule"] .btn,
  .b1b-page .form-actions .btn { min-height: 44px; }
  .b1b-page .form-actions form button { min-height: 44px; }
  .b1b-page .cj-view-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .b1b-page .page-header-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Mobile: completed-jobs cards were white-on-white with only a faint shadow —
   give each card a visible border and clearer breathing room between cards. */
@media (max-width: 767px) {
  body.admin-page .b1b-page .cj-table tbody { gap: 20px; }
  body.admin-page .b1b-page .cj-table tbody tr {
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
}

/* Batch 1B fix: cj-table inherits dark .bookings-table — light overrides */
body.admin-page .b1b-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .b1b-page .bookings-table td { color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); }
body.admin-page .b1b-page .bookings-table tr:hover { background: var(--surface-hover); }
body.admin-page .b1b-page .cj-td-job, body.admin-page .b1b-page .cj-td-client { color: var(--text-primary); }

/* ── Shared light-theme secondary button ─────────────────────────────
   The dark ghost style (.admin-page .btn-secondary in style.css) is
   near-invisible on light backgrounds. Any light-migrated page opts in
   by adding `light-scope` alongside its batch class on .admin-container
   (e.g. class="admin-container b1b-page light-scope") — no per-batch
   copies of this rule are needed. */
body.admin-page .light-scope .btn-secondary {
  background: var(--surface-base); color: var(--text-primary);
  border: 1px solid var(--border-default);
}
body.admin-page .light-scope .btn-secondary:hover {
  background: var(--surface-hover); color: var(--text-primary);
}

/* ── Batch 1B correction pass ─────────────────────────────── */
/* Page anatomy: no giant outer white card; individual panels only */
body.admin-page .admin-container.b1b-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .b1b-page .page-header h2,
body.admin-page .b1b-page > h2 { color: var(--text-primary); }
/* Ready queue search: bounded on desktop, full width on mobile */
.b1b-page .rq-search { flex: 0 1 360px; min-width: 220px; max-width: 360px; height: 44px; box-sizing: border-box; }
@media (max-width: 1023px) and (min-width: 768px) { .b1b-page .rq-search { flex: 1 1 100%; max-width: none; } }
@media (max-width: 767px) {
  .b1b-page .rq-search { max-width: none; width: 100%; }
  .b1b-page .lt-sig-clear { min-height: 44px; padding: 10px 14px; }
}
/* Completed-job photo gallery */
.b1b-page .cjd-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .b1b-page .cjd-photo-grid { grid-template-columns: 1fr; } }
.b1b-page .cjd-photo-group { background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; }
.b1b-page .cjd-photo-group h4 { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.b1b-page .cjd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.b1b-page .cjd-thumb { display: block; width: 200px; max-width: 100%; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; background: var(--surface-base); text-decoration: none; }
.b1b-page .cjd-thumb img { width: 100%; height: 160px; object-fit: contain; display: block; background: var(--surface-base); }
.b1b-page .cjd-thumb .cjd-open { display: block; text-align: center; font-size: 0.75rem; color: var(--status-completed); padding: 5px 0; border-top: 1px solid var(--border-subtle); }
@media (max-width: 700px) { .b1b-page .cjd-thumb { width: 100%; } .b1b-page .cjd-thumb img { height: 200px; } }
/* CSS-rendered read-only checklist state (replaces font-dependent glyphs) */
.b1b-page .chk { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 8px; vertical-align: -3px; border: 2px solid var(--border-default); background: var(--surface-base); position: relative; }
.b1b-page .chk-on { border-color: var(--status-completed); background: var(--status-completed); }
.b1b-page .chk-on::after { content: ""; position: absolute; left: 4px; top: 0px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Delete reads as quiet destructive next to the primary Schedule action */
.b1b-page .data-table .btn-danger, .b1b-page .b1b-table .btn-danger {
  background: transparent; color: var(--status-cancelled, #c0392b);
  border: 1px solid var(--status-cancelled, #c0392b);
}
.b1b-page .data-table .btn-danger:hover, .b1b-page .b1b-table .btn-danger:hover {
  background: var(--status-cancelled, #c0392b); color: #fff;
}

.b1b-page .rq-delete { background: transparent !important; color: var(--status-cancelled, #c0392b) !important; border: 1px solid var(--status-cancelled, #c0392b) !important; }
.b1b-page .rq-delete:hover { background: var(--status-cancelled, #c0392b) !important; color: #fff !important; }

/* ── Batch 2A: Quotes (Send Quote) + Incoming Requests list/detail ── */
body.admin-page .admin-container.b2a-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .b2a-page h2,
body.admin-page .b2a-page .page-header h2,
body.admin-page .b2a-page h1.page-title,
body.admin-page .b2a-page h3 { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .b2a-page label { color: var(--text-secondary); }
body.admin-page .b2a-page .form-control {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}

/* tables (drafts + recent quotes on Send Quote page) */
body.admin-page .b2a-page .data-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .b2a-page .data-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .b2a-page .data-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .b2a-page .data-table tr:hover { background: var(--surface-hover); }

/* Incoming Requests table sits on a card surface */
body.admin-page .b2a-page .ir-table-wrap {
  background: var(--surface-base); box-shadow: var(--shadow-sm);
}
body.admin-page .b2a-page .ir-filter-bar { box-shadow: var(--shadow-sm); }

/* Batch 2A mobile: Send Quote form collapses to one column; tables scroll */
@media (max-width: 767px) {
  .b2a-page .quote-form .form-row { grid-template-columns: 1fr !important; }
  .b2a-page .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .b2a-page .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Batch 2A surgical: quote status semantics (display only) ── */
.b2a-page .status-badge.qs-draft     { background: #fef3c7; color: #92400e; }
.b2a-page .status-badge.qs-sent      { background: #dbeafe; color: #1d4ed8; }
.b2a-page .status-badge.qs-accepted  { background: #dcfce7; color: #14532d; }
.b2a-page .status-badge.qs-failed    { background: #fee2e2; color: #991b1b; }
.b2a-page .status-badge.qs-expired   { background: #e5e7eb; color: #4b5563; }
.b2a-page .status-badge.qs-cancelled { background: #fee2e2; color: #991b1b; }
.b2a-page .status-badge.qs-neutral   { background: #e5e7eb; color: #4b5563; }

/* ── Batch 2A surgical: Quotes mobile cards ── */
.b2a-page .qcard-list { display: none; }
/* Destructive-secondary Delete: same semantics on desktop table and mobile card */
body.admin-page .b2a-page .btn-secondary.qbtn-danger { color: #b91c1c; border-color: rgba(185, 28, 28, 0.45); }
@media (max-width: 767px) {
  .b2a-page .qtable-drafts, .b2a-page .qtable-recent { display: none; }
  .b2a-page .qcard-list { display: flex; flex-direction: column; gap: 10px; margin-top: 0.5rem; }
  .b2a-page .qcard {
    background: var(--surface-base); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 0.9rem 1rem; box-shadow: var(--shadow-sm);
  }
  .b2a-page .qcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
  .b2a-page .qcard-date { font-size: 0.78rem; color: var(--text-muted); }
  .b2a-page .qcard-title { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
  .b2a-page .qcard-meta { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
  .b2a-page .qcard-amount { font-weight: 700; color: var(--text-primary); margin-top: 6px; }
  .b2a-page .qcard-actions { display: flex; gap: 8px; margin-top: 10px; }
  .b2a-page .qcard-btn { flex: 1 1 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body.admin-page .b2a-page .qcard-btn.qcard-btn-danger { color: #b91c1c; border-color: rgba(185, 28, 28, 0.45); }
  .b2a-page .qcard-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: 0.84rem; color: var(--text-secondary); }
}


/* ── Batch 2B: Quick Quote Engine ─────────────────────────── */
body.admin-page .admin-container.b2b-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .b2b-page h2,
body.admin-page .b2b-page .page-header h2,
body.admin-page .b2b-page h3 { color: var(--text-primary) !important; text-shadow: none; }
/* Card foundation comes from ui-card/ui-panel; retain only Quote Engine layout. */
body.admin-page .b2b-page .qe-card { min-width: 0; max-width: 100%; }
/* dark .admin-page .form-group label outranks .qe-label — rescope */
body.admin-page .b2b-page .form-group label,
body.admin-page .b2b-page label.qe-label { color: var(--text-secondary); }
body.admin-page .b2b-page .form-group label.qe-task-check,
body.admin-page .b2b-page .qe-task-check span { color: var(--text-primary); }


/* ── Batch 2A correction pass: Quote Engine mobile usability ── */
@media (max-width: 767px) {
  /* Service controls: full-width selector, toggles stacked beneath */
  .b2b-page .qe-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .b2b-page .qe-flex-grow { min-width: 0; width: 100%; }
  .b2b-page .qe-select { width: 100%; min-height: 44px; }
  .b2b-page .qe-row .qe-toggle-group { flex-direction: row; align-items: center; gap: 0.75rem; min-height: 44px; flex-wrap: wrap; }
  .b2b-page .qe-row .qe-toggle-group .qe-label { margin: 0; flex: 1 1 auto; }
  /* 44px effective touch targets.
     The visible switch stays 44x24 (track) with an 18px knob; the tap area
     is extended invisibly to >=44px via ::after, not by enlarging the control. */
  .b2b-page .qe-toggle { width: 44px; height: 24px; }
  .b2b-page .qe-toggle::after { content: ''; position: absolute; inset: -10px 0; }
  .b2b-page .qe-intel-tab,
  .b2b-page .qe-client-tab { min-height: 44px; padding: 0.5rem 0.9rem; }
  .b2b-page .crew-mode-btn { min-height: 44px; padding: 0.5rem 1rem; }
  .b2b-page .crew-margin-btn { min-height: 44px; min-width: 52px; padding: 0.5rem 0.6rem; }
  .b2b-page .crew-margin-presets { display: flex; flex-wrap: wrap; gap: 8px; }
  .b2b-page .qe-btn { min-height: 44px; }
  .b2b-page .qe-input, .b2b-page .crew-def-input, .b2b-page .crew-misc-input { min-height: 44px; }
  .b2b-page .qe-task-check { min-height: 44px; display: flex; align-items: center; }
}

/* Desktop: keep the Service Type select fully contained in its panel while
   readable. The select fills its column (never a fixed width) and the left
   grid column gets a restrained minimum on wide screens. */
.b2b-page .qe-select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.b2b-page .qe-row .qe-flex-grow { min-width: 0; }
@media (min-width: 1400px) {
  .b2b-page .qe-layout { grid-template-columns: minmax(310px, 1fr) minmax(370px, 1.6fr) minmax(340px, 380px); }
}
/* Service card: stack the select above the On Site toggle so the full
   option text fits inside the left panel with its chevron visible. */
@media (min-width: 768px) {
  .b2b-page .qe-inputs-panel > .qe-card:first-of-type .qe-row { flex-direction: column; align-items: stretch; }
}

/* ── B2A correction: Labour & Crew Costing field grid (label collisions) ── */
.b2b-page .crew-defaults-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 0.6rem 0.75rem;
  align-items: start;
}
.b2b-page .crew-defaults-bar .crew-def-field {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  align-self: start;
}
.b2b-page .crew-defaults-bar .crew-def-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  overflow: visible;
  text-overflow: clip;
}
.b2b-page .crew-defaults-bar .crew-def-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  /* keep inputs aligned across a row when a neighbour label wraps to two lines */
  .b2b-page .crew-defaults-bar .crew-def-label { min-height: calc(2 * 1.3 * 0.76rem); }
}

/* ── B2A correction: worker roster responds to component width, not viewport ── */
.b2b-page .crew-table-outer { container-type: inline-size; container-name: crewtable; }
.b2b-page .crew-mode-bar { container-type: inline-size; container-name: crewmode; }

/* Wide component: keep the compact table but let it flex — never force a 700px floor */
.b2b-page .crew-table { min-width: 0; }
.b2b-page .crew-num { min-width: 56px; }
.b2b-page .crew-tfoot-row td { white-space: nowrap; }

/* Narrow component: each worker row becomes the approved stacked card */
@container crewtable (max-width: 619px) {
  .b2b-page .crew-table-scroll { border: none; overflow: visible; }
  .b2b-page .crew-table { min-width: 0 !important; width: 100%; }
  .b2b-page .crew-table thead { display: none; }
  .b2b-page .crew-table,
  .b2b-page .crew-table tbody,
  .b2b-page .crew-table tfoot,
  .b2b-page .crew-table tr { display: block; width: 100%; box-sizing: border-box; }
  .b2b-page .crew-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 0.6rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 0.6rem 0.6rem 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
  }
  .b2b-page .crew-table tbody tr td {
    display: flex; flex-direction: column; gap: 0.12rem;
    padding: 0; border: none; min-width: 0;
  }
  .b2b-page .crew-table tbody tr td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .b2b-page .crew-table tbody tr td[data-label="Worker"] { grid-column: 1 / -1; padding-right: 2rem; }
  .b2b-page .crew-table tbody tr td[data-label="Revenue"] { align-items: flex-end; }
  .b2b-page .crew-table tbody tr .crew-td-remove {
    position: absolute; top: 0.45rem; right: 0.45rem;
    grid-column: unset; display: block; padding: 0; border: none;
  }
  .b2b-page .crew-table tbody tr .crew-td-remove::before { display: none; }
  .b2b-page .crew-table tbody tr .crew-tinput { min-width: 0; width: 100%; }
  .b2b-page .crew-table tbody tr .crew-num { width: 100%; text-align: left; }
  .b2b-page .crew-table tbody tr .crew-tcalc {
    font-size: 0.88rem; font-weight: 700; text-align: left; padding-right: 0;
  }
  /* Totals wrap deliberately below the cards; every label/value stays visible */
  .b2b-page .crew-tfoot-row { display: flex !important; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
  .b2b-page .crew-tfoot-row td {
    display: inline-flex !important; align-items: center;
    background: none; border-top: none; border-bottom: none;
    font-size: 0.8rem; padding: 0.4rem 0; white-space: nowrap;
  }
  .b2b-page .crew-tfoot-row td:first-child {
    width: 100%; border-top: 1px solid var(--border-default);
    padding-top: 0.5rem; margin-top: 0.25rem;
  }
  .b2b-page .crew-tfoot-row td:empty { display: none !important; }
}

/* Remove keeps a 44px effective hit target in card mode without visual change */
.b2b-page .btn-remove-worker { position: relative; }
.b2b-page .btn-remove-worker::after { content: ''; position: absolute; inset: -12px -4px -12px -20px; }

/* ── B2A correction: Equipment / Travel become real field groups ── */
@container crewmode (min-width: 300px) {
  .b2b-page .crew-mode-right {
    display: grid;
    grid-template-columns: auto minmax(46px, 1fr) auto minmax(46px, 1fr);
    align-items: center;
    gap: 0.4rem 0.4rem;
    width: auto;
  }
}
@container crewmode (max-width: 299px) {
  .b2b-page .crew-mode-right {
    display: grid;
    grid-template-columns: auto minmax(56px, 1fr);
    align-items: center;
    gap: 0.4rem 0.5rem;
    width: 100%;
  }
}
.b2b-page .crew-mode-right .crew-misc-input { width: 100%; min-width: 0; box-sizing: border-box; }
.b2b-page .crew-mode-right .crew-def-label { white-space: nowrap; }

/* ── Batch 2B: Property Intelligence (Properties, Property Detail, Assessments) ──
   Scope: .pi-page shared by .properties-page / .property-detail-page /
   .assessments-page / .assessment-form-page / .assessment-detail-page.
   Never reuses frozen Batch 2A scopes (.b2a-page / .b2b-page). */
body.admin-page .admin-container.pi-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .pi-page h2,
body.admin-page .pi-page .page-header h2,
body.admin-page .pi-page > h2,
body.admin-page .pi-page h3,
body.admin-page .pi-page h4 { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .pi-page label { color: var(--text-secondary); }
body.admin-page .pi-page .form-control,
body.admin-page .pi-page .form-input,
body.admin-page .pi-page select,
body.admin-page .pi-page textarea,
body.admin-page .pi-page input[type="text"],
body.admin-page .pi-page input[type="email"],
body.admin-page .pi-page input[type="tel"],
body.admin-page .pi-page input[type="url"],
body.admin-page .pi-page input[type="number"],
body.admin-page .pi-page input[type="password"],
body.admin-page .pi-page input[type="date"],
body.admin-page .pi-page input[type="time"],
body.admin-page .pi-page input[type="datetime-local"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}

/* tables */
body.admin-page .pi-page .bookings-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .pi-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .pi-page .bookings-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .pi-page .bookings-table tr:hover { background: var(--surface-hover); }
body.admin-page .pi-page .table-wrapper {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}

/* panels */
body.admin-page .pi-page .detail-section {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  color: var(--text-primary); box-shadow: var(--shadow-sm);
}
body.admin-page .pi-page .detail-section h3 {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .pi-page .detail-section a:not(.btn) { color: var(--status-completed); }

/* mobile card-style tables (bookings-table pattern) */
@media (max-width: 600px) {
  body.admin-page .pi-page .bookings-table { background: transparent; border: none; box-shadow: none; }
  body.admin-page .pi-page .bookings-table tr {
    background: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
  }
  body.admin-page .pi-page .bookings-table td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  body.admin-page .pi-page .bookings-table td::before { color: var(--text-muted) !important; }
}

/* ── B2B closeout corrections (presentation only) ─────────── */

/* Labelled checkbox rows: control + label sit together, ~44px target */
body.admin-page .pi-page label.pi-check-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 10px; margin: 0;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--surface-base); cursor: pointer;
  color: var(--text-primary);
}
body.admin-page .pi-page label.pi-check-row input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
  accent-color: var(--brand-primary, #7DC142); cursor: pointer;
}
body.admin-page .pi-page label.pi-check-row:focus-within {
  outline: 2px solid var(--brand-primary, #7DC142); outline-offset: 2px;
}
body.admin-page .pi-page .pi-check-text { color: var(--text-primary); font-weight: 600; }
body.admin-page .pi-page .pi-check-hint { color: var(--text-muted); font-weight: 400; }

/* Structured assessment report entries on Property Detail */
body.admin-page .pi-page .pi-report-entry {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border-subtle); padding: 12px 0;
  flex-wrap: wrap;
}
body.admin-page .pi-page .pi-report-titleline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.admin-page .pi-page .pi-report-meta {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px;
  color: var(--text-secondary); font-size: 0.9em;
}
body.admin-page .pi-page .pi-report-metalabel {
  color: var(--text-muted); font-size: 0.75em; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; margin-right: 4px;
}
body.admin-page .pi-page .pi-badge {
  border-radius: 20px; font-size: 11px; font-weight: 700;
  padding: 2px 10px; white-space: nowrap;
}
body.admin-page .pi-page .pi-badge-draft {
  background: var(--warning-soft); color: var(--status-in-progress); border: 1px solid var(--warning);
}
body.admin-page .pi-page .pi-badge-complete {
  background: var(--brand-primary-soft); color: var(--status-completed); border: 1px solid var(--brand-primary-border);
}
@media (max-width: 600px) {
  body.admin-page .pi-page .pi-report-entry { flex-direction: column; align-items: stretch; }
  body.admin-page .pi-page .pi-report-open { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* Restrained destructive-secondary action */
body.admin-page .pi-page .btn.pi-danger {
  color: var(--danger, #c0392b) !important;
  border-color: color-mix(in srgb, var(--danger, #c0392b) 45%, transparent) !important;
  background: transparent !important;
}
body.admin-page .pi-page .btn.pi-danger:hover {
  background: color-mix(in srgb, var(--danger, #c0392b) 8%, transparent) !important;
}
@media (max-width: 600px) {
  body.admin-page .pi-page .btn.pi-danger { min-height: 44px; }
}

/* Assessment top-field geometry: give Assessor Name practical width on desktop */
@media (min-width: 768px) {
  body.admin-page .assessment-detail-page .pi-report-topgrid,
  body.admin-page .assessment-form-page .pi-report-topgrid {
    grid-template-columns: minmax(300px, 1.5fr) minmax(220px, 1fr) minmax(160px, 0.9fr);
  }
}
body.admin-page .pi-page .pi-report-topgrid .form-group input,
body.admin-page .pi-page .pi-report-topgrid .form-group select {
  width: 100%; min-width: 0; box-sizing: border-box;
}

/* Mobile work-item card: notes wrap to their own full-width line under the
   description instead of squeezing into the value column */
@media (max-width: 600px) {
  body.admin-page .assessment-detail-page .bookings-table td[data-label="Description"] { flex-wrap: wrap; }
  body.admin-page .assessment-detail-page .bookings-table td[data-label="Description"] > div {
    flex-basis: 100%; text-align: left; margin-top: 4px;
  }
}

/* Photo cards: contained thumbnail, visible open + delete actions */
body.admin-page .pi-page .pi-photo-card { position: relative; max-width: 220px; }
body.admin-page .pi-page .pi-photo-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) {
  body.admin-page .pi-page .pi-photo-actions .btn { min-height: 44px; flex: 1; }
}

/* ── Batch 3: Staff Administration & Payroll (.sa-page) ──
   Scopes: .staff-list-page, .staff-edit-page, .timesheets-page,
           .payslip-requests-page, .payslip-request-detail-page
   Every rule is scoped under .sa-page; inert on any page without it. */
body.admin-page .admin-container.sa-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .payslip-request-detail-page .payslip-evidence-hash {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.admin-page .payslip-request-detail-page .payslip-delete-panel {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}

body.admin-page .payslip-request-detail-page .payslip-delete-confirmation,
body.admin-page .payslip-request-detail-page .payslip-delete-panel .btn {
  min-height: 44px;
}
body.admin-page .payslip-requests-page .status-badge {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
body.admin-page .migrated-admin.admin-list-page.payslip-requests-page .admin-inline-actions {
  margin-bottom: 14px;
}
body.admin-page .migrated-admin.admin-list-page.payslip-requests-page .admin-inline-actions .payslip-filter-tab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  min-height: 43px;
  max-height: 43px;
  padding-block: 0;
  line-height: 1.2;
}
body.admin-page .migrated-admin.admin-list-page.payslip-requests-page .admin-action-group .payslip-list-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-height: 28px;
  padding: 0 var(--space-3);
  line-height: 1.2;
  white-space: nowrap;
}
body.admin-page .sa-page h2,
body.admin-page .sa-page .page-header h2,
body.admin-page .sa-page > h2,
body.admin-page .sa-page h3,
body.admin-page .sa-page h4 { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .sa-page label { color: var(--text-secondary); }
body.admin-page .sa-page .form-control,
body.admin-page .sa-page .form-input,
body.admin-page .sa-page select,
body.admin-page .sa-page textarea,
body.admin-page .sa-page input[type="text"],
body.admin-page .sa-page input[type="email"],
body.admin-page .sa-page input[type="tel"],
body.admin-page .sa-page input[type="url"],
body.admin-page .sa-page input[type="number"],
body.admin-page .sa-page input[type="password"],
body.admin-page .sa-page input[type="date"],
body.admin-page .sa-page input[type="time"],
body.admin-page .sa-page input[type="datetime-local"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}

/* tables */
body.admin-page .sa-page .data-table,
body.admin-page .sa-page .bookings-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .sa-page .data-table th,
body.admin-page .sa-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .sa-page .data-table td,
body.admin-page .sa-page .bookings-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .sa-page .data-table tr:hover,
body.admin-page .sa-page .bookings-table tr:hover { background: var(--surface-hover); }

/* panels */
body.admin-page .sa-page .form-card {
  background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
}
body.admin-page .sa-page .form-card h3 { color: var(--text-primary); }
body.admin-page .sa-page .no-data {
  background: var(--surface-base); border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); color: var(--text-secondary); padding: 32px 20px; text-align: center;
}

/* restrained destructive-secondary */
body.admin-page .sa-page .btn-danger {
  background: transparent; border: 1px solid rgba(185, 28, 28, 0.45); color: #b91c1c;
}
body.admin-page .sa-page .btn-danger:hover {
  background: rgba(185, 28, 28, 0.08); border-color: #b91c1c; color: #991b1b;
}

/* timesheets / payroll */
body.admin-page .sa-page .ts-week-current { color: var(--brand-primary-active); border-color: var(--brand-primary-border); }
body.admin-page .sa-page .pr-owed { color: var(--text-primary); }
body.admin-page .sa-page .pr-muted,
body.admin-page .sa-page .pr-note { color: var(--text-muted); }
body.admin-page .sa-page .pr-paydetail { color: var(--status-completed); }
body.admin-page .sa-page .pr-day {
  background: var(--surface-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .sa-page button.pr-day:hover { border-color: var(--brand-primary-active); color: var(--text-primary); }
body.admin-page .sa-page .pr-day-locked {
  background: rgba(230,162,60,0.12); border-color: rgba(230,162,60,0.55); color: #a16207;
}
body.admin-page .sa-page .pr-open,
body.admin-page .sa-page .pr-locked,
body.admin-page .sa-page .pr-active { color: #a16207; background: rgba(230,162,60,0.12); border-color: rgba(230,162,60,0.5); }
body.admin-page .sa-page .pr-approved { color: var(--status-completed); background: var(--brand-primary-soft); border-color: var(--brand-primary-border); }
body.admin-page .sa-page .pr-paid { color: #14532d; background: rgba(49,135,90,0.18); border-color: rgba(49,135,90,0.45); }
body.admin-page .sa-page .pr-norate { color: #a16207; }
body.admin-page .sa-page .pr-totalrow td {
  border-top: 2px solid var(--brand-primary-border); background: var(--brand-primary-soft); color: var(--text-primary);
}
@media (max-width: 768px) {
  body.admin-page .sa-page .pr-table tr {
    background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  }
  body.admin-page .sa-page .pr-table td::before { color: var(--text-muted); }
  body.admin-page .sa-page .pr-table tfoot tr { background: var(--brand-primary-soft); border-color: var(--brand-primary-border); }
}

/* Neutralize the legacy dark .table-wrapper surface (style.css paints it
   #1a1a1a with a dark border) — the table itself carries the light surface */
body.admin-page .sa-page .table-wrapper {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}

/* Screen-reader field labels live in the markup (.sr-only spans); hide the
   decorative data-label ::before from assistive tech duplication where supported */
body.admin-page .staff-list-page .bookings-table td::before { speak: never; }

/* Desktop table geometry: short fields never wrap; email wraps only if truly
   out of room (normal word breaks) — no forced anywhere-wrapping */
@media (min-width: 769px) {
  body.admin-page .staff-list-page .bookings-table td[data-label="Phone"],
  body.admin-page .staff-list-page .bookings-table td[data-label="Type"],
  body.admin-page .staff-list-page .bookings-table td[data-label="Rate"],
  body.admin-page .staff-list-page .bookings-table td[data-label="Status"] { white-space: nowrap; }
  body.admin-page .staff-list-page .bookings-table td:last-child { width: 1%; white-space: nowrap; }
  body.admin-page .staff-list-page .staff-actions { flex-wrap: wrap; max-width: 320px; }
}

/* Staff list actions: inline on desktop, deliberate 2-col grid on mobile */
body.admin-page .staff-list-page .staff-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body.admin-page .sa-page .btn:focus-visible {
  outline: 2px solid var(--brand-primary-border, #31875a);
  outline-offset: 2px;
}

/* mobile card-style tables (bookings-table pattern)
   768px matches the global bookings-table card breakpoint in style.css */
@media (max-width: 768px) {
  body.admin-page .staff-list-page .staff-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }
  body.admin-page .staff-list-page .staff-actions form { display: block !important; width: 100%; }
  /* safe email wrapping on cards only */
  body.admin-page .staff-list-page .bookings-table td { overflow-wrap: anywhere; }
  body.admin-page .staff-list-page .staff-actions .btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; white-space: normal;
  }
}
@media (max-width: 768px) {
  body.admin-page .sa-page .bookings-table { background: transparent; border: none; box-shadow: none; }
  body.admin-page .sa-page .bookings-table tr {
    background: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
  }
  body.admin-page .sa-page .bookings-table td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  body.admin-page .sa-page .bookings-table td::before { color: var(--text-muted) !important; }
  body.admin-page .sa-page .bookings-table .btn,
  body.admin-page .sa-page .action-buttons .btn { min-height: 44px; }
  body.admin-page .sa-page .form-control,
  body.admin-page .sa-page select,
  body.admin-page .sa-page textarea { min-height: 44px; }

  /* Staff Edit mobile geometry: stack the two-column edit form into one
     readable column so Name/Email values are never truncated. Overrides the
     template's inline grid via !important; desktop layout untouched. */
  body.admin-page .staff-edit-page form[action*="/edit"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── Batch 4B: Money Surfaces (Financial, Contractor Invoices, Customer Invoices) ──
   Scope: .money-page with route classes .financial-page .contractor-invoices-page
   .contractor-invoice-detail-page .contractor-invoice-backfill-page .customer-invoices-page
   .customer-invoice-create-page .customer-invoice-detail-page */
body.admin-page .admin-container.money-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .money-page h2,
body.admin-page .money-page .page-header h2,
body.admin-page .money-page > h2,
body.admin-page .money-page h3,
body.admin-page .money-page h4 { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .money-page label { color: var(--text-secondary); }
body.admin-page .money-page .form-control,
body.admin-page .money-page .form-input,
body.admin-page .money-page select,
body.admin-page .money-page textarea,
body.admin-page .money-page input[type="text"],
body.admin-page .money-page input[type="email"],
body.admin-page .money-page input[type="tel"],
body.admin-page .money-page input[type="url"],
body.admin-page .money-page input[type="number"],
body.admin-page .money-page input[type="password"],
body.admin-page .money-page input[type="date"],
body.admin-page .money-page input[type="time"],
body.admin-page .money-page input[type="datetime-local"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}

/* tables */
body.admin-page .money-page .data-table,
body.admin-page .money-page .bookings-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .money-page .data-table th,
body.admin-page .money-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .money-page .data-table td,
body.admin-page .money-page .bookings-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .money-page .data-table tr:hover,
body.admin-page .money-page .bookings-table tr:hover { background: var(--surface-hover); }
body.admin-page .money-page .table-wrapper {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}

/* panels */
body.admin-page .money-page .detail-section {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  color: var(--text-primary); box-shadow: var(--shadow-sm);
}
body.admin-page .money-page .detail-section h3 {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .money-page .detail-section a:not(.btn) { color: var(--status-completed); }
body.admin-page .money-page .form-card {
  background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
}
body.admin-page .money-page .form-card h3 { color: var(--text-primary); }
body.admin-page .money-page .no-data {
  background: var(--surface-base); border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); color: var(--text-secondary); padding: 32px 20px; text-align: center;
}

/* financial widgets */
body.admin-page .money-page .fin-period-btn {
  background: var(--surface-base); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .money-page .fin-period-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
body.admin-page .money-page .fin-period-btn.active {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-border);
  color: var(--brand-primary-active); font-weight: 700;
}
body.admin-page .money-page .fin-period-label { color: var(--text-muted); }
body.admin-page .money-page .fin-custom-range { color: var(--text-secondary); }
body.admin-page .money-page .fin-custom-range input[type="date"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}
body.admin-page .money-page .fin-card { background: var(--surface-base); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
body.admin-page .money-page .fin-card--revenue { border-color: var(--brand-primary-border); background: var(--brand-primary-soft); }
body.admin-page .money-page .fin-card--costs { border-color: rgba(230,162,60,0.45); background: rgba(230,162,60,0.08); }
body.admin-page .money-page .fin-card--profit { border-color: rgba(37,99,235,0.35); background: rgba(37,99,235,0.06); }
body.admin-page .money-page .fin-card--loss { border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.06); }
body.admin-page .money-page .fin-card-label { color: var(--text-muted); }
body.admin-page .money-page .fin-card-value { color: var(--text-primary); }
body.admin-page .money-page .fin-card--revenue .fin-card-value { color: var(--status-completed); }
body.admin-page .money-page .fin-card--loss .fin-card-value { color: var(--danger, #dc2626); }
body.admin-page .money-page .fin-card-sub { color: var(--text-secondary); }
body.admin-page .money-page .fin-pipe-card {
  background: var(--surface-base); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
}
body.admin-page .money-page .fin-pipe-card:hover { background: var(--surface-hover); }
body.admin-page .money-page .fin-pipe-active { border-color: var(--brand-primary-border); background: var(--brand-primary-soft); }
body.admin-page .money-page .fin-pipe-label { color: var(--text-muted); }
body.admin-page .money-page .fin-pipe-count { color: var(--text-primary); }
body.admin-page .money-page .fin-pipe-total { color: var(--text-secondary); }
body.admin-page .money-page .fin-status-bar { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
body.admin-page .money-page .fin-status-step {
  background: var(--surface-base); color: var(--text-muted); border-right-color: var(--border-subtle);
}
body.admin-page .money-page .fin-status-step.done { color: var(--status-completed); background: var(--brand-primary-soft); }
body.admin-page .money-page .fin-status-step.active {
  color: var(--brand-primary-active); background: var(--brand-primary-soft); font-weight: 800;
}
body.admin-page .money-page .fin-link-card {
  background: var(--surface-base); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .money-page .fin-link-card:hover { background: var(--surface-hover); }
body.admin-page .money-page .fin-link-label { color: var(--text-muted); }
body.admin-page .money-page .fin-link-value { color: var(--text-primary); }
body.admin-page .money-page .fin-link-sub { color: var(--text-secondary); }
body.admin-page .money-page .fin-meta-label { color: var(--text-muted); }
body.admin-page .money-page .fin-meta-value { color: var(--text-primary); }

/* mobile card-style tables (bookings-table pattern) */
@media (max-width: 600px) {
  body.admin-page .money-page .bookings-table { background: transparent; border: none; box-shadow: none; }
  body.admin-page .money-page .bookings-table tr {
    background: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
  }
  body.admin-page .money-page .bookings-table td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  body.admin-page .money-page .bookings-table td::before { color: var(--text-muted) !important; }
}

/* badges that were tuned for dark backgrounds */
body.admin-page .money-page .badge-count { color: #a16207; background: rgba(230,162,60,0.15); border-color: rgba(230,162,60,0.5); }

/* money alignment + totals (Batch 4B) */
body.admin-page .money-page .data-table td.money-cell,
body.admin-page .money-page .data-table th.money-cell,
body.admin-page .money-page .bookings-table td.money-cell,
body.admin-page .money-page .bookings-table th.money-cell { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  body.admin-page .money-page .bookings-table td.money-cell { text-align: left; }
}

/* ── Batch 5: System Settings & Integrations (.system-page scope) ── */
/* ── Batch 5 core: headings, forms, tables, panels ── */
body.admin-page .admin-container.system-page {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.admin-page .system-page h2,
body.admin-page .system-page .page-header h2,
body.admin-page .system-page > h2,
body.admin-page .system-page h3,
body.admin-page .system-page h4 { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .system-page label { color: var(--text-secondary); }
body.admin-page .system-page .form-control,
body.admin-page .system-page .form-input,
body.admin-page .system-page select,
body.admin-page .system-page textarea,
body.admin-page .system-page input[type="text"],
body.admin-page .system-page input[type="email"],
body.admin-page .system-page input[type="tel"],
body.admin-page .system-page input[type="url"],
body.admin-page .system-page input[type="number"],
body.admin-page .system-page input[type="password"],
body.admin-page .system-page input[type="date"],
body.admin-page .system-page input[type="time"],
body.admin-page .system-page input[type="datetime-local"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}

/* tables */
body.admin-page .system-page .data-table,
body.admin-page .system-page .bookings-table {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .data-table th,
body.admin-page .system-page .bookings-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default);
}
body.admin-page .system-page .data-table td,
body.admin-page .system-page .bookings-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .system-page .data-table tr:hover,
body.admin-page .system-page .bookings-table tr:hover { background: var(--surface-hover); }
body.admin-page .system-page .table-wrapper {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}

/* panels */
body.admin-page .system-page .detail-section {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  color: var(--text-primary); box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .detail-section h3 {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle);
}
body.admin-page .system-page .detail-section a:not(.btn) { color: var(--status-completed); }
body.admin-page .system-page .form-card {
  background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .form-card h3 { color: var(--text-primary); }
body.admin-page .system-page .no-data {
  background: var(--surface-base); border: 1px dashed var(--border-default);
  border-radius: var(--radius-md); color: var(--text-secondary); padding: 32px 20px; text-align: center;
}

/* settings */
body.admin-page .system-page .settings-form-container {
  background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .settings-form-container h3 { color: var(--text-primary); }
body.admin-page .system-page .svc-name { color: var(--text-primary); }
body.admin-page .system-page .svc-group-label { color: var(--text-secondary); border-bottom-color: var(--border-subtle); }
body.admin-page .system-page .svc-toggle-row { border-bottom-color: var(--border-subtle); }
body.admin-page .system-page .svc-status-label { color: var(--status-completed); }
body.admin-page .system-page .svc-status-label.svc-unavailable { color: var(--danger, #dc2626); }
body.admin-page .system-page .recovery-code-display {
  background: var(--surface-subtle); border-color: var(--status-completed);
}
body.admin-page .system-page .recovery-code-display code { color: var(--status-completed); }
body.admin-page .system-page .field-hint { color: var(--text-muted); }

/* financial widgets */
body.admin-page .system-page .fin-period-btn {
  background: var(--surface-base); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .system-page .fin-period-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
body.admin-page .system-page .fin-period-btn.active {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-border);
  color: var(--brand-primary-active); font-weight: 700;
}
body.admin-page .system-page .fin-period-label { color: var(--text-muted); }
body.admin-page .system-page .fin-custom-range { color: var(--text-secondary); }
body.admin-page .system-page .fin-custom-range input[type="date"] {
  background: var(--surface-base); color: var(--text-primary); border-color: var(--border-default);
}
body.admin-page .system-page .fin-card { background: var(--surface-base); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
body.admin-page .system-page .fin-card--revenue { border-color: var(--brand-primary-border); background: var(--brand-primary-soft); }
body.admin-page .system-page .fin-card--costs { border-color: rgba(230,162,60,0.45); background: rgba(230,162,60,0.08); }
body.admin-page .system-page .fin-card--profit { border-color: rgba(37,99,235,0.35); background: rgba(37,99,235,0.06); }
body.admin-page .system-page .fin-card--loss { border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.06); }
body.admin-page .system-page .fin-card-label { color: var(--text-muted); }
body.admin-page .system-page .fin-card-value { color: var(--text-primary); }
body.admin-page .system-page .fin-card--revenue .fin-card-value { color: var(--status-completed); }
body.admin-page .system-page .fin-card--loss .fin-card-value { color: var(--danger, #dc2626); }
body.admin-page .system-page .fin-card-sub { color: var(--text-secondary); }
body.admin-page .system-page .fin-pipe-card {
  background: var(--surface-base); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .fin-pipe-card:hover { background: var(--surface-hover); }
body.admin-page .system-page .fin-pipe-active { border-color: var(--brand-primary-border); background: var(--brand-primary-soft); }
body.admin-page .system-page .fin-pipe-label { color: var(--text-muted); }
body.admin-page .system-page .fin-pipe-count { color: var(--text-primary); }
body.admin-page .system-page .fin-pipe-total { color: var(--text-secondary); }
body.admin-page .system-page .fin-status-bar { border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
body.admin-page .system-page .fin-status-step {
  background: var(--surface-base); color: var(--text-muted); border-right-color: var(--border-subtle);
}
body.admin-page .system-page .fin-status-step.done { color: var(--status-completed); background: var(--brand-primary-soft); }
body.admin-page .system-page .fin-status-step.active {
  color: var(--brand-primary-active); background: var(--brand-primary-soft); font-weight: 800;
}
body.admin-page .system-page .fin-link-card {
  background: var(--surface-base); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .system-page .fin-link-card:hover { background: var(--surface-hover); }
body.admin-page .system-page .fin-link-label { color: var(--text-muted); }
body.admin-page .system-page .fin-link-value { color: var(--text-primary); }
body.admin-page .system-page .fin-link-sub { color: var(--text-secondary); }
body.admin-page .system-page .fin-meta-label { color: var(--text-muted); }
body.admin-page .system-page .fin-meta-value { color: var(--text-primary); }

/* timesheets / payroll */
body.admin-page .system-page .ts-week-current { color: var(--brand-primary-active); border-color: var(--brand-primary-border); }
body.admin-page .system-page .pr-owed { color: var(--text-primary); }
body.admin-page .system-page .pr-muted,
body.admin-page .system-page .pr-note { color: var(--text-muted); }
body.admin-page .system-page .pr-paydetail { color: var(--status-completed); }
body.admin-page .system-page .pr-day {
  background: var(--surface-subtle); border: 1px solid var(--border-default); color: var(--text-secondary);
}
body.admin-page .system-page button.pr-day:hover { border-color: var(--brand-primary-active); color: var(--text-primary); }
body.admin-page .system-page .pr-day-locked {
  background: rgba(230,162,60,0.12); border-color: rgba(230,162,60,0.55); color: #a16207;
}
body.admin-page .system-page .pr-open,
body.admin-page .system-page .pr-locked,
body.admin-page .system-page .pr-active { color: #a16207; background: rgba(230,162,60,0.12); border-color: rgba(230,162,60,0.5); }
body.admin-page .system-page .pr-approved { color: var(--status-completed); background: var(--brand-primary-soft); border-color: var(--brand-primary-border); }
body.admin-page .system-page .pr-paid { color: #14532d; background: rgba(49,135,90,0.18); border-color: rgba(49,135,90,0.45); }
body.admin-page .system-page .pr-norate { color: #a16207; }
body.admin-page .system-page .pr-totalrow td {
  border-top: 2px solid var(--brand-primary-border); background: var(--brand-primary-soft); color: var(--text-primary);
}
@media (max-width: 768px) {
  body.admin-page .system-page .pr-table tr {
    background: var(--surface-base); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm);
  }
  body.admin-page .system-page .pr-table td::before { color: var(--text-muted); }
  body.admin-page .system-page .pr-table tfoot tr { background: var(--brand-primary-soft); border-color: var(--brand-primary-border); }
}

/* mobile card-style tables (bookings-table pattern) */
@media (max-width: 600px) {
  body.admin-page .system-page .bookings-table { background: transparent; border: none; box-shadow: none; }
  body.admin-page .system-page .bookings-table tr {
    background: var(--surface-base) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm);
  }
  body.admin-page .system-page .bookings-table td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  body.admin-page .system-page .bookings-table td::before { color: var(--text-muted) !important; }
}

/* badges that were tuned for dark backgrounds */
body.admin-page .system-page .badge-count { color: #a16207; background: rgba(230,162,60,0.15); border-color: rgba(230,162,60,0.5); }

/* ── Batch 5: Reminders, Notifications, Backup, Inbound ── */
body.admin-page .system-page .sh-section {
  background: var(--surface-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
body.admin-page .system-page .sh-section-title { color: var(--text-primary); }
body.admin-page .system-page h1,
body.admin-page .system-page h1.page-title { color: var(--text-primary) !important; text-shadow: none; }
body.admin-page .system-page .sh-table th {
  background: var(--surface-subtle); color: var(--text-muted);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-default); padding: 8px 10px;
}
body.admin-page .system-page .sh-table td {
  color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); padding: 8px 10px;
}
body.admin-page .system-page .sh-table tr:hover { background: var(--surface-hover); }

/* Mobile: the 3-column Scheduler Health table squeezed into multi-line date
   wraps with the Status column clipped off-screen — stack each task as a card. */
@media (max-width: 640px) {
  body.admin-page .system-page .sh-health-table thead { display: none; }
  body.admin-page .system-page .sh-health-table,
  body.admin-page .system-page .sh-health-table tbody,
  body.admin-page .system-page .sh-health-table tr,
  body.admin-page .system-page .sh-health-table td { display: block; width: 100%; }
  body.admin-page .system-page .sh-health-table tr {
    background: var(--surface-base); border: 1px solid var(--border-default);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  }
  body.admin-page .system-page .sh-health-table td {
    border: none; padding: 5px 0; white-space: normal; word-break: break-word;
  }
  body.admin-page .system-page .sh-health-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px;
  }
}
/* badge palettes tuned for light surfaces */
body.admin-page .system-page .sh-badge-payg { background: var(--info-soft); color: #2458a6; border-color: rgba(53,120,200,.35); }
body.admin-page .system-page .sh-badge-abn { background: var(--brand-primary-soft); color: var(--brand-primary-active); border-color: var(--brand-primary-border); }
body.admin-page .system-page .sh-badge-danger { background: var(--danger-soft); color: #b03030; border-color: rgba(224,82,82,.4); }
body.admin-page .system-page .sh-badge-warn { background: var(--warning-soft); color: #a16207; border-color: rgba(199,131,24,.4); }

/* Batch 5: mobile touch targets — important actions ≥44px */
@media (max-width: 600px) {
  body.admin-page .system-page .btn,
  body.admin-page .system-page button[type="submit"],
  body.admin-page .system-page input[type="submit"],
  body.admin-page .system-page button { min-height: 44px; }
}

/* ── Batch 5 closeout: Xero Sync Log — labelled mobile cards ≤767px ── */
@media (max-width: 767px) {
  body.admin-page .xero-synclog-page .xero-synclog-scroll { overflow-x: visible !important; }
  body.admin-page .xero-synclog-page .xero-synclog-table { display: block; }
  body.admin-page .xero-synclog-page .xero-synclog-table thead { display: none; }
  body.admin-page .xero-synclog-page .xero-synclog-table tbody { display: block; }
  body.admin-page .xero-synclog-page .xero-synclog-table tr {
    display: block;
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
  }
  body.admin-page .xero-synclog-page .xero-synclog-table td {
    display: block;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-bottom: 1px dashed var(--border-subtle);
    padding: 6px 0;
  }
  body.admin-page .xero-synclog-page .xero-synclog-table td:last-child { border-bottom: none; }
  body.admin-page .xero-synclog-page .xero-synclog-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
}

/* ── Batch 6: Authentication & Error States (.auth-page scope) ──
   Scope: admin login, employee login, forgot-password, 404/500 pages.
   Tightly scoped — must never affect Batch 1–5 frozen pages. */
body.admin-page .login-container.auth-page {
  background: var(--surface-base) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm) !important;
}
body.admin-page .login-container.auth-page h2 { color: var(--text-primary); text-shadow: none; }
body.admin-page .login-container.auth-page .form-group label { color: var(--text-secondary); text-shadow: none; }
body.admin-page .login-container.auth-page .form-group input {
  background: var(--surface-base);
  border-color: var(--border-default);
  color: var(--text-primary);
  min-height: 44px;
}
body.admin-page .login-container.auth-page .form-group input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}
body.admin-page .login-container.auth-page .btn-primary { min-height: 44px; }
body.admin-page .login-container.auth-page .reset-intro { color: var(--text-secondary); }
body.admin-page .login-container.auth-page .field-hint { color: var(--text-muted); }
body.admin-page .login-container.auth-page .forgot-password-link a { color: var(--brand-primary-active); }
body.admin-page .login-container.auth-page .password-toggle-btn { color: var(--text-muted); min-width: 44px; min-height: 44px; }
body.admin-page .login-container.auth-page .password-toggle-btn:hover { color: var(--text-primary); }
body.admin-page .auth-page .alert-error {
  background: var(--danger-soft);
  border: 1px solid rgba(224, 82, 82, 0.4);
  color: #a03030;
}
body.admin-page .auth-page .alert-error ul { margin: 0; padding-left: 18px; }
body.admin-page .auth-page .alert-success {
  background: var(--success-soft);
  border: 1px solid rgba(85, 180, 106, 0.4);
  color: #256b42;
}

/* employee login card */
body.admin-page .emp-login-wrap { max-width: 420px; margin: 60px auto; padding: 0 16px; }
body.admin-page .emp-login-card {
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
body.admin-page .emp-login-card .emp-login-title {
  text-align: center; margin: 0 0 8px; font-size: 1.6rem; color: var(--text-primary);
}
body.admin-page .emp-login-card .emp-login-sub {
  text-align: center; color: var(--text-muted); font-size: 0.95rem; margin: 0 0 24px;
}
body.admin-page .emp-login-card form { display: flex; flex-direction: column; gap: 16px; }
body.admin-page .emp-login-card .form-group label { color: var(--text-secondary); }
body.admin-page .emp-login-card .form-control {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  min-height: 44px;
}
body.admin-page .emp-login-card .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-soft);
}
body.admin-page .emp-login-card .btn-primary { width: 100%; padding: 12px; font-size: 1.05rem; min-height: 44px; }
body.admin-page .emp-login-card .emp-login-note p { color: var(--text-muted); font-size: 0.9rem; text-align: center; margin: 20px 0 0; line-height: 1.5; }
body.admin-page .emp-login-card .password-toggle-btn { color: var(--text-muted); min-width: 44px; min-height: 44px; }
body.admin-page .emp-login-card .password-toggle-btn:hover { color: var(--text-primary); }
body.admin-page .emp-login-card .emp-login-note { border-top-color: var(--border-subtle); }

/* Auth/error pages have no sidebar: remove the 240px shell gutter and the
   legacy photo backdrop it exposes. Keyed on .auth-page so it is inert on
   every Batch 1-5 page. */
/* Wide admin tables must scroll inside their wrapper at tablet/desktop widths.
   The legacy rule `.admin-page .table-wrapper { overflow: hidden }` (style.css)
   clipped action buttons with no way to reach them; only some page scopes had
   patched this. Media-scoped so the ≤768px card layouts (overflow: visible)
   keep working. */
@media (min-width: 769px) {
  body.admin-page .table-wrapper,
  body.admin-page .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

body.admin-page.auth-shell { background-image: none; background-color: #f7f5f0; }
body.admin-page.auth-shell .main-content { margin-left: 0; }

/* ── Brand header on login pages (matches public booking header) ──
   Same dark-green band + transparent SIMCO logo used on /book so the
   login pages share the site's colour scheme. */
/* Full-bleed like the public /book header: neutralise base container gutters */
body.admin-page.auth-shell .main-content { padding: 0; }
body.admin-page.auth-shell .main-content > .container {
  max-width: none; width: 100%; padding: 0; margin: 0;
}
body.admin-page.auth-shell .auth-brand-header {
  background: #17221E;
  border-bottom: 3px solid var(--brand-primary, #7DC142);
}
body.admin-page.auth-shell .auth-brand-header-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center;
}
body.admin-page.auth-shell .auth-brand-logo {
  width: 130px; height: auto; display: block; margin: -34px 0;
}
/* The band replaces the in-card wordmark logo */
body.admin-page.auth-shell .auth-logo { display: none; }
@media (max-width: 599px) {
  body.admin-page.auth-shell .auth-brand-header-inner { padding: 10px 16px; }
  body.admin-page.auth-shell .auth-brand-logo { width: 110px; margin: -32px 0; }
}
body.admin-page .auth-page .auth-logo {
  display: block; width: 128px; height: auto; margin: 0 auto 20px;
}