/* ==========================================================================
   Spark Appointment Manager
   --------------------------------------------------------------------------
   One token system. This file previously carried two — the original
   --surface/--border/--text set and a later --spark/--ink/--line set — which is
   why some panels looked flat beside others. The old names survive as aliases
   at the end of :root so existing markup keeps working.

     1 tokens · 2 base + a11y · 3 shell · 4 components · 5 features · 6 responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --bg:#F6F3EE; --surface:#FFFFFF; --surface-sunk:#FAF7F2;
  --ink:#23201C; --muted:#6B6459; --faint:#9C948A;
  --line:#E8E2D9; --line-strong:#D6CEC1;

  --spark:#E0762B; --spark-hover:#C4611D; --spark-soft:#FDF2E7; --spark-ink:#8A4A12;

  /* The rail is a deep warm neutral, not the accent: the accent has to stay
     available for actions inside the content area. */
  --rail:#33302B; --rail-2:#423E37; --rail-text:#C9C2B7;

  --ok:#3F7D57; --ok-soft:#EAF3EC;
  --attention:#B27B22; --attention-soft:#FDF4E4;
  --urgent:#B04A38; --urgent-soft:#FBEDE9;
  --info:#3D6690; --info-soft:#EAF0F7;

  --display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(35,32,28,.06);
  --shadow:0 1px 2px rgba(35,32,28,.04),0 8px 24px rgba(35,32,28,.07);
  --rail-w:236px;

  /* aliases for markup written against the older names */
  --brand:var(--spark); --spark-deep:var(--spark-hover);
  --paper:var(--surface); --paper-2:var(--surface-sunk); --surface-2:var(--surface-sunk);
  --border:var(--line); --text:var(--ink); --text-muted:var(--muted); --ink-soft:var(--muted);
}

/* ---------- 2. Base + accessibility floor ------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:1.55rem} h2{font-size:1.08rem} h3{font-size:.98rem}
a{color:var(--spark-ink);text-decoration:none} a:hover{text-decoration:underline}
button{font-family:inherit} p{margin:.5rem 0}

:focus-visible{outline:2px solid var(--spark);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Phone numbers and money are scanned in columns, so they get tabular figures. */
.tnum,.money{font-variant-numeric:tabular-nums}
.phone{font-family:var(--mono);font-size:.86em;font-variant-numeric:tabular-nums}

/* ---------- 3. Shell ---------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh}
.rail{background:var(--rail);color:var(--rail-text);padding:18px 14px 14px;
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;text-decoration:none}
.rail-brand:hover{text-decoration:none}
.rail-mark{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:.9rem;background:linear-gradient(135deg,var(--spark),#EF9A56);color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.rail-brand b{font-family:var(--display);color:#fff;font-size:1rem;font-weight:600;line-height:1.15;display:block}
.rail-brand small{display:block;color:#8C8478;font-size:.68rem;letter-spacing:.03em}
.rail-tenant{margin:0 8px 8px;padding:7px 9px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.06);font-size:.73rem;color:#B8B0A4}
.rail-tenant strong{display:block;color:#fff;font-size:.79rem;font-weight:600}
.rail-tenant select{width:100%;margin-top:5px;font:inherit;font-size:.75rem;padding:.25rem .35rem;
  background:var(--rail-2);color:#fff;border:1px solid #555047;border-radius:6px}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-group{font-size:.63rem;text-transform:uppercase;letter-spacing:.09em;color:#7E766A;
  padding:13px 10px 5px;font-weight:600}
.rail-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);
  color:var(--rail-text);font-size:.88rem;font-weight:500;text-decoration:none;
  transition:background .14s,color .14s}
.rail-link:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.rail-link.on{background:rgba(255,255,255,.13);color:#fff}
.rail-link.on .rail-ico{color:var(--spark)}
.rail-ico{width:17px;text-align:center;flex:none;opacity:.85;font-size:.95rem}
.rail-spacer{flex:1;min-height:10px}
.rail-foot{border-top:1px solid var(--rail-2);padding-top:12px;margin-top:6px}
.rail-who{display:flex;align-items:center;gap:9px;padding:2px 8px 8px}
.rail-avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--rail-2);color:#fff;font-family:var(--display);font-weight:600;font-size:.8rem}
.rail-who .n{color:#fff;font-size:.81rem;line-height:1.2}
.rail-who .r{color:#8C8478;font-size:.67rem}
.rail-out{display:block;padding:6px 10px;font-size:.79rem;color:#A79E92;border-radius:var(--radius-sm)}
.rail-out:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.rail-toggle{display:none}
.main{min-width:0;display:flex;flex-direction:column}
main{padding:22px 26px 40px;max-width:1500px;width:100%}

/* ---------- 4. Components ---------------------------------------------- */
.page-head{margin-bottom:1.1rem}
.page-head h1{margin-bottom:.15rem}
.page-head .sub{color:var(--muted);font-size:.88rem;margin:0;max-width:62ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:1.1rem;overflow:hidden}
.card-hd{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);background:var(--surface-sunk)}
.card-hd .meta{margin-left:auto;color:var(--faint);font-size:.8rem}
.card-pad{padding:1.1rem}
.hint{color:var(--muted);font-size:.82rem;line-height:1.5}

.btn{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;padding:.48rem .9rem;
  border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font-size:.88rem;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .14s,border-color .14s}
.btn:hover{border-color:var(--faint);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--spark);border-color:var(--spark-hover);color:#fff}
.btn-primary:hover{background:var(--spark-hover)}
.btn-plain{background:none}
.btn-plain:hover{background:var(--surface-sunk)}
.btn-danger{background:none;border-color:transparent;color:var(--urgent)}
.btn-danger:hover{background:var(--urgent-soft)}
.btn-sm{padding:.3rem .62rem;font-size:.8rem}
.btn-block{width:100%}

.flash{padding:.7rem .95rem;border-radius:var(--radius-sm);margin-bottom:.9rem;font-size:.88rem;
  border:1px solid transparent;border-left-width:3px}
.flash-success{background:var(--ok-soft);border-color:var(--ok);color:#2C5C3D}
.flash-error{background:var(--urgent-soft);border-color:var(--urgent);color:#8A3428}

.table{width:100%;border-collapse:collapse;font-size:.89rem}
.table th,.table td{padding:.55rem .6rem;text-align:left;vertical-align:top}
.table thead th{background:var(--surface-sunk);color:var(--muted);font-weight:600;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);white-space:nowrap}
.table tbody tr{border-bottom:1px solid var(--line)}
.table tbody tr:last-child{border-bottom:none}
.table tbody tr:hover{background:var(--spark-soft)}
.table td .muted{display:block;font-size:.78rem;color:var(--muted)}
.table .nowrap{white-space:nowrap}
.table tr.is-past td{opacity:.55}
.group-row td{background:linear-gradient(90deg,var(--spark-soft),var(--surface-sunk));
  color:var(--spark-ink);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;padding:.35rem .6rem}
.row-actions{white-space:nowrap;text-align:right}
.row-actions .inline{display:inline}

.filter-tabs,.view-switch{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px;margin-bottom:.85rem}
.filter-tabs a,.filter-tabs button,.vs{border:none;background:none;padding:.3rem .8rem;
  border-radius:999px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;
  text-decoration:none;line-height:1.5}
.filter-tabs a.on,.filter-tabs button.on,.vs.on{background:var(--spark-soft);color:var(--spark-ink)}
.vs:hover{color:var(--ink);text-decoration:none}

.field{margin-bottom:.85rem}
.field label,.form-grid label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.28rem}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=time],
input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:.5rem .6rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:.9rem;
  transition:border-color .14s,box-shadow .14s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--spark);
  box-shadow:0 0 0 3px var(--spark-soft)}
textarea{resize:vertical;min-height:4rem}
.form-section{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  margin:1.5rem 0 .7rem;padding-bottom:.3rem;border-bottom:1px solid var(--line);
  font-weight:600;font-family:var(--body)}
.form-section:first-of-type{margin-top:.3rem}
.form-grid{display:grid;gap:.95rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.form-grid .field{margin:0}
.form-grid .hint{display:block;margin-top:.22rem;font-size:.74rem}
.actions{display:flex;gap:.55rem;margin-top:1.3rem;flex-wrap:wrap;align-items:center}
.filters{display:flex;flex-wrap:wrap;gap:.65rem;align-items:flex-end;margin-bottom:1rem}
.filters .field{margin:0}
.filters .field-grow{flex:1 1 15rem}
.filters label{font-size:.72rem;font-weight:500;color:var(--muted)}

.opt{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;margin:.7rem 0}
.opt input{margin-top:.28rem;flex:none;width:auto}
.opt strong{display:block;font-weight:600;font-size:.89rem}
.opt em{display:block;font-style:normal;color:var(--muted);font-size:.8rem;line-height:1.45}
.check{display:flex;gap:.45rem;align-items:center;font-size:.86rem;cursor:pointer}
.check input{width:auto}
.check-list{display:flex;flex-direction:column;gap:.28rem;padding:.5rem .6rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);max-height:9rem;
  overflow:auto;background:var(--surface)}
.check-grid{display:grid;gap:.28rem .9rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.check-cat{grid-column:1/-1;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faint);font-weight:600;margin-top:.5rem}

.pill{display:inline-flex;align-items:center;gap:.2rem;font-size:.7rem;font-weight:600;
  padding:.1rem .5rem;border-radius:999px;white-space:nowrap}
.pill-blue{background:var(--info-soft);color:var(--info)}
.pill-green{background:var(--ok-soft);color:var(--ok)}
.pill-grey{background:#EFECE7;color:var(--muted)}
.pill-red{background:var(--urgent-soft);color:var(--urgent)}
.pill-amber{background:var(--attention-soft);color:var(--attention)}

.stat-row{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-bottom:1.2rem}
.stat{position:relative;overflow:hidden;border:1px solid transparent;border-radius:var(--radius);padding:.9rem 1rem}
.stat-n{display:block;font-family:var(--display);font-size:1.85rem;font-weight:600;line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-l{display:block;font-size:.77rem;margin-top:.1rem;opacity:.82;line-height:1.35}
.stat::after{content:'';position:absolute;right:-14px;top:-20px;width:68px;height:68px;
  border-radius:50%;background:currentColor;opacity:.07;pointer-events:none}
.stat-row .stat:nth-child(1){background:var(--info-soft);border-color:#CBDAEA;color:#2C4E74}
.stat-row .stat:nth-child(2){background:var(--ok-soft);border-color:#C8E0CF;color:#2F6042}
.stat-row .stat:nth-child(3){background:var(--spark-soft);border-color:#F1D6BB;color:var(--spark-ink)}
.stat-row .stat:nth-child(4){background:#F2ECF8;border-color:#DCCDEC;color:#56397E}
.stat-row .stat:nth-child(5){background:#E8F3F2;border-color:#C6E1DF;color:#235F5C}
.stat-row .stat.stat-warn{background:var(--urgent-soft);border-color:#F0C6BE;color:#8C342A}

.kv{margin:1rem 0 0}
.kv>div{display:flex;gap:.8rem;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.kv>div:last-child{border-bottom:none}
.kv dt{color:var(--muted);width:8.5rem;flex:none;font-size:.82rem;margin:0}
.kv dd{margin:0;font-size:.89rem;font-weight:500;min-width:0}
.kv-wide{display:block!important}
.kv-wide dt{width:auto;margin-bottom:.2rem}

.avatar{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--spark-soft);color:var(--spark-ink);font-family:var(--display);font-weight:600;font-size:.82rem}
.avatar-lg{width:2.9rem;height:2.9rem;font-size:1.15rem}

.empty{text-align:center;padding:2.8rem 1.2rem;color:var(--muted)}
.empty h3{font-size:1.05rem;color:var(--ink);margin-bottom:.35rem}
.empty p{max-width:34ch;margin:0 auto 1.1rem;font-size:.88rem}

.setup-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;padding:.75rem 1rem;
  margin-bottom:1rem;font-size:.86rem;border:1px solid #EBD9B4;border-left:3px solid var(--attention);
  background:var(--attention-soft);border-radius:var(--radius-sm)}
.setup-links{display:flex;flex-wrap:wrap;gap:.75rem}
.card-setup{border-left:3px solid var(--attention)}
.setup-steps{margin:.4rem 0 0;padding-left:1.3rem;line-height:2}

.site-footer{margin:auto 0 0;padding:1.4rem 26px;font-size:.76rem;color:var(--faint);
  border-top:1px solid var(--line)}
.site-footer .dot{margin:0 .4rem}

.login-page{display:grid;place-items:center;min-height:100vh;padding:1.5rem;
  background:radial-gradient(1100px 500px at 50% -10%,var(--spark-soft) 0%,transparent 62%),var(--bg)}
.login-card{width:100%;max-width:22.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1.8rem}
.login-head{text-align:center;margin-bottom:1.4rem}
.login-head h1{font-size:1.25rem;margin:.7rem 0 .2rem}
.login-head p{margin:0;font-size:.85rem;color:var(--muted)}
.login-head .rail-mark{display:inline-grid;width:2.4rem;height:2.4rem;font-size:1.1rem}
.login-help{margin:1.1rem 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* ---------- 5. Feature areas (carried forward) -------------------------- */
/* ==========================================================================
   Calendar — stylists across, time down
   ========================================================================== */
.cal-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.cal-nav { display:flex; gap:.25rem; }
.cal-jump { display:flex; gap:.4rem; }
.cal-jump input, .cal-jump select {
  font:inherit; font-size:.85rem; padding:.35rem .5rem;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
}
.cal-title { margin-left:auto; text-align:right; line-height:1.25; }
.cal-title strong { display:block; font-size:1rem; }
.cal-title span { font-size:.78rem; color:var(--text-muted); }

/* week strip */
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:1rem; }
.cal-wday {
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.45rem .2rem; text-decoration:none; color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
}
.cal-wday:hover { border-color:var(--brand); }
.cal-wday.sel { background:var(--brand); border-color:var(--brand); color:#fff; }
.cal-wday.today:not(.sel) { border-color:var(--brand); border-width:2px; }
.cal-wday .wd { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.cal-wday .dn { font-size:1.05rem; font-weight:600; line-height:1; }
.cal-wday .ct { font-size:.66rem; opacity:.7; }

/* the grid */
.cal-card { padding:0; overflow:hidden; }
.cal-grid { display:flex; overflow-x:auto; }
.cal-times { flex:0 0 4.4rem; position:sticky; left:0; z-index:3; background:var(--surface);
  border-right:1px solid var(--border); }
.cal-col { flex:1 1 8.5rem; min-width:8.5rem; border-right:1px solid var(--border); }
.cal-col.is-away { background:repeating-linear-gradient(45deg,
  transparent, transparent 6px, rgba(0,0,0,.025) 6px, rgba(0,0,0,.025) 12px); }
.cal-colhead {
  height:2.7rem; display:flex; flex-direction:column; justify-content:center; gap:.1rem;
  padding:0 .55rem; border-bottom:1px solid var(--border); background:var(--surface-2);
  position:sticky; top:0; z-index:2;
}
.cal-colhead strong { font-size:.85rem; line-height:1.1; }
.cal-colhead .col-meta, .cal-colhead .pill { font-size:.68rem; color:var(--text-muted); }
.cal-lane { position:relative; height:calc(var(--span) * var(--ppm) * 1px); }

.cal-hour { position:absolute; left:0; right:0; height:0; }
.cal-hour span { position:absolute; right:.45rem; top:-.55em; font-size:.7rem;
  color:var(--text-muted); white-space:nowrap; background:var(--surface); padding:0 .15rem; }
.cal-rule { position:absolute; left:0; right:0; border-top:1px solid var(--border); opacity:.6; }

.cal-shift { position:absolute; left:0; right:0; background:rgba(92,124,95,.055); }
.cal-free {
  position:absolute; left:2px; right:2px; border:1px dashed rgba(92,124,95,.45);
  border-radius:3px; background:rgba(92,124,95,.05); text-decoration:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:.64rem; line-height:1.25; color:#4a6b4e; overflow:hidden;
}
.cal-free:hover { background:rgba(92,124,95,.16); border-style:solid; }

.cal-appt {
  position:absolute; left:2px; right:2px; padding:.2rem .35rem; border-radius:3px;
  text-decoration:none; overflow:hidden; display:flex; flex-direction:column; gap:.05rem;
  border-left:3px solid currentColor; font-size:.7rem; line-height:1.25;
}
.cal-appt:hover { filter:brightness(.96); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.cal-appt .ap-time { font-weight:600; opacity:.8; font-size:.66rem; }
.cal-appt .ap-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-appt .ap-svc  { opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-appt.is-short { flex-direction:row; align-items:center; gap:.3rem; padding:.1rem .35rem; }
.cal-appt .ap-flag, .cal-appt .ap-note { position:absolute; top:.15rem; right:.25rem; font-size:.7rem; opacity:.55; }
.cal-appt .ap-note { right:1.1rem; }

.cal-now { position:absolute; left:0; right:0; border-top:2px solid #c0504d; z-index:4; }
.cal-now::before { content:''; position:absolute; left:0; top:-4px; width:6px; height:6px;
  border-radius:50%; background:#c0504d; }

@media (max-width:720px) {
  .cal-title { margin-left:0; text-align:left; width:100%; }
  .cal-col { flex:0 0 7.5rem; min-width:7.5rem; }
}

/* ==========================================================================
   Colour
   --------------------------------------------------------------------------
   Two kinds, kept apart on purpose:
     * accents and surfaces, which make the thing pleasant to look at
     * category and status colour, which carries meaning and must stay legible
   ========================================================================== */




/* --- brand ------------------------------------------------------------- */
.brand { text-decoration:none; display:flex; align-items:center; gap:.55rem; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.85rem; height:1.85rem; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--spark), #f0a45c);
  color:#fff; font-size:.85rem; box-shadow:0 1px 3px rgba(194,101,42,.35);
}
.brand-text { font-weight:600; font-size:.98rem; letter-spacing:-.01em; color:var(--ink); }
.nav-tenant {
  font-size:.78rem; color:var(--ink-soft); padding:.2rem .55rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  white-space:nowrap; margin-left:.2rem;
}

/* --- nav --------------------------------------------------------------- */
.nav { background:var(--paper); border-bottom:1px solid var(--line); }
.nav-link { position:relative; }
.nav-link.active { color:var(--spark-deep); font-weight:600; }
.nav-link.active::after {
  content:''; position:absolute; left:.55rem; right:.55rem; bottom:-1px;
  height:2px; background:var(--spark); border-radius:2px;
}

/* --- buttons ----------------------------------------------------------- */
.btn-primary {
  background:linear-gradient(180deg, var(--spark), var(--spark-deep));
  border-color:var(--spark-deep); color:#fff;
}
.btn-primary:hover { filter:brightness(1.06); }

/* --- cards ------------------------------------------------------------- */
.card { background:var(--paper); border:1px solid var(--line); }
.card-hd { background:linear-gradient(180deg, var(--paper), var(--paper-2)); }

/* --- stats: each gets its own tint so the row is not a grey wall -------- */
.stat-row .stat:nth-child(1) { border-left:3px solid #4b7bb5; }
.stat-row .stat:nth-child(2) { border-left:3px solid #4d9670; }
.stat-row .stat:nth-child(3) { border-left:3px solid var(--spark); }
.stat-row .stat:nth-child(4) { border-left:3px solid #8a6bb5; }
.stat-row .stat-n { color:var(--ink); }

/* --- service categories ------------------------------------------------ */
.cat-hair    { background:#efe8fb; color:#5b3f96; }
.cat-color   { background:#fce7f0; color:#993560; }
.cat-nails   { background:#e2f4f2; color:#1f6b66; }
.cat-barber  { background:#e6eefb; color:#2d5891; }
.cat-massage { background:#e8f3e6; color:#3a6b34; }
.cat-spa     { background:#fdf0e0; color:#8a5a1c; }
.cat-brows   { background:#fbeae4; color:#96432c; }
.cat-other   { background:#eeece8; color:#5a554e; }

/* a small square used in legends and lists */
.cat-dot { display:inline-block; width:.62rem; height:.62rem; border-radius:2px;
  vertical-align:-1px; margin-right:.35rem; }
.cat-legend { display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.76rem;
  color:var(--ink-soft); margin-top:.7rem; }

/* --- calendar blocks take the category colour -------------------------- */
.cal-appt { border-left-width:4px; }
.cal-appt.cat-hair    { border-left-color:#7b5bc4; }
.cal-appt.cat-color   { border-left-color:#c2497f; }
.cal-appt.cat-nails   { border-left-color:#2b8f88; }
.cal-appt.cat-barber  { border-left-color:#3a70b8; }
.cal-appt.cat-massage { border-left-color:#4d8a44; }
.cal-appt.cat-spa     { border-left-color:#b5772a; }
.cal-appt.cat-brows   { border-left-color:#bd5638; }
.cal-appt.cat-other   { border-left-color:#8a857c; }
/* cancelled and no-show stay muted whatever the category */
.cal-appt.is-cancelled { opacity:.5; text-decoration:line-through; }

.cal-wday.sel { background:var(--spark); border-color:var(--spark-deep); }
.cal-wday.today:not(.sel) { border-color:var(--spark); }
.cal-free { border-color:rgba(232,131,58,.5); background:rgba(232,131,58,.05); color:var(--spark-deep); }
.cal-free:hover { background:rgba(232,131,58,.16); }
.cal-shift { background:rgba(232,131,58,.04); }

/* --- tables ------------------------------------------------------------ */
.table thead th { background:var(--paper-2); color:var(--ink-soft);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.table tbody tr:hover { background:var(--spark-soft); }
.group-row td { background:linear-gradient(90deg, var(--spark-soft), var(--paper-2)); color:var(--spark-deep); }

/* --- flashes ----------------------------------------------------------- */
.flash { border-left:3px solid transparent; }
.flash-success { background:#eaf5ec; border-left-color:#4d9670; color:#2c5c3c; }
.flash-error   { background:#fdeeec; border-left-color:#c0504d; color:#8a3330; }

/* --- customer quick search --------------------------------------------- */
.cust-search { margin-bottom:1rem; padding:.85rem .9rem; border-radius:var(--radius-sm);
  background:var(--spark-soft); border:1px solid rgba(232,131,58,.28); }
.cust-search label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; color:var(--spark-deep); }
.cust-search input[type=search] {
  font:inherit; font-size:.95rem; padding:.5rem .65rem; width:100%;
  border:1px solid rgba(232,131,58,.45); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink);
}
.cust-search .hint { display:block; margin-top:.3rem; font-size:.75rem; color:var(--ink-soft); }
.cust-results { margin-top:.6rem; display:flex; flex-direction:column; gap:.4rem;
  max-height:19rem; overflow:auto; }
.cust-row { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.5rem .6rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.cust-pick { flex:1 1 12rem; text-align:left; background:none; border:0; cursor:pointer;
  padding:0; font:inherit; color:var(--ink); }
.cust-pick strong { display:block; font-size:.9rem; }
.cust-pick span { display:block; font-size:.75rem; color:var(--ink-soft); }
.cust-pick:hover strong { color:var(--spark-deep); text-decoration:underline; }
.cust-empty { font-size:.82rem; color:var(--ink-soft); padding:.5rem .1rem; }
.cust-hist { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
  padding-top:.45rem; margin-top:.35rem; border-top:1px dashed var(--line); }
.cust-hist-lbl { font-size:.72rem; color:var(--ink-soft); margin-right:.2rem; }
.cust-repeat { border:1px solid transparent; border-radius:4px; padding:.25rem .5rem;
  font:inherit; font-size:.76rem; cursor:pointer; text-align:left; line-height:1.2; }
.cust-repeat:hover { filter:brightness(.95); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.cust-repeat span { display:block; font-size:.68rem; opacity:.75; }
.cust-flags { margin-top:.55rem; padding:.5rem .6rem; border-radius:var(--radius-sm);
  background:#fff8e8; border:1px solid #e6cf9a; color:#7a5c14; font-size:.8rem; line-height:1.45; }

/* --- stat panels: tinted, not just a coloured edge ---------------------- */
.stat-row { gap:.75rem; }
.stat {
  position:relative; overflow:hidden;
  border:1px solid transparent; border-radius:10px;
  padding:.95rem 1rem .9rem;
  box-shadow:0 1px 2px rgba(34,32,29,.04);
}
.stat-n { font-size:1.9rem; letter-spacing:-.02em; }
.stat-l { font-size:.78rem; line-height:1.35; }

/* Each slot gets its own tint. Order is deliberate: the first is the number
   you look at most, the third is always the phone assistant. */
.stat-row .stat:nth-child(1) { background:#eaf0f9; border-color:#c9d8ee; color:#2a4f7e; }
.stat-row .stat:nth-child(2) { background:#e9f4ec; border-color:#c6e2ce; color:#2f6040; }
.stat-row .stat:nth-child(3) { background:#fdf0e4; border-color:#f0d3b2; color:#8a5217; }
.stat-row .stat:nth-child(4) { background:#f1ecf9; border-color:#d8cbee; color:#523a80; }
.stat-row .stat:nth-child(5) { background:#e6f3f3; border-color:#c2e0df; color:#1f5f5c; }
.stat-row .stat .stat-n { color:inherit; }
.stat-row .stat .stat-l { color:inherit; opacity:.8; }

/* a warning slot overrides whatever position it happens to sit in */
.stat-row .stat.stat-warn { background:#fdecea; border-color:#f0c4bf; color:#8d332e; }

/* a soft wash behind the number, so the panel reads as a card not a box */
.stat::after {
  content:''; position:absolute; right:-12px; top:-18px;
  width:66px; height:66px; border-radius:50%;
  background:currentColor; opacity:.07; pointer-events:none;
}

/* --- key/value list on the customer page -------------------------------- */
.kv { display:grid; gap:.6rem 1.4rem; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  margin:1rem 0 0; }
.kv > div { min-width:0; }
.kv-wide { grid-column:1/-1; }
.kv dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:.15rem; }
.kv dd { margin:0; font-size:.92rem; }

/* ==========================================================================
   Guided booking
   ========================================================================== */
.mode-switch { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-bottom:1rem; }
.mode { display:block; padding:.7rem .9rem; text-decoration:none; border-radius:10px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.mode:hover { border-color:var(--spark); }
.mode.on { border-color:var(--spark); background:var(--spark-soft); box-shadow:inset 0 0 0 1px var(--spark); }
.mode strong { display:block; font-size:.92rem; }
.mode span { display:block; font-size:.76rem; color:var(--ink-soft); }
.mode.on strong { color:var(--spark-deep); }

.book-bar { display:flex; flex-wrap:wrap; gap:.7rem; align-items:flex-end; }
.book-bar .field { margin:0; min-width:9rem; }
.book-bar .field-grow { flex:1 1 18rem; }
.book-bar label { display:block; font-size:.74rem; color:var(--ink-soft); margin-bottom:.2rem; }
.book-bar select, .book-bar input {
  font:inherit; font-size:.9rem; padding:.45rem .55rem; width:100%;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink);
}
.book-summary { margin:.9rem 0 0; padding:.6rem .75rem; border-radius:var(--radius-sm);
  background:var(--paper-2); font-size:.88rem; border:1px solid var(--line); }

.book-grid { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.book-person { background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:.8rem .9rem; }
.bp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;
  padding-bottom:.55rem; margin-bottom:.6rem; border-bottom:1px solid var(--line); }
.bp-head strong { display:block; font-size:.95rem; }
.bp-head span { display:block; font-size:.75rem; color:var(--ink-soft); }
.bp-day { font-size:.74rem; white-space:nowrap; }
.bp-booked { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-bottom:.6rem; }
.bp-lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  width:100%; }
.bp-chip { font-size:.7rem; padding:.15rem .4rem; border-radius:3px; white-space:nowrap; }
.bp-none { font-size:.82rem; color:var(--ink-soft); margin:.2rem 0 0; }
.bp-slots { display:flex; flex-wrap:wrap; gap:.35rem; }
.slot { display:inline-block; padding:.35rem .55rem; border-radius:6px; text-decoration:none;
  font-size:.82rem; font-weight:500; border:1px solid rgba(232,131,58,.4);
  background:rgba(232,131,58,.07); color:var(--spark-deep); }
.slot:hover { background:var(--spark); border-color:var(--spark-deep); color:#fff;
  box-shadow:0 1px 3px rgba(194,101,42,.35); }
.slot-more { font-size:.76rem; color:var(--ink-soft); align-self:center; }
.next-days { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.4rem; }

/* --- availability panel inside the booking form ------------------------- */
.slot-panel { margin-top:.3rem; padding:.8rem .85rem; border-radius:10px;
  background:var(--paper-2); border:1px solid var(--line); }
.slot-loading { font-size:.84rem; color:var(--ink-soft); }
.slot-head { font-size:.86rem; margin-bottom:.7rem; padding-bottom:.55rem;
  border-bottom:1px solid var(--line); }
.slot-person + .slot-person { margin-top:.8rem; padding-top:.7rem; border-top:1px dashed var(--line); }
.sp-name { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.4rem; }
.sp-name strong { font-size:.9rem; }
.sp-name span { font-size:.74rem; color:var(--ink-soft); }
.sp-booked { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.45rem; }
.slot-panel .slot { cursor:pointer; font:inherit; font-size:.82rem; }
.slot-panel .slot.on { background:var(--spark); border-color:var(--spark-deep);
  color:#fff; box-shadow:0 1px 3px rgba(194,101,42,.4); }

/* --- sticky confirm bar on the booking page ----------------------------- */
.confirm-bar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap;
  align-items:center; gap:.8rem; margin:0 0 .9rem; padding:.7rem .9rem;
  background:var(--paper); border:1px solid var(--spark); border-radius:10px;
  box-shadow:0 -2px 10px rgba(34,32,29,.08); }
.confirm-text { flex:1 1 14rem; }
.confirm-text strong { display:block; font-size:.95rem; color:var(--spark-deep); }
.confirm-text span { display:block; font-size:.76rem; color:var(--ink-soft); }
.confirm-override { font-size:.76rem; color:var(--ink-soft); }
.bp-slots .slot { cursor:pointer; font:inherit; }
.bp-slots .slot.on { background:var(--spark); border-color:var(--spark-deep); color:#fff; }

/* --- view switch -------------------------------------------------------- */
.view-switch { display:flex; gap:.3rem; margin-bottom:.8rem; }
.vs { padding:.35rem .8rem; font-size:.84rem; text-decoration:none; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); }
.vs:hover { border-color:var(--spark); color:var(--spark-deep); }
.vs.on { background:var(--spark); border-color:var(--spark-deep); color:#fff; font-weight:500; }

/* --- month grid --------------------------------------------------------- */
.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.mg-dow { background:var(--paper-2); padding:.35rem .4rem; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); text-align:center; }
.mg-day { background:var(--paper); min-height:5.6rem; padding:.3rem .35rem;
  display:flex; flex-direction:column; gap:.15rem; }
.mg-day.out { background:var(--paper-2); opacity:.6; }
.mg-day.today { box-shadow:inset 0 0 0 2px var(--spark); }
.mg-head { display:flex; justify-content:space-between; align-items:center; }
.mg-num { font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.mg-count { font-size:.64rem; background:var(--spark); color:#fff; border-radius:999px;
  padding:0 .35rem; line-height:1.35; }
.mg-item { display:block; font-size:.68rem; line-height:1.3; padding:.1rem .25rem;
  border-radius:3px; text-decoration:none; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.mg-item:hover { filter:brightness(.94); }
.mg-item.off { opacity:.45; text-decoration:line-through; }
.mg-t { font-weight:600; opacity:.75; margin-right:.15rem; }
.mg-ph { opacity:.6; }
.mg-more { font-size:.65rem; color:var(--ink-soft); text-decoration:none; padding-left:.25rem; }
.mg-more:hover { color:var(--spark-deep); }
@media (max-width:720px) { .mg-day { min-height:4.2rem; } .mg-item { font-size:.62rem; } }

/* --- existing bookings shown while searching ---------------------------- */
.cust-upcoming { flex:1 1 100%; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
  padding:.4rem .5rem; margin-top:.35rem; border-radius:var(--radius-sm);
  background:#fff8e8; border:1px solid #e6cf9a; }
.cust-booked-chip { font-size:.72rem; padding:.15rem .45rem; border-radius:3px;
  background:#fff; border:1px solid #e6cf9a; color:#7a5c14; white-space:nowrap; }

/* --- day strip: only days with openings, and how many ------------------- */
.daystrip { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; align-items:center; }
.daypick {
  display:flex; flex-direction:column; align-items:center; gap:.05rem;
  min-width:3.7rem; padding:.4rem .35rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.daypick:hover { border-color:var(--spark); text-decoration:none; }
.daypick.sel { background:var(--spark); border-color:var(--spark-hover); color:#fff; }
.daypick.today:not(.sel) { border-color:var(--spark); border-width:2px; }
.daypick .wd { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; opacity:.72; }
.daypick .dn { font-family:var(--display); font-size:1.15rem; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; }
.daypick .mo { font-size:.6rem; opacity:.66; text-transform:uppercase; letter-spacing:.04em; }
.daypick .ct { font-size:.62rem; font-weight:600; color:var(--ok); margin-top:.1rem; }
.daypick.sel .ct { color:#fff; opacity:.9; }
.daypick.none .ct { color:var(--urgent); }
.daypick.none.sel .ct { color:#fff; }
.daystrip-none { font-size:.8rem; color:var(--muted); padding-left:.3rem; }