/* ==========================================================================
   Studio Booking — Premium SaaS Design System
   ========================================================================== */

:root {
  /* neutrals — light mode */
  --ink-900:#09090b; --ink-700:#18181b; --ink-600:#27272a; --ink-500:#3f3f46;
  --ink-400:#52525b; --ink-300:#a1a1aa; --ink-200:#d4d4d8; --ink-100:#e4e4e7;
  --ink-050:#f4f4f5;
  --paper:#fafafa; --surface:#ffffff; --sunk:#f4f4f5;
  --rule:#e4e4e7; --rule-soft:#f4f4f5;

  /* glassmorphic tokens */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.05);

  /* accent — "Pool" default; a tenant replaces these */
  --acc-700:#08414A; --acc-600:#0B5F6B; --acc-500:#0F7B8A; --acc-400:#2E9DAB;
  --acc-200:#A9D8DE; --acc-100:#DCEFF1; --acc-050:#F0F8F9;
  --on-acc:#FFFFFF;

  /* semantic */
  --open:#0ea5e9;
  --filling:#d97706;  --filling-bg:#fef3c7;
  --last:#ea580c;     --last-bg:#ffedd5;
  --full:#71717a;     --full-bg:#f4f4f5;
  --stop:#e11d48;     --stop-bg:#ffe4e6;
  --go:#16a34a;       --go-bg:#dcfce7;

  /* Premium shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.02);
  --shadow-glow: 0 0 20px rgba(15, 123, 138, 0.15); 
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.03);

  --r-control:10px; --r-card:16px; --r-pill:999px;

  --f-display:'Outfit', system-ui, sans-serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;

  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900:#f8fafc; --ink-700:#e2e8f0; --ink-600:#cbd5e1; --ink-500:#94a3b8;
    --ink-400:#64748b; --ink-300:#475569; --ink-200:#334155; --ink-100:#1e293b;
    --ink-050:#0f172a;
    --paper:#09090b; --surface:#0f172a; --sunk:#020617;
    --rule:#1e293b; --rule-soft:#0f172a;

    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);

    --open:#38bdf8;
    --filling:#fbbf24;  --filling-bg:#453005;
    --last:#fb923c;     --last-bg:#4a1e05;
    --full:#94a3b8;     --full-bg:#1e293b;
    --stop:#fb7185;     --stop-bg:#4c0519;
    --go:#4ade80;       --go-bg:#052e16;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.5);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
    --ink-900:#f8fafc; --ink-700:#e2e8f0; --ink-600:#cbd5e1; --ink-500:#94a3b8;
    --ink-400:#64748b; --ink-300:#475569; --ink-200:#334155; --ink-100:#1e293b;
    --ink-050:#0f172a;
    --paper:#09090b; --surface:#0f172a; --sunk:#020617;
    --rule:#1e293b; --rule-soft:#0f172a;

    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);

    --open:#38bdf8;
    --filling:#fbbf24;  --filling-bg:#453005;
    --last:#fb923c;     --last-bg:#4a1e05;
    --full:#94a3b8;     --full-bg:#1e293b;
    --stop:#fb7185;     --stop-bg:#4c0519;
    --go:#4ade80;       --go-bg:#052e16;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.5);
    --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.5);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body {
  margin:0; 
  /* Subtle ambient gradient */
  background: radial-gradient(circle at 50% 0%, var(--surface), var(--paper) 70%);
  background-attachment: fixed;
  color:var(--ink-900);
  font-family:var(--f-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--acc-500); text-decoration:none; transition: color 0.2s var(--ease);}
a:hover{color:var(--acc-600);}
:focus-visible{
  outline: 2px solid var(--acc-500); 
  outline-offset: 2px; 
  border-radius: 4px;
}

/* ---------------------------------------------------------------- type --- */
.display-l {
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.4rem, 6vw, 3.2rem); line-height:1; letter-spacing:-0.03em;
  margin:0; text-wrap:balance;
}
.display-m {
  font-family:var(--f-display); font-weight:700;
  font-size:1.875rem; line-height:1.1; letter-spacing:-0.02em; margin:0;
  text-wrap:balance;
}
.title {
  font-family:var(--f-display); font-weight:600;
  font-size:1.125rem; line-height:1.3; letter-spacing:-0.01em; margin:0;
}
.body-l{font-size:1.125rem; line-height:1.6;}
.muted{color:var(--ink-500);}
.label{
  font-family:var(--f-display); font-size:0.75rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-400);
}
.time{
  font-family:var(--f-mono); font-size:1.125rem; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
}
.data{
  font-family:var(--f-mono); font-size:0.875rem;
  font-variant-numeric:tabular-nums; color:var(--ink-500);
}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums;}

/* -------------------------------------------------------------- layout --- */
.shell{max-width:1280px; margin:0 auto; padding:0 clamp(20px, 5vw, 40px);}
.shell-narrow{max-width:680px; margin:0 auto; padding:0 20px;}
.stack{display:flex; flex-direction:column;}
.stack-8{gap:8px;} .stack-12{gap:12px;} .stack-16{gap:16px;}
.stack-24{gap:24px;} .stack-32{gap:32px;}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.grow{flex:1 1 auto; min-width:0;}
.section{padding:40px 0;}

/* ------------------------------------------------------------ topbar --- */
.topbar {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 50;
  transition: all 0.3s var(--ease);
}
.topbar-inner {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; flex-wrap:wrap;
}
.brand {display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; transition:transform 0.2s var(--ease);}
.brand:hover {transform: translateY(-1px);}
.brand-mark {
  width:36px; height:36px; border-radius:10px; flex:none;
  background: linear-gradient(135deg, var(--acc-400), var(--acc-600)); 
  color:var(--on-acc);
  display:grid; place-items:center;
  font-family:var(--f-display);
  font-weight:800; font-size:16px;
  box-shadow: 0 4px 12px rgba(var(--acc-500-rgb, 15, 123, 138), 0.3);
}
.brand-name {
  font-family:var(--f-display);
  font-weight:800; font-size:1.125rem; letter-spacing:-0.02em;
}
.navlinks {display:flex; gap:8px; flex-wrap:wrap; align-items: center;}
.navlink {
  padding:8px 14px; border-radius:var(--r-control); text-decoration:none;
  color:var(--ink-500); font-size:14px; font-weight:600;
  transition: all 0.2s var(--ease);
}
.navlink:hover {background:var(--sunk); color:var(--ink-900);}
.navlink[aria-current="page"] {
  background:var(--acc-050); color:var(--acc-600);
  box-shadow: inset 0 0 0 1px var(--acc-100);
}

/* ------------------------------------------------------------ buttons --- */
.btn {
  appearance:none; border:1px solid transparent; border-radius:var(--r-control);
  cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:0.02em; padding:0 20px; min-height:44px; 
  background: linear-gradient(180deg, var(--acc-500), var(--acc-600));
  color:var(--on-acc); text-decoration:none; 
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; transition:all 0.2s var(--ease);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn:hover {
  background: linear-gradient(180deg, var(--acc-400), var(--acc-600));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.btn[disabled],.btn[aria-disabled="true"] {opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none;}

.btn-ghost {
  background:transparent; color:var(--acc-500); 
  border-color:var(--rule); box-shadow:none;
}
.btn-ghost:hover {
  background:var(--surface); border-color:var(--acc-300);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.btn-quiet {
  background:var(--surface); color:var(--ink-700); 
  border-color:var(--rule); box-shadow: var(--shadow-sm);
}
.btn-quiet:hover {
  background:var(--sunk); border-color:var(--ink-300);
}
.btn-danger {
  background:var(--surface); color:var(--stop); border-color:var(--rule);
}
.btn-danger:hover {
  background:var(--stop-bg); border-color:var(--stop);
  box-shadow: var(--shadow-sm);
}
.btn-sm {min-height:36px; padding:0 14px; font-size:13px;}
.btn-full {width:100%;}

/* -------------------------------------------------------------- chips --- */
.chip {
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  font-family:var(--f-display); font-size:0.65rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; padding:4px 10px; white-space:nowrap;
  border:1px solid transparent; box-shadow: var(--shadow-sm);
}
.chip-open{background:var(--acc-100); color:var(--acc-700); border-color:rgba(255,255,255,0.2);}
.chip-filling{background:var(--filling-bg); color:var(--filling);}
.chip-last{background:var(--last-bg); color:var(--last);}
.chip-full{background:var(--full-bg); color:var(--full);}
.chip-go{background:var(--go-bg); color:var(--go);}
.chip-stop{background:var(--stop-bg); color:var(--stop);}

/* --------------------------------------------------------- class card --- */
.cards {
  display:grid; gap:16px; 
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card); 
  padding: 20px; 
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
  transition: all 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-lg), var(--shadow-glass);
  border-color: var(--rule);
}
.card-top {display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.card-dur {font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--ink-400);}
.card-sub {font-size:13px; color:var(--ink-500);}
.card-past {opacity:0.6; filter: grayscale(50%);}
.card-cancelled {opacity:0.5; filter: grayscale(100%);}

/* Capacity meter. */
.meter{display:flex; flex-direction:column; gap:6px;}
.meter-track{height:6px; border-radius:var(--r-pill); background:var(--ink-100); overflow:hidden;}
.meter-fill{height:100%; border-radius:var(--r-pill); transition:width 0.6s var(--ease);}
.meter-fill-open{background:var(--open);}
.meter-fill-filling{background:var(--filling);}
.meter-fill-last{background:var(--last);}
.meter-fill-full{background:var(--full);}
.meter-count{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--f-mono); font-size:0.75rem; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--ink-500);
}
.meter-open{color:var(--open);} .meter-filling{color:var(--filling);}
.meter-last{color:var(--last);}  .meter-full{color:var(--full);}

/* -------------------------------------------------------- today board --- */
.board {
  border:1px solid var(--glass-border); 
  border-radius:var(--r-card);
  overflow:hidden; 
  background:var(--glass-bg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.board-row {
  display:grid; grid-template-columns:80px 1fr auto; gap:16px; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--rule-soft);
  text-decoration:none; color:inherit;
  transition: all 0.2s var(--ease);
}
.board-row:last-child {border-bottom:none;}
.board-row:hover {background:var(--surface); padding-left: 24px;}
.board-row-now {
  background:var(--acc-050); 
  box-shadow:inset 4px 0 0 var(--acc-500);
}
.board-row-past {opacity:0.6;}
.board-t {
  font-family:var(--f-mono); font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.board-n {font-family:var(--f-display); font-weight:600; font-size:15px;}
.board-s {font-size:13px; color:var(--ink-500); margin-top:2px;}
.board-c {
  font-family:var(--f-mono); font-size:0.8rem; font-weight:500;
  font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-500);
}

/* --------------------------------------------------------- day strip --- */
.daystrip {
  display:flex; gap:10px; overflow-x:auto; padding:6px 0 16px;
  scrollbar-width:thin;
}
.day {
  flex:none; min-width:70px; padding:12px 10px; border-radius:var(--r-card);
  border:1px solid var(--glass-border); background:var(--glass-bg); 
  text-decoration:none; color:var(--ink-600); text-align:center;
  transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.day:hover {border-color:var(--acc-300); transform: translateY(-2px); box-shadow: var(--shadow-md);}
.day-num {
  font-family:var(--f-display); font-size:1.25rem; font-weight:700;
  font-variant-numeric:tabular-nums; display:block; color:var(--ink-900);
}
.day-name {
  font-family:var(--f-display); font-size:0.65rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-400); margin-top:4px;
}
.day-on {
  background: linear-gradient(135deg, var(--acc-500), var(--acc-600)); 
  border-color:var(--acc-500);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.day-on .day-num,.day-on .day-name {color:var(--on-acc);}
.day-today {border-color:var(--acc-400); box-shadow: 0 0 0 1px var(--acc-400);}

/* --------------------------------------------------------------- forms --- */
.field {display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field > label {
  font-family:var(--f-display); font-size:13px; font-weight:600; 
  color:var(--ink-700); letter-spacing:0.01em;
}
.hint {font-size:13px; color:var(--ink-400); line-height:1.4;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],select,textarea {
  font-family:var(--f-body); font-size:15px; padding:12px 14px; min-height:48px;
  border:1px solid var(--rule); border-radius:var(--r-control);
  background:var(--surface); color:var(--ink-900); width:100%;
  transition: all 0.2s var(--ease);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
input:hover, select:hover, textarea:hover {
  border-color: var(--ink-300);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc-500);
  box-shadow: 0 0 0 3px rgba(15, 123, 138, 0.15), inset 0 1px 2px rgba(0,0,0,0.02);
  background: var(--surface);
}
input[type=color] {
  width:64px; height:48px; padding:4px; border:1px solid var(--rule);
  border-radius:var(--r-control); background:var(--surface); cursor:pointer;
  transition: all 0.2s var(--ease);
}
input[type=color]:hover { transform: scale(1.05); }
textarea{min-height:100px; resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--ink-300);}
.form-error {
  background:var(--stop-bg); color:var(--stop); border:1px solid rgba(225, 29, 72, 0.2);
  border-radius:var(--r-control); padding:12px 16px; font-size:14px; margin-bottom:20px;
  box-shadow: var(--shadow-sm);
}
.form-ok {
  background:var(--go-bg); color:var(--go); border:1px solid rgba(22, 163, 74, 0.2);
  border-radius:var(--r-control); padding:12px 16px; font-size:14px; margin-bottom:20px;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------- panels --- */
.panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card); 
  padding: 32px;
  box-shadow: var(--shadow-lg), var(--shadow-glass);
}
.panel-head {margin-bottom:24px;}

/* -------------------------------------------------------------- tables --- */
.tw {
  overflow-x:auto; 
  border:1px solid var(--glass-border); 
  border-radius:var(--r-card);
  background:var(--glass-bg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
table{border-collapse:collapse; width:100%; min-width:600px;}
th,td {
  text-align:left; padding:14px 20px; 
  border-bottom:1px solid var(--rule-soft);
  font-size:14px; vertical-align:middle;
  transition: background 0.2s var(--ease);
}
tbody tr:hover td { background: var(--surface); }
tbody tr:last-child td{border-bottom:none;}
th {
  font-family:var(--f-display); font-size:0.7rem; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-400); background:var(--sunk);
  border-bottom:1px solid var(--rule);
}

/* -------------------------------------------------------- empty state --- */
.empty {
  text-align:center; padding:80px 24px; 
  border:1px dashed var(--ink-300);
  border-radius:var(--r-card); 
  background:var(--glass-bg);
  backdrop-filter: blur(8px);
}
.empty h3 {
  font-family:var(--f-display); 
  font-weight:700; font-size:1.25rem; margin:0 0 8px;
}
.empty p {color:var(--ink-500); margin:0 0 24px; font-size:15px;}

/* -------------------------------------------------------------- misc ---- */
.trial-banner {
  background: linear-gradient(90deg, var(--filling-bg), var(--surface)); 
  color:var(--filling); font-size:14px; font-weight:500;
  padding:12px 0; border-bottom:1px solid rgba(217, 119, 6, 0.2);
  text-align: center;
}
.footer {
  padding:40px 0 80px; color:var(--ink-400); font-size:14px;
  text-align: center; font-family: var(--f-display);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0.01ms !important; animation-duration:0.01ms !important;}
}