/* ════════════════════════════════════════════════════════════════════════════
   Atelier OS · shared design system for Planviso mockups
   Single source of truth for tokens + chrome (rail, topbar, theme).
   Surface-specific component CSS lives in each surface's own file.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  --font:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* type ramp */
  --t-display:38px; --t-h1:17px; --t-h2:15px; --t-body:13px; --t-sm:12px; --t-xs:11px; --t-2xs:10px;

  /* LIGHT (default + no-JS fallback) */
  --ink:#1e1b3a; --ink-2:#423d63; --muted:#696251; --muted-2:#706857;
  --on-brand:#ffffff; --brand:#5347ce; --brand-600:#4338ca; --lavender:#887cfd; --lav-wash:rgba(83,71,206,.10);

  --paper:#f6f1e9; --paper-2:#f0e9dd; --card:#ffffff; --card-2:#fbf7f0;
  --line:#e9e1d3; --line-soft:#f1ebe0;

  --coral:#ff6a3d; --coral-600:#e8501f; --coral-700:#c23f15; --coral-wash:#ffeae1; --coral-ink:#2b1206;

  --bg-a:#fff6ef; --bg-b:var(--lav-wash);
  --grain-op:.04; --grain-blend:normal;

  /* 9 immutable status roles: --c vivid (bar/dot), --tx AA text, --tint low-alpha wash */
  --st-scheduled:#5347ce;  --st-scheduled-tx:#4338ca;  --st-scheduled-tint:rgba(83,71,206,.07);
  --st-walkedin:#1f9aa8;   --st-walkedin-tx:#157a86;   --st-walkedin-tint:rgba(31,154,168,.09);
  --st-inprogress:#6d3bd8; --st-inprogress-tx:#5a2db8; --st-inprogress-tint:rgba(109,59,216,.09);
  --st-completed:#2f9266;  --st-completed-tx:#1f7a52;  --st-completed-tint:rgba(47,146,102,.07);
  --st-noshow:#a6534a;     --st-noshow-tx:#8f4339;     --st-noshow-tint:rgba(166,83,74,.09);
  --st-cancelled:#7c7596;  --st-cancelled-tx:#655e84;  --st-cancelled-tint:rgba(124,117,150,.09);
  --st-waitlist:#c2872a;   --st-waitlist-tx:#805613;   --st-waitlist-tint:rgba(194,135,42,.10);
  --st-recall:#c2872a;     --st-recall-tx:#805613;     --st-recall-tint:rgba(194,135,42,.10);

  /* Destructive actions and validation are independent of appointment statuses. */
  --negative:#b42318; --negative-tint:#fff0ee; --on-negative:#fff;

  --r:14px; --r-sm:10px; --r-lg:20px; --r-pill:999px;
  --slot:40px; --gutter:54px; --rail:66px; --smartfill:344px; --content-max:1240px;

  --shadow-1:0 1px 2px rgba(30,27,58,.05), 0 4px 14px -8px rgba(30,27,58,.14);
  --shadow-2:0 2px 6px rgba(30,27,58,.06), 0 18px 44px -18px rgba(30,27,58,.22);
  --shadow-coral:0 8px 28px -10px rgba(255,106,61,.5);
  --scrollthumb:#ddd4c4;
  --focus:0 0 0 2px var(--paper), 0 0 0 4px var(--brand);
}

/* DARK · warm charcoal, hand-tuned (never an invert) */
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#f3eee6; --ink-2:#c8c1d6; --muted:#a8a1b6; --muted-2:#8c8499;
  --on-brand:#1e1b3a; --brand:#9a8cff; --brand-600:#8a7cf5; --lavender:#b3a7ff; --lav-wash:rgba(154,140,255,.14);

  --paper:#16131f; --paper-2:#1c1828; --card:#211d2c; --card-2:#2a2536;
  --line:#332d40; --line-soft:#27222f;

  --coral:#ff7d52; --coral-600:#ff8a64; --coral-700:#ff9470; --coral-wash:#3a2118; --coral-ink:#1a0c04;

  --bg-a:#241a2e; --bg-b:#1e1a30;
  --grain-op:.028; --grain-blend:overlay;

  --st-scheduled:#9a8cff;  --st-scheduled-tx:#b3a7ff;  --st-scheduled-tint:rgba(154,140,255,.14);
  --st-walkedin:#3ec6d4;   --st-walkedin-tx:#3ec6d4;   --st-walkedin-tint:rgba(62,198,212,.13);
  --st-inprogress:#a98bff; --st-inprogress-tx:#bba6ff; --st-inprogress-tint:rgba(169,139,255,.15);
  --st-completed:#5cc28c;  --st-completed-tx:#5cc28c;  --st-completed-tint:rgba(92,194,140,.13);
  --st-noshow:#d98a7e;     --st-noshow-tx:#e09a8f;     --st-noshow-tint:rgba(217,138,126,.14);
  --st-cancelled:#a59cc0;  --st-cancelled-tx:#b3abcc;  --st-cancelled-tint:rgba(165,156,192,.13);
  --st-waitlist:#e0a23e;   --st-waitlist-tx:#e8b15a;   --st-waitlist-tint:rgba(224,162,62,.14);
  --st-recall:#e0a23e;     --st-recall-tx:#e8b15a;     --st-recall-tint:rgba(224,162,62,.14);

  --negative:#ffb4aa; --negative-tint:#47221f; --on-negative:#2a100d;

  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.4);
  --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-coral:0 0 0 1px rgba(255,125,82,.35), 0 8px 30px -6px rgba(255,125,82,.5), 0 0 40px -8px rgba(255,125,82,.3);
  --scrollthumb:#3a3447;
}

*{box-sizing:border-box;margin:0;padding:0}
/* buttons must never inherit the invisible UA control color (white-on-white in a forced theme) */
button{color:inherit;font-family:inherit}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--bg-a) 0%, transparent 55%),
    radial-gradient(1000px 600px at -5% 110%, var(--bg-b) 0%, transparent 50%),
    var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv01","ss01"; overflow:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* utilities */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tnum{font-variant-numeric:tabular-nums}
.money{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--coral-700)}
.money .cur{font-size:.7em;font-weight:600;opacity:.92;margin-right:.03em;letter-spacing:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* focus · indigo ring, never coral (coral = money) */
:where(a,button,[tabindex],.focusable):focus-visible{outline:none;box-shadow:var(--focus);border-radius:inherit;position:relative;z-index:9}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scrollthumb);border-radius:9px;border:2px solid transparent;background-clip:padding-box}

/* ── app shell ── */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:minmax(64px,auto) 1fr;height:100vh}

/* ── left rail (dark in both themes) ── */
.rail{grid-row:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;
  background:linear-gradient(180deg,#211d44,#1a1736);color:#cfcbe6;position:relative;z-index:20}
.mark{width:38px;height:38px;border-radius:12px;margin-bottom:14px;background:linear-gradient(140deg,#6f63e8,#9a8cff);
  display:grid;place-items:center;box-shadow:0 6px 18px -6px rgba(83,71,206,.7);position:relative;overflow:hidden}
.mark::before{content:"";position:absolute;left:9px;bottom:8px;width:7px;height:13px;border-radius:2px;background:rgba(255,255,255,.95)}
.mark::after{content:"";position:absolute;left:18px;bottom:8px;width:7px;height:21px;border-radius:2px;background:var(--coral)}
.nav{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.nav a{width:44px;height:42px;border-radius:12px;display:grid;place-items:center;color:#9b96bd;text-decoration:none;transition:.18s;position:relative}
.nav a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:rgba(255,255,255,.12);color:#fff}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--coral)}
.rail .spacer{flex:1}
.salon-chip{width:40px;height:40px;border-radius:12px;background:#fff;color:#1e1b3a;font-weight:700;display:grid;place-items:center;font-size:var(--t-h2);box-shadow:0 4px 12px -4px rgba(0,0,0,.4);border:none;cursor:pointer}

/* ── topbar chrome ── */
.top{grid-column:2/-1;grid-row:1;display:flex;align-items:center;gap:20px;padding:0 22px;min-height:64px;min-width:0;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--paper) 82%, transparent);backdrop-filter:blur(8px);position:relative;z-index:15}
.where{display:flex;flex-direction:column;line-height:1.14}
.where b{font-size:var(--t-h2);font-weight:600;letter-spacing:-.01em}
.where span{font-size:var(--t-sm);color:var(--muted)}
.where.sub b{font-weight:500}
.daynav{display:flex;align-items:center;gap:3px;margin-left:2px}
.daynav button{min-width:36px;height:36px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--ink-2);cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.15s}
.daynav button:hover{border-color:var(--brand);color:var(--brand)}
.daynav .today{padding:0 13px;font-weight:500;font-size:var(--t-sm)}
.vitals{margin-left:auto;display:flex;align-items:center;gap:9px}
.vital{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:7px 13px 7px 10px;box-shadow:var(--shadow-1)}
.vital .lab{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.vital .val{font-size:var(--t-h1);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.vital.recovered{background:linear-gradient(180deg,var(--card),var(--coral-wash));border-color:color-mix(in srgb,var(--coral) 35%,var(--line))}
.ring{--p:78;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--brand) calc(var(--p)*1%), var(--lav-wash) 0);position:relative}
.ring::before{content:"";position:absolute;inset:4px;background:var(--card);border-radius:50%}
.ring b{position:relative;font-size:var(--t-2xs);font-weight:600;font-variant-numeric:tabular-nums}
.themebtn,.kbd{height:36px;border:1px solid var(--line);background:var(--card);border-radius:10px;cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:6px;transition:.15s}
.themebtn{width:36px;justify-content:center;color:var(--ink-2)}
.themebtn:hover,.kbd:hover{border-color:var(--brand);color:var(--brand)}
.kbd{padding:0 11px;font-size:var(--t-sm)}
.kbd kbd{font-family:var(--mono);font-size:var(--t-2xs);background:var(--paper-2);border-radius:5px;padding:1px 5px;color:var(--ink-2)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:block}
.me{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#a99bff,#6f63e8);color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--t-body)}

/* ── motion ── */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(109,59,216,.5)}70%{box-shadow:0 0 0 7px rgba(109,59,216,0)}100%{box-shadow:0 0 0 0 rgba(109,59,216,0)}}
@keyframes glow{0%,100%{box-shadow:var(--shadow-coral)}50%{box-shadow:0 10px 36px -8px rgba(255,106,61,.7)}}
@keyframes glowdark{0%,100%{box-shadow:var(--shadow-coral)}50%{box-shadow:0 0 0 1px rgba(255,125,82,.5), 0 8px 30px -6px rgba(255,125,82,.6), 0 0 56px -6px rgba(255,125,82,.45)}}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }
@media (pointer:coarse){ .daynav button{min-width:40px;height:40px} }

/* floating theme toggle for surfaces without a topbar toggle (booking, marketplace, floor mode) */
.theme-fab{position:fixed;right:16px;bottom:16px;z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-2);transition:.15s}
.theme-fab:hover{border-color:var(--brand);color:var(--brand)}
.theme-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.theme-fab .moon{display:none}
:root[data-theme="dark"] .theme-fab .sun{display:none}
:root[data-theme="dark"] .theme-fab .moon{display:block}

/* ── language + region switcher (injected by atelier.js, sits beside the theme toggle) ── */
.langwrap{position:relative;display:flex;align-items:center}
.langbtn{height:36px;padding:0 8px 0 9px;border:1px solid var(--line);background:var(--card);border-radius:10px;cursor:pointer;color:var(--ink-2);display:flex;align-items:center;gap:6px;font-family:var(--font);transition:.15s}
.langbtn:hover{border-color:var(--brand);color:var(--brand)}
.langbtn .globe{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.langbtn .lc{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:var(--t-xs);color:var(--ink-2)}
.langbtn:hover .lc{color:var(--brand)}
.langbtn .chev{width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none;opacity:.55;transition:transform .18s}
.langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}

.langpop{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:252px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);padding:6px;animation:rise .16s ease both}
.langpop[hidden]{display:none}
.langpop .grp+.grp{border-top:1px solid var(--line-soft);margin-top:3px;padding-top:2px}
.langpop h4{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;padding:8px 9px 4px}
.lang-opt{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border:none;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);font-family:var(--font);font-size:var(--t-body);text-align:left;transition:.12s}
.lang-opt:hover{background:var(--lav-wash)}
.lang-opt .fl{font-size:15px;line-height:1;width:20px;text-align:center;flex-shrink:0}
.lang-opt .nm{flex:1;font-weight:500;line-height:1.25}
.lang-opt .nm small{display:block;font-weight:400;color:var(--muted);font-size:var(--t-2xs)}
.lang-opt .soon{font-size:var(--t-2xs);color:var(--muted-2);background:var(--paper-2);border-radius:var(--r-pill);padding:2px 7px;font-weight:600;letter-spacing:.01em;flex-shrink:0}
.lang-opt .ck{width:15px;height:15px;stroke:var(--brand);stroke-width:2.4;fill:none;opacity:0;flex-shrink:0}
.lang-opt[aria-selected="true"]{background:var(--lav-wash)}
.lang-opt[aria-selected="true"] .ck{opacity:1}
.lang-opt[aria-selected="true"] .nm{color:var(--brand)}

/* fab variant, stacked just above the floating theme toggle */
.langwrap.fab{position:fixed;right:16px;bottom:64px;z-index:60}
.langwrap.fab .langbtn{height:40px;border-radius:var(--r-pill);box-shadow:var(--shadow-2);padding:0 13px 0 14px}
.langwrap.fab .langpop{top:auto;bottom:calc(100% + 8px)}

/* ════════════════════════════════════════════════════════════════════════════
   Responsive · shared app-shell + topbar chrome (surfaces add their own content
   breakpoints on top of this). The .app content track is minmax(0,1fr) so wide
   inner regions scroll inside their own container instead of widening the page.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .top{flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px;gap:14px}
  .where{min-width:0}
  .where span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vitals{margin-left:auto;gap:8px}
  .kbd{display:none}
}
@media (max-width:560px){
  .top{gap:10px;padding-left:12px;padding-right:12px}
  .vitals{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .me{width:44px;height:44px;flex-shrink:0}
  /* declutter every admin topbar on phone: drop the KPI stat chips (the body
     already carries them); keep only the where + the controls */
  .top .vital{display:none}

  /* ── phone: the left rail becomes a fixed bottom tab bar (native pattern) ──
     :root prefix raises specificity so it wins over per-surface .app overrides */
  :root .app{grid-template-columns:0 minmax(0,1fr)}
  /* pack rows to the top so auto rows are not stretched to fill min-height:100vh
     (that stretch was producing large dead voids between sections on phone) */
  .app{align-content:start}
  .rail{position:fixed;left:0;right:0;bottom:0;width:auto;height:auto;z-index:60;
    flex-direction:row;align-items:center;justify-content:space-around;gap:2px;
    padding:7px 8px;padding-bottom:max(7px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.10);box-shadow:0 -6px 20px -10px rgba(0,0,0,.5)}
  .rail .mark,.rail .spacer,.rail .opmark{display:none}
  .nav{flex-direction:row;gap:2px;width:auto;flex:1;justify-content:space-around}
  .nav a{width:auto;flex:1;max-width:64px;height:44px}
  /* active tab: ONE treatment, a filled rounded box (drop the redundant top bar) */
  .nav a.on::before{display:none}
  .rail .nav a.on{background:rgba(255,255,255,.18);color:#fff}
  /* account chip reads as part of the dark bar, not a bright extra tab */
  .rail .salon-chip,.rail .staff-ava{width:44px;height:44px;flex-shrink:0;background:rgba(255,255,255,.14);color:#fff;box-shadow:none;font-size:var(--t-sm);font-weight:600;border-radius:12px}
  /* keep content clear of the fixed bottom bar */
  .app .main,.app .board,.app .pos,.app .sf,.app .agenda,.app .page,.app .wrap{padding-bottom:88px}
  /* reclaim width now that the rail is gone: tighter page gutters on phones */
  .page{padding-left:16px;padding-right:16px}
}

/* Phone header controls retain a full touch target. */
@media (max-width:920px){
  :root .themebtn,:root .theme-fab,:root .langbtn{min-width:44px;min-height:44px;flex-shrink:0}
  .langwrap.fab{bottom:68px}
}

/* Honor component state even when a layout declares display:flex. */
[hidden]{display:none!important}

.surface-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.mkt-top .surface-tools{order:9;margin-left:auto;padding:0;border:0;background:none;flex-shrink:0}
@media (max-width:680px){.mkt-top .inner:has(.surface-tools){flex-wrap:wrap}}

@media (max-width:560px){
  .top{flex-wrap:nowrap;gap:8px}
  .top .where{flex:1;min-width:0;overflow:hidden}
  .top .where b,.top .where span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .vitals{flex-wrap:nowrap;flex-shrink:0;gap:6px}
  .top:has(> .where.sub){flex-wrap:wrap}
  .top > .where.sub{order:3;flex-basis:100%}
  .top > .where.sub b,.top > .where.sub span{display:inline}
}

/* Phone navigation labels share the existing rail, titles and active state. */
.rail .nav-label{display:none}
.cc-kpis{display:contents}
@media (max-width:560px){
  .rail{gap:0;padding:5px 4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .rail .nav{gap:0;min-width:0}
  :root .rail .nav a{width:auto;min-width:44px;max-width:72px;height:52px;min-height:44px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
  :root .rail .nav a svg{width:20px;height:20px;flex-shrink:0}
  .rail .nav-label{display:block;font-family:var(--font);font-size:var(--t-2xs);font-weight:500;
    line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
  .rail .nav a{color:inherit}
  .rail .salon-chip,.rail .staff-ava{width:44px;height:52px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;border-radius:var(--r-sm)}
  .rail .account-initials{height:20px;line-height:20px}
  :root .rail:has(.staff-ava) .nav a{min-height:56px}
}