/* Trimma — modern-01 theme. Ported from prototypes/01-modern-minimal/styles.css. */
/* Design tokens — ported from prototypes/01-modern-minimal/styles.css.
   Source of truth for color, radius, shadow, type. Every other stylesheet
   references these via var(--…). */

:root {
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F4F4F5;
  --border: #E5E7EB;
  --border-strong: #D4D4D8;
  --text: #111827;
  --text-muted: #6B7280;
  --text-subtle: #9CA3AF;

  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft: #EFF6FF;
  --accent-ring: rgba(37, 99, 235, 0.18);

  --status-wait-bg: #F3F4F6;
  --status-wait-fg: #4B5563;
  --status-notify-bg: #EFF6FF;
  --status-notify-fg: #1D4ED8;
  --status-chair-bg: #ECFDF5;
  --status-chair-fg: #047857;
  --status-done-bg: #F4F4F5;
  --status-done-fg: #6B7280;

  --warn-bg: #FFFBEB;
  --warn-fg: #92400E;
  --danger-bg: #FEF2F2;
  --danger-fg: #B91C1C;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);

  --gutter: 28px;
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win. Author display rules (e.g.
   .btn { display: inline-flex } or an inline style="display:flex") otherwise
   override the UA [hidden]{display:none}, so JS-gated elements — the reservation
   modal's status-specific action buttons, the appointment-only "Flexible" row —
   would stay visible even when set hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

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

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
/* Buttons, pills, fields, cards, banners, icons, toast, layout helpers.
   Ported from prototypes/01-modern-minimal/styles.css. */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover  { background: var(--surface); border-color: var(--border-strong); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface); }
/* Destructive, and it says so — deleting an application or an enquiry is final. */
.btn.danger { color: var(--danger, #B91C1C); }
.btn.danger:hover { color: #fff; background: var(--danger, #B91C1C); }
.btn-lg     { padding: 14px 22px; font-size: 16px; border-radius: 10px; }
.btn-block  { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px var(--accent-ring);
  border-color: var(--accent);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--text-muted);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill.wait    { background: var(--status-wait-bg);   color: var(--status-wait-fg); }
.pill.notify  { background: var(--status-notify-bg); color: var(--status-notify-fg); }
.pill.chair   { background: var(--status-chair-bg);  color: var(--status-chair-fg); }
.pill.done    { background: var(--status-done-bg);   color: var(--status-done-fg); }

.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card.hover:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.card-tight { padding: 14px 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 500; font-size: 13px; }
.field input {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
  font-size: 17px;
  background: #fff;
}

/* International phone widget (intl-phone controller): country picker + national field. */
.iti-field { display: flex; gap: 8px; align-items: stretch; }
.iti-field .iti-national { flex: 1; min-width: 0; }
.iti-country {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 15px; line-height: 1; white-space: nowrap;
  cursor: pointer;
}
.iti-country:hover { background: var(--surface-2); }
.iti-country:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.iti-country:disabled { opacity: .6; cursor: default; }
.iti-country .iti-flag { font-size: 17px; }
.iti-country .iti-caret { color: var(--text-subtle); font-size: 10px; margin-left: -1px; }
.iti-national.invalid { border-color: #DC2626; }

/* Country picker popover (anchored to <body> so the modal's overflow can't clip it). */
.iti-pop {
  display: none; position: fixed; z-index: 5000;
  flex-direction: column;
  width: 290px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16);
  overflow: hidden;
}
.iti-pop.open { display: flex; }
.iti-search-wrap { padding: 8px; border-bottom: 1px solid var(--border); }
.iti-search {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 14px; outline: none;
}
.iti-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.iti-list { list-style: none; margin: 0; padding: 4px; max-height: 288px; overflow-y: auto; }
.iti-group {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle);
}
.iti-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.iti-opt .iti-opt-flag { font-size: 18px; }
.iti-opt .iti-opt-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iti-opt .iti-opt-dial { font-size: 13px; color: var(--text-muted); }
.iti-opt.active { background: var(--accent-soft); }
.iti-opt[aria-selected="true"] .iti-opt-name { font-weight: 600; }
.iti-empty { list-style: none; padding: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }

.banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13.5px;
}
.banner.warn { background: var(--warn-bg); border-color: #FCD34D; color: var(--warn-fg); }
.banner.info { background: var(--accent-soft); border-color: #BFDBFE; color: var(--accent-hover); }
.banner.success { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.banner.error   { background: var(--danger-bg); border-color: #FECACA; color: var(--danger-fg); }
.banner .grow { flex: 1; }

.icon    { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }

.row     { display: flex; align-items: center; gap: 10px; }
.col     { display: flex; flex-direction: column; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 18px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.brand-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--text);
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}

.toast-host {
  position: fixed;
  right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: #111827;
  color: #fff;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.18);
  animation: toastIn .25s ease-out;
  pointer-events: auto;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-error { background: #B91C1C; }
.toast-error .icon { color: #FCA5A5; }

/* Accessibility — respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Customer booking (mobile-first) — ported from prototypes/01-modern-minimal/styles.css. */

body.booking { background: var(--surface); }

.book-shell {
  max-width: 390px; margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding-bottom: 90px;
}
.book-hero {
  padding: 26px 20px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.book-hero .brand { padding: 0; margin-bottom: 18px; }
.book-hero h1 { font-size: 24px; line-height: 1.2; }
.book-hero p  { color: var(--text-muted); margin: 6px 0 0; font-size: 14px; }

.book-section { padding: 22px 20px; border-bottom: 1px solid var(--border); }
.book-section h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  color: var(--text);
}
.chip:hover { border-color: var(--border-strong); }
.chip.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.svc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.svc-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.svc-card:hover { border-color: var(--border-strong); }
.svc-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.svc-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--surface);
}
.svc-card .name  { font-weight: 600; font-size: 16px; }
.svc-card .meta  { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.svc-card .svc-desc { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
.svc-card .price { font-weight: 600; font-size: 17px; }
.svc-card .tooltip {
  position: absolute;
  top: -8px; right: 12px;
  transform: translateY(-100%);
  background: #111827; color: #fff;
  font-size: 12px; padding: 5px 9px; border-radius: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.svc-card .tooltip.show { opacity: 1; }

.staff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.staff-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.staff-card:hover { border-color: var(--border-strong); }
.staff-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.staff-card.hero { grid-column: 1 / -1; padding: 22px; }
.staff-card .av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); margin: 0 auto 10px;
  display: grid; place-items: center; font-weight: 700;
  font-size: 16px;
  border: 1px solid var(--border);
}
.staff-card.hero .av { width: 56px; height: 56px; font-size: 20px; background: var(--accent); color: #fff; border: 0; }
.staff-card .who  { font-weight: 600; }
.staff-card .wait { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
/* Live queue load badge on each barber card (people ahead + approximate wait). */
.staff-load {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.staff-load .sl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.staff-load.lvl-idle { background: #F3F4F6; color: #4B5563; } .staff-load.lvl-idle .sl-dot { background: #9CA3AF; }
.staff-load.lvl-some { background: #FEF3C7; color: #92400E; } .staff-load.lvl-some .sl-dot { background: #F59E0B; }
.staff-load.lvl-busy { background: #FEE2E2; color: #991B1B; } .staff-load.lvl-busy .sl-dot { background: #EF4444; }
.staff-load.off { background: var(--surface-2, #F3F4F6); color: var(--text-muted, #6B7280); }

.cal {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cal::-webkit-scrollbar { height: 6px; }
.cal::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.date-pill {
  flex: 0 0 auto;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  scroll-snap-align: center;
  font: inherit;
  color: var(--text-muted);
}
.date-pill .dp-dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.date-pill .dp-num { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
.date-pill .dp-mon { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.date-pill.avail:hover  { border-color: var(--border-strong); }
.date-pill.selected     { background: var(--accent); border-color: var(--accent); }
.date-pill.selected .dp-dow,
.date-pill.selected .dp-num,
.date-pill.selected .dp-mon { color: #fff; }
.date-pill.disabled     { opacity: 0.4; cursor: not-allowed; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.slot {
  padding: 9px 0; text-align: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 13px; cursor: pointer;
}
.slot:hover     { border-color: var(--border-strong); }
.slot.selected  { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.slot.disabled  { opacity: 0.35; cursor: not-allowed; background: var(--surface); }

.book-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  display: flex; gap: 12px; align-items: center;
  max-width: 390px; margin: 0 auto;
}
.book-cta .total { font-weight: 700; font-size: 16px; }
.book-cta .btn   { flex: 1; }

.confirm        { text-align: center; margin-top: 20px; }
.confirm .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ECFDF5; color: #047857;
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.confirm .code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.05em;
  margin: 12px 0;
}
.confirm .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.confirm .stat  { padding: 12px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); }
.confirm .stat .label { font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
.confirm .stat .value { font-size: 22px; font-weight: 700; margin-top: 4px; }

/* ---------- step wizard (booking) ---------- */
.step-progress {
  display: flex; gap: 6px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.step-progress .dot {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border);
}
.step-progress .dot.active { background: var(--accent); }
.step-progress .dot.done   { background: var(--text); opacity: 0.6; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.step-head {
  padding: 22px 20px 8px;
}
.step-head h2 { font-size: 22px; line-height: 1.2; }
.step-head .step-hint { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }

.step-body { padding: 14px 20px 24px; }

.step-foot {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  display: flex; gap: 10px;
  max-width: 390px; margin: 0 auto;
  z-index: 20;
}
.step-foot .btn-back { flex: 0 0 auto; min-width: 96px; }
.step-foot .btn-next { flex: 1; }
.step-foot[data-step="1"] .btn-back { visibility: hidden; }

.svc-card.hidden { display: none !important; }
.empty-hint { padding: 12px 14px; text-align: center; color: var(--text-subtle); font-size: 13px; }

/* ---------- powered-by badge ---------- */
.powered-by {
  position: fixed;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.powered-by:hover {
  color: var(--text);
  border-color: var(--border-strong);
  text-decoration: none;
  box-shadow: var(--shadow-hover);
}
.powered-by .brand-mark {
  width: 18px; height: 18px; border-radius: 4px; font-size: 10px;
}
.powered-by .pb-label { color: var(--text-subtle); }
.powered-by .pb-name  { color: var(--text); font-weight: 700; }

@media (max-width: 480px) {
  .powered-by .pb-label { display: none; }
  .powered-by { padding: 5px 10px 5px 8px; gap: 6px; }
}

/* ---------- desktop (≥ 768px) ---------- */
@media (min-width: 768px) {
  body.booking {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(37, 99, 235, 0.05), transparent 60%),
      var(--surface);
    padding: 32px 24px 48px;
    min-height: 100vh;
  }

  .book-shell {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px rgba(16, 24, 40, 0.08);
    padding-bottom: 0;
    overflow: hidden;
    min-height: 0;
  }

  .book-hero {
    padding: 40px 48px 32px;
  }
  .book-hero h1 { font-size: 34px; line-height: 1.1; }
  .book-hero p  { font-size: 15px; }

  .step-progress { padding: 18px 48px; }

  .step-head { padding: 28px 48px 4px; }
  .step-head h2 { font-size: 26px; }
  .step-head .step-hint { font-size: 14px; }

  .step-body { padding: 16px 48px 32px; }

  /* Footer becomes part of the card on desktop, not a fixed mobile bar */
  .step-foot {
    position: static;
    max-width: none;
    margin: 0;
    padding: 18px 48px;
    background: var(--surface);
  }
  .step-foot .btn-back { min-width: 120px; }
  .step-foot .btn-next { flex: 0 0 auto; min-width: 200px; }

  /* Wider service & staff layouts */
  .svc-grid    { grid-template-columns: 1fr 1fr; gap: 12px; }
  .staff-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
  .staff-card.hero { grid-column: 1 / -1; }

  /* Step 4 calendar + time slots side-by-side */
  .step-panel[data-step="4"] .step-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
  }
  .step-panel[data-step="4"] .step-body .cal { width: 100%; }
  .step-panel[data-step="4"] .step-body .slot-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* Service step gets wider cards */
  .svc-card { padding: 18px 20px; }
  .svc-card .name { font-size: 17px; }
}

/* ---------- wider desktop (≥ 1100px): two-column with sticky review ---------- */
@media (min-width: 1100px) {
  .book-shell { max-width: 880px; }
  .book-hero  { padding: 48px 56px 32px; }
  .step-head, .step-body, .step-foot, .step-progress {
    padding-left: 56px; padding-right: 56px;
  }
}

/* ====================================================================
   Marketing landing — apex domain (body.marketing)
   ==================================================================== */
body.marketing {
  background:
    radial-gradient(ellipse 70% 50% at 30% -10%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 10%,  rgba(5, 150, 105, 0.07), transparent 60%),
    var(--bg);
}

.m-nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex; align-items: center; gap: 24px;
}
.m-nav .brand { padding: 0; font-size: 18px; }
.m-nav-links {
  flex: 1;
  display: flex; gap: 28px;
  margin-left: 24px;
}
.m-nav-links a {
  color: var(--text-muted); font-size: 14px; font-weight: 500; text-decoration: none;
}
.m-nav-links a:hover { color: var(--text); }
@media (max-width: 720px) {
  .m-nav-links { display: none; }
}

.m-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}
@media (max-width: 900px) {
  .m-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 64px; }
}
.m-hero-copy { min-width: 0; }
.m-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 999px;
  margin-bottom: 24px;
}
.m-h1 {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 760px;
  margin: 0 0 24px;
}
.m-lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 36px;
}
.m-lead strong { color: var(--text); font-weight: 600; }
.m-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.m-trust {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--text-muted);
}
.m-trust strong { color: var(--text); font-weight: 700; }
.m-trust-dot { color: var(--text-subtle); }

/* ---- Franchise login card (right column of hero) ---- */
.m-login-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 32px rgba(16,24,40,0.06);
  position: sticky;
  top: 24px;
}
@media (max-width: 900px) {
  .m-login-card { position: static; }
}
.m-login-head h3 { font-size: 19px; margin-bottom: 4px; }
.m-login-head p  { color: var(--text-muted); font-size: 13.5px; margin: 0 0 18px; }

.m-login-error,
.m-login-notice {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.m-login-error  { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid #FECACA; }
.m-login-notice { background: var(--accent-soft); color: var(--accent-hover); border: 1px solid #BFDBFE; }

.m-login-form { display: flex; flex-direction: column; gap: 14px; }
.m-login-form .field input { font-size: 15px; padding: 12px 14px; }
.m-login-remember {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px;
  margin: 2px 0 4px;
  user-select: none;
}
.m-login-help {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--text-subtle);
  text-align: center;
}

.m-features, .m-flows, .m-demo {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 32px;
}
.m-section-eyebrow {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 12px;
}
.m-h2 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 40px;
  max-width: 720px;
}

.m-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .m-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .m-feature-grid { grid-template-columns: 1fr; }
  .m-hero         { padding: 56px 24px 64px; }
  .m-h1           { font-size: 40px; }
  .m-h2           { font-size: 28px; }
}

.m-feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.m-feature:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.m-feature h3 { font-size: 18px; margin-bottom: 8px; }
.m-feature p  { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.m-feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.m-feature-icon svg { width: 22px; height: 22px; }
.m-feature-icon--blue   { background: #EFF6FF; color: #1D4ED8; }
.m-feature-icon--amber  { background: #FFFBEB; color: #92400E; }
.m-feature-icon--green  { background: #ECFDF5; color: #047857; }
.m-feature-icon--violet { background: #F5F3FF; color: #6D28D9; }
.m-feature-icon--pink   { background: #FDF2F8; color: #9D174D; }
.m-feature-icon--slate  { background: #F1F5F9; color: #334155; }

.m-flows { padding-top: 0; }
.m-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 960px) {
  .m-flow-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .m-flow-grid { grid-template-columns: 1fr; }
}
.m-flow {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.m-flow-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  margin-bottom: 14px;
}
.m-flow h4 { font-size: 15.5px; margin-bottom: 6px; }
.m-flow p  { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }

.m-demo { padding-bottom: 96px; }
.m-demo-card {
  background: linear-gradient(135deg, #111827 0%, #1E3A8A 100%);
  border-radius: 20px;
  padding: 56px 48px;
  color: #fff;
  text-align: center;
}
.m-demo-card .m-section-eyebrow { color: #93C5FD; }
.m-demo-card .m-h2 { color: #fff; margin: 0 auto 16px; max-width: none; }
.m-demo-lead { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 28px; font-size: 16px; line-height: 1.55; }
.m-demo-lead strong { color: #fff; }
.m-demo-card .btn { background: #fff; color: #111827; border-color: #fff; }
.m-demo-card .btn:hover { background: #F1F5F9; }
.m-demo-meta { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.55); }
.m-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px; border-radius: 6px; font-size: 13px;
  color: #BFDBFE;
}
.m-feature .m-mono, .m-flow .m-mono {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.m-foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px;
  border-top: 1px solid var(--border);
}
.m-foot-row {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.m-foot-row .brand { padding: 0; font-size: 15px; }
.m-foot-links { display: flex; gap: 20px; }
.m-foot-links a { color: var(--text-muted); font-size: 13.5px; text-decoration: none; }
.m-foot-links a:hover { color: var(--text); }
.m-foot-fine { color: var(--text-subtle); font-size: 12.5px; }

/* ====================================================================
   Manager (admin) — sidebar + topbar shell, Today schedule grid.
   Ported from prototypes/01-modern-minimal/manager.html + styles.css.
   ==================================================================== */
body.manager { background: var(--bg); }

.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app[data-sidebar-collapsed="true"] { grid-template-columns: 1fr; }
.app[data-sidebar-collapsed="true"] .sidebar { display: none; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.sidebar .brand { padding: 4px 8px 18px; }
.sidebar .brand-mark { width: 36px; height: 36px; border-radius: 9px; font-size: 17px; }
.sidebar .nav { display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  color: var(--text-muted);
  border-radius: 7px;
  font-weight: 500; font-size: 13.5px;
  text-decoration: none;
}
.sidebar .nav a:hover { background: #F4F4F5; color: var(--text); }
.sidebar .nav a.active { background: #fff; color: var(--text); border: 1px solid var(--border); }
.sidebar .nav .section {
  padding: 14px 10px 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); font-weight: 600;
}
.sidebar-footer { margin-top: auto; padding: 12px 8px; font-size: 12px; color: var(--text-subtle); }
.sidebar-account {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 13px;
}
.sidebar-account:hover { background: var(--surface); }
.sidebar-account.active { background: var(--surface); }
.sidebar-account .muted { font-size: 11px; }
.sidebar-signout {
  display: block; padding: 8px 10px; margin-top: 2px;
  border-radius: 8px; font-size: 13px; color: var(--text-muted);
}
.sidebar-signout:hover { background: var(--surface); color: var(--danger-fg); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.95);
  position: sticky; top: 0; z-index: 100; /* above the schedule grid so the notif panel isn't covered */
  backdrop-filter: saturate(140%) blur(8px);
}
.topbar .switcher {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-weight: 500;
  cursor: pointer; font-family: inherit; font-size: 14px;
  list-style: none;
}
.topbar .switcher::-webkit-details-marker { display: none; }
.switcher-wrap { position: relative; }
.switcher-wrap[open] .switcher { border-color: var(--border-strong); }
/* Con veinte tiendas la lista se salía de la pantalla y las últimas quedaban
   fuera de alcance: el menú es absolute, así que crece más allá del viewport y
   no hay nada que se pueda desplazar para llegar al final. Se le pone de techo
   el alto que de verdad queda debajo del topbar —que publica el suyo en
   --topbar-h, ver sticky_offset_controller.js— y se le da scroll propio.

   dvh además de vh: en el móvil vh mide como si la barra del navegador no
   estuviera, que es justo el pedazo que falta cuando el menú se sale. La línea
   con vh queda primero como respaldo para quien no entienda dvh. */
.switcher-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 200px; padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--topbar-h, 64px) - 24px);
  max-height: calc(100dvh - var(--topbar-h, 64px) - 24px);
  overflow-y: auto;
  /* Al llegar al final de la lista no se sigue desplazando la página detrás. */
  overscroll-behavior: contain;
}
.switcher-menu a {
  padding: 8px 10px; border-radius: 7px; color: var(--text);
  font-size: 14px; text-decoration: none;
}
.switcher-menu a:hover { background: var(--surface); }
.switcher-menu a.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; }
/* Name left, checked-in count right, so the numbers line up as a scannable column
   instead of trailing ragged after names of different lengths. */
.switcher-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.switcher-menu .sw-name { min-width: 0; }
.switcher-menu .sw-count { flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Nobody on the floor — keep it quiet rather than alarming; it's information, not an error. */
.switcher-menu .sw-count.none { color: var(--text-subtle, #9CA3AF); font-weight: 500; }
.switcher-menu a.add { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; color: var(--accent); }
.topbar .search {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; background: var(--surface);
  color: var(--text-muted);
}
.topbar .search input { border: 0; background: transparent; outline: 0; flex: 1; color: var(--text); }
/* Live search results dropdown. */
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  max-height: 360px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14); padding: 4px;
}
.search-results[hidden] { display: none; }
.search-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9CA3AF; padding: 8px 10px 4px; }
.search-empty { padding: 14px 12px; color: #6B7280; font-size: 13px; }
.search-row {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 8px; color: var(--text);
}
.search-row:hover { background: #F3F4F6; }
.search-row-icon { flex: none; font-size: 15px; width: 22px; text-align: center; }
.search-row-main { min-width: 0; display: flex; flex-direction: column; }
.search-row-name { font-size: 13.5px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row-sub { font-size: 12px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.date-nav { display: inline-flex; align-items: center; gap: 6px; }
.date-nav .date-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text); font-size: 17px; line-height: 1; text-decoration: none;
}
.date-nav .date-step:hover { border-color: var(--border-strong); }
.date-nav .date-label { font-weight: 500; font-size: 14px; min-width: 132px; text-align: center; }
.date-nav .date-jump { margin: 0; }
.date-nav .date-jump input {
  font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
.date-nav .date-today {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-hover); font-size: 13px; font-weight: 500; text-decoration: none;
}
.date-nav .date-today:hover { border-color: var(--accent); }

.sidebar-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  color: #4B5563;
  flex-shrink: 0;
}
.sidebar-hamburger:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.sidebar-hamburger svg { width: 18px; height: 18px; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
}
form.button_to { display: inline-block; margin: 0; }

.content { padding: var(--gutter); display: flex; flex-direction: column; gap: 24px; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { font-size: 16px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { padding: 18px 20px; }
.kpi .label { color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.kpi .value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.kpi .delta { font-size: 12px; color: #047857; margin-top: 4px; }
.kpi .delta.down { color: #B91C1C; }

.toggle {
  position: relative; width: 36px; height: 20px;
  border-radius: 999px; background: var(--border-strong);
  border: 0; padding: 0; cursor: pointer;
  transition: background .15s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(16px); }

/* ---------- Today schedule grid ---------- */
/* Scrolls in both axes within a bounded box so the header row can stay pinned
   (position: sticky needs the scroll to happen here, not on the window). */
.today-grid-wrap { overflow: auto; position: relative; max-height: calc(100vh - 156px); }

/* The live-update stream element is invisible but still counts as a flex child of
   .content, so the container's gap inserts a phantom 24px gap above the schedule.
   Take it out of layout so the grid starts right under the header. */
turbo-cable-stream-source { display: none; }

/* Tighter Today header — pull the whole block up and compact the action buttons so
   the calendar + queue get more vertical room. */
.sched-page { margin-top: -8px; }
.sched-header {
  flex-wrap: wrap; gap: 8px; margin-bottom: 2px !important;
  /* Pin the toolbar just below the (sticky) topbar so it stays put while the page
     scrolls. --topbar-h is published live by the sticky-offset controller on the
     topbar; the fallback only covers the brief moment before JS runs. */
  position: sticky; top: var(--topbar-h, 56px); z-index: 80;
  background: var(--bg); padding-bottom: 6px;
}
.sched-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sched-actions .btn { padding: 5px 9px; font-size: 12.5px; gap: 5px; }
.sched-actions .btn .icon, .sched-actions .btn .icon-sm { width: 14px; height: 14px; }
.today-grid {
  display: grid;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  width: 100%;
}
.tg-corner {
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  position: sticky; top: 0; left: 0; z-index: 6;
  /* Column so the shop-wide "i" stacks ABOVE Ahora rather than crowding beside it. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 4px;
}
/* Shop-wide services tally. Same circle as the per-barber "i", but always legible —
   there's no column header hover to reveal it. */
.tg-corner-info {
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: #fff; color: #9CA3AF; cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.tg-corner-info:hover { color: #2563EB; border-color: #BFDBFE; background: #EFF6FF; }
.tg-corner-info .icon { width: 13px; height: 13px; }
/* "Ahora" — jump the grid to the current time. */
.tg-now-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: #fff; color: #DC2626; font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1;
}
.tg-now-btn:hover { background: #FEF2F2; border-color: #FCA5A5; }
.tg-now-btn .icon { width: 13px; height: 13px; }
.tg-head {
  padding: 8px 8px 9px;
  font-weight: 600;
  text-align: center;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  position: sticky; top: 0; z-index: 5;
}
.tg-head:last-child { border-right: 0; }
.tg-head .av {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.tg-head .av[data-color="amber"]   { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.tg-head .av[data-color="teal"]    { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.tg-head .av[data-color="violet"]  { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.tg-head .av[data-color="pink"]    { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.tg-head .av[data-color="emerald"] { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.tg-head .av[data-color="orange"]  { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.tg-head .av[data-color="indigo"]  { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.tg-head .av[data-color="lime"]    { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.tg-head .nm { font-size: 13.5px; font-weight: 600; color: #111827; }
.tg-head .meta { font-size: 11.5px; color: #6B7280; font-weight: 500; }
/* Projected walk-in load on a barber's column (sum of queued walk-in minutes). */
/* Clickable queue-load badge under a barber's status (people ahead + wait range). */
.tg-load {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 2px 9px; border: 0; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; line-height: 1.3; cursor: pointer;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center;
  transition: filter .12s;
}
.tg-load:hover { filter: brightness(0.96); }
.tg-load .tg-load-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tg-load.lvl-idle { background: #F3F4F6; color: #4B5563; } .tg-load.lvl-idle .tg-load-dot { background: #9CA3AF; }
.tg-load.lvl-some { background: #FEF3C7; color: #92400E; } .tg-load.lvl-some .tg-load-dot { background: #F59E0B; }
.tg-load.lvl-busy { background: #FEE2E2; color: #991B1B; } .tg-load.lvl-busy .tg-load-dot { background: #EF4444; }

/* Live per-barber status chip in the column header. */
.tg-bstatus {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 1px; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center;
}
.tg-bstatus .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tg-bstatus.s-ready    { background: #DCFCE7; color: #166534; }
.tg-bstatus.s-ready    .dot { background: #22C55E; }
.tg-bstatus.s-in_chair { background: #DBEAFE; color: #1E40AF; }
.tg-bstatus.s-in_chair .dot { background: #3B82F6; }
.tg-bstatus.s-waiting  { background: #FEF3C7; color: #92400E; }
.tg-bstatus.s-waiting  .dot { background: #F59E0B; }
.tg-bstatus.s-break    { background: #F3F4F6; color: #6B7280; }
.tg-bstatus.s-break    .dot { background: #9CA3AF; }
.tg-bstatus.s-off      { background: #F3F4F6; color: #6B7280; padding: 0; }
.tg-bstatus.s-no_schedule { background: #FEF3C7; color: #92400E; border: 0; cursor: pointer; }
.tg-bstatus.s-no_schedule .dot { background: #F59E0B; }
/* Check-in button (the whole chip when a barber is off). */
.tg-checkin {
  border: 1px solid #D1D5DB; background: #fff; color: #374151;
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.tg-checkin:hover { background: #F0FDF4; border-color: #86EFAC; color: #166534; }
/* Tiny check-out × on the Ready chip. */
.tg-checkout {
  border: 0; background: none; color: inherit; opacity: 0.5; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 0 0 4px;
}
.tg-checkout:hover { opacity: 1; }
/* "Fila" checkbox, top-right of each barber header — include them in the walk-in pool. */
.tg-fila-chk {
  position: absolute; top: 5px; right: 6px; z-index: 6;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: #6B7280; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.tg-fila-chk input { width: 13px; height: 13px; margin: 0; cursor: pointer; }

/* Top-left "−": take a barber off this date's schedule. Always visible (so it's
   discoverable), brighter on column hover. A locked one (they hold an appointment or
   someone's queued for them) stays clickable — clicking explains why in an alert. */
.tg-remove {
  position: absolute; top: 4px; left: 5px; z-index: 7;
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: #fff; color: #9CA3AF; cursor: pointer;
  opacity: 0.55; transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
}
.tg-head:hover .tg-remove { opacity: 1; }
.tg-remove:hover { color: #DC2626; border-color: #FCA5A5; background: #FEF2F2; }
.tg-remove .icon { width: 12px; height: 12px; }
/* Locked: a muted lock cue, but still visible + clickable (the alert explains it). */
.tg-remove.is-locked { color: #C4B5A0; }
.tg-remove.is-locked:hover { color: #B45309; border-color: #FCD34D; background: #FFFBEB; }

/* Column-header "i" — opens the barber's completed-services tally. Sits beside the "−"
   remove button when that's rendered (editable dates), and takes its place otherwise.
   NOT .tg-info: that class was already the timing button on each event card, and reusing
   it leaked `position: absolute` and a 55% opacity onto every card icon — they went
   faint and got clipped by the card's overflow. */
.tg-head-info {
  position: absolute; top: 4px; left: 5px; z-index: 7;
  width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: #fff; color: #9CA3AF; cursor: pointer;
  opacity: 0.55; transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
}
.tg-remove ~ .tg-head-info { left: 27px; }
.tg-head:hover .tg-head-info { opacity: 1; }
.tg-head-info:hover { color: #2563EB; border-color: #BFDBFE; background: #EFF6FF; }
.tg-head-info .icon { width: 12px; height: 12px; }

/* Shared day-board modal shell (barber queue detail + services tally). Was injected
   from JS by barber_queue_controller; lives here so both modals use one copy. */
.bq-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.45); padding: 16px; }
.bq-card { background: #fff; border-radius: 16px; width: min(440px,100%); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.bq-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #EEF0F3; }
.bq-title { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
.bq-close { border: 0; background: none; font-size: 22px; line-height: 1; color: #94a3b8; cursor: pointer; }
.bq-body { padding: 6px 18px 18px; overflow-y: auto; }
.bq-section { margin-top: 14px; }
.bq-sec-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; display: flex; align-items: center; gap: 7px; }
.bq-count { background: #EEF2FF; color: #4338CA; border-radius: 999px; padding: 1px 8px; font-size: .75rem; }
.bq-note { font-size: .78rem; color: #94a3b8; margin: 4px 0 2px; }
.bq-list { list-style: none; margin: 6px 0 0; padding: 0; }
.bq-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F3F4F6; font-size: .9rem; }
.bq-name { font-weight: 600; color: #111827; }
.bq-meta { color: #6b7280; text-align: right; font-size: .82rem; }
.bq-none { color: #9ca3af; font-size: .85rem; padding: 8px 0; }
.bq-loading, .bq-empty { padding: 24px 4px; text-align: center; color: #94a3b8; }
/* Tally total: the answer to "how many did they do", so it reads heavier than the rows. */
.bq-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
            margin-top: 12px; padding-top: 12px; border-top: 2px solid #E5E7EB; font-size: .95rem; }
.bq-total .bq-total-label { font-weight: 700; color: #0f172a; }
.bq-total .bq-total-num { font-weight: 800; font-size: 1.25rem; color: #4338CA; }
.bq-sub { font-size: .78rem; color: #94a3b8; margin-top: 4px; text-align: right; }

/* Empty schedule (no barbers added today) — a centered nudge over the grid. */
.sched-empty {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 4; width: min(360px, 86%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: var(--text-muted, #6B7280);
}
.sched-empty svg { color: #D1D5DB; }
.sched-empty h3 { margin: 4px 0 0; font-size: 15px; color: var(--text, #111827); }
.sched-empty p  { margin: 0 0 6px; font-size: 13px; }

/* "Próximo" — who to seat next on a ready barber, with seat / not-here actions. */
.tg-next {
  margin-top: 3px; padding: 4px 6px; border-radius: 7px;
  background: #F0FDF4; border: 1px solid #BBF7D0; width: 100%;
}
.tg-next-who { font-size: 10.5px; color: #14532D; line-height: 1.2; }
.tg-next-who .lbl { font-weight: 700; }
.tg-next-who .warn { display: inline-block; margin-left: 4px; color: #B45309; font-weight: 700; }
.tg-next-actions { display: flex; gap: 4px; margin-top: 3px; }
.tg-next-actions button {
  flex: 1; padding: 2px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; line-height: 1.25;
}
.tg-next-seat { background: #16A34A; color: #fff; }
.tg-next-seat:hover { background: #15803D; }
.tg-next-skip { background: #fff; color: #6B7280; border-color: var(--border, #E5E7EB); }
.tg-next-skip:hover { background: #F9FAFB; color: #374151; }

.tg-load {
  margin-top: 2px;
  font-size: 10.5px; font-weight: 700;
  color: #92400E; background: #FEF3C7;
  border: 1px solid #FDE68A; border-radius: 999px;
  padding: 1px 8px; letter-spacing: 0.01em;
}

/* Per-barber header actions (quick-seat + lunch) on a free barber's column. */
.tg-headacts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.tg-quickseat, .tg-lunchbtn {
  padding: 1px 9px; border-radius: 999px;
  border: 1px dashed #CBD5E1; background: #fff; color: #475569;
  font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tg-quickseat:hover { border-color: #16A34A; color: #166534; background: #F0FDF4; border-style: solid; }
.tg-lunchbtn:hover  { border-color: #D97706; color: #92400E; background: #FFFBEB; border-style: solid; }
/* "Listo" — bring a barber back from lunch. */
.tg-backbtn {
  margin-top: 3px; padding: 2px 12px; border-radius: 999px;
  border: 1px solid #16A34A; background: #16A34A; color: #fff;
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tg-backbtn:hover { background: #15803D; border-color: #15803D; }
.tgh-name .tg-load { margin-top: 0; margin-left: auto; }

.tg-time {
  padding: 3px 12px 0 14px;
  font-variant-numeric: tabular-nums;
  color: #B1B7BD;
  font-size: 11px; font-weight: 400;
  border-right: 1px solid #E5E7EB;
  border-top: 1px solid #F3F4F6;
  display: flex; align-items: flex-start; justify-content: flex-end;
  line-height: 1;
}
.tg-time.hour-mark { font-weight: 600; color: #374151; font-size: 12px; border-top: 1px solid #E5E7EB; }
.tg-time.half-mark { color: #9CA3AF; border-top: 1px solid #ECEEF1; }

.tg-cell {
  height: 40px; /* 15-minute rows — must match Today::Snapshot::SLOT_HEIGHT_PX */
  background: #fff;
  border-right: 1px solid #F3F4F6;
  border-top: 1px solid #F3F4F6;
  position: relative;
}
.tg-cell.last-col { border-right: 0; }
.tg-cell.hour-mark { border-top: 1px solid #E5E7EB; }
.tg-cell.half-mark { border-top: 1px solid #ECEEF1; }

/* ---- Day availability paint ---- */
.day-paint-modes { display: none; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.painting .day-paint-modes { display: flex; }

.painting .today-grid { outline: 2px dashed var(--accent); outline-offset: -2px; }
.painting .tg-cell { cursor: crosshair; }
.painting .tg-cell:hover { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.painting .tg-unavail { display: none; }

/* Painted per-date availability — visible in normal view too, so the plan shows. */
.tg-cell.av-both    { background: #DBEAFE; }
.tg-cell.av-walkin  { background: repeating-linear-gradient(45deg, #FEF3C7, #FEF3C7 5px, #FDE9A8 5px, #FDE9A8 10px); }
.tg-cell.av-blocked { background: repeating-linear-gradient(45deg, #F3F4F6, #F3F4F6 5px, #E2E5EA 5px, #E2E5EA 10px); }

.tg-event {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px; font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}

/* Drag-to-reassign / reschedule (Today grid) — pointer-based, touch-friendly.
   Applies to committed event blocks and to projection blocks (dragging a
   tentative/projected walk-in commits it to the dropped barber + time). */
.tg-event.draggable-event,
.tg-projection[data-reservation-id] { cursor: grab; touch-action: none; }
.tg-event.draggable-event:active,
.tg-projection[data-reservation-id]:active { cursor: grabbing; }
.tg-event.dragging,
.tg-projection.dragging,
.wl-card.dragging { opacity: 0.4; }
/* The clone that follows the pointer during a drag. */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.95;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  transform: scale(1.03);
  margin: 0;
}
/* Grab affordance on draggable schedule blocks. */
.tg-event.draggable-event, .tg-projection[data-reservation-id] { cursor: grab; }
.drag-active, .drag-active * { cursor: grabbing !important; }
/* While dragging, let the pointer fall through blocks to the cells underneath
   so elementFromPoint resolves a (staff column × time slot). `drag-active` is
   toggled on the schedule wrapper for the duration of a drag. */
.drag-active .tg-event,
.drag-active .tg-unavail,
.drag-active .tg-projection { pointer-events: none; }
.tg-cell.drag-target { background: color-mix(in srgb, var(--accent, #2563EB), transparent 88%); }
/* Highlight the walk-in queue as a drop target when dragging an appointment over it. */
.waitlist-area.walkin-drop { outline: 2px dashed var(--accent, #2563EB); outline-offset: 2px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #2563EB), transparent 92%); }
/* Drag-to-reorder the walk-in queue. */
.waitlist-list .wl-card { touch-action: none; cursor: grab; }
.waitlist-list.wl-reordering { user-select: none; }
.waitlist-list.wl-reordering .wl-card { cursor: grabbing; }
/* The lifted card follows the pointer: scale up a touch with a soft shadow. */
.wl-card.wl-dragging {
  cursor: grabbing;
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.20);
  opacity: 0.97;
}
/* The gap that opens where the card will drop. */
.wl-placeholder {
  border: 2px dashed color-mix(in srgb, var(--accent, #2563EB), transparent 45%);
  background: color-mix(in srgb, var(--accent, #2563EB), transparent 92%);
  border-radius: 8px;
}
/* Overlapping appointments (a manager "squeezed" one in) — side-by-side blocks
   each get a red warning outline + a ⚠ marker on the badge. */
.tg-event.overlap { outline: 2px solid #DC2626; outline-offset: -2px; z-index: 2; }
.tg-event.overlap .badge::after { content: " ⚠"; }
.tg-event > div:first-child { display: flex; align-items: center; min-width: 0; }
.tg-event .who { font-weight: 700; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Appointment start time shown after the name on its card. */
.tg-event .tg-ev-time { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-muted, #6B7280); margin-left: 4px; white-space: nowrap; }
.tg-event .flex-star { color: var(--accent, #2563EB); font-weight: 800; margin-left: 2px; flex: none; }
.tg-event .conf-check { color: #16a34a; font-weight: 800; margin-left: 2px; flex: none; }
.tg-event .meta { font-size: 11.5px; opacity: 0.85; font-weight: 500; margin-top: 2px; overflow: hidden; }
.tg-event .meta .svc-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }

/* Short events get progressively tighter so the customer name still fits.
   The duration tier is set on the element in _today_grid.html.erb.
   snug ≈ 30-min slot (~56px); compact ≈ 15-min slot (~28px). */
.tg-event.snug { padding: 4px 8px; line-height: 1.2; }
.tg-event.snug .who { font-size: 12px; }
.tg-event.snug .meta { font-size: 10.5px; margin-top: 1px; }
.tg-event.snug .badge { font-size: 9px; padding: 0 4px; margin-right: 4px; }

.tg-event.compact { padding: 2px 8px; line-height: 1.1; }
.tg-event.compact .badge { display: none; }
.tg-event.compact .meta { display: none; }
.tg-event.compact .who { font-size: 11.5px; }
.tg-event .badge {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  margin-right: 6px;
  white-space: nowrap;
  flex: none;
}
/* Type tag on closed (done/no-show/cancelled) blocks so you can still tell a
   Cita (appointment) from the Fila (walk-in) after the color goes grey. */
.tg-event .kind-tag {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  margin-right: 6px;
}
.tg-event .kind-tag.cita { background: #DBEAFE; color: #1E40AF; }
.tg-event .kind-tag.fila { background: #FEF3C7; color: #92400E; }
.tg-event.compact .kind-tag { display: none; }
/* "Terminado" tag, lower-left corner of a completed block. */
.tg-event .tg-done-tag {
  position: absolute; bottom: 4px; left: 4px; z-index: 2;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #64748B; background: #E2E8F0; padding: 1px 6px; border-radius: 3px;
}
.tg-event.compact .tg-done-tag { bottom: 2px; left: 2px; padding: 0 4px; }
.tg-event.appt    { background: #EFF6FF; border-left: 3px solid #2563EB; color: #1E3A8A; }
.tg-event.appt    .badge { background: #DBEAFE; color: #1E40AF; }
.tg-event.walkin  { background: #FFFBEB; border-left: 3px solid #F59E0B; color: #92400E; }
.tg-event.walkin  .badge { background: #FEF3C7; color: #92400E; }
.tg-event.in_chair { background: #ECFDF5; border-left-color: #10B981; color: #065F46; }
.tg-event.in_chair .badge { background: #A7F3D0; color: #065F46; }
.tg-event.notified { background: #FEF9C3; border-left-color: #EAB308; color: #854D0E; }
.tg-event.notified .badge { background: #FDE68A; color: #854D0E; }
.tg-event.completed { background: #F1F5F9; opacity: 0.72; border: 1px solid #94A3B8; border-left: 3px solid #64748B; color: #64748B; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16); }
.tg-event.completed .badge { background: #E2E8F0; color: #64748B; }
.tg-event.no_show { background: #FEF2F2; opacity: 0.85; border-left-color: #DC2626; color: #991B1B; }
.tg-event.no_show .badge { background: #FEE2E2; color: #B91C1C; }
.tg-event.no_show .who { text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, 0.55); }
.tg-event.cancelled { background: #F4F4F5; opacity: 0.7; border-left-color: #9CA3AF; color: #6B7280; }
.tg-event.cancelled .badge { background: #E5E7EB; color: #6B7280; }
.tg-event.cancelled .who { text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, 0.5); }

.tg-unavail {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px; font-weight: 600;
  color: #525252;
  background: repeating-linear-gradient(45deg, #F4F4F5 0 4px, #E4E4E7 4px 8px);
  border: 1px dashed #A1A1AA;
  line-height: 1.25;
  z-index: 1;
}
/* Planned "lunch after" — reserved until the reservation is completed. */
.tg-planned-lunch {
  position: absolute; left: 3px; right: 3px;
  border-radius: 6px; padding: 4px 9px 4px 11px;
  font-size: 11.5px; font-weight: 700; color: #92400E;
  background: repeating-linear-gradient(45deg, #FEF3C7 0 6px, #FDE68A 6px 12px);
  border: 1.5px dashed #F59E0B; border-left: 4px solid #F59E0B;
  line-height: 1.2; pointer-events: none; overflow: hidden; z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 4px;
}
/* The cancel "×" stays clickable even though the block itself is a placeholder. */
.tg-pl-cancel {
  pointer-events: auto; flex-shrink: 0;
  border: 0; background: rgba(255,255,255,0.6); color: #92400E;
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  font-size: 13px; line-height: 1; font-weight: 700; padding: 0;
}
.tg-pl-cancel:hover { background: #FCA5A5; color: #7F1D1D; }

/* Projection blocks — where waiting walk-ins are predicted to land */
/* Queue forecast blocks are hidden until the "Show forecast" toggle adds
   .show-forecast to the schedule wrapper. The per-barber load badge still
   conveys queue pressure when they're hidden. */
.tg-projection, .tgh-projection { display: none; }
.show-forecast .tg-projection { display: block; }
.show-forecast .tgh-projection { display: block; }

.tg-projection {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px; font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  z-index: 1;
  background: repeating-linear-gradient(135deg, #FFFBEB 0 7px, #FEF3C7 7px 14px);
  border: 2px dashed #F59E0B;
  color: #92400E;
}
.tg-projection .who { font-weight: 700; font-size: 12.5px; color: #78350F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-projection .meta { font-size: 11px; color: #B45309; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Short projections — mirror the event tiers (set in _today_grid.html.erb). */
.tg-projection.snug { padding: 3px 8px; line-height: 1.2; }
.tg-projection.snug .meta { font-size: 10px; margin-top: 1px; }
.tg-projection.compact { padding: 2px 8px; line-height: 1.1; }
.tg-projection.compact .meta { display: none; }
.tg-projection.compact .status-pill { display: none; }
.tg-projection .status-pill {
  display: inline-block;
  text-transform: uppercase;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 2px;
  background: #FCD34D; color: #78350F;
  margin-right: 6px;
}
.tg-projection.tentative {
  border: 2px dotted #94A3B8;
  background: #F8FAFC;
  color: #475569;
  opacity: 0.9;
}
.tg-projection.tentative .who { color: #334155; font-weight: 600; }
.tg-projection.tentative .meta { color: #64748B; font-style: italic; }
.tg-projection.tentative .status-pill {
  background: transparent;
  border: 1px solid #94A3B8;
  color: #475569;
  padding: 0 4px;
}

/* Now-line — horizontal red bar at current time */
.tg-now {
  position: absolute;
  left: 80px; right: 0;
  height: 0;
  border-top: 2px solid #DC2626;
  z-index: 2;
  pointer-events: none;
}
.tg-now::before {
  content: ''; position: absolute;
  left: -4px; top: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #DC2626;
}

/* ---------- Horizontal Gantt layout (staff rows, hourly columns) ---------- */
.today-grid-h {
  display: grid;
  grid-template-columns: 170px repeat(20, minmax(38px, 1fr));
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  background: #fff;
  width: 100%;
}
.tgh-corner {
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #E5E7EB;
}
.tgh-hour {
  padding: 12px 6px;
  font-weight: 600; text-align: center;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  border-right: 1px solid #F3F4F6;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #374151;
}
.tgh-hour.full { border-right: 1px solid #E5E7EB; }
.tgh-hour.half { font-weight: 400; color: #9CA3AF; font-size: 11px; }
.tgh-hour:last-child { border-right: 0; }
.tgh-hour.current { background: #EFF6FF; color: #1E40AF; }

.tgh-name {
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}
.tgh-name .av {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.tgh-name .av[data-color="amber"]   { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.tgh-name .av[data-color="teal"]    { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.tgh-name .av[data-color="violet"]  { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.tgh-name .av[data-color="pink"]    { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.tgh-name .av[data-color="emerald"] { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.tgh-name .av[data-color="orange"]  { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.tgh-name .av[data-color="indigo"]  { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.tgh-name .av[data-color="lime"]    { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.tgh-name .nm { font-weight: 600; font-size: 13.5px; line-height: 1.2; color: #111827; }
.tgh-name .meta { font-size: 11px; color: #6B7280; margin-top: 2px; }
.tgh-name.cover { background: linear-gradient(180deg, #EFF6FF 0%, #FAFAFA 100%); }
.tgh-name.cover .av { border: 2px dashed #2563EB; box-shadow: 0 0 0 2px rgba(37,99,235,0.08); }

.tgh-day {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  border-bottom: 1px solid #F3F4F6;
  position: relative;
  grid-column: 2 / span 20;
}
.tgh-cell {
  height: 64px;
  border-right: 1px solid #F8FAFC;
}
.tgh-cell.hour-mark { border-right: 1px solid #E5E7EB; }
.tgh-cell:last-child { border-right: 0; }

.tgh-event, .tgh-unavail {
  position: absolute;
  top: 4px; bottom: 4px;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 11px; font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  z-index: 1;
}
.tgh-event { box-shadow: 0 1px 2px rgba(0,0,0,0.06); cursor: pointer; }
.tgh-event .who { font-weight: 700; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tgh-event .meta { font-size: 10px; opacity: 0.85; font-weight: 500; margin-top: 1px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tgh-event .badge {
  display: inline-block;
  font-size: 8.5px; padding: 1px 4px;
  border-radius: 2px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: 1px; margin-right: 4px;
}
.tgh-event.appt    { background: #EFF6FF; border-left: 3px solid #2563EB; color: #1E3A8A; }
.tgh-event.appt .badge { background: #DBEAFE; color: #1E40AF; }
.tgh-event.walkin  { background: #FFFBEB; border-left: 3px solid #F59E0B; color: #92400E; }
.tgh-event.walkin .badge { background: #FEF3C7; color: #92400E; }
.tgh-event.in_chair { background: #ECFDF5; border-left-color: #10B981; color: #065F46; }
.tgh-event.in_chair .badge { background: #A7F3D0; color: #065F46; }
.tgh-event.notified { background: #FEF9C3; border-left-color: #EAB308; color: #854D0E; }
.tgh-event.notified .badge { background: #FDE68A; color: #854D0E; }
.tgh-event.completed { background: #F1F5F9; opacity: 0.72; border: 1px solid #94A3B8; border-left: 3px solid #64748B; color: #64748B; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16); }
.tgh-event.completed .badge { background: #E2E8F0; color: #64748B; }
.tgh-event.no_show { background: #FEF2F2; opacity: 0.85; border-left-color: #DC2626; color: #991B1B; }
.tgh-event.no_show .badge { background: #FEE2E2; color: #B91C1C; }
.tgh-event.no_show .who { text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, 0.55); }
.tgh-event.cancelled { background: #F4F4F5; opacity: 0.7; border-left-color: #9CA3AF; color: #6B7280; }
.tgh-event.cancelled .badge { background: #E5E7EB; color: #6B7280; }
.tgh-event.cancelled .who { text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, 0.5); }
.tgh-unavail {
  font-weight: 600; color: #525252;
  background: repeating-linear-gradient(45deg, #F4F4F5 0 4px, #E4E4E7 4px 8px);
  border: 1px dashed #A1A1AA;
  white-space: nowrap;
}

/* Projection blocks (horizontal Gantt variant) */
.tgh-projection {
  position: absolute;
  top: 4px; bottom: 4px;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 11px; font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  z-index: 1;
  background: repeating-linear-gradient(135deg, #FFFBEB 0 7px, #FEF3C7 7px 14px);
  border: 2px dashed #F59E0B;
  color: #92400E;
}
.tgh-projection .who { font-weight: 700; font-size: 11.5px; color: #78350F; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.tgh-projection .status-pill {
  display: inline-block;
  text-transform: uppercase;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: 2px;
  background: #FCD34D; color: #78350F;
  margin-right: 4px;
}
.tgh-projection.tentative {
  border: 2px dotted #94A3B8;
  background: #F8FAFC;
  color: #475569;
  opacity: 0.9;
}
.tgh-projection.tentative .who { color: #334155; font-weight: 600; }
.tgh-projection.tentative .status-pill {
  background: transparent;
  border: 1px solid #94A3B8;
  color: #475569;
  padding: 0 4px;
}

/* Now-line for horizontal mode — vertical red line */
.tgh-now {
  position: absolute; top: 0; bottom: 0;
  width: 0; border-left: 2px solid #DC2626;
  z-index: 3; pointer-events: none;
}

/* Layout toggle ↔ which grid is visible.
   `!important` on the now-line hides so JS-inline `display: block` (positioning
   helper) doesn't show the wrong layout's indicator. */
.today-grid-wrap[data-layout="v"] .today-grid-h { display: none; }
.today-grid-wrap[data-layout="h"] .today-grid   { display: none; }
.today-grid-wrap[data-layout="h"] .tg-now       { display: none !important; }
.today-grid-wrap[data-layout="v"] .tgh-now      { display: none !important; }

/* Booking lead-time buffer: the window from now → now+buffer where customers can't
   book online yet. A faint rose hatch from the (red) now-line, so it reads as
   "blocked for self-booking" without hiding the work underneath. */
.tg-buffer {
  position: absolute; left: 80px; right: 0;
  background: repeating-linear-gradient(45deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.05) 7px, rgba(220, 38, 38, 0.12) 7px, rgba(220, 38, 38, 0.12) 14px);
  border-top: 1px dashed rgba(220, 38, 38, 0.5);
  z-index: 1; pointer-events: none;
}
.tgh-buffer {
  position: absolute; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.05) 7px, rgba(220, 38, 38, 0.12) 7px, rgba(220, 38, 38, 0.12) 14px);
  border-left: 1px dashed rgba(220, 38, 38, 0.5);
  z-index: 1; pointer-events: none;
}
.today-grid-wrap[data-layout="h"] .tg-buffer  { display: none !important; }
.today-grid-wrap[data-layout="v"] .tgh-buffer { display: none !important; }
.buffer-swatch {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none;
  border: 1px dashed rgba(220, 38, 38, 0.5);
  background: repeating-linear-gradient(45deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.10) 3px, rgba(220, 38, 38, 0.20) 3px, rgba(220, 38, 38, 0.20) 6px);
}
/* Walk-ins-only (disable appointments for the day) toggle button in the action
   row — amber/warn highlight when on. */
.wio-btn.on { background: #FEF3C7; border-color: #FCD34D; color: #92400E; }
.wio-btn.on:hover { background: #FDE9A8; }

/* Today-header booking-buffer quick control — a tidy bordered pill. */
.buffer-control {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 12.5px; color: var(--text-muted);
}
.buffer-control select {
  padding: 3px 6px; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}

/* Legend below the grid */
.tg-legend {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6B7280;
}
.tg-legend .swatch {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 6px;
}
.tg-legend .swatch.appt    { background: #EFF6FF; border-left: 3px solid #2563EB; }
.tg-legend .swatch.walkin  { background: #FFFBEB; border-left: 3px solid #F59E0B; }
.tg-legend .swatch.chair   { background: #ECFDF5; border-left: 3px solid #10B981; }
.tg-legend .swatch.done    { background: #F8FAFC; border-left: 3px solid #94A3B8; opacity: 0.7; }
.tg-legend .swatch.unavail {
  background: repeating-linear-gradient(45deg, #F4F4F5 0 3px, #E4E4E7 3px 6px);
  border: 1px dashed #A1A1AA;
}

/* Wait-list panel */
/* Day / Staff segmented toggle, shown inline in the topbar to save grid height. */
.topbar-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); flex-shrink: 0; }
.topbar-tabs a {
  padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 500;
  color: var(--text-muted); text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.topbar-tabs a:hover { color: var(--text); }
.topbar-tabs a.active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* Compact employee picker on the staff calendar */
.emp-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.emp-weeknav { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.emp-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 5px 14px 5px 5px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.emp-chip:hover { border-color: var(--border-strong); }
.emp-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.emp-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--surface); color: var(--text-muted); flex-shrink: 0;
}
.emp-chip.selected .emp-av { background: var(--accent); color: #fff; }

.schedule-with-waitlist {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
.schedule-with-waitlist.no-waitlist { grid-template-columns: 1fr; }
@media (max-width: 1240px) {
  .schedule-with-waitlist { grid-template-columns: 1fr; }
}
.waitlist-area { padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.waitlist-header {
  padding: 16px 18px;
  border-bottom: 1px solid #E5E7EB;
  display: flex; align-items: center; justify-content: space-between;
}
.waitlist-list {
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 256px);
  overflow-y: auto;
}

/* ── Schedule page: scroll INSIDE the grid + the fila, not the whole page; the
   toolbar becomes a fixed second navbar under the topbar ──
   The page is bounded to the viewport so the inner containers (.today-grid-wrap,
   .waitlist-list) are the scrollers and the barber-row header (.tg-head, already
   position:sticky) + the fila header stay pinned. The toolbar (.sched-header) used to
   be position:sticky (pinned below the topbar during page scroll); with no page scroll
   that left it floating 56px down, OVERLAPPING the grid header — so here it's a static,
   full-bleed second navbar instead. Two things keep the chain definite-height: .main is
   forced to 100vh (its grid row is otherwise content-sized) and the schedule grid gets
   grid-template-rows:minmax(0,1fr) so its row fills rather than growing to the full grid
   height. Scoped to the schedule (:has(.sched-page)) + the desktop side-by-side layout;
   narrow/stacked screens keep normal page scrolling. */
@media (min-width: 1241px) {
  .app:has(.sched-page)     { height: 100vh; overflow: hidden; }
  .main:has(.sched-page)    { height: 100vh; min-height: 0; overflow: hidden; }
  .content:has(.sched-page) { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 0; }
  .sched-page               { flex: 1 1 auto; min-height: 0; margin-top: 0; display: flex; flex-direction: column; }

  /* Toolbar → static, full-bleed second navbar (no longer pinned via page-scroll sticky). */
  .sched-page .sched-header {
    position: static; top: auto; z-index: auto;
    margin-top: 0;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    margin-bottom: 12px !important;
    padding: 10px var(--gutter);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border);
  }

  .sched-page .schedule-with-waitlist         { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .sched-page .schedule-with-waitlist > .card { display: flex; flex-direction: column; min-height: 0; }
  .sched-page .today-grid-wrap                { flex: 1 1 auto; min-height: 0; max-height: none; }
  .sched-page .waitlist-area                  { display: flex; flex-direction: column; min-height: 0; }
  .sched-page .waitlist-list                  { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.wl-card {
  border: 1px solid #E5E7EB;
  border-left: 4px solid #F59E0B;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(to right, #FFFBEB 0%, #fff 18%);
}
.wl-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-subtle);
  font-size: 13px;
}
.wl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wl-name { font-weight: 700; font-size: 14.5px; color: #111827; }
.wl-phone { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #059669; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.wl-phone svg { flex-shrink: 0; opacity: 0.9; }
/* No-number walk-in: they can't be pinged, so they wait in the shop. */
.wl-instore { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 11.5px; font-weight: 600; }
.wl-instore svg { flex-shrink: 0; }
/* "Running late, OK for others to pass" — a note from the customer, not a state change.
   Blue rather than the amber/red of the warning pills: it's information the manager acts
   on at their discretion, not a problem with the booking. */
.wl-late { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #DBEAFE; color: #1E40AF; font-size: 11.5px; font-weight: 600; }
.wl-late svg { flex-shrink: 0; }
/* Where the customer sits on the fila ladder: warned ("ve regresando") vs called
   ("es tu turno", with the chair hold counting down). `.over` = the hold ran out. */
.wl-stage { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.wl-stage svg { flex-shrink: 0; }
.wl-stage.warned  { background: #E0E7FF; color: #3730A3; }
.wl-stage.called  { background: #DCFCE7; color: #166534; }
.wl-stage.called.over { background: #FEE2E2; color: #991B1B; }
.wl-stage.nowarn  { background: #FEF3C7; color: #92400E; }
.wl-svc { font-size: 13px; color: #374151; margin-top: 8px; font-weight: 500; }
.wl-meta { font-size: 12px; color: #6B7280; margin-top: 4px; }
.wl-pill {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: flex-start;
}
.wl-pill.waiting  { background: #FEF3C7; color: #92400E; }
.wl-pill.notified { background: #FEF9C3; color: #854D0E; }
.wl-pill.in_chair { background: #D1FAE5; color: #065F46; }

.wl-card.notified  { border-left-color: #EAB308; background: linear-gradient(to right, #FEFCE8 0%, #fff 18%); }
.wl-card.in_chair  { border-left-color: #10B981; background: linear-gradient(to right, #ECFDF5 0%, #fff 18%); }

.wl-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: 12px; color: #6B7280;
}
.wl-staff { font-weight: 600; color: #374151; }
.wl-elapsed { font-variant-numeric: tabular-nums; font-weight: 600; color: #374151; }

.wl-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.wl-actions .btn {
  padding: 6px 12px; font-size: 12.5px; flex: 1;
}
.wl-actions .btn.wl-noshow {
  background: #fff; border-color: #FECACA; color: #B91C1C;
}
.wl-actions .btn.wl-noshow:hover { background: #FEE2E2; border-color: #F87171; }
.wl-actions .btn.wl-reassign { flex: 0 0 auto; padding: 6px 10px; }

/* ---------- reassign popover ---------- */
.reassign-popover {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  padding: 6px;
  min-width: 280px;
  max-height: 70vh;
  overflow-y: auto;
}
.reassign-popover[hidden] { display: none; }
.rp-header {
  padding: 8px 12px 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #6B7280;
  border-bottom: 1px solid #F3F4F6;
  margin-bottom: 4px;
}
.rp-option {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
}
.rp-option:hover { background: #F9FAFB; }
.rp-option.current { background: #EFF6FF; }
.rp-option.ineligible { opacity: 0.75; }
.rp-option.ineligible .rp-meta { color: #B45309; font-style: italic; }
.rp-option.disabled { opacity: 0.45; cursor: not-allowed; }
.rp-option.disabled:hover { background: transparent; }
.rp-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.rp-avatar[data-color="amber"]   { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.rp-avatar[data-color="teal"]    { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.rp-avatar[data-color="violet"]  { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.rp-avatar[data-color="pink"]    { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.rp-avatar[data-color="emerald"] { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.rp-avatar[data-color="orange"]  { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.rp-avatar[data-color="indigo"]  { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.rp-avatar[data-color="lime"]    { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.rp-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #F3F4F6; color: #6B7280;
  display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0;
}
.rp-text { flex: 1; min-width: 0; }
.rp-name { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.rp-meta { font-size: 11px; color: #6B7280; margin-top: 1px; }
.rp-check { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* Quick-seat multi-select: a fixed header + Sentar, with only the list scrolling. */
.qw-popover { display: flex; flex-direction: column; max-height: 80vh; overflow: hidden; }
.qw-popover .rp-header { flex: 0 0 auto; margin-bottom: 0; }
.qw-options { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0; }
.qw-foot { flex: 0 0 auto; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border, #E5E7EB); }
.qw-confirm { width: 100%; justify-content: center; }
.qw-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.reassign-popover .rp-option.current::after {
  content: "✓"; margin-left: auto; color: #16A34A; font-weight: 800; font-size: 13px;
}

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: #fff;
  border-radius: 14px;
  width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.modal > header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.modal > header h2 { font-size: 18px; }
.modal > header .subtitle { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.modal .body { padding: 20px; flex: 1; overflow-y: auto; }
.modal > footer {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.modal-close {
  width: 30px; height: 30px;
  border: 0; background: transparent;
  border-radius: 6px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-muted);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

/* Drag-drop move confirmation — one row per changed field (old → new). */
.dragc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  font-size: 14px;
}
.dragc-row + .dragc-row { border-top: 1px solid var(--border); }
.dragc-row svg { color: var(--text-muted); flex: none; }
.dragc-label {
  width: 64px; flex: none;
  color: var(--text-muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
}
.dragc-from { color: var(--text-muted); text-decoration: line-through; }
.dragc-to { font-weight: 600; }

/* Add-appointment modal with the selected barber's day alongside it. */
.appt-modal-wrap { display: flex; align-items: stretch; gap: 12px; max-width: 100%; }
.appt-side {
  width: 264px; flex: none;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
.appt-side[hidden] { display: none; }
.appt-side-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.appt-side-head strong { font-size: 14px; display: block; }
.appt-side-list { padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.appt-side-empty { font-size: 13px; padding: 8px 2px; }
.appt-slot {
  display: flex; gap: 10px; padding: 8px 10px;
  border-radius: 9px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--border);
}
.appt-slot-time { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.appt-slot-time span { color: var(--text-muted); font-weight: 400; }
.appt-slot-who { font-size: 13px; font-weight: 500; }
.appt-slot-svc { font-size: 12px; color: var(--text-muted); }
.appt-slot-in_chair { border-left-color: #16a34a; }
.appt-slot-notified { border-left-color: #f59e0b; }
.appt-slot-confirmed { border-left-color: #2563eb; }
/* painted availability windows */
.appt-avail {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 7px 10px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
}
.appt-avail-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #16a34a; }
.appt-avail-walkin_only .appt-avail-dot { background: #f59e0b; }
.appt-avail-blocked .appt-avail-dot { background: #9ca3af; }
.appt-avail-mode { color: var(--text-muted); }
.appt-avail-none {
  display: block; color: #92400e;
  background: #FFFBEB; border-color: #FDE68A;
}
.appt-side-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin: 8px 2px 2px;
}

/* Add-appointment modal — date chips + clickable time slots + compact services. */
.appt-modal-wrap .svc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.appt-modal-wrap .svc-card { padding: 9px 12px; }
.appt-modal-wrap .svc-card .name { font-size: 13.5px; }
.appt-modal-wrap .svc-card .meta { font-size: 12px; margin-top: 1px; }
.appt-modal-wrap .svc-card .price { font-size: 14px; }

.appt-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appt-field-head label { margin: 0; }
.appt-other { width: auto; max-width: 150px; font-size: 12.5px; padding: 5px 8px; color: var(--text-muted); }

.appt-date-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: thin; }
.appt-chip {
  flex: 0 0 auto; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-size: 13px; cursor: pointer; white-space: nowrap; line-height: 1.1; color: var(--text);
}
.appt-chip:hover { border-color: var(--border-strong); }
.appt-chip.is-active { background: #2563EB; color: #fff; border-color: #2563EB; }

.appt-slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 6px; margin-top: 8px; max-height: 188px; overflow-y: auto; padding: 2px;
}
.appt-slot-btn {
  padding: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font-size: 13px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; color: var(--text);
}
.appt-slot-btn:hover:not(:disabled) { border-color: #2563EB; }
.appt-slot-btn.is-active { background: #2563EB; color: #fff; border-color: #2563EB; }
.appt-slot-btn:disabled, .appt-slot-btn.is-taken {
  background: var(--surface-2, #F3F4F6); color: var(--text-muted); cursor: not-allowed; text-decoration: line-through;
}
.appt-slot-note { grid-column: 1 / -1; font-size: 12.5px; color: #92400e; padding: 2px; }
.appt-slot-empty { grid-column: 1 / -1; font-size: 13px; padding: 8px 2px; }

/* Walk-in modal — service/staff cards reuse booking styles. */
.wi-step { display: none; }
.wi-step.active { display: block; }

/* ---------- Issues button + badge ---------- */
.issues-btn { display: inline-flex; align-items: center; gap: 6px; }
.issues-count {
  background: #FEE2E2;
  color: #991B1B;
  font-weight: 700;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 2px;
  line-height: 1.4;
}
.issues-count.zero { background: #F3F4F6; color: #6B7280; }

/* ---------- Issue cards inside the modal ---------- */
#issues-list { display: flex; flex-direction: column; gap: 10px; }
.issues-empty {
  text-align: center;
  padding: 32px 16px;
  color: #6B7280;
  font-size: 13px;
}
.issues-empty strong { color: #111827; display: block; margin-bottom: 4px; font-size: 14px; }

.issue-card {
  border: 1px solid #E5E7EB;
  border-left: 4px solid #94A3B8;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  transition: opacity 200ms;
}
.issue-card.dismissed { opacity: 0.4; pointer-events: none; }
.issue-card.no_show    { border-left-color: #DC2626; background: linear-gradient(to right, #FEF2F2 0%, #fff 12%); }
.issue-card.cancelled  { border-left-color: #6B7280; background: linear-gradient(to right, #F3F4F6 0%, #fff 12%); }
.issue-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.issue-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: #111827; }
.issue-meta { font-size: 12px; color: #6B7280; margin-top: 3px; }
.issue-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; font-size: 12.5px; color: #4B5563;
  gap: 10px;
}
.issue-bottom .actions { display: flex; gap: 6px; }
.issue-bottom .btn { padding: 5px 10px; font-size: 12px; }
.issue-pill {
  font-size: 9.5px; font-weight: 800; padding: 3px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.issue-pill.no_show   { background: #FEE2E2; color: #991B1B; }
.issue-pill.cancelled { background: #E5E7EB; color: #4B5563; }
.issue-pill.kind {
  background: #F3F4F6; color: #4B5563;
  margin-left: 6px; font-weight: 700;
}

/* ---------- Staff thumbnails (employee picker) ---------- */
.staff-thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.staff-thumb {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 22px; border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: white; cursor: pointer;
  transition: all 140ms ease;
  font: inherit; color: inherit;
  min-width: 168px;
  text-decoration: none;
}
.staff-thumb:hover { border-color: #94A3B8; transform: translateY(-1px); text-decoration: none; }
.staff-thumb.selected { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.thumb-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px;
  background: linear-gradient(135deg, #DBEAFE, #93C5FD);
  color: #1E40AF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.staff-thumb[data-color="amber"]   .thumb-avatar { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.staff-thumb[data-color="teal"]    .thumb-avatar { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.staff-thumb[data-color="violet"]  .thumb-avatar { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.staff-thumb[data-color="pink"]    .thumb-avatar { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.staff-thumb[data-color="emerald"] .thumb-avatar { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.staff-thumb[data-color="orange"]  .thumb-avatar { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.staff-thumb[data-color="indigo"]  .thumb-avatar { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.staff-thumb[data-color="lime"]    .thumb-avatar { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.thumb-name { font-weight: 600; font-size: 14px; color: #111827; }
.thumb-meta { font-size: 12px; color: #6B7280; }

/* ---------- Weekly availability paint grid ---------- */
.avail-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  user-select: none;
  background: #fff;
}
.ag-day {
  padding: 12px 10px;
  font-weight: 600;
  text-align: center;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  font-size: 13.5px;
}
.ag-day.today { background: #EFF6FF; color: #1E40AF; }
.ag-day .sub { display: block; font-size: 11px; color: #6B7280; font-weight: 500; margin-top: 2px; }
.ag-day.today .sub { color: #2563EB; }
.ag-day .ag-date { display: block; font-size: 11px; color: #6B7280; font-weight: 500; margin-top: 2px; }
.ag-day.today .ag-date { color: #2563EB; }
.ag-corner { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; border-right: 1px solid #E5E7EB; }
.ag-time {
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
  color: #6B7280;
  font-size: 12px;
  border-right: 1px solid #E5E7EB;
  border-top: 1px solid #F3F4F6;
  display: flex; align-items: center; justify-content: flex-end;
  line-height: 1;
}
.ag-time.hour-mark { font-weight: 600; color: #374151; border-top: 1px solid #E5E7EB; }
.ag-cell {
  height: 28px;
  cursor: pointer;
  border-right: 1px solid #F3F4F6;
  border-top: 1px solid #F3F4F6;
  transition: background 80ms;
  background: #fff;
}
.ag-cell.hour-mark { border-top: 1px solid #E5E7EB; }
.ag-cell:hover { background: rgba(37, 99, 235, 0.07); }
.ag-cell.on.both          { background: #DBEAFE; }
.ag-cell.on.both:hover    { background: #BFDBFE; }
.ag-cell.on.walkin_only   { background: #FEF3C7; }
.ag-cell.on.walkin_only:hover { background: #FDE68A; }

/* Paint-mode picker (above grid) */
.paint-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  background: white; border: 1px solid #E5E7EB;
  color: #374151; cursor: pointer;
  transition: all 120ms;
}
.paint-btn:hover { border-color: #94A3B8; }
.paint-btn.active { border-color: #2563EB; background: #EFF6FF; box-shadow: 0 0 0 2px rgba(37,99,235,0.12); }
.paint-sw       { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.paint-sw-both   { background: #DBEAFE; border: 1px solid #93C5FD; }
.paint-sw-walkin { background: #FEF3C7; border: 1px solid #FCD34D; }
.paint-sw-block  { background: #fff;    border: 1px solid #E5E7EB; }

/* ---------- All-staff weekly calendar (read-only Gantt) ---------- */
.all-staff-wrap { overflow-x: auto; }
.all-staff-grid {
  display: grid;
  grid-template-columns: 220px repeat(7, minmax(180px, 1fr));
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  background: #fff;
  min-width: 1480px;
}
.as-corner { background: #F9FAFB; border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
.as-day {
  padding: 12px 10px;
  font-weight: 600;
  text-align: center;
  background: #F9FAFB;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  font-size: 14px;
}
.as-day.today { background: #EFF6FF; color: #1E40AF; }
.as-day .sub { display: block; font-size: 11.5px; font-weight: 500; color: #6B7280; margin-top: 2px; }
.as-day.today .sub { color: #2563EB; }
.as-name {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}
.as-name .av {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.as-name .av[data-color="amber"]   { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.as-name .av[data-color="teal"]    { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.as-name .av[data-color="violet"]  { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.as-name .av[data-color="pink"]    { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.as-name .av[data-color="emerald"] { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.as-name .av[data-color="orange"]  { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.as-name .av[data-color="indigo"]  { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.as-name .av[data-color="lime"]    { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.as-name .nm { font-weight: 600; font-size: 14px; line-height: 1.25; color: #111827; }
.as-name .ro { font-size: 11.5px; color: #6B7280; margin-top: 2px; }

.as-day-row {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #F3F4F6;
  position: relative;
}
.as-day-row.today { background: rgba(239, 246, 255, 0.5); }
.as-cell {
  height: 56px;
  background: transparent;
  border-left: 1px solid transparent;
}
.as-cell.hour-mark { border-left: 1px solid rgba(0,0,0,0.04); }

/* Solid fill — "both" mode, color matches employee avatar */
.as-cell.on[data-color="amber"]   { background: #F59E0B; }
.as-cell.on[data-color="teal"]    { background: #06B6D4; }
.as-cell.on[data-color="violet"]  { background: #8B5CF6; }
.as-cell.on[data-color="pink"]    { background: #EC4899; }
.as-cell.on[data-color="emerald"] { background: #10B981; }
.as-cell.on[data-color="orange"]  { background: #F97316; }
.as-cell.on[data-color="indigo"]  { background: #6366F1; }
.as-cell.on[data-color="lime"]    { background: #84CC16; }

/* Diagonal-stripe overlay — "walkin_only" mode */
.as-cell.on.walkin_only {
  background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, transparent 75%);
  background-size: 6px 6px;
}

/* Mode toggle row — Per-employee vs All-staff */
.staff-mode-toggle { display: flex; gap: 6px; }
.staff-mode-toggle .btn { padding: 7px 14px; }

/* ============================================================
   Staff tablet / station — picker, PIN, and main 3-state UI.
   Designed for tablet landscape; readable at arm's length.
   ============================================================ */
body.station-body { background: #F1F5F9; margin: 0; -webkit-font-smoothing: antialiased; }

/* ---- Picker (who's at this chair?) and PIN entry ---- */
.station-picker { max-width: 960px; margin: 0 auto; padding: 32px 36px; }
.station-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.station-picker-head .brand { padding: 0; font-size: 18px; }
.station-picker-body h1 { font-size: 32px; margin-bottom: 12px; }
.station-picker-body p { color: var(--text-muted); margin: 0 0 26px; }

.picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 880px) { .picker-grid { grid-template-columns: repeat(2, 1fr); } }

.picker-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 18px; border-radius: 14px;
  border: 1px solid #E5E7EB;
  background: #fff;
  text-decoration: none; color: inherit;
  transition: all 140ms ease;
}
.picker-tile:hover  { border-color: #94A3B8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); text-decoration: none; }
.picker-tile:active { transform: translateY(0); }
.picker-tile .thumb-avatar { width: 84px; height: 84px; font-size: 26px; }
.picker-tile .thumb-name   { font-size: 16px; font-weight: 600; }
.picker-tile .thumb-meta   { font-size: 12.5px; color: #6B7280; }
.picker-tile[data-color="amber"]   .thumb-avatar { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.picker-tile[data-color="teal"]    .thumb-avatar { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.picker-tile[data-color="violet"]  .thumb-avatar { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.picker-tile[data-color="pink"]    .thumb-avatar { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.picker-tile[data-color="emerald"] .thumb-avatar { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.picker-tile[data-color="orange"]  .thumb-avatar { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.picker-tile[data-color="indigo"]  .thumb-avatar { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.picker-tile[data-color="lime"]    .thumb-avatar { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }

.station-pin {
  max-width: 420px; margin: 32px auto 0;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: 40px 36px; text-align: center;
  box-shadow: 0 6px 30px rgba(0,0,0,0.05);
}
.station-pin .thumb-avatar.lg { width: 96px; height: 96px; font-size: 30px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.station-pin .thumb-avatar.lg[data-color="amber"]   { background: linear-gradient(135deg, #FEF3C7, #FCD34D); color: #92400E; }
.station-pin .thumb-avatar.lg[data-color="teal"]    { background: linear-gradient(135deg, #CCFBF1, #5EEAD4); color: #0F766E; }
.station-pin .thumb-avatar.lg[data-color="violet"]  { background: linear-gradient(135deg, #EDE9FE, #C4B5FD); color: #5B21B6; }
.station-pin .thumb-avatar.lg[data-color="pink"]    { background: linear-gradient(135deg, #FCE7F3, #F9A8D4); color: #9D174D; }
.station-pin .thumb-avatar.lg[data-color="emerald"] { background: linear-gradient(135deg, #D1FAE5, #6EE7B7); color: #065F46; }
.station-pin .thumb-avatar.lg[data-color="orange"]  { background: linear-gradient(135deg, #FED7AA, #FB923C); color: #9A3412; }
.station-pin .thumb-avatar.lg[data-color="indigo"]  { background: linear-gradient(135deg, #E0E7FF, #A5B4FC); color: #3730A3; }
.station-pin .thumb-avatar.lg[data-color="lime"]    { background: linear-gradient(135deg, #ECFCCB, #BEF264); color: #3F6212; }
.station-pin h2 { font-size: 22px; margin-bottom: 4px; }
.station-pin p  { color: var(--text-muted); margin: 6px 0 22px; font-size: 14px; }
.pin-input {
  width: 100%; max-width: 280px;
  padding: 18px 20px;
  font-size: 38px; font-weight: 700;
  text-align: center; letter-spacing: 16px;
  border: 1px solid #E5E7EB; border-radius: 12px;
  background: #FAFAFA;
}
.pin-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }

/* ---- Main station screen ---- */
/* Fill the viewport and never overflow the page — long queues scroll inside the
   up-next panel instead. 100dvh tracks Chrome's dynamic toolbar on tablets. */
.station { display: grid; grid-template-rows: auto 1fr; height: 100dvh; min-height: 100vh; background: #F1F5F9; overflow: hidden; }
.station-header {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px; background: #fff;
  border-bottom: 1px solid #E5E7EB;
}
.station-header .brand-mark { width: 44px; height: 44px; font-size: 20px; border-radius: 10px; }
.station-header .ident { display: flex; flex-direction: column; line-height: 1.2; }
.station-header .name { font-size: clamp(16px, 2.2vmin, 22px); font-weight: 700; color: #111827; }
.station-header .meta { font-size: 13.5px; color: #6B7280; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.station-header .status-dot {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ECFDF5; color: #065F46;
  padding: 2px 10px 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
}
.station-header .status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #10B981; }
.station-header .clock { margin-left: auto; font-size: clamp(22px, 3.2vmin, 36px); font-weight: 700; font-variant-numeric: tabular-nums; color: #111827; letter-spacing: -0.02em; }
.station-header .end-shift {
  background: #fff; border: 2px solid #FCA5A5; color: #B91C1C;
  padding: 8px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; text-decoration: none;
}
.station-header .end-shift:hover { background: #FEE2E2; text-decoration: none; }

.station-main {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(10px, 1.6vmin, 18px); padding: clamp(12px, 1.8vmin, 22px);
  min-height: 0; overflow: hidden;
}
.now-serving, .up-next {
  background: #fff; border: 1px solid #E5E7EB; border-radius: 16px;
  padding: clamp(14px, 2.3vmin, 28px); display: flex; flex-direction: column; gap: clamp(10px, 1.5vmin, 16px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  min-height: 0; /* allow inner scroll instead of overflowing */
}
.up-next { overflow: hidden; }
.other-up { overflow-y: auto; min-height: 0; flex: 1; }
.section-tag {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 12px; font-weight: 800; color: #6B7280;
}
.now-serving .ns-header { display: flex; align-items: center; justify-content: space-between; }
.ns-kind {
  background: #ECFDF5; color: #065F46;
  padding: 4px 11px; border-radius: 6px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ns-name { font-size: clamp(26px, 4.6vmin, 56px); font-weight: 800; color: #111827; line-height: 1.02; letter-spacing: -0.025em; }
.ns-name.empty { color: #6B7280; font-weight: 700; font-size: clamp(20px, 3vmin, 32px); }
.ns-svc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ns-svc-chip { background: #F1F5F9; color: #1F2937; border: 1px solid #E2E8F0; padding: 6px 14px; border-radius: 10px; font-size: clamp(13px, 1.7vmin, 17px); font-weight: 600; }
.ns-svc-meta { color: #6B7280; font-size: clamp(12px, 1.5vmin, 15px); font-variant-numeric: tabular-nums; }

.timer-card {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid #6EE7B7; border-radius: 14px;
  padding: clamp(12px, 1.7vmin, 18px) clamp(16px, 2.2vmin, 24px);
  display: flex; align-items: center; gap: 16px;
}
.timer-card .label { font-size: clamp(12px, 1.4vmin, 14px); color: #047857; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.timer-card .time { font-size: clamp(24px, 3.4vmin, 38px); font-weight: 800; color: #064E3B; font-variant-numeric: tabular-nums; margin-left: auto; }

.ns-actions { display: flex; gap: clamp(10px, 1.4vmin, 14px); margin-top: auto; }
.btn-mark-complete, .btn-start-service-big {
  flex: 1;
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  color: white; border: none; border-radius: 14px;
  padding: clamp(13px, 2vmin, 24px);
  font-size: clamp(17px, 2.4vmin, 26px); font-weight: 800;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.28);
}
.btn-mark-complete:active, .btn-start-service-big:active { transform: translateY(2px); }
.btn-no-show-big {
  background: #fff; border: 2px solid #FCA5A5; color: #B91C1C;
  border-radius: 14px; padding: clamp(13px, 2vmin, 24px) clamp(18px, 2.4vmin, 28px);
  font-size: clamp(15px, 2vmin, 20px); font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-no-show-big:hover { background: #FEE2E2; }

.ready-card {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1.5px solid #F59E0B; border-radius: 14px;
  padding: 20px 24px;
}
.ready-card .title { font-size: 18px; font-weight: 800; color: #78350F; text-transform: uppercase; letter-spacing: 0.05em; }
.ready-card .sub   { font-size: 14px; color: #92400E; margin-top: 4px; font-weight: 500; }

.walkup-card {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1.5px solid #93C5FD; border-radius: 14px;
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.walkup-title { font-size: 22px; font-weight: 800; color: #1E3A8A; line-height: 1.2; }
.walkup-sub   { font-size: 14px; color: #2563EB; margin-top: 4px; font-weight: 500; }
.walkup-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.walkup-btn {
  background: #fff; border: 2px solid #BFDBFE; border-radius: 12px;
  padding: 22px 16px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit; font-size: 14px;
}
.walkup-btn:hover  { border-color: #2563EB; background: #F0F9FF; }
.walkup-btn:active { transform: translateY(2px); }
.walkup-btn .svc-name { font-size: 20px; font-weight: 800; color: #111827; }
.walkup-btn .svc-dur  { font-size: 14px; color: #6B7280; font-weight: 600; }

/* Up next */
.up-next .un-header { display: flex; align-items: center; justify-content: space-between; }
.un-count { font-size: 14px; color: #6B7280; font-weight: 600; }
.next-up {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 2px solid #F59E0B; border-radius: 14px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.next-up .nu-row { display: flex; align-items: flex-start; gap: 16px; }
.next-up .nu-pos {
  background: #F59E0B; color: #fff;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 800;
}
.next-up .nu-name { font-size: 26px; font-weight: 800; color: #78350F; line-height: 1.1; margin-bottom: 6px; }
.next-up .nu-meta { font-size: 13.5px; color: #92400E; font-weight: 600; }
.other-up { display: flex; flex-direction: column; gap: 4px; }
.other-item {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: clamp(8px, 1.4vmin, 14px) 8px; border-top: 1px solid #F3F4F6;
}
.other-item .pos { font-size: clamp(16px, 2.2vmin, 22px); font-weight: 800; color: #94A3B8; text-align: center; }
.other-item .name { font-size: clamp(14px, 1.8vmin, 18px); font-weight: 700; color: #1F2937; line-height: 1.1; }
.other-item .meta { font-size: 12.5px; color: #6B7280; margin-top: 4px; }
.other-item .kind-tag {
  background: #F1F5F9; color: #475569;
  padding: 5px 11px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.other-item .kind-tag.appt { background: #EFF6FF; color: #1E40AF; }

/* Sizes above are fluid (clamp + vmin) so they scale to any screen. Below we
   only change the LAYOUT: stack the two panels when the screen is narrow, and
   simplify on phones. */
@media (max-width: 900px) {
  .station-main { grid-template-columns: 1fr; overflow-y: auto; } /* stacked → page can scroll */
  .up-next { overflow: visible; }
  .other-up { overflow-y: visible; }
}
@media (max-width: 560px) {
  .ns-actions { flex-direction: column; }
  .walkup-buttons { grid-template-columns: 1fr; }
}

/* ---- Staff avatar photos ---- */
/* When an uploaded photo is present the badge carries `.has-photo`: drop the
   colored gradient and let the image fill the circle. No photo → initials +
   gradient (the rules above) still apply. */
.av.has-photo,
.emp-av.has-photo,
.thumb-avatar.has-photo,
.rp-avatar.has-photo {
  background: none !important;
  padding: 0;
  overflow: hidden;
}
.av img,
.emp-av img,
.thumb-avatar img,
.rp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Gradient-style classes for the staff form's live avatar preview. The base
   color comes from the --c custom property. Keep the white/black mix percentages
   in sync with ApplicationHelper::AVATAR_GRADIENT_STOPS (server-rendered avatars
   build the equivalent inline style there). */
.grad-soft  { background: linear-gradient(135deg, color-mix(in srgb, var(--c), white 60%), color-mix(in srgb, var(--c), white 35%)); color: color-mix(in srgb, var(--c), black 55%); }
.grad-vivid { background: linear-gradient(135deg, color-mix(in srgb, var(--c), white 32%), color-mix(in srgb, var(--c), white 6%));  color: color-mix(in srgb, var(--c), black 55%); }
.grad-solid { background: color-mix(in srgb, var(--c), white 14%); color: color-mix(in srgb, var(--c), black 55%); }

/* ---- Reservation / blocked-time detail modal ---- */
/* Compact detail-modal header: title + status + code on one line, close pinned
   top-right. This <header> is nested in a view wrapper, so `.modal > header`
   (direct child) never matched it — hence the stray close button. */
.rd-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.rd-header h2 { font-size: 17px; margin: 0; line-height: 1.2; }
.rd-head-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rd-head-main .rd-code { font-size: 12px; }
.rd-header .modal-close { flex: none; }

.rd-form { display: flex; flex-direction: column; gap: 10px; }
.rd-form .field { display: flex; flex-direction: column; gap: 4px; }
.rd-form label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rd-form input, .rd-form select {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--text); width: 100%;
}
.rd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Services in two columns so the list doesn't dominate the modal's height. */
.rd-services { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.rd-service { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.rd-service input { width: auto; flex: none; }

/* Barber's existing appointments on the chosen day (reschedule guidance). */
.rd-day { display: flex; flex-direction: column; gap: 4px; }
.rd-day-head { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.rd-day-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.rd-day-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: baseline;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.rd-day-row .rd-day-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rd-day-row .rd-day-cust { color: var(--text-muted); font-size: 12px; }
.rd-day-row.clash { border-color: #FCA5A5; background: var(--danger-bg); }
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Destructive actions (no-show / cancel) split off to the right, away from the everyday flow. */
.rd-actions-danger { display: flex; gap: 8px; margin-left: auto; }
.rd-history { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rd-history-head { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.rd-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rd-history-item { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; }
.rd-history-when { color: var(--text-muted); white-space: nowrap; flex: none; min-width: 92px; }
.rd-history-by { color: var(--text-muted); }
.rd-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #EFF6FF; color: #1E40AF;
}
.rd-pill.in_chair { background: #DCFCE7; color: #166534; }
.rd-pill.notified { background: #FEF9C3; color: #854D0E; }
.rd-pill.completed { background: #F1F5F9; color: #475569; }
.rd-pill.no_show, .rd-pill.cancelled { background: var(--danger-bg); color: var(--danger-fg); }

.btn-warn   { background: var(--warn-bg);   color: var(--warn-fg);   border-color: #FCD34D; }
.btn-warn:hover   { background: #FEF3C7; }
.btn-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: #FECACA; }
.btn-danger:hover { background: #FEE2E2; }

/* ===== WhatsApp: top-bar launcher, inline chat drawer, per-customer icons ===== */
.topbar-chat { position: relative; background: none; border: 0; cursor: pointer; color: var(--text-muted, #6B7280); display: inline-flex; align-items: center; padding: 9px; border-radius: 10px; }
.topbar-chat .icon { width: 23px; height: 23px; }
.topbar-chat:hover { background: #F3F4F6; color: #111827; }
.topbar-chat-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  background: #EF4444; color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-chat-badge[hidden] { display: none; }

.chat-drawer { position: fixed; inset: 0; background: rgba(17,24,39,0.28); display: none; z-index: 1000; }
.chat-drawer.open { display: block; }
.chat-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: 390px; max-width: 92vw; background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,0.14); display: flex; flex-direction: column; }
.chat-drawer-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; cursor: pointer; color: #9CA3AF; z-index: 2; padding: 4px; }
.chat-drawer-close:hover { color: #111827; }
.chat-drawer-panel turbo-frame#chat-frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Extra right padding reserves room for the absolutely-positioned close X (.chat-drawer-close)
   so the right-pinned "Silenciar bot" toggle can't sit under it (a mis-tap would mute the bot). */
.chat-head { padding: 16px 52px 16px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.chat-head-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-head-alt { font-size: 11.5px; color: #8696A0; }
.chat-head-phone { font-size: 12px; color: #667781; }
.chat-head-visit { font-size: 12px; color: #2563EB; font-weight: 600; }

/* Per-number bot mute toggle (chat header + full-page thread). */
.wa-bot-toggle-form { margin: 0; display: inline-block; }
.chat-head .wa-bot-toggle-form { margin-left: auto; }
.wa-bot-toggle {
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--text); line-height: 1.2;
}
.wa-bot-toggle:hover { border-color: var(--border-strong); }
.wa-bot-toggle.is-muted { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.chat-row-muted { margin-left: 3px; font-size: 11px; }
.chat-back { text-decoration: none; color: var(--accent, #2563EB); font-weight: 600; font-size: 13px; }
.chat-compose { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.chat-compose-row { display: flex; gap: 6px; }
.chat-compose-row input { flex: 1; }
.chat-threads { overflow-y: auto; flex: 1; }
.chat-loadmore { display: flex; align-items: center; justify-content: center; padding: 14px; font-size: 12.5px; }
.chat-thread-row { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.chat-thread-row:hover { background: #F9FAFB; }
.chat-thread-row .muted { font-size: 12.5px; margin-top: 2px; }

/* WhatsApp-Web-style conversation list: tabs, rows, avatar, visit chip. */
.chat-search {
  width: 100%; box-sizing: border-box; padding: 8px 12px; margin: 0;
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  font-size: 13px; background: #F9FAFB;
}
.chat-search:focus { outline: none; border-color: #86EFAC; background: #fff; }
.chat-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.chat-tab { flex: 1; text-align: center; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted, #667781); text-decoration: none; }
.chat-tab .n { font-weight: 700; opacity: 0.65; }
.chat-tab:hover { background: #F3F4F6; }
.chat-tab.on { background: #DCFCE7; color: #166534; }
.chat-tab.on .n { opacity: 1; }

.chat-row { display: flex; align-items: center; gap: 11px; padding: 9px 14px; border-bottom: 1px solid #F1F2F4; color: inherit; text-decoration: none; }
.chat-row:hover { background: #F5F6F6; }
.chat-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.chat-row-main { flex: 1; min-width: 0; }
.chat-row-top { display: flex; align-items: baseline; gap: 8px; }
.chat-row-name { font-weight: 600; font-size: 14px; color: #111B21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.chat-row-time { font-size: 11.5px; color: #667781; flex: none; }
.chat-row.has-visit .chat-row-time { color: #16A34A; font-weight: 600; }
.chat-row-phone { display: block; font-size: 11.5px; color: #8696A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-row-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.chat-row-preview { flex: 1; min-width: 0; font-size: 12.5px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-chip { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.chat-chip.appt { background: #DBEAFE; color: #1E40AF; }
.chat-chip.walk { background: #DCFCE7; color: #166534; }
/* Unread conversation: a green count badge + a bolder, darker row. */
.chat-row-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.chat-row.is-unread { background: #F6FBF7; }
.chat-row.is-unread .chat-row-name { font-weight: 700; color: #0B1418; }
.chat-row.is-unread .chat-row-preview { color: #2C3A42; font-weight: 600; }
.chat-row.is-unread .chat-row-time { color: #25D366; font-weight: 700; }
.chat-thread-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; min-height: 0; }
/* WhatsApp-style centered day divider between messages. */
.chat-day-divider { display: flex; justify-content: center; margin: 12px 0 8px; }
.chat-day-divider span {
  background: #E7F0F2; color: #41525D; font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
/* "Qué hizo el bot": el rastro de decisiones del bot para este cliente. Cerrado
   por defecto — sólo se abre cuando alguien está diagnosticando una queja. */
.wa-trail { border-top: 1px solid var(--border); font-size: 12.5px; }
.wa-trail > summary {
  cursor: pointer; padding: 9px 16px; color: #41525D; font-weight: 600;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.wa-trail > summary::-webkit-details-marker { display: none; }
.wa-trail > summary::before { content: "▸"; font-size: 10px; color: #8696A0; }
.wa-trail[open] > summary::before { content: "▾"; }
.wa-trail > summary:hover { background: #F4F7F8; }
.wa-trail-count {
  background: #E7F0F2; color: #41525D; border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.wa-trail-list { list-style: none; margin: 0; padding: 0 16px 12px; max-height: 40vh; overflow-y: auto; }
.wa-trail-item { display: flex; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); }
.wa-trail-item:first-child { border-top: 0; }
.wa-trail-when { color: #8696A0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-trail-what { min-width: 0; }
.wa-trail-refused .wa-trail-what > strong { color: #B3372A; }
.wa-trail-booked  .wa-trail-what > strong { color: #2E7D4F; }
.wa-trail-times { font-variant-numeric: tabular-nums; color: #41525D; }
.wa-trail-code {
  background: #F7E4E1; color: #B3372A; border-radius: 5px;
  padding: 1px 6px; font-size: 11.5px;
}
.wa-trail-ctx { color: #8696A0; font-size: 11.5px; margin-top: 2px; }
.wa-trail-conflicts { margin-top: 4px; }
.wa-trail-conflict {
  font-variant-numeric: tabular-nums; color: #41525D; font-size: 11.5px;
  padding-left: 8px; border-left: 2px solid #DCE3EA;
}
.chat-reply { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.chat-reply input { flex: 1; }

/* Per-customer chat icon — hidden until wa-icons confirms WhatsApp. */
.wa-chat-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #25D366; color: #fff; cursor: pointer; padding: 0; flex: none; }
.wa-chat-icon:hover { background: #1EBE5B; }
.wa-chat-icon[hidden] { display: none; }
.tgh-event .wa-chat-icon,
.tg-projection .wa-chat-icon, .tgh-projection .wa-chat-icon { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; }
/* Today grid: info ⓘ, WhatsApp and the start/stop action share one bottom-right row. */
.tg-event .tg-tools { position: absolute; bottom: 4px; right: 4px; display: flex; align-items: center; gap: 5px; z-index: 2; }
.tg-event .tg-tools .wa-chat-icon { position: static; width: 18px; height: 18px; }
.wa-chat-btn { background: #25D366; color: #fff; border-color: #25D366; }
.wa-chat-btn:hover { background: #1EBE5B; }

/* Per-barber "next appointment in X min" warning under the name (shown by JS within
   30 min, counting down live). */
.tg-appt-soon {
  display: inline-flex; align-items: center; gap: 3px; margin: 2px auto 0;
  padding: 1px 7px; border-radius: 999px;
  background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412;
  font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.tg-appt-soon[hidden] { display: none; }

/* Topbar appointment-notifications bell + pending panel (chat-style). */
.topbar-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.topbar-notifs { position: relative; display: inline-flex; }
.topbar-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text); cursor: pointer;
}
.topbar-bell:hover { background: #F9FAFB; }
.topbar-notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #DC2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px;
}
.topbar-notif-badge[hidden] { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  width: 320px; max-height: 70vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.notif-panel[hidden] { display: none; }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.notif-ackall { background: none; border: 0; color: var(--accent, #2563EB); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #F1F2F4; font-size: 13px; }
.notif-item-body { flex: 1; min-width: 0; line-height: 1.4; }
.notif-item-ack {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: #16A34A; color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.notif-item-ack:hover { background: #15803D; }
.notif-empty { padding: 18px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Inline start (▶) / finish (◼) action button on a schedule block. */
.tg-event .tg-act {
  position: static; flex: none;
  width: 21px; height: 21px; border: 0; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.25); z-index: 2;
}
.tg-act-start { background: #16A34A; }
.tg-act-start:hover { background: #15803D; }
.tg-act-start svg { margin-left: 1px; } /* optically center the play triangle */
.tg-act-done { background: #DC2626; }
.tg-act-done:hover { background: #B91C1C; }
.tg-event .tg-act:disabled { opacity: 0.55; cursor: default; }
.tg-event.compact .tg-act { width: 18px; height: 18px; }
.tg-event.compact .tg-tools { bottom: 2px; right: 2px; gap: 4px; }

/* ---- Timing "ⓘ" on a schedule block + its popover ---- */
.tg-info-wrap { position: relative; display: inline-flex; }
.tg-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 24, 39, 0.4); color: #fff;
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.tg-info:hover { background: rgba(17, 24, 39, 0.78); }
/* While its popover is open, let the (otherwise clipped) block show it and lift it
   above neighbours. */
.tg-event.info-open { overflow: visible; z-index: 50; }
.tg-info-pop {
  position: absolute; bottom: 21px; right: 0; z-index: 51;
  min-width: 158px; padding: 8px 10px; border-radius: 8px;
  background: #111827; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 11.5px; font-weight: 500; line-height: 1.45; white-space: nowrap; cursor: default;
}
.tg-info-pop[hidden] { display: none; }
.tg-info-pop > div { display: flex; justify-content: space-between; gap: 16px; }
.tg-info-pop span { opacity: 0.65; }
.tg-info-pop b { font-weight: 700; }
.tg-info-pop .tg-info-sug { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.tg-info-pop .tg-info-sug span, .tg-info-pop .tg-info-sug b { color: #FCD34D; opacity: 1; }
.tg-info-pop b.tg-info-struck { text-decoration: line-through; opacity: 0.55; font-weight: 600; }
.tg-info-pop .tg-info-late { margin-left: 6px; color: #FCA5A5; font-weight: 700; font-size: 11px; }

/* ---- Franchise logo / brand mark ---- */
/* When a logo is set, the brand-mark box holds the image instead of the letter:
   drop the solid fill and contain the image in whatever size the context sets. */
.brand-mark.has-logo { background: transparent; color: inherit; overflow: hidden; padding: 0; }
.brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Branding admin preview */
.branding-preview { display: flex; align-items: center; gap: 14px; }
.branding-mark {
  width: 96px; height: 96px; border-radius: 14px;
  background: var(--text, #111827); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 40px;
  border: 1px solid var(--border, #e5e7eb);
}
.branding-mark.has-logo { background: #fff; overflow: hidden; padding: 6px; }
.branding-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Kiosk: customer self check-in ---- */
.kiosk {
  max-width: 760px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 28px 28px 0;
}
.kiosk-head { display: flex; align-items: center; margin-bottom: 8px; }
.kiosk-head .brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; }
.kiosk-head .brand-mark {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent, #4f46e5); color: #fff; font-weight: 800; font-size: 18px;
}
.kiosk-step { display: none; flex: 1; flex-direction: column; padding: 8px 0 20px; }
.kiosk-step.active { display: flex; }
.kiosk-step h1 { font-size: clamp(26px, 4.4vmin, 38px); margin: 12px 0 18px; line-height: 1.15; }
.kiosk-step h2.kiosk-sub { font-size: 17px; font-weight: 700; margin: 22px 0 12px; color: #374151; }
.kiosk-optional { font-size: 0.55em; font-weight: 500; color: var(--text-muted); vertical-align: middle; }
.kiosk-skip-phone { align-self: flex-start; margin-top: 14px; font-size: 17px; padding: 12px 18px; }
.kiosk-no-phone-note { margin-top: 14px; font-size: 15px; }
.kiosk-step .muted { font-size: 16px; }

/* welcome + done hero */
.kiosk-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.kiosk-hero h1 { font-size: clamp(30px, 5.5vmin, 46px); margin: 6px 0; }
.kiosk-cta { font-size: 22px; padding: 18px 40px; border-radius: 14px; margin-top: 18px; }
.kiosk-check {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: #ECFDF5; color: #059669; font-size: 52px; font-weight: 700; margin-bottom: 4px;
}

/* party size */
.kiosk-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kiosk-size-btn {
  font-size: 54px; font-weight: 800; color: #111827;
  background: #fff; border: 2px solid #E5E7EB; border-radius: 18px;
  padding: 40px 0; cursor: pointer; font-family: inherit;
  transition: all 120ms ease;
}
.kiosk-size-btn:hover  { border-color: var(--accent, #4f46e5); transform: translateY(-2px); }
.kiosk-size-btn:active { transform: translateY(0); }

/* per-person */
.kiosk-person-tag {
  align-self: flex-start; background: #EEF2FF; color: #3730A3;
  font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; margin-bottom: 4px;
}
.kiosk-name-field label { font-size: 15px; font-weight: 600; }
.kiosk-name-field input {
  width: 100%; font-size: 22px; padding: 16px 18px;
  border: 1px solid #E5E7EB; border-radius: 12px; background: #FAFAFA;
}
.kiosk .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .kiosk .svc-grid { grid-template-columns: 1fr; } }

/* review + positions */
.kiosk-review { display: flex; flex-direction: column; gap: 10px; }
.kiosk-review-row { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px 18px; }
.kiosk-review-row .kr-name { font-weight: 700; font-size: 18px; }
.kiosk-review-row .kr-meta { color: #6B7280; font-size: 14.5px; margin-top: 2px; }
.kiosk-positions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 8px 0 4px; }
.kiosk-pos-row { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px 18px; }
.kiosk-pos-row .kp-name { font-weight: 600; font-size: 17px; }

/* sticky footer nav */
.kiosk-nav {
  position: sticky; bottom: 0; display: flex; gap: 12px; align-items: center;
  padding: 16px 0 24px; margin-top: auto; background: linear-gradient(to top, #F1F5F9 70%, transparent);
}
.kiosk-nav .kiosk-next { margin-left: auto; }
.kiosk-nav .btn { font-size: 18px; padding: 16px 28px; border-radius: 12px; }


/* Job applications — the applicants list and one applicant's detail. */
.pill-on { background: var(--text); color: var(--bg); }
.job-application-facts { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; }
.job-application-facts dt { color: var(--text-muted); font-size: 13px; }
.job-application-facts dd { margin: 0; }
.job-application-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.job-application-photos img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* Notas de seguimiento de una solicitud: quién llamó, cuándo y qué pasó. */
.job-application-notes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.job-application-note { border-left: 2px solid var(--border); padding: 2px 0 2px 12px; }
.job-application-note-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.job-application-note-body { margin: 3px 0 0; white-space: pre-wrap; font-size: 14px; }
.job-application-note-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.job-application-note-form textarea { width: 100%; resize: vertical; }