/*
 * GlowSuite — minimal hand-written CSS using the brand palette.
 * No Tailwind build pipeline required. Replace with `npx tailwindcss ... --minify`
 * output later if you want full Tailwind utility classes.
 */

/* ─── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #F5EFE6;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(184,153,104,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(155,126,79,.10), transparent 60%),
    #0E0B0A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, button, textarea, select { font: inherit; color: inherit; }
::selection { background: #B89968; color: #1A1614; }

/* ─── Typography ───────────────────────────────────────────── */
.font-display {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.012em;
}

h1, h2, h3 { margin: 0; }

/* ─── Brand colors as utility classes ──────────────────────── */
.text-ink     { color: #F5EFE6; }
.text-ink-muted   { color: #A8A29A; }
.text-ink-subtle  { color: #6B655E; }
.text-gold    { color: #B89968; }
.text-gold-700 { color: #9B7E4F; }
.text-red     { color: #C9534B; }
.text-success { color: #3F9E7B; }

.bg-bg     { background: #0E0B0A; }
.bg-bg-100 { background: #1A1614; }
.bg-bg-200 { background: #221C19; }
.bg-gold   { background: #B89968; color: #1A1614; }
.bg-gold-soft { background: rgba(184,153,104,.12); }
.bg-cream  { background: #F5EFE6; color: #1A1614; }

.border-line { border-color: #2A231F; }

/* ─── Layout primitives ────────────────────────────────────── */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }

.stack > * + * { margin-top: 1rem; }

/* ─── Auth shell ───────────────────────────────────────────── */
.auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 1024px) {
  .auth { grid-template-columns: 1fr 1fr; }
}
.auth-hero {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 3rem;
  background: #15110F;
  border-right: 1px solid #2A231F;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 1024px) { .auth-hero { display: flex; } }
.auth-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, rgba(124,58,237,.15), transparent 60%),
    radial-gradient(800px 500px at 20% 80%, rgba(184,153,104,.20), transparent 60%);
  pointer-events: none;
}
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero h1 { font-size: 3rem; line-height: 1.05; max-width: 28rem; }
.auth-hero p  { color: #A8A29A; max-width: 28rem; margin-top: 1.25rem; font-size: 1.05rem; }

.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
@media (min-width: 640px) { .auth-form-wrap { padding: 3rem; } }
.auth-form { width: 100%; max-width: 26rem; }

/* ─── Brand mark (rounded tile + sparkle) ──────────────────── */
.brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: #1A1614;
  border-radius: .9rem;
  box-shadow: 0 0 0 1px rgba(184,153,104,.30), 0 8px 32px rgba(184,153,104,.18);
}

.wordmark { font-size: 1.5rem; color: #F5EFE6; }

/* ─── Form controls ────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-label {
  font-size: .8rem;
  font-weight: 500;
  color: #A8A29A;
  text-transform: none;
}
.input {
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 .9rem;
  gap: .5rem;
  background: #1A1614;
  border: 1px solid #2A231F;
  border-radius: .75rem;
  color: #F5EFE6;
  font-size: .95rem;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .input:focus-within {
  outline: none;
  border-color: #B89968;
  box-shadow: 0 0 0 3px rgba(184,153,104,.18);
}
.input::placeholder { color: #6B655E; }
.input:disabled, .input.is-muted { opacity: .5; cursor: not-allowed; }

.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 2.5rem; }
.input-with-icon .icon {
  position: absolute; left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: #6B655E; width: 1rem; height: 1rem;
  pointer-events: none;
}

textarea.input { height: auto; padding: .65rem .9rem; resize: vertical; min-height: 6rem; }

.checkbox { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; color: #A8A29A; }
.checkbox input[type=checkbox] {
  width: 1rem; height: 1rem;
  accent-color: #B89968;
  border-radius: .25rem;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: .75rem;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid #B89968; outline-offset: 2px; }

.btn-gold   { background: linear-gradient(135deg,#CDB47D 0%,#B89968 50%,#9B7E4F 100%); color: #1A1614; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-outline{ background: transparent; border-color: #2A231F; color: #F5EFE6; }
.btn-outline:hover { background: rgba(245,239,230,.04); }
.btn-ghost  { background: transparent; color: #A8A29A; }
.btn-ghost:hover { color: #F5EFE6; background: rgba(245,239,230,.05); }
.btn-danger { background: rgba(201,83,75,.12); color: #C9534B; border-color: rgba(201,83,75,.30); }
.btn-block  { width: 100%; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Cards ────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgba(245,239,230,.04), rgba(245,239,230,.01));
  border: 1px solid #2A231F;
  border-radius: 1rem;
  padding: 1.25rem;
}

/* ─── Alerts / flashes ─────────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: .75rem;
  border: 1px solid transparent;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.alert-success { background: rgba(63,158,123,.10); border-color: rgba(63,158,123,.30); color: #62C29B; }
.alert-error   { background: rgba(201,83,75,.10);  border-color: rgba(201,83,75,.30);  color: #E8867F; }
.alert-info    { background: rgba(91,125,177,.10); border-color: rgba(91,125,177,.30); color: #8FAAD3; }
.alert-gold    { background: rgba(184,153,104,.10); border-color: rgba(184,153,104,.30); color: #D6BD8E; }

/* ─── Top nav (horizontal, flat) ──────────────────────────── */
.app-body { background: #0E0B0A; color: #F5EFE6; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: #1A1614;
  border-bottom: 1px solid rgba(184,153,104,.12);
  backdrop-filter: blur(12px);
}
.topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  height: 4.25rem;            /* a hair taller so icon+label sits comfortably */
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand .brand-name { font-size: 1rem; color: #F5EFE6; letter-spacing: -.012em; }
.tenant-sep   { color: #2A231F; }
.tenant-name  {
  color: #A8A29A; font-size: .85rem;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.primary-nav {
  display: flex;
  align-items: stretch;
  gap: .15rem;
  flex: 1;
  overflow-x: auto;
}
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav .nav-item {
  display: inline-flex;
  flex-direction: column;            /* icon stacked over label */
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .45rem .85rem;
  color: #A8A29A;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .015em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.primary-nav .nav-icon  { display: inline-flex; }
.primary-nav .nav-icon svg { display: block; }
.primary-nav .nav-label { display: inline-block; }
.primary-nav .nav-item:hover    { color: #F5EFE6; }
.primary-nav .nav-item.is-active {
  color: #B89968;
  border-bottom-color: #B89968;
}

.topbar-end {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* ── Contextual section sub-nav ───────────────────────────── */
.sub-nav {
  background: #13110F;
  border-bottom: 1px solid rgba(184,153,104,.08);
}
.sub-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  height: 3rem;
  overflow-x: auto;
}
.sub-nav-inner::-webkit-scrollbar { display: none; }
.sub-nav-item {
  display: inline-flex;
  align-items: center;
  padding: .5rem 0;
  color: #A8A29A;
  font-size: .85rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
}
.sub-nav-item:hover { color: #F5EFE6; }
.sub-nav-item.is-active {
  color: #F5EFE6;
  border-bottom-color: #B89968;
}

/* ── Main content area ───────────────────────────────────── */
.app-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem;
}
@media (min-width: 1024px) {
  .app-main { padding: 1.75rem 2rem; }
}

@media (max-width: 768px) {
  .topbar-inner   { gap: .75rem; padding: 0 .85rem; }
  .tenant-sep,
  .tenant-name    { display: none; }
  .user-name      { display: none; }
}

/* ── Language switcher (uses native <details>) ───────────── */
.lang-switcher,
.user-switcher {
  position: relative;
  flex-shrink: 0;
}
.lang-switcher summary,
.user-switcher summary {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .65rem;
  border-radius: .5rem;
  color: #F5EFE6;
  font-size: .82rem;
  cursor: pointer;
  list-style: none;
}
.lang-switcher summary::-webkit-details-marker,
.user-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary:hover,
.user-switcher summary:hover { background: rgba(245,239,230,.05); }
.lang-switcher img { border-radius: 2px; display: block; }
.lang-code { letter-spacing: .04em; font-weight: 600; font-size: .75rem; color: #A8A29A; }
.lang-caret { transition: transform .15s ease-out; color: #A8A29A; }
.lang-switcher[open] .lang-caret,
.user-switcher[open] .lang-caret { transform: rotate(180deg); }

.lang-menu, .user-menu {
  position: absolute; right: 0; top: calc(100% + .35rem);
  min-width: 12rem;
  list-style: none; padding: .35rem; margin: 0;
  background: #15110F;
  border: 1px solid rgba(184,153,104,.18);
  border-radius: .65rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 90;
}
.lang-item, .user-item {
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
  padding: .5rem .65rem;
  border: none; background: none;
  color: #F5EFE6;
  font-size: .85rem;
  text-align: left; cursor: pointer;
  border-radius: .4rem;
  text-decoration: none;
}
.lang-item:hover, .user-item:hover { background: rgba(245,239,230,.05); }
.lang-item.is-active { color: #B89968; background: rgba(184,153,104,.12); }
.user-item-danger { color: #C9534B; }
.user-menu-sep { height: 1px; background: rgba(184,153,104,.10); margin: .3rem .2rem; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(135deg,#CDB47D 0%,#9B7E4F 100%);
  color: #1A1614; font-weight: 700; font-size: .75rem;
}
.user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #F5EFE6; }

/* ─── Utilities ────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-sm { font-size: .85rem; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.5rem; }
.text-2xl { font-size: 1.875rem; }
.text-3xl { font-size: 2.25rem; }
.text-4xl { font-size: 3rem; }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.w-full { width: 100%; }
.hidden { display: none; }
.relative { position: relative; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up .35s ease-out both; }

/* ─── Responsive table wrapper ──────────────────────────────
   Use: <div class="table-scroll"><table>...</table></div>
   Or wrap any table that may overflow on small screens.        */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }

/* ─── Branded confirm modal (replaces window.confirm) ──────── */
.gs-confirm-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(14, 11, 10, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fade-in-up .18s ease-out both;
}
.gs-confirm-card {
  background: #1A1614; border: 1px solid rgba(184,153,104,.35);
  border-radius: 14px; padding: 1.5rem; max-width: 460px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.gs-confirm-text {
  margin: 0 0 1.25rem; color: #F5EFE6; font-size: .95rem; line-height: 1.55;
}
.gs-confirm-actions {
  display: flex; gap: .65rem; justify-content: flex-end; flex-wrap: wrap;
}
.gs-confirm-actions .btn { min-width: 110px; justify-content: center; }

/* ─── Submit button pending state (set by JS) ──────────────── */
.btn-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button[data-pending="1"], input[data-pending="1"] { cursor: wait; }

/* ─── Pagination ───────────────────────────────────────────── */
.paginator {
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(184,153,104,.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.paginator-info {
  font-size: .8rem; color: #A8A29A;
}
.paginator-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: .25rem; align-items: center;
}
.paginator-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 .65rem;
  border: 1px solid rgba(184,153,104,.18);
  border-radius: .5rem;
  background: transparent;
  color: #A8A29A;
  text-decoration: none;
  font-size: .85rem;
  transition: background .15s, color .15s, border-color .15s;
}
.paginator-link:hover {
  color: #F5EFE6;
  border-color: rgba(184,153,104,.45);
  background: rgba(184,153,104,.08);
}
.paginator-link.current {
  background: #B89968;
  color: #1A1614;
  border-color: #B89968;
  font-weight: 600;
}
.paginator-link.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.paginator-gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; color: #6e6a64; font-size: .85rem;
}

/* ─── Legal footer — full-width strip, sits at end of content ─
   We don't fix it to the viewport any more (which clipped long
   pages). It still spans the full width, just lives at the end
   of the body and scrolls naturally with the page.
*/
:root { --ft-height: 56px; }

.app-legal-footer {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  background: var(--surface, #1A1614);
  border-top: 1px solid var(--line, rgba(184,153,104,.18));
  display: flex;
  align-items: center;
  min-height: var(--ft-height);
}
.app-legal-footer-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

/* Brand logo on the left — swap between dark/light variant via theme */
.ft-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.ft-logo {
  height: 28px;
  width: auto;
  display: block;
}
.ft-logo-dark  { display: block; }
.ft-logo-light { display: none; }
:root.theme-light .ft-logo-dark  { display: none; }
:root.theme-light .ft-logo-light { display: block; }

/* Links in the middle */
.ft-links {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: .85rem;
  flex-wrap: wrap;
  font-size: .82rem;
}
.ft-links a {
  color: var(--ink-muted, #A8A29A);
  text-decoration: none;
  transition: color .12s;
}
.ft-links a:hover { color: var(--gold, #B89968); }
.ft-sep {
  color: var(--ink-subtle, #5C5752);
  font-size: .7rem;
  user-select: none;
}

/* Copyright + tagline on the right */
.ft-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .1rem;
  color: var(--ink-subtle, #5C5752);
  font-size: .72rem;
  text-align: right;
  flex-shrink: 0;
}
.ft-copy    { color: var(--ink-muted, #A8A29A); font-weight: 500; }
.ft-tagline {
  font-family: 'Fraunces','Cormorant Garamond',Georgia,serif;
  font-style: italic;
  font-size: .7rem;
}

/* Footer no longer fixed — body padding-bottom not needed */
body.app-body, .app-body { padding-bottom: 0; }

/* Responsive — collapse meta column on narrow screens */
@media (max-width: 980px) {
  .ft-tagline { display: none; }
  .ft-links { gap: .55rem; font-size: .75rem; }
  .ft-logo  { height: 24px; }
}
@media (max-width: 640px) {
  :root { --ft-height: 48px; }
  .app-legal-footer-inner { padding: 0 .75rem; gap: .75rem; }
  .ft-links a { display: none; }
  .ft-links a:nth-child(1), .ft-links a:nth-child(3) { display: inline; }
  .ft-sep { display: none; }
  .ft-meta { font-size: .65rem; }
}

/* Hide footer entirely when printing */
@media print {
  .app-legal-footer { display: none !important; }
  body.app-body { padding-bottom: 0 !important; }
}

/* ─── Settings grid — tile cards across the full width ─────── */
.settings-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.settings-tile {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  min-height: 9rem;
  justify-content: space-between;
}
.settings-tile > div:first-child {
  display: flex; flex-direction: column; gap: .35rem;
}
.settings-tile h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.settings-tile p {
  margin: 0;
  line-height: 1.45;
}
.settings-tile .btn-outline {
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   TOPCHROME — SalonTarget-density nav in GlowSuite brand colors.
   3 stacked bands: context strip · icon toolbar · section sub-nav.
   ═══════════════════════════════════════════════════════════════════ */

.topchrome {
  position: relative;
  z-index: 90;
  background: #1A1614;
  border-bottom: 1px solid rgba(184,153,104,.10);
}

/* ─── 1. Context strip ─────────────────────────────────────── */
.topbar-context {
  background: #13110F;
  border-bottom: 1px solid rgba(184,153,104,.08);
  font-size: .78rem;
}
.topbar-context-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: .45rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  color: #A8A29A;
}
.ctx-brand {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #F5EFE6; text-decoration: none;
  font-size: .9rem;
  letter-spacing: -.01em;
}
.ctx-brand:hover { color: #B89968; }
.ctx-sep { color: #4a4239; padding: 0 .1rem; }
.ctx-tenant { color: #F5EFE6; font-weight: 500; }
.ctx-owner { color: #A8A29A; }
.ctx-owner-label { color: #6e6a64; }
.ctx-spacer { flex: 1; min-width: 1rem; }
.ctx-clock {
  color: #B89968; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; font-size: .78rem;
}

/* Language + user — native <details> dropdowns. */
.ctx-lang, .ctx-user { position: relative; }
.ctx-lang > summary, .ctx-user > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .55rem;
  border-radius: .4rem;
  color: #A8A29A;
  font-size: .78rem;
  transition: background .12s, color .12s;
}
.ctx-lang > summary::-webkit-details-marker,
.ctx-user > summary::-webkit-details-marker { display: none; }
.ctx-lang > summary:hover, .ctx-user > summary:hover {
  background: rgba(184,153,104,.08); color: #F5EFE6;
}
.ctx-flag { border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.05); display: inline-block; }
.ctx-caret { opacity: .7; transition: transform .15s; }
.ctx-lang[open] .ctx-caret, .ctx-user[open] .ctx-caret { transform: rotate(180deg); }

.ctx-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: linear-gradient(135deg, #B89968, #9B7E4F);
  color: #1A1614; font-size: .7rem; font-weight: 700;
}
.ctx-user-name { color: #F5EFE6; max-width: 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ctx-menu {
  position: absolute; right: 0; top: calc(100% + .35rem);
  list-style: none; margin: 0; padding: .35rem;
  background: #1A1614;
  border: 1px solid rgba(184,153,104,.22);
  border-radius: .55rem;
  min-width: 11rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 100;
}
.ctx-menu li { margin: 0; }
.ctx-menu form { margin: 0; }
.ctx-menu-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .5rem .65rem;
  background: transparent; border: 0; cursor: pointer;
  color: #F5EFE6; text-decoration: none;
  font-size: .82rem; text-align: left;
  border-radius: .4rem;
}
.ctx-menu-item:hover { background: rgba(184,153,104,.10); }
.ctx-menu-item.is-active { color: #B89968; }
.ctx-menu-danger { color: #C9534B; }
.ctx-menu-danger:hover { background: rgba(201,83,75,.10); }
.ctx-menu-sep {
  height: 1px; background: rgba(184,153,104,.12);
  margin: .25rem .25rem;
}

/* ─── 2. Primary icon toolbar ──────────────────────────────── */
.iconbar {
  background: #1A1614;
  border-bottom: 1px solid rgba(184,153,104,.10);
}
.iconbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: .55rem 1rem;
  display: flex;
  align-items: stretch;
  gap: .1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(184,153,104,.25) transparent;
}
.iconbar-inner::-webkit-scrollbar { height: 6px; }
.iconbar-inner::-webkit-scrollbar-thumb { background: rgba(184,153,104,.25); border-radius: 3px; }
.iconbar-item {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .25rem;
  padding: .45rem .7rem .5rem;
  color: #A8A29A;
  text-decoration: none;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  min-width: 4.5rem;
  transition: color .12s, border-color .12s, background .12s;
}
.iconbar-item:hover {
  color: #F5EFE6;
  background: rgba(184,153,104,.04);
}
.iconbar-item.is-active {
  color: #B89968;
  border-bottom-color: #B89968;
  background: rgba(184,153,104,.06);
}
.iconbar-glyph {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.iconbar-glyph svg { display: block; }
.iconbar-label { font-weight: 500; font-size: .7rem; }
.iconbar-badge {
  position: absolute;
  top: -.35rem; right: -.6rem;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #B89968; color: #1A1614;
  font-size: .58rem; font-weight: 700;
  letter-spacing: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px #1A1614;
}

/* ─── 3. Section sub-nav (tabs) ────────────────────────────── */
.sectionbar {
  background: #13110F;
  border-bottom: 1px solid rgba(184,153,104,.08);
}
.sectionbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: stretch;
  gap: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.sectionbar-inner::-webkit-scrollbar { display: none; }
.sectiontab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem;
  color: #A8A29A;
  font-size: .82rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.sectiontab:hover { color: #F5EFE6; }
.sectiontab.is-active {
  color: #F5EFE6;
  border-bottom-color: #B89968;
}
.sectiontab-label { display: inline-block; }
.sectiontab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .35rem;
  background: rgba(184,153,104,.16);
  color: #B89968;
  border-radius: 9999px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: 0;
}
.sectiontab.is-active .sectiontab-count {
  background: #B89968; color: #1A1614;
}
.sectiontab-count.is-warn {
  background: rgba(201,83,75,.18); color: #E07C73;
}
.sectiontab.is-active .sectiontab-count.is-warn {
  background: #C9534B; color: #F5EFE6;
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .topbar-context-inner { padding: .4rem .85rem; gap: .5rem; }
  .ctx-owner, .ctx-clock { display: none; }
  .iconbar-item { padding: .4rem .55rem .45rem; min-width: auto; }
  .iconbar-label { font-size: .65rem; }
}
@media (max-width: 640px) {
  .ctx-user-name { display: none; }
  .iconbar-label { display: none; }
  .iconbar-item { min-width: 2.75rem; padding: .55rem .5rem; }
  .iconbar-badge { top: -.25rem; right: -.35rem; }
  .sectionbar-inner { padding: 0 .85rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SALONTARGET-EXACT — full-width + 3-band nav + theme variables
   Overrides the above legacy rules. Everything below uses --vars so
   the day/night toggle works.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0E0B0A;
  --surface:     #1A1614;
  --surface-2:   #13110F;
  --surface-3:   #221C19;
  --ink:         #F5EFE6;
  --ink-muted:   #A8A29A;
  --ink-subtle:  #6B655E;
  --gold:        #B89968;
  --gold-deep:   #9B7E4F;
  --on-gold:     #1A1614;   /* text colour on top of a gold background */
  --on-surface:  #F5EFE6;   /* same as --ink in dark, here for clarity in vars */
  --line:        rgba(184,153,104,.18);
  --line-soft:   rgba(184,153,104,.10);
  --line-strong: rgba(184,153,104,.35);
  --shadow:      0 12px 32px rgba(0,0,0,.45);
  --tab-active-bg: rgba(184,153,104,.10);
  --danger:      #C9534B;
}

:root.theme-light {
  --bg:          #FAF6EF;
  --surface:     #FFFFFF;
  --surface-2:   #F5EFE6;
  --surface-3:   #EAE2D3;
  --ink:         #1A1614;
  --ink-muted:   #5C5752;
  --ink-subtle:  #8B8378;
  --gold:        #9B7E4F;
  --gold-deep:   #7A6238;
  --on-gold:     #FFFFFF;   /* white text on the deeper gold in light mode */
  --on-surface:  #1A1614;
  --line:        rgba(155,126,79,.22);
  --line-soft:   rgba(155,126,79,.12);
  --line-strong: rgba(155,126,79,.40);
  --shadow:      0 8px 24px rgba(26,22,20,.10);
  --tab-active-bg: rgba(155,126,79,.10);
  --danger:      #B0463F;
}

/* Body + main use vars */
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 15px;
}
.app-body { background: var(--bg) !important; color: var(--ink) !important; min-height: 100vh; }

/* Full-width: drop all max-widths on chrome and main */
.app-main {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 1.25rem 1.5rem;
}
@media (min-width: 1024px) { .app-main { padding: 1.5rem 2rem; } }

.topchrome {
  position: relative; z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar-context {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem;
}
.topbar-context-inner {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: .5rem 1.25rem;
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  color: var(--ink-muted);
}
.ctx-salon { color: var(--ink); font-weight: 700; font-size: .92rem; }
.ctx-sep   { color: var(--ink-subtle); }
.ctx-owner { color: var(--ink-muted); }
.ctx-owner-label { color: var(--ink-subtle); }
.ctx-owner strong { color: var(--ink); font-weight: 600; }
.ctx-spacer { flex: 1; min-width: 1rem; }
.ctx-clock  { color: var(--gold); font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 500; }

/* Theme toggle button */
.ctx-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-muted); border-radius: .4rem;
}
.ctx-theme:hover { background: var(--surface-3); color: var(--ink); }
.ctx-theme .theme-sun  { display: none; }
.ctx-theme .theme-moon { display: block; }
:root.theme-light .ctx-theme .theme-sun  { display: block; }
:root.theme-light .ctx-theme .theme-moon { display: none; }

/* Lang + user dropdowns — use vars */
.ctx-lang > summary, .ctx-user > summary {
  color: var(--ink-muted);
  font-size: .82rem;
}
.ctx-lang > summary:hover, .ctx-user > summary:hover {
  background: var(--surface-3); color: var(--ink);
}
.ctx-menu {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.ctx-menu-item { color: var(--ink); }
.ctx-menu-item:hover { background: var(--surface-3); }
.ctx-menu-item.is-active { color: var(--gold); }
.ctx-menu-sep { background: var(--line-soft); }

/* ─── Icon toolbar (16 items, full-width) ─────────────────── */
.iconbar { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.iconbar-inner {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: .35rem .75rem;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto;
}
.iconbar-inner::-webkit-scrollbar { height: 4px; }
.iconbar-inner::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

/* Each icon item — SalonTarget style: stacked icon + label, bigger fonts */
.iconbar-form { display: inline-flex; margin: 0; padding: 0; }
.iconbar-item {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .25rem;
  padding: .55rem .85rem .5rem;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  min-width: 4.75rem;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.iconbar-item:hover { background: var(--surface-3); color: var(--gold); }
.iconbar-item.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: var(--tab-active-bg);
}
.iconbar-glyph {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.iconbar-glyph svg { display: block; width: 26px; height: 26px; }
.iconbar-label { font-size: .8rem; font-weight: 600; }
.iconbar-badge {
  position: absolute;
  top: -.4rem; right: -.55rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--surface);
  font-size: .65rem; font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ─── Tab bar (2nd row) ───────────────────────────────────── */
.tabbar { background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.tabbar-inner {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 1.25rem;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tabbar-inner::-webkit-scrollbar { display: none; }
.tabbar-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.1rem;
  color: var(--ink-muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.tabbar-item:hover { color: var(--ink); background: var(--surface-3); }
.tabbar-item.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
  background: var(--surface);
  font-weight: 600;
}
.tabbar-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .4rem;
  background: var(--tab-active-bg);
  color: var(--gold);
  border-radius: 9999px;
  font-size: .7rem; font-weight: 700;
}
.tabbar-item.is-active .tabbar-count { background: var(--gold); color: var(--surface); }
.tabbar-count.is-warn { background: rgba(201,83,75,.18); color: var(--danger); }
.tabbar-item.is-active .tabbar-count.is-warn { background: var(--danger); color: var(--surface); }

/* ─── Sub-tab bar (3rd row) ───────────────────────────────── */
.subtabbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.subtabbar-inner {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 1.25rem;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.subtabbar-inner::-webkit-scrollbar { display: none; }
.subtabbar-item {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem;
  color: var(--ink-muted);
  font-size: .82rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subtabbar-item:hover { color: var(--ink); }
.subtabbar-item.is-active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

/* ─── Theme-aware adjustments for common surfaces ─────────── */
:root.theme-light .card,
:root.theme-light .auth-form,
:root.theme-light .modal-content {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
}
:root.theme-light .input,
:root.theme-light input.input,
:root.theme-light select.input,
:root.theme-light textarea.input {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
:root.theme-light .text-ink        { color: var(--ink); }
:root.theme-light .text-ink-muted  { color: var(--ink-muted); }
:root.theme-light .text-ink-subtle { color: var(--ink-subtle); }
:root.theme-light .btn-outline     { border-color: var(--line); color: var(--ink); background: transparent; }
:root.theme-light .btn-outline:hover { background: var(--surface-2); }
:root.theme-light .btn-gold        { background: var(--gold); color: #FFFFFF; }

/* Responsive: still scroll on narrow */
@media (max-width: 980px) {
  .iconbar-item { padding: .5rem .65rem .45rem; min-width: 4rem; }
  .iconbar-label { font-size: .72rem; }
  .iconbar-glyph svg { width: 22px; height: 22px; }
  .tabbar-item { padding: .55rem .8rem; font-size: .82rem; }
  .subtabbar-item { padding: .45rem .75rem; font-size: .78rem; }
}
@media (max-width: 640px) {
  .iconbar-label { display: inline-block; font-size: .65rem; }
  .iconbar-item { min-width: 3.5rem; }
  .topbar-context-inner { padding: .4rem .85rem; gap: .55rem; }
  .ctx-clock { font-size: .75rem; }
}

/* ─── PRINT ──────────────────────────────────────────────────
   Reports / Money-log: when the user prints, we hide the chrome
   and render the data as a clean black-on-white sheet.
*/
.print-only { display: none; }

@media print {
  /* White paper, black ink, no fancy gradients */
  body, .app-body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt;
  }
  /* Kill all interactive chrome and navigation */
  .topchrome, .topbar-context, .iconbar, .tabbar, .subtabbar,
  .app-legal-footer, .cookie-banner,
  .no-print, button.btn, .btn, form.no-print {
    display: none !important;
  }
  /* Show only the print-only blocks */
  .print-only { display: block !important; }
  /* Main content takes the full page */
  .app-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  /* Cards lose their dark surface */
  .card, .report-table {
    background: #FFFFFF !important;
    border: 1px solid #CCC !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  /* Tables: clean rows, no dark headers */
  table { border-collapse: collapse !important; width: 100% !important; }
  thead { background: #EEE !important; color: #000 !important; }
  thead th {
    color: #000 !important;
    background: #EEE !important;
    border-bottom: 1.5pt solid #000 !important;
    padding: 6pt 8pt !important;
    font-size: 9pt !important;
    text-transform: uppercase;
  }
  tbody td {
    color: #000 !important;
    border-bottom: 0.5pt solid #DDD !important;
    padding: 5pt 8pt !important;
    background: #FFF !important;
  }
  tfoot td {
    color: #000 !important;
    font-weight: 700 !important;
    border-top: 1.5pt solid #000 !important;
    padding: 6pt 8pt !important;
    background: #F4F4F4 !important;
  }
  /* Title bar in print mode */
  .print-header {
    margin-bottom: 12pt;
  }
  .print-header h1 {
    font-family: 'Fraunces', serif;
    color: #000 !important;
    margin: 0 0 4pt;
  }
  /* Color hints stripped for print readability */
  [style*="color:#B89968"], [style*="color:#7BA384"], [style*="color:#E8867F"],
  [style*="color:#A8A29A"], [style*="color:#F5EFE6"] {
    color: #000 !important;
  }
  /* Page breaks for long tables */
  tr { page-break-inside: avoid; }
  /* Margin on every printed page */
  @page { margin: 14mm 12mm; }
}

/* ════════════════════════════════════════════════════════════════════
   POLISH LAYER — professional refinements
   This block is the final word on visuals. Anything below overrides
   the legacy rules above so the app gets a consistent, polished feel
   without touching every template.
   ════════════════════════════════════════════════════════════════════ */

/* ── Refined palette + radii + shadows ─────────────────────────── */
:root {
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.20);
  --shadow-md: 0 6px 16px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.20);
  --shadow-gold: 0 0 0 1px rgba(184,153,104,.45), 0 12px 28px rgba(184,153,104,.18);

  --gold-grad: linear-gradient(135deg, #D4B97E 0%, #B89968 50%, #9B7E4F 100%);
  --gold-soft-grad: linear-gradient(135deg, rgba(212,185,126,.16) 0%, rgba(184,153,104,.08) 100%);

  --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --transition-base: 180ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 280ms cubic-bezier(.4,0,.2,1);
}
:root.theme-light {
  --shadow-sm: 0 1px 2px rgba(26,22,20,.08);
  --shadow-md: 0 4px 12px rgba(26,22,20,.10), 0 1px 3px rgba(26,22,20,.06);
  --shadow-lg: 0 16px 40px rgba(26,22,20,.14), 0 2px 6px rgba(26,22,20,.08);
  --shadow-gold: 0 0 0 1px rgba(155,126,79,.30), 0 8px 22px rgba(155,126,79,.14);
  --gold-grad: linear-gradient(135deg, #C8A565 0%, #9B7E4F 50%, #7A6238 100%);
}

/* ── Body — richer gradient backdrop ───────────────────────────── */
body, .app-body {
  background:
    radial-gradient(1400px 700px at 90% -10%, rgba(184,153,104,.10), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(155,126,79,.08), transparent 60%),
    var(--bg) !important;
}
:root.theme-light body, :root.theme-light .app-body {
  background:
    radial-gradient(1400px 700px at 90% -10%, rgba(184,153,104,.10), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(245,239,230,.40), transparent 60%),
    var(--bg) !important;
}

/* ── Typography ─────────────────────────────────────────────────── */
body { font-feature-settings: 'cv02','cv03','cv04','cv11'; }
.font-display { letter-spacing: -.015em; }
h1.font-display, .h1 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.018em;
}
h2.font-display, .h2 {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.012em;
}
.text-ink-subtle  { color: var(--ink-subtle); }
.text-ink-muted   { color: var(--ink-muted); }
.text-ink         { color: var(--ink); }
.eyebrow {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 600;
}

/* ── Scrollbar polish ──────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; border: 2px solid transparent; }

/* ── Card v2 — refined, with hover + variants ──────────────────── */
.card {
  background: linear-gradient(180deg, rgba(245,239,230,.045), rgba(245,239,230,.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
:root.theme-light .card {
  background: var(--surface);
  border-color: var(--line);
}
.card.is-interactive,
a.card,
button.card { cursor: pointer; }
.card.is-interactive:hover,
a.card:hover,
button.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.card-header h2, .card-header h3 { margin: 0; }
.card-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); }
.card-subtitle { font-size: .85rem; color: var(--ink-muted); margin-top: 2px; }
.card-section + .card-section { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line-soft); }

/* ── Page header pattern ───────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-head-title h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0;
}
.page-head-sub {
  margin: .35rem 0 0;
  color: var(--ink-muted);
  font-size: .92rem;
}
.page-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Breadcrumbs */
.crumbs {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}
.crumbs a { color: var(--ink-muted); text-decoration: none; transition: color var(--transition-fast); }
.crumbs a:hover { color: var(--gold); }
.crumbs-sep { color: var(--ink-subtle); }

/* ── Buttons v2 ────────────────────────────────────────────────── */
.btn {
  height: 2.55rem;
  padding: 0 1.05rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .005em;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn-gold {
  background: var(--gold-grad);
  border-color: rgba(155,126,79,.55);
  color: #1A1614;
  box-shadow: 0 4px 12px rgba(184,153,104,.30);
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(184,153,104,.40); }
.btn-outline {
  background: rgba(245,239,230,.02);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-outline:hover {
  border-color: var(--line-strong);
  background: rgba(184,153,104,.06);
  color: var(--ink);
}
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--ink-muted);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-3); box-shadow: none; }
.btn-danger {
  background: rgba(201,83,75,.10); border-color: rgba(201,83,75,.30); color: #E8867F;
}
.btn-danger:hover { background: rgba(201,83,75,.18); border-color: rgba(201,83,75,.50); }
.btn-sm { height: 2.05rem; padding: 0 .85rem; font-size: .82rem; border-radius: var(--r-sm); }
.btn-xs { height: 1.7rem; padding: 0 .65rem; font-size: .75rem; border-radius: var(--r-sm); }
.btn-icon {
  width: 2.55rem; padding: 0; gap: 0;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,153,104,.30), var(--shadow-sm);
}

/* ── Inputs v2 ─────────────────────────────────────────────────── */
.input {
  height: 2.55rem;
  padding: 0 .85rem;
  border-radius: var(--r-md);
  background: rgba(245,239,230,.02);
  border: 1px solid var(--line);
  font-size: .92rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
:root.theme-light .input { background: var(--surface); }
.input:hover:not(:focus):not(:disabled) { border-color: var(--line-strong); }
.input:focus, .input:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,153,104,.18);
  background: rgba(245,239,230,.04);
}
:root.theme-light .input:focus { background: var(--surface); }
textarea.input { padding: .65rem .85rem; min-height: 5rem; line-height: 1.5; }
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23A8A29A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.25rem;
}

/* Form field stack */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink-muted);
}
.field-help { font-size: .75rem; color: var(--ink-subtle); line-height: 1.5; }
.field-error {
  font-size: .78rem; color: #E8867F;
  display: flex; align-items: center; gap: .35rem;
}
.field.has-error .input,
.input.is-invalid {
  border-color: rgba(201,83,75,.5);
  box-shadow: 0 0 0 3px rgba(201,83,75,.12);
}

/* Form grid helpers */
.form-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

/* ── Alerts v2 — left-accent border + icon slot ────────────────── */
.alert {
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  border-left-width: 3px;
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--surface);
  font-size: .9rem; line-height: 1.5;
}
:root.theme-light .alert { background: var(--surface); }
.alert::before {
  content: ''; flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.alert-success {
  border-left-color: #3F9E7B;
  background: rgba(63,158,123,.06);
  color: #7BD0AA;
}
.alert-success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BD0AA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
}
.alert-error {
  border-left-color: #C9534B;
  background: rgba(201,83,75,.06);
  color: #E8867F;
}
.alert-error::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8867F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}
.alert-info {
  border-left-color: #5B7DB1;
  background: rgba(91,125,177,.06);
  color: #9BB4D5;
}
.alert-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BB4D5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
}
.alert-gold {
  border-left-color: var(--gold);
  background: rgba(184,153,104,.06);
  color: #D6BD8E;
}
.alert-gold::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6BD8E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.8 5.7 21l2.3-7.2-6-4.4h7.6z'/></svg>");
}

/* ── Status pills / badges / chips ─────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 1.5rem;
  padding: 0 .65rem;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--ink-muted);
  border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pill-gold    { background: var(--gold-grad); color: #1A1614; border-color: rgba(155,126,79,.55); }
.pill-success { background: rgba(63,158,123,.14); color: #7BD0AA; border-color: rgba(63,158,123,.28); }
.pill-error   { background: rgba(201,83,75,.14); color: #E8867F; border-color: rgba(201,83,75,.28); }
.pill-info    { background: rgba(91,125,177,.14); color: #9BB4D5; border-color: rgba(91,125,177,.28); }
.pill-soft    { background: rgba(184,153,104,.14); color: #D6BD8E; border-color: rgba(184,153,104,.25); }
.pill-dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Status text colors (no chip) */
.t-success { color: #7BD0AA; }
.t-error   { color: #E8867F; }
.t-warn    { color: #E0B970; }
.t-gold    { color: var(--gold); }

/* ── KPI / Stat card ───────────────────────────────────────────── */
.stat {
  display: flex; flex-direction: column; gap: .35rem;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(180deg, rgba(245,239,230,.04), rgba(245,239,230,.01));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
:root.theme-light .stat { background: var(--surface); }
.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--ink);
}
.stat-meta { font-size: .78rem; color: var(--ink-subtle); }
.stat-meta.t-success { color: #7BD0AA; }
.stat-meta.t-error   { color: #E8867F; }

.stat-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* ── Avatar ────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #1A1614;
  font-weight: 700;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.avatar-lg { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .7rem; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ── Tiles grid (replaces .settings-grid for new templates) ────── */
.tiles {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tile {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(180deg, rgba(245,239,230,.04), rgba(245,239,230,.01));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}
:root.theme-light .tile { background: var(--surface); }
.tile:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
.tile-icon {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--gold-soft-grad);
  color: var(--gold);
  margin-bottom: 2px;
}
.tile-icon svg { width: 22px; height: 22px; }
.tile-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
}
.tile-body {
  font-size: .85rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.tile-cta {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto;
}
.tile-cta::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.tile:hover .tile-cta::after { transform: translateX(3px); }

/* ── Data list (key/value pairs) ───────────────────────────────── */
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dl-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: .65rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .88rem;
}
.dl-list li:last-child { border-bottom: 0; }
.dl-list .dl-key   { color: var(--ink-muted); }
.dl-list .dl-value { color: var(--ink); font-weight: 500; text-align: right; }

/* ── Toggle switch ─────────────────────────────────────────────── */
.switch {
  position: relative; display: inline-block;
  width: 42px; height: 24px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 24px;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--ink-muted);
  border-radius: 50%;
  transition: left var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch-track {
  background: var(--gold-grad);
  border-color: rgba(155,126,79,.55);
}
.switch input:checked + .switch-track .switch-thumb {
  left: 22px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.40);
}
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px rgba(184,153,104,.25);
}

/* Toggle row (label + description + switch) */
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4);
  padding: .95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.toggle-row:hover { border-color: var(--line); }
.toggle-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row-title { color: var(--ink); font-weight: 500; font-size: .92rem; }
.toggle-row-body  { color: var(--ink-muted); font-size: .78rem; line-height: 1.45; }

/* ── Empty state ───────────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: linear-gradient(180deg, rgba(245,239,230,.03), transparent);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
}
.empty-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft-grad);
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 .4rem;
}
.empty-body { font-size: .9rem; max-width: 26rem; line-height: 1.55; margin: 0 0 var(--space-4); }
.empty-cta { margin-top: var(--space-3); }

/* ── Tables — polished ─────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .88rem;
}
.table th, .table td {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: rgba(184,153,104,.04); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.table-card .table thead th { border-radius: 0; }
.table-card .table tbody tr:last-child td { border-bottom: 0; }

/* ── Section title with optional actions ──────────────────────── */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.section-title h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

/* ── Topchrome refinements ─────────────────────────────────────── */
.topchrome {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--surface-2)));
  box-shadow: 0 1px 0 var(--line-soft), 0 4px 16px rgba(0,0,0,.10);
}
.topbar-context {
  background: var(--surface-2);
  font-size: .8rem;
  padding: 0;
}
.topbar-context-inner { padding: .55rem 1.5rem; gap: 1rem; }
.ctx-salon { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: .98rem; letter-spacing: -.005em; }
.ctx-clock {
  background: var(--surface);
  padding: .25rem .65rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  font-weight: 500;
}
.ctx-theme {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-sm);
}

.iconbar-inner { padding: .5rem 1rem .25rem; gap: .15rem; }
.iconbar-item {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: .55rem .9rem .55rem;
  gap: .3rem;
  border-bottom-width: 2px;
}
.iconbar-item:hover {
  background: var(--surface-2);
  color: var(--gold);
}
.iconbar-item.is-active {
  background: linear-gradient(180deg, rgba(184,153,104,.10), rgba(184,153,104,.04));
}

.tabbar-inner { padding: 0 1.5rem; }
.tabbar-item {
  padding: .65rem 1.05rem;
  border-bottom-width: 2px;
  font-weight: 500;
  font-size: .88rem;
}
.tabbar-item:hover { background: transparent; color: var(--ink); }
.tabbar-item.is-active { background: transparent; }
.tabbar-item.is-active::after {
  /* No-op — keeping the border-bottom approach. */
}

.subtabbar-inner { padding: 0 1.5rem; }
.subtabbar { background: var(--surface-2); }
.subtabbar-item { font-size: .82rem; padding: .55rem 1rem; }

/* ── Card footer (action row inside card) ─────────────────────── */
.card-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

/* ── Tooltip (CSS only, data-tip attribute) ───────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #0F0D0C; color: #F5EFE6;
  font-size: .72rem; padding: .3rem .55rem; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Skeleton loader ──────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3));
  background-size: 200% 100%;
  animation: skl 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skl { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }

/* ── Entrance animations ───────────────────────────────────────── */
.app-main > * { animation: fade-in-up .35s ease-out both; }
.app-main > *:nth-child(2) { animation-delay: .04s; }
.app-main > *:nth-child(3) { animation-delay: .08s; }
.app-main > *:nth-child(4) { animation-delay: .12s; }
.app-main > *:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .app-main > * { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Footer polish ─────────────────────────────────────────────── */
.app-legal-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-12);
}
.app-legal-footer-inner { padding: 1rem 1.5rem; }
.ft-copy, .ft-tagline { letter-spacing: .005em; }

/* ── Utility classes referenced by templates ───────────────────── */
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: .75rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-3 { margin-bottom: .75rem; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-display-italic { font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.no-underline { text-decoration: none; }
.hover-gold:hover { color: var(--gold); }

/* ── Hide-only-on-print helper ─────────────────────────────────── */
.no-print { /* default visible */ }
@media print { .no-print { display: none !important; } }

/* ════════════════════════════════════════════════════════════════════
   SCHEDULE — editorial weekly hours editor
   The hero of /settings/hours. Type-driven, time ribbon visualisation,
   multi-slot rows, exception strip. Stylesheet-only — no JS framework.
   ════════════════════════════════════════════════════════════════════ */

/* Container & atmosphere */
.sched-shell {
    position: relative;
    display: grid;
    gap: var(--space-6);
    isolation: isolate;
}
.sched-shell::before {
    content: '';
    position: absolute; inset: -80px -40px auto auto;
    width: 480px; height: 480px;
    background: radial-gradient(circle at 50% 50%, rgba(212,185,126,.16), transparent 60%);
    pointer-events: none;
    z-index: -1;
    filter: blur(20px);
}

/* ── Hero "Today" card — gold split, oversized type ─────────────── */
.sched-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
    background:
        linear-gradient(135deg, rgba(184,153,104,.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.sched-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(212,185,126,.20), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(155,126,79,.08), transparent 40%);
    pointer-events: none;
    z-index: 0;
}
.sched-hero > * { position: relative; z-index: 1; }

.sched-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .65rem;
}
.sched-hero-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,153,104,.20);
    animation: pulse 2.4s ease-in-out infinite;
}
.sched-hero-eyebrow.is-closed { color: #C9534B; }
.sched-hero-eyebrow.is-closed .dot {
    background: #C9534B; box-shadow: 0 0 0 3px rgba(201,83,75,.20);
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}
.sched-hero-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    line-height: .98;
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0 0 .35rem;
    font-variation-settings: "opsz" 144;
}
.sched-hero-title em {
    font-style: italic;
    font-weight: 300;
    color: var(--gold);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.sched-hero-sub {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 300;
    color: var(--ink-muted);
    letter-spacing: -.005em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.sched-hero-meta {
    display: flex; flex-direction: column; gap: .6rem;
    align-items: flex-end; text-align: right;
    flex-shrink: 0;
}
.sched-hero-date {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -.008em;
}
.sched-hero-time {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.25rem;
    color: var(--gold);
    font-variation-settings: "opsz" 144;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.02em;
}

/* ── Quick templates — sleek inline pills ──────────────────────── */
.sched-templates {
    display: flex; align-items: center; gap: .65rem;
    padding: .85rem 1.05rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.sched-templates-label {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-subtle);
    margin-right: .35rem;
}
.sched-template {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink-muted);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.sched-template:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(184,153,104,.06);
}

/* ── Week grid ──────────────────────────────────────────────────── */
.sched-week {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
}

.sched-week-head {
    display: grid;
    grid-template-columns: 100px 1fr 220px;
    gap: var(--space-4);
    padding: 1rem 1.5rem .85rem;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-2);
    align-items: center;
}
.sched-week-head-label {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-subtle);
}

.sched-day {
    display: grid;
    grid-template-columns: 100px 1fr 220px;
    gap: var(--space-4);
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    transition: background var(--transition-fast);
    position: relative;
}
.sched-day:last-child { border-bottom: 0; }
.sched-day:hover { background: rgba(184,153,104,.025); }
.sched-day.is-today {
    background: linear-gradient(90deg, rgba(184,153,104,.06) 0%, transparent 70%);
}
.sched-day.is-today::before {
    content: '';
    position: absolute; left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: var(--gold);
}
.sched-day.is-closed { opacity: .55; }
.sched-day.is-closed:hover { opacity: .8; }

.sched-day-name {
    display: flex; align-items: center; gap: .55rem;
    min-width: 0;
}
.sched-day-name-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -.005em;
}
.sched-day-name-today {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ── Time ribbon — the visual rail showing hours covered ──────── */
.sched-ribbon {
    position: relative;
    height: 38px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    overflow: hidden;
}
.sched-ribbon::before {
    /* Hour ticks every 4h */
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, transparent 0%, transparent calc(25% - 1px), rgba(184,153,104,.18) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), rgba(184,153,104,.18) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), rgba(184,153,104,.18) 75%, transparent calc(75% + 1px));
    pointer-events: none;
}
.sched-ribbon-bar {
    position: absolute; top: 4px; bottom: 4px;
    background: linear-gradient(90deg, #D4B97E 0%, #B89968 50%, #9B7E4F 100%);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(155,126,79,.40), 0 2px 6px rgba(184,153,104,.30);
}
.sched-ribbon-now {
    position: absolute; top: -4px; bottom: -4px;
    width: 2px;
    background: var(--ink);
    z-index: 3;
}
.sched-ribbon-now::after {
    content: '';
    position: absolute; top: -4px; left: -3px;
    width: 8px; height: 8px;
    background: var(--ink);
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    box-shadow: 0 0 0 2px var(--surface);
}
.sched-ribbon-scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: .35rem;
    font-size: .62rem;
    color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}
.sched-ribbon-scale span:nth-child(2),
.sched-ribbon-scale span:nth-child(3),
.sched-ribbon-scale span:nth-child(4) {
    text-align: center;
}
.sched-ribbon-scale span:last-child { text-align: right; }

/* ── Slot inputs — refined inline editors ─────────────────────── */
.sched-day-slots {
    display: flex; flex-direction: column; gap: .4rem;
    min-width: 0;
}
.sched-slot {
    display: flex; align-items: center; gap: .5rem;
}
.sched-slot-input {
    width: 100%;
    height: 2.2rem;
    padding: 0 .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: .005em;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sched-slot-input:hover:not(:disabled) { border-color: var(--line); }
.sched-slot-input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(184,153,104,.15);
}
.sched-slot-dash {
    color: var(--ink-subtle);
    font-size: .9rem;
    font-weight: 300;
    flex-shrink: 0;
}
.sched-slot-remove {
    width: 1.85rem; height: 1.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--ink-subtle);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.sched-slot-remove:hover {
    color: #C9534B;
    background: rgba(201,83,75,.08);
    border-color: rgba(201,83,75,.20);
}
.sched-slot-add {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-subtle);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.sched-slot-add:hover {
    color: var(--gold);
    border-color: var(--gold);
    border-style: solid;
    background: rgba(184,153,104,.04);
}
.sched-slot-add svg { width: 12px; height: 12px; }

/* ── Day actions — closed switch + copy button stacked right ──── */
.sched-day-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
}
.sched-day-closed {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .72rem; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-subtle);
    cursor: pointer;
    user-select: none;
}
.sched-day-closed .switch { transform: scale(.85); transform-origin: right center; }
.sched-day-copy {
    width: 1.85rem; height: 1.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink-subtle);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.sched-day-copy:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(184,153,104,.06);
}
.sched-day-copy svg { width: 14px; height: 14px; }
.sched-day-closed-state {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1rem;
    color: var(--ink-subtle);
}

.sched-day.is-closed .sched-slot-input,
.sched-day.is-closed .sched-slot-add,
.sched-day.is-closed .sched-slot-remove,
.sched-day.is-closed .sched-ribbon {
    pointer-events: none;
    opacity: .5;
}

/* ── Save row ──────────────────────────────────────────────────── */
.sched-save {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    gap: var(--space-3); flex-wrap: wrap;
}
.sched-save-hint {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    color: var(--ink-subtle);
    font-size: .92rem;
    letter-spacing: -.005em;
}

/* ── Exceptions strip ──────────────────────────────────────────── */
.sched-exceptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
@media (max-width: 980px) {
    .sched-exceptions { grid-template-columns: 1fr; }
}

.exc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--space-5) var(--space-6);
}
.exc-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .55rem;
}
.exc-row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.exc-row:hover { border-color: var(--line); background: var(--surface); }

.exc-date {
    text-align: center;
    padding: .25rem .35rem;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
}
.exc-date-month {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}
.exc-date-day {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.exc-body { min-width: 0; }
.exc-title {
    font-size: .92rem;
    color: var(--ink);
    margin: 0 0 .15rem;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exc-meta {
    font-size: .75rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.exc-meta-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .45rem;
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.exc-meta-pill.is-closed {
    background: rgba(201,83,75,.10);
    color: #E8867F;
    border: 1px solid rgba(201,83,75,.22);
}
.exc-meta-pill.is-open {
    background: rgba(63,158,123,.10);
    color: #7BD0AA;
    border: 1px solid rgba(63,158,123,.22);
}

.exc-delete {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--ink-subtle);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.exc-delete:hover {
    color: #C9534B;
    background: rgba(201,83,75,.08);
    border-color: rgba(201,83,75,.22);
}

.exc-add-form {
    display: flex; flex-direction: column; gap: .85rem;
}
.exc-add-form .field-label {
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Read-only state (staff role) ──────────────────────────────── */
.sched-readonly-banner {
    display: flex; align-items: center; gap: .65rem;
    padding: .75rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    color: var(--ink-muted);
    font-size: .85rem;
}
.sched-readonly-banner svg { color: var(--gold); flex-shrink: 0; }

/* ── Responsive — collapse to a more compact layout on phones ── */
@media (max-width: 880px) {
    .sched-hero { grid-template-columns: 1fr; }
    .sched-hero-meta { align-items: flex-start; text-align: left; }
    .sched-week-head { display: none; }
    .sched-day {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding: 1rem 1.1rem;
    }
    .sched-day-actions { justify-content: space-between; }
    .exc-row { grid-template-columns: 60px 1fr auto; gap: .55rem; padding: .65rem .85rem; }
}

/* ════════════════════════════════════════════════════════════════════
   FORM COMPONENTS — custom select, time picker, date picker.
   Progressive enhancement replaces native <select> and <input type="time">
   on page load. Hidden originals keep form submission working.
   ════════════════════════════════════════════════════════════════════ */

/* ── Custom select ─────────────────────────────────────────────── */
.gs-select { position: relative; display: block; width: 100%; }
.gs-select > select { display: none !important; }

.gs-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    height: 2.55rem;
    padding: 0 .85rem;
    background: rgba(245,239,230,.02);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    gap: .65rem;
}
:root.theme-light .gs-select-trigger { background: var(--surface); }
.gs-select-trigger:hover:not(:disabled) { border-color: var(--line-strong); }
.gs-select.is-open .gs-select-trigger,
.gs-select-trigger:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,153,104,.18);
    background: rgba(245,239,230,.04);
}
:root.theme-light .gs-select.is-open .gs-select-trigger { background: var(--surface); }

.gs-select-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-select-label.is-placeholder { color: var(--ink-subtle); }
.gs-select-caret {
    flex-shrink: 0;
    color: var(--ink-subtle);
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.gs-select.is-open .gs-select-caret { transform: rotate(180deg); color: var(--gold); }

.gs-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 80;
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 18rem;
    animation: gs-pop .14s cubic-bezier(.4,0,.2,1);
}
@keyframes gs-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gs-select-panel[hidden] { display: none; }

.gs-select-search {
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--line-soft);
    flex-shrink: 0;
}
.gs-select-search-input {
    width: 100%;
    height: 2rem;
    padding: 0 .65rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .85rem;
}
.gs-select-search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184,153,104,.15);
}
.gs-select-search-input::placeholder { color: var(--ink-subtle); }

.gs-select-options {
    list-style: none;
    margin: 0; padding: .35rem;
    overflow-y: auto;
    flex: 1;
}
.gs-select-option {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .65rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .92rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.gs-select-option:hover,
.gs-select-option.is-focus {
    background: var(--surface-3);
}
.gs-select-option.is-active {
    background: rgba(184,153,104,.12);
    color: var(--gold);
    font-weight: 500;
}
.gs-select-option.is-active::after {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
    margin-left: auto;
    flex-shrink: 0;
}
.gs-select-option.is-disabled {
    opacity: .4;
    pointer-events: none;
}
.gs-select-empty {
    padding: 1rem .65rem;
    text-align: center;
    color: var(--ink-subtle);
    font-size: .82rem;
}

/* ── Custom 12-hour time picker ────────────────────────────────── */
.gs-time { position: relative; display: block; width: 100%; }
.gs-time > input[type="hidden"] { display: none; }

.gs-time-trigger {
    display: flex; align-items: center; gap: .55rem;
    width: 100%;
    height: 2.55rem;
    padding: 0 .85rem;
    background: rgba(245,239,230,.02);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
:root.theme-light .gs-time-trigger { background: var(--surface); }
.gs-time-trigger:hover:not(:disabled) { border-color: var(--line-strong); }
.gs-time.is-open .gs-time-trigger,
.gs-time-trigger:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,153,104,.18);
    background: rgba(245,239,230,.04);
}
.gs-time-icon {
    flex-shrink: 0;
    color: var(--gold);
    width: 16px; height: 16px;
}
.gs-time-label {
    flex: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .005em;
}
.gs-time-label.is-placeholder { color: var(--ink-subtle); }

.gs-time-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 14rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    z-index: 80;
    padding: .45rem;
    animation: gs-pop .14s cubic-bezier(.4,0,.2,1);
}
.gs-time-panel[hidden] { display: none; }

.gs-time-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .25rem;
    height: 10rem;
}
.gs-time-col {
    list-style: none;
    margin: 0; padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.gs-time-col::-webkit-scrollbar { width: 4px; }
.gs-time-col li {
    padding: .45rem .65rem;
    color: var(--ink);
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
    border-radius: var(--r-sm);
    margin: 1px 2px;
    transition: background var(--transition-fast), color var(--transition-fast);
    letter-spacing: .015em;
}
.gs-time-col li:hover { background: var(--surface-3); }
.gs-time-col li.is-active {
    background: var(--gold-grad);
    color: #1A1614;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.gs-time-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid var(--line-soft);
    gap: .35rem;
}
.gs-time-now {
    flex: 1;
    height: 1.9rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-size: .76rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.gs-time-now:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(184,153,104,.06);
}

/* When disabled (e.g. on read-only schedule view) */
.gs-select-trigger:disabled,
.gs-time-trigger:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Native date input — make the calendar icon visible on dark ── */
/* color-scheme tells the browser to render its built-in widgets
   (the calendar popover, the picker indicator) in dark mode. Without
   this the indicator glyph stays black-on-dark and is unreadable. */
input[type="date"].input,
input[type="datetime-local"].input,
input[type="month"].input,
input[type="week"].input {
    color-scheme: dark;
}
:root.theme-light input[type="date"].input,
:root.theme-light input[type="datetime-local"].input,
:root.theme-light input[type="month"].input,
:root.theme-light input[type="week"].input {
    color-scheme: light;
}

/* Tint the picker indicator champagne so it matches the brand. */
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
input[type="month"].input::-webkit-calendar-picker-indicator,
input[type="week"].input::-webkit-calendar-picker-indicator {
    /* Black icon → champagne via filter chain.
       invert() lifts it off black, sepia() warms it, hue-rotate fine-tunes. */
    filter: invert(.65) sepia(.85) saturate(2.6) hue-rotate(2deg) brightness(.95);
    opacity: .85;
    cursor: pointer;
    padding: 0 .25rem;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}
input[type="date"].input::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator:hover,
input[type="month"].input::-webkit-calendar-picker-indicator:hover,
input[type="week"].input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(.7) sepia(1) saturate(3.4) hue-rotate(2deg) brightness(1.05);
}
:root.theme-light input[type="date"].input::-webkit-calendar-picker-indicator,
:root.theme-light input[type="datetime-local"].input::-webkit-calendar-picker-indicator,
:root.theme-light input[type="month"].input::-webkit-calendar-picker-indicator,
:root.theme-light input[type="week"].input::-webkit-calendar-picker-indicator {
    filter: invert(.42) sepia(.85) saturate(2.2) hue-rotate(2deg);
    opacity: .9;
}

/* Subtle separator between text and the picker icon */
input[type="date"].input,
input[type="datetime-local"].input,
input[type="month"].input,
input[type="week"].input {
    font-variant-numeric: tabular-nums;
    letter-spacing: .005em;
}

/* ════════════════════════════════════════════════════════════════════
   APPOINTMENT BOOK — SalonTarget-exact sub-tabs + date row.
   ════════════════════════════════════════════════════════════════════ */

.appt-subtabs {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: var(--space-3);
    padding: .55rem .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.appt-subtab {
    display: inline-flex; align-items: center;
    padding: .38rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.appt-subtab:hover { color: var(--ink); border-color: var(--line); }
.appt-subtab.is-active {
    background: var(--gold-grad);
    color: var(--on-gold);
    border-color: var(--gold);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.appt-search {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: .65rem;
}
.appt-search-label {
    font-size: .82rem;
    color: var(--ink-muted);
    font-weight: 600;
    margin-right: .15rem;
}
.appt-search-input {
    height: 1.9rem;
    width: 6rem;
    padding: 0 .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .8rem;
    transition: all var(--transition-fast);
}
.appt-search-input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--surface);
    box-shadow: 0 0 0 2px rgba(184,153,104,.15);
}
.appt-search-input::placeholder { color: var(--ink-subtle); }

.appt-subtabs-spacer { flex: 1; min-width: .5rem; }

/* ── Date row (label · arrows · today · 1Wk-8Wk jumps) ─────────── */
.appt-daterow {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: var(--space-3);
    padding: .65rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.appt-daterow-icon {
    color: var(--gold);
    display: inline-flex;
}
.appt-daterow-label {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    color: var(--ink);
    letter-spacing: -.008em;
    font-weight: 400;
}
.appt-daterow-count {
    color: var(--ink-subtle);
    font-size: .82rem;
    font-style: italic;
}
.appt-daterow-spacer { flex: 1; min-width: .5rem; }
.appt-daterow-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    transition: all var(--transition-fast);
    font-weight: 400;
    line-height: 1;
}
.appt-daterow-arrow:hover { color: var(--gold); border-color: var(--gold); }
.appt-daterow-today {
    display: inline-flex; align-items: center;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.appt-daterow-today:hover { border-color: var(--gold); }
.appt-daterow-today.is-active {
    background: var(--gold-grad);
    color: var(--on-gold);
    border-color: var(--gold);
}
.appt-daterow-jumps {
    display: inline-flex; align-items: center; gap: .15rem;
    margin-left: .35rem;
    padding-left: .55rem;
    border-left: 1px solid var(--line-soft);
}
.appt-daterow-jump {
    padding: .3rem .55rem;
    font-size: .75rem;
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.005em;
    transition: all var(--transition-fast);
}
.appt-daterow-jump:hover {
    color: var(--gold);
    border-color: var(--line);
    background: rgba(184,153,104,.06);
}

@media (max-width: 880px) {
    .appt-search { display: none; }
    .appt-daterow-jumps { display: none; }
    .appt-daterow-label { font-size: .92rem; }
}

/* ════════════════════════════════════════════════════════════════════
   APPOINTMENT BOOK — vertical time-grid calendar.
   ════════════════════════════════════════════════════════════════════ */

/* ── Toolbar (date strip + nav + filters) ─────────────────────── */
.appt-toolbar {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: var(--space-4);
    padding: .65rem .8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.appt-nav-btn {
    width: 2.1rem; height: 2.1rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}
.appt-nav-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(184,153,104,.05);
}

.date-strip {
    display: flex; gap: .25rem;
    flex: 1; min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .15rem 0;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-pill {
    position: relative;
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    min-width: 52px;
    padding: .45rem .65rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    color: var(--ink-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.date-pill:hover { border-color: var(--line); color: var(--ink); }
.date-pill .dow {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
}
.date-pill .day {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em;
}
.date-pill .dot {
    position: absolute;
    bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px;
    background: var(--gold);
    border-radius: 50%;
}
.date-pill.is-today { border-color: rgba(184,153,104,.45); }
.date-pill.is-today .day { color: var(--gold); }
.date-pill.is-cur {
    background: var(--gold-grad);
    border-color: var(--gold);
    color: var(--on-gold);
    box-shadow: var(--shadow-sm);
}
.date-pill.is-cur .dow,
.date-pill.is-cur .day { color: var(--on-gold); }
.date-pill.is-cur .dot { background: var(--on-gold); opacity: .6; }

.appt-toolbar-spacer { flex: 1; min-width: 1rem; }
.btn-sm.is-active {
    background: var(--gold-grad);
    color: var(--on-gold);
    border-color: var(--gold);
}

/* ── Calendar shell ───────────────────────────────────────────── */
.cal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    /* `clip` keeps the rounded corners without establishing a new
       scrolling context — needed so position:sticky on .cal-head
       binds to the viewport, not to .cal. */
    overflow: clip;
    box-shadow: var(--shadow-sm);
}

.cal-head {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 8;
}
.cal-head-axis-r { border-right: 0; border-left: 1px solid var(--line-soft); }
.cal-head-axis {
    border-right: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: center;
    padding: .65rem 0;
}
.cal-head-axis-label {
    font-size: .62rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 700;
}
.cal-head-cols {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(170px, 1fr));
    /* Scrollable for multi-staff overflow, but bar hidden — body's
       scrollbar is the single visible one, and JS keeps both in sync. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cal-head-cols::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cal-head-col {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .7rem .45rem .85rem;
    border-right: 1px solid var(--line-soft);
    position: relative;
    min-width: 0;
    min-height: 3.1rem;
}
.cal-head-col::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--col-color, var(--gold));
    opacity: .65;
}
.cal-head-col:last-child { border-right: 0; }
.cal-head-avatar {
    width: 1.85rem; height: 1.85rem; flex-shrink: 0;
    border-radius: 50%;
    background: var(--col-color, var(--gold));
    color: var(--on-gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .9rem;
    font-weight: 400;
    box-shadow: var(--shadow-sm);
}
.cal-head-meta { min-width: 0; flex: 1; }
.cal-head-name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .95rem;
    color: var(--ink);
    letter-spacing: -.008em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.2;
}
.cal-head-count {
    margin: .1rem 0 0;
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
}
.cal-head-role {
    margin: .1rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: .72rem;
    color: var(--ink-muted);
    letter-spacing: -.005em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-head-util {
    flex-shrink: 0;
    display: inline-flex; align-items: baseline; justify-content: center;
    min-width: 2.4rem;
    padding: .15rem .35rem;
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: 'Fraunces', Georgia, serif;
    font-size: .95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.012em;
    cursor: help;
}
.cal-head-util-pct {
    font-size: .6rem;
    color: var(--ink-subtle);
    font-style: italic;
    margin-left: 1px;
    font-family: 'Fraunces', Georgia, serif;
}

/* ── Body (axis + columns) ────────────────────────────────────── */
.cal-body {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    /* NO internal vertical scroll — the calendar grows to its natural
       height (full salon hours) and the PAGE scrolls if needed. The
       staff header above is position:sticky and binds to the viewport. */
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    /* Top breathing room so the first hour label (translated -.45rem)
       isn't clipped against the sticky header. */
    padding-top: .55rem;
}
.cal-axis {
    position: relative;
    height: var(--grid-h);
    border-right: 1px solid var(--line);
    background: var(--surface-2);
    flex-shrink: 0;
}
.cal-axis.cal-axis-r {
    border-right: 0;
    border-left: 1px solid var(--line);
}
.cal-hour {
    position: absolute;
    left: 0; right: 0;
    padding: .25rem .6rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .82rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.005em;
    text-align: right;
    line-height: 1;
    transform: translateY(-.45rem);
    pointer-events: none;
    font-weight: 500;
}
.cal-axis-r .cal-hour { text-align: left; padding: .25rem 0 0 .6rem; }
.cal-half {
    position: absolute;
    left: 0; right: 0;
    padding: .25rem .6rem 0 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .66rem;
    color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1;
    transform: translateY(-.4rem);
    pointer-events: none;
    font-style: italic;
}
.cal-cols {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(170px, 1fr));
    height: var(--grid-h);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.cal-col {
    position: relative;
    border-right: 1px solid var(--line-soft);
    cursor: cell;
    background-image:
        linear-gradient(to bottom,
            var(--line-soft) 0,
            var(--line-soft) 1px,
            transparent 1px,
            transparent calc(60 * var(--px-per-min))),
        linear-gradient(to bottom,
            transparent 0,
            transparent calc(15 * var(--px-per-min) - 1px),
            rgba(184,153,104,.06) calc(15 * var(--px-per-min) - 1px),
            rgba(184,153,104,.06) calc(15 * var(--px-per-min)),
            transparent calc(15 * var(--px-per-min)));
    background-size: 100% calc(60 * var(--px-per-min)), 100% calc(15 * var(--px-per-min));
    background-position: 0 0, 0 0;
    transition: background-color var(--transition-fast);
}
.cal-col:hover { background-color: rgba(184,153,104,.025); }
.cal-col:last-child { border-right: 0; }

/* ── Appointment blocks ──────────────────────────────────────── */
.cal-appt {
    position: absolute;
    display: flex; flex-direction: column;
    gap: .1rem;
    padding: .3rem .45rem .3rem .65rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast),
                border-color var(--transition-fast);
    box-shadow: var(--shadow-sm);
    z-index: 2;
}
.cal-appt:hover {
    z-index: 6;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--line-strong);
}
.cal-appt-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.cal-appt-time {
    font-size: .68rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}
.cal-appt-dash { color: var(--ink-subtle); margin: 0 .1rem; font-weight: 400; }
.cal-appt-client {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .88rem;
    color: var(--ink);
    letter-spacing: -.008em;
    line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
}
.cal-appt-svc {
    font-size: .68rem;
    color: var(--ink-muted);
    line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
}
.cal-appt-price {
    margin-top: auto;
    font-size: .72rem;
    color: var(--gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cal-appt-status {
    align-self: flex-start;
    margin-top: auto;
    font-size: .62rem !important;
    height: 1.15rem !important;
    padding: 0 .45rem !important;
}

/* Status-specific tinted backgrounds — more saturated than v1 for visibility */
.cal-appt.is-pending     { background: linear-gradient(135deg, rgba(184,153,104,.18), rgba(184,153,104,.06)); border-color: rgba(184,153,104,.30); }
.cal-appt.is-confirmed   { background: linear-gradient(135deg, rgba(184,153,104,.28), rgba(184,153,104,.10)); border-color: rgba(184,153,104,.42); }
.cal-appt.is-inProgress  { background: linear-gradient(135deg, rgba(91,125,177,.28),  rgba(91,125,177,.10));  border-color: rgba(91,125,177,.42); }
.cal-appt.is-completed   { background: linear-gradient(135deg, rgba(63,158,123,.20),  rgba(63,158,123,.06));  border-color: rgba(63,158,123,.32); opacity: .85; }
.cal-appt.is-completed:hover { opacity: 1; }
.cal-appt.is-noShow      { background: linear-gradient(135deg, rgba(201,83,75,.20),   rgba(201,83,75,.06));   border-color: rgba(201,83,75,.32); }
.cal-appt.is-cancelled   {
    background: var(--surface); opacity: .55;
    text-decoration: line-through;
    text-decoration-color: var(--ink-subtle);
}
.cal-appt.is-cancelled:hover { opacity: .85; text-decoration: none; }

/* ── At-a-glance flag icons inline with client name ──────────── */
.cal-appt-flags {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-left: .35rem;
    vertical-align: middle;
}
.cal-flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    color: #1A1614;
    flex-shrink: 0;
}
.cal-flag.is-vip       { background: #E8B85B; }
.cal-flag.is-firsttime { background: #7BD0AA; }
.cal-flag.is-walkin    { background: #9BB4D5; }
.cal-flag.is-online    { background: #C5A3D9; }
.cal-flag.is-owed      { background: #E8867F; }
.cal-flag.is-credit    { background: #62C29B; }

/* ════════════════════════════════════════════════════════════════════
   QUEUE — SalonTarget-EXACT 2-table layout.
   Sub-tabs row + Client search inputs + 2 tables side-by-side.
   Left:  Scheduled + Arrived (pre-service)
   Right: In Service + Complete + Checked Out
   ════════════════════════════════════════════════════════════════════ */

.q-subtabs {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: var(--space-4);
    padding: .6rem .85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.q-subtab {
    display: inline-flex; align-items: center;
    padding: .4rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.q-subtab:hover { color: var(--ink); border-color: var(--line); }
.q-subtab.is-active {
    background: var(--gold-grad);
    color: var(--on-gold);
    border-color: var(--gold);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.q-search {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-left: .85rem;
}
.q-search-label {
    font-size: .82rem;
    color: var(--ink-muted);
    font-weight: 600;
    margin-right: .15rem;
}
.q-search-input {
    height: 1.95rem;
    width: 7rem;
    padding: 0 .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .82rem;
    transition: all var(--transition-fast);
}
.q-search-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184,153,104,.15);
    background: var(--surface);
}
.q-search-input::placeholder { color: var(--ink-subtle); }

.q-fullday {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-left: auto;
    font-size: .8rem;
    color: var(--ink-muted);
    cursor: pointer;
    user-select: none;
}
.q-fullday input { accent-color: var(--gold); }

/* ── 2 tables side-by-side ───────────────────────────────────── */
.q-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1200px) {
    .q-tables { grid-template-columns: 1fr; }
}

.q-tablecard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.q-tablehead {
    display: flex; align-items: center; gap: .55rem;
    padding: .85rem 1rem .7rem;
    background: linear-gradient(180deg,
        rgba(184,153,104,.06) 0%,
        var(--surface) 100%);
    border-bottom: 1px solid var(--line-soft);
    font-size: .92rem;
    flex-wrap: wrap;
}
.q-tablehead-label {
    color: var(--ink-muted);
    font-weight: 500;
    letter-spacing: .005em;
}
.q-tablehead-label strong {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    color: var(--ink);
    margin-left: .2rem;
    letter-spacing: -.012em;
}
.q-tablehead-label.is-active {
    color: var(--gold);
}
.q-tablehead-label.is-active strong { color: var(--gold); }
.q-tablehead-label.is-warn { color: #E0B570; }
.q-tablehead-label.is-warn strong { color: #E0B570; }
.q-tablehead-sep {
    color: var(--ink-subtle);
    font-size: .85rem;
    margin: 0 .15rem;
}
.q-tablehead-late {
    font-size: .75rem;
    color: #E8867F;
    font-weight: 600;
}
.q-tablehead-revenue {
    font-family: 'Fraunces', Georgia, serif;
    margin-left: auto;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    letter-spacing: -.012em;
}

.q-tablewrap { overflow-x: auto; }

.q-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .85rem;
}
.q-table thead th {
    padding: .55rem .7rem;
    text-align: left;
    background: var(--surface-2);
    color: var(--ink-muted);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.q-th-narrow { width: 1px; white-space: nowrap; }
.q-th-action { width: 1px; }

.q-table tbody tr {
    transition: background var(--transition-fast);
}
.q-table tbody tr:nth-child(even) { background: rgba(184,153,104,.02); }
.q-table tbody tr:hover { background: rgba(184,153,104,.06); }
.q-table tbody tr.is-late { background: rgba(201,83,75,.06); }
.q-table tbody tr.is-late:hover { background: rgba(201,83,75,.12); }
.q-table tbody tr.is-arrived { background: rgba(91,125,177,.05); }
.q-table tbody tr.is-arrived:hover { background: rgba(91,125,177,.10); }
.q-table tbody tr.is-inservice { background: rgba(63,158,123,.05); }
.q-table tbody tr.is-inservice:hover { background: rgba(63,158,123,.10); }

.q-table tbody td {
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.q-table tbody tr:last-child td { border-bottom: 0; }

.q-cell-time {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.q-cell-sub {
    font-size: .68rem;
    color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
    margin-top: .15rem;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
}
.q-cell-sub.is-active { color: #7BD0AA; font-weight: 600; font-style: normal; }

.q-cell-client {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.q-cell-client:hover { color: var(--gold); text-decoration: underline; }

.q-cell-svc {
    color: var(--ink-muted);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q-cell-staff {
    display: flex; align-items: center; gap: .4rem;
    color: var(--ink-muted);
    font-size: .82rem;
    white-space: nowrap;
}
.q-staff-dot {
    width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0;
}

.q-cell-delayed { white-space: nowrap; }
.q-late-pill {
    display: inline-flex;
    padding: .15rem .55rem;
    background: rgba(201,83,75,.14);
    color: #E8867F;
    border: 1px solid rgba(201,83,75,.28);
    border-radius: var(--r-pill);
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.q-wait-pill {
    display: inline-flex;
    padding: .15rem .55rem;
    background: rgba(91,125,177,.14);
    color: #9BB4D5;
    border: 1px solid rgba(91,125,177,.28);
    border-radius: var(--r-pill);
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.q-wait-pill.is-long {
    background: rgba(224,179,90,.14);
    color: #E0B570;
    border-color: rgba(224,179,90,.30);
}
.q-cell-mute { color: var(--ink-subtle); }

.q-alerts {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
}
.q-alert {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: #1A1614;
}
.q-alert.is-warn   { background: #C9534B; color: #FFFFFF; }
.q-alert.is-vip    { background: #E8B85B; }
.q-alert.is-new    { background: #7BD0AA; }
.q-alert.is-online { background: #9BB4D5; }
.q-alert.is-owed   { background: #E8867F; }
.q-alert-empty { color: var(--ink-subtle); }

.q-cell-action { white-space: nowrap; padding-right: 1rem !important; }
.q-action {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .35rem .8rem;
    border-radius: var(--r-sm);
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.q-action:hover { border-color: var(--line-strong); }
.q-action.is-primary {
    background: var(--gold-grad);
    border-color: var(--gold);
    color: var(--on-gold);
    box-shadow: var(--shadow-sm);
}
.q-action.is-primary:hover { filter: brightness(1.06); }
.q-action.is-ghost {
    background: transparent;
    color: var(--ink-muted);
}
.q-action.is-ghost:hover { color: var(--ink); }

.q-empty-cell {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--ink-subtle);
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
}

@media (max-width: 880px) {
    .q-subtabs { padding: .55rem .65rem; gap: .35rem; }
    .q-search { display: none; }
    .q-search-input { width: 5rem; }
    .q-table { font-size: .78rem; }
    .q-cell-svc { max-width: 8rem; }
    .q-fullday { margin-left: 0; }
}

/* Dead reference to the previous .q-board version (lanes-as-cards).
   Keeping the dummy ruleset prevents an accidental side-effect on
   anything that might still hit the old class name. */
.q-board {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    align-items: start;
}
@media (max-width: 1200px) {
    .q-board { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 640px) {
    .q-board { grid-template-columns: 1fr; }
}

.q-lane {
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-height: 18rem;
    position: relative;
}
.q-lane::before {
    /* Lane accent stripe at the top */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--lane-accent, var(--gold));
    opacity: .75;
}

.q-lane-head {
    display: flex; align-items: center; gap: .65rem;
    padding: .9rem 1rem .65rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lane-accent, var(--gold)) 6%, var(--surface)) 0%,
        var(--surface) 100%);
}
.q-lane-icon {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--lane-accent, var(--gold)) 14%, transparent);
    color: var(--lane-accent, var(--gold));
    flex-shrink: 0;
}
.q-lane-icon svg { width: 18px; height: 18px; }
.q-lane-title {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    letter-spacing: -.008em;
    color: var(--ink);
    line-height: 1.1;
}
.q-lane-sub {
    margin: .1rem 0 0;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 600;
}
.q-lane-count {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.6rem; padding: 0 .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: 'Fraunces', Georgia, serif;
    font-size: .95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em;
}

.q-lane-body {
    padding: .65rem;
    display: flex; flex-direction: column; gap: .55rem;
    flex: 1;
    max-height: calc(100vh - 460px);
    min-height: 8rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ── Queue card ──────────────────────────────────────────────── */
.q-card {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.q-card:hover {
    border-color: var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.q-card.is-late {
    border-color: rgba(201,83,75,.35);
    background: linear-gradient(135deg, rgba(201,83,75,.08), var(--surface-2));
}
.q-card.is-longwait {
    border-color: rgba(224,179,90,.45);
    background: linear-gradient(135deg, rgba(224,179,90,.10), var(--surface-2));
}

.q-card-link {
    display: block;
    padding: .7rem .85rem .55rem;
    text-decoration: none;
    color: inherit;
}

.q-card-top {
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: .5rem;
}
.q-avatar {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--on-gold);
    font-family: 'Fraunces', Georgia, serif;
    font-size: .85rem;
    font-weight: 400;
    box-shadow: var(--shadow-sm);
    letter-spacing: -.005em;
}
.q-card-time { flex: 1; min-width: 0; }
.q-time {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.012em;
}
.q-time-sub {
    margin: .2rem 0 0;
    font-size: .7rem;
    color: var(--ink-muted);
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.q-time-sub.is-late   { color: #E8867F; font-weight: 600; }
.q-time-sub.is-soon   { color: #E0B570; }
.q-time-sub.is-warn   { color: #E0B570; font-weight: 600; }
.q-time-sub.is-active { color: #7BD0AA; font-weight: 600; }

.q-client {
    display: flex; align-items: center; gap: .35rem;
    margin: 0 0 .25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: .98rem;
    color: var(--ink);
    letter-spacing: -.008em;
    line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-svc {
    margin: 0 0 .4rem;
    font-size: .76rem;
    color: var(--ink-muted);
    line-height: 1.3;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.q-meta {
    display: flex; align-items: center; justify-content: space-between; gap: .55rem;
    padding-top: .4rem;
    border-top: 1px solid var(--line-soft);
}
.q-staff {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem;
    color: var(--ink-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.q-staff-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    flex-shrink: 0;
}
.q-money {
    color: var(--gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    flex-shrink: 0;
}

/* ── Per-card flag icons ─────────────────────────────────────── */
.q-flags { display: inline-flex; align-items: center; gap: .2rem; margin-left: auto; flex-shrink: 0; }
.q-flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    color: #1A1614;
}
.q-flag svg { width: 11px; height: 11px; }
.q-flag.is-alert  { background: #C9534B; color: #FFFFFF; }
.q-flag.is-vip    { background: #E8B85B; }
.q-flag.is-new    { background: #7BD0AA; }
.q-flag.is-online { background: #9BB4D5; }
.q-flag.is-owed   { background: #E8867F; }
.q-flag.is-credit { background: #62C29B; }
.q-flag.is-series { background: var(--gold); }

/* ── Inline action buttons ───────────────────────────────────── */
.q-actions {
    display: flex; align-items: stretch; gap: .35rem;
    padding: .5rem .65rem .65rem;
    border-top: 1px solid var(--line-soft);
    background: rgba(184,153,104,.025);
}
.q-actions form { margin: 0; display: inline-flex; }
.q-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .3rem;
    height: 1.95rem;
    padding: 0 .65rem;
    border-radius: var(--r-sm);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.q-btn:hover { border-color: var(--line-strong); }
.q-btn.is-primary {
    flex: 1;
    background: var(--gold-grad);
    border-color: var(--gold);
    color: var(--on-gold);
    box-shadow: var(--shadow-sm);
}
.q-btn.is-primary:hover { filter: brightness(1.06); }
.q-btn.is-ghost {
    background: transparent;
    color: var(--ink-muted);
    border-color: transparent;
    min-width: 1.95rem;
    padding: 0 .45rem;
}
.q-btn.is-ghost:hover {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}
.q-btn.is-danger {
    background: transparent;
    border-color: rgba(201,83,75,.25);
    color: #E8867F;
    min-width: 1.95rem;
    padding: 0 .45rem;
}
.q-btn.is-danger:hover {
    background: rgba(201,83,75,.10);
    border-color: rgba(201,83,75,.50);
}

/* ── Empty lane state ────────────────────────────────────────── */
.q-empty {
    padding: 2.25rem 1rem 1.75rem;
    text-align: center;
    color: var(--ink-subtle);
    font-size: .82rem;
    font-style: italic;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 300;
}

/* ── Today's exceptions (collapsible) ────────────────────────── */
.q-exceptions {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.q-exceptions summary {
    display: flex; align-items: center; gap: .55rem;
    padding: .85rem 1rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background var(--transition-fast);
}
.q-exceptions summary::-webkit-details-marker { display: none; }
.q-exceptions summary:hover { background: var(--surface-2); }
.q-exceptions-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-subtle);
}
.q-exceptions-title {
    flex: 1;
    font-size: .85rem;
    color: var(--ink-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}
.q-exceptions-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line-soft);
}
.q-exception-row {
    display: grid;
    grid-template-columns: 5rem auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.q-exception-row:last-child { border-bottom: 0; }
.q-exception-row:hover { background: var(--surface-2); }
.q-exception-time {
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    color: var(--ink-muted);
}
.q-exception-client {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q-exception-staff {
    font-size: .78rem;
    color: var(--ink-muted);
}

@media print {
    .q-actions, .page-head-actions { display: none !important; }
}

/* ── Block-off time bands ─────────────────────────────────────── */
.cal-block {
    position: absolute;
    left: 4px; right: 4px;
    border-radius: var(--r-sm);
    background: repeating-linear-gradient(
        45deg,
        rgba(184,153,104,.18) 0px,
        rgba(184,153,104,.18) 6px,
        rgba(184,153,104,.06) 6px,
        rgba(184,153,104,.06) 12px
    );
    border: 1px dashed rgba(184,153,104,.45);
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
:root.theme-light .cal-block {
    background: repeating-linear-gradient(
        45deg,
        rgba(155,126,79,.18) 0px,
        rgba(155,126,79,.18) 6px,
        rgba(155,126,79,.06) 6px,
        rgba(155,126,79,.06) 12px
    );
    border-color: rgba(155,126,79,.45);
}
.cal-block-label {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .45rem;
    margin: .35rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .68rem;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Now line ─────────────────────────────────────────────────── */
.cal-now {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 7;
    border-top: 2px solid #E0786E;
    box-shadow: 0 0 6px rgba(224,120,110,.4);
}
.cal-now::before {
    content: '';
    position: absolute;
    left: -5px; top: -5px;
    width: 10px; height: 10px;
    background: #E0786E;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(224,120,110,.20);
}
/* Label floats on the right edge of the column band so it can't
   collide with the half-hour Fraunces labels on the left axis. */
.cal-now-label {
    position: absolute;
    right: 8px; top: -10px;
    background: #E0786E;
    color: #FFFFFF;
    padding: .15rem .55rem;
    border-radius: 9999px;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(224,120,110,.45);
    z-index: 9;
}

/* ── Responsive ───────────────────────────────────────────────── */
/* ── Week-view specifics ──────────────────────────────────────── */
.cal-week .cal-head-col { padding: .65rem .55rem; flex-direction: column; align-items: flex-start; gap: .15rem; }
.cal-week .cal-head-col.is-today {
    background: linear-gradient(180deg, rgba(184,153,104,.10), transparent);
}
.cal-week .cal-head-col.is-today .cal-head-name { color: var(--gold); }
.cal-week .cal-head-day .cal-head-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .92rem;
    color: var(--ink);
    letter-spacing: -.005em;
    line-height: 1.2;
}
.cal-week .cal-head-day-num {
    margin-left: .35rem;
    font-size: .72rem;
    color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
    font-style: italic;
}
.cal-col.is-today {
    background-color: rgba(184,153,104,.025);
}
.cal-col.is-closed {
    background-image: none !important;
    background-color: var(--surface-2);
    opacity: .55;
    cursor: not-allowed;
}
.cal-closed-overlay {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(184,153,104,.05) 0,
        rgba(184,153,104,.05) 8px,
        rgba(184,153,104,.02) 8px,
        rgba(184,153,104,.02) 16px
    );
    pointer-events: none;
}

@media (max-width: 880px) {
    .cal-head, .cal-body { grid-template-columns: 56px 1fr; }
    .cal-head-axis-r, .cal-axis-r { display: none; }
    .cal-head-cols, .cal-cols {
        grid-template-columns: repeat(var(--n), minmax(140px, 1fr));
        overflow-x: auto;
    }
    .cal-hour { font-size: .72rem; padding-right: .4rem; }
    .cal-half { font-size: .6rem; padding-right: .4rem; }
    .cal-appt-client { font-size: .82rem; }
    .cal-appt-svc, .cal-appt-time { font-size: .64rem; }
    .cal-head-util { font-size: .85rem; min-width: 2.1rem; padding: .1rem .25rem; }
}

@media print {
    .appt-toolbar { display: none !important; }
    .cal { box-shadow: none !important; border: 1px solid var(--line) !important; }
    .cal-body { overflow: visible !important; }
    .cal-now { display: none !important; }
    .cal-appt {
        background: var(--surface) !important;
        color: var(--ink) !important;
        border: 1px solid var(--line-strong) !important;
        box-shadow: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   New appointment flow (SalonTarget Client Search-first)
   ───────────────────────────────────────────────────────────────── */
/* Phase 1 — Client Search panel */
.csearch-card { margin-bottom: var(--space-4); }
.csearch-form { display: flex; flex-direction: column; gap: var(--space-3); }
.csearch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.csearch-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .csearch-grid { grid-template-columns: 1fr 1fr; }
}

/* Phase 3 — Booking form layout (2-column on desktop) */
.bk-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.25fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 980px) { .bk-row { grid-template-columns: 1fr; } }

.bk-client { display: flex; flex-direction: column; gap: var(--space-3); }
.bk-form   { display: flex; flex-direction: column; gap: var(--space-3); }

/* Vital stats strip */
.bk-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.bk-stat {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .55rem .65rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bk-stat-label {
    font-size: .62rem;
    color: var(--ink-subtle);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}
.bk-stat-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: .95rem;
    color: var(--ink);
    letter-spacing: -.005em;
}
.bk-stat.is-warn .bk-stat-value { color: #C9534B; font-weight: 600; }
.bk-stat.is-warn { background: rgba(201,83,75,.08); border-color: rgba(201,83,75,.3); }

/* Plain-list contact fields */
.bk-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line-soft);
}
.bk-field {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: var(--space-2);
    padding: .5rem 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
}
.bk-field-label {
    font-size: .68rem;
    color: var(--ink-subtle);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
}
.bk-field-value {
    font-size: .9rem;
    color: var(--ink);
}

/* History shortcut buttons */
.bk-history {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}
.bk-history-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: .8rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.bk-history-btn:hover {
    border-color: var(--gold);
    background: rgba(184,153,104,.06);
    color: var(--ink);
}

/* Future appointments mini-list */
.bk-mini-title {
    margin: var(--space-3) 0 var(--space-2);
    font-family: 'Fraunces', Georgia, serif;
    font-size: .82rem;
    color: var(--ink-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}
.bk-future {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.bk-future li {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: .55rem;
    align-items: baseline;
    padding: .35rem .55rem;
    background: var(--surface-2);
    border-left: 2px solid var(--gold);
    border-radius: var(--r-sm);
    font-size: .8rem;
}
.bk-future-date { font-family: 'Fraunces', Georgia, serif; color: var(--ink); }
.bk-future-time { color: var(--gold); font-variant-numeric: tabular-nums; }
.bk-future-staff,
.bk-future-svc { color: var(--ink-muted); }
.bk-future-svc { grid-column: 1 / -1; font-style: italic; font-size: .72rem; }

/* Client-notes textarea — uses the same global input theme as everything
   else. No per-section color overrides (theme is global). */
.bk-notes {
    font-family: 'Fraunces', Georgia, serif;
    min-height: 5.5rem;
    resize: vertical;
}

/* Service grid sized for the right column */
.bk-svc-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-height: 22rem;
}

/* ─────────────────────────────────────────────────────────────────
   Company / Salon settings — sub-tabs + form layout
   All styles consume the GLOBAL theme variables. No per-page colors.
   ───────────────────────────────────────────────────────────────── */
.cmpny-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0 0 var(--space-1);
    margin: var(--space-4) 0 var(--space-3);
    border-bottom: 1px solid var(--line);
}
.cmpny-subtab {
    position: relative;
    padding: .55rem .95rem;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: transparent;
    color: var(--ink-muted);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.cmpny-subtab:hover { color: var(--ink); background: var(--surface-2); }
.cmpny-subtab.is-active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    background: var(--tab-active-bg);
    font-weight: 600;
}

.cmpny-form { display: flex; flex-direction: column; gap: var(--space-4); }

.cmpny-card { display: flex; flex-direction: column; gap: var(--space-3); }

.cmpny-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
.cmpny-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.cmpny-span-2 { grid-column: span 2; }

@media (max-width: 720px) {
    .cmpny-grid-2 { grid-template-columns: 1fr; }
    .cmpny-grid-3 { grid-template-columns: 1fr; }
    .cmpny-span-2 { grid-column: span 1; }
}

.cmpny-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    min-height: 7rem;
}
.cmpny-logo-preview img {
    max-width: 100%;
    max-height: 5.5rem;
    object-fit: contain;
}

/* ─── Weekly schedule table ───────────────────────────────────── */
.cmpny-card-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.cmpny-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.cmpny-hours-table thead th {
    text-align: left;
    padding: .55rem .65rem;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.cmpny-hours-table tbody td {
    padding: .45rem .35rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.cmpny-hours-table tbody tr:last-child td { border-bottom: 0; }

.cmpny-hours-day {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -.008em;
    width: 7rem;
    padding-left: .65rem !important;
}

.cmpny-hours-table tr.is-closed .cmpny-hours-day { color: var(--ink-subtle); font-style: italic; }
.cmpny-hours-table tr.is-closed td:not(:first-child) select { opacity: .55; }

.cmpny-time {
    height: 2.05rem;
    padding: 0 .55rem;
    font-size: .82rem;
    min-width: 6.5rem;
    width: 100%;
}

.cmpny-templates {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--space-3);
}

.cmpny-copy-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ─── Company hub KPIs + quick-access grid ───────────────────── */
.cmpny-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.cmpny-kpi {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cmpny-kpi:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.cmpny-kpi-label {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 700;
}
.cmpny-kpi-value {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -.018em;
    font-variant-numeric: tabular-nums;
}
.cmpny-kpi-sub {
    font-size: .75rem;
    color: var(--ink-muted);
}

.cmpny-section-title {
    margin: var(--space-5) 0 var(--space-3);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
    color: var(--ink);
    letter-spacing: -.008em;
}

.cmpny-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}
.cmpny-quick-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cmpny-quick-card:hover {
    border-color: var(--gold);
    background: var(--tab-active-bg);
}
.cmpny-quick-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--gold);
}
.cmpny-quick-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cmpny-quick-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -.005em;
}
.cmpny-quick-desc { font-size: .78rem; color: var(--ink-muted); }

/* ─── Online presence ─────────────────────────────────────────── */
.cmpny-url-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.cmpny-url {
    flex: 1;
    min-width: 14rem;
    padding: .55rem .75rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--gold);
    font-size: .85rem;
    word-break: break-all;
}

/* ─── Internal messaging feed ─────────────────────────────────── */
.cmpny-alerts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.cmpny-alert {
    padding: var(--space-3);
    background: var(--surface-2);
    border-left: 3px solid var(--gold);
    border-radius: var(--r-sm);
}
.cmpny-alert-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: .35rem;
}
.cmpny-alert-time { font-size: .72rem; color: var(--ink-subtle); }
.cmpny-alert-title {
    margin: 0 0 .25rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    color: var(--ink);
}
.cmpny-alert-body { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.5; }

/* ─── Exception form (grid: title spans 2 cols, date+time chips) ─── */
.cmpny-exc-form {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: 2fr 1fr 1fr auto 1fr 1fr auto;
    align-items: end;
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.cmpny-exc-closed { display: flex; align-items: center; padding-bottom: .55rem; }
@media (max-width: 980px) {
    .cmpny-exc-form { grid-template-columns: 1fr 1fr; }
    .cmpny-exc-closed, .cmpny-exc-submit { grid-column: span 2; }
}