/* ─────────────────────────────────────────────────────────────
 * neurobooking · design tokens
 * Theme = data-theme="light|dark", Palette = data-palette="slate|teal|indigo|graphite"
 * Each <artboard-root> applies both so light/dark + palette can compose.
 * ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

[data-theme] {
  /* type scale */
  --nb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nb-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* radii */
  --nb-radius-sm: 6px;
  --nb-radius-md: 8px;
  --nb-radius-lg: 12px;
  --nb-radius-xl: 16px;
  --nb-radius-pill: 999px;

  /* spacing scale (4px base) */
  --nb-s-1: 4px;  --nb-s-2: 8px;  --nb-s-3: 12px; --nb-s-4: 16px;
  --nb-s-5: 20px; --nb-s-6: 24px; --nb-s-7: 32px; --nb-s-8: 40px;

  /* shadows — soft, restrained */
  --nb-shadow-sm: 0 1px 2px rgba(15, 20, 35, 0.04), 0 1px 1px rgba(15, 20, 35, 0.03);
  --nb-shadow-md: 0 2px 6px rgba(15, 20, 35, 0.05), 0 1px 2px rgba(15, 20, 35, 0.04);
  --nb-shadow-lg: 0 8px 24px rgba(15, 20, 35, 0.08), 0 2px 6px rgba(15, 20, 35, 0.04);
  --nb-shadow-pop: 0 12px 40px rgba(15, 20, 35, 0.12), 0 4px 12px rgba(15, 20, 35, 0.06);
}

/* ─── LIGHT THEME ─────────────────────────────────────────── */
[data-theme="light"] {
  --nb-bg:           oklch(0.985 0.003 255);
  --nb-bg-sunken:    oklch(0.975 0.004 255);
  --nb-surface:      #ffffff;
  --nb-surface-2:    oklch(0.975 0.004 255);
  --nb-surface-3:    oklch(0.96 0.005 255);
  --nb-border:       oklch(0.91 0.006 255);
  --nb-border-soft:  oklch(0.94 0.005 255);
  --nb-border-strong:oklch(0.85 0.008 255);

  --nb-text:         oklch(0.22 0.012 260);
  --nb-text-muted:   oklch(0.48 0.010 258);
  --nb-text-subtle:  oklch(0.62 0.008 258);
  --nb-text-faint:   oklch(0.78 0.006 258);

  --nb-success:      oklch(0.58 0.13 152);
  --nb-success-soft: oklch(0.95 0.04 152);
  --nb-success-fg:   oklch(0.34 0.10 152);

  --nb-warning:      oklch(0.72 0.15 75);
  --nb-warning-soft: oklch(0.96 0.05 80);
  --nb-warning-fg:   oklch(0.42 0.10 60);

  --nb-error:        oklch(0.58 0.20 25);
  --nb-error-soft:   oklch(0.96 0.04 25);
  --nb-error-fg:     oklch(0.42 0.14 25);

  --nb-info:         oklch(0.58 0.13 235);
  --nb-info-soft:    oklch(0.96 0.03 235);
  --nb-info-fg:      oklch(0.36 0.10 235);

  --nb-overlay:      rgba(15, 20, 35, 0.42);
  --nb-skel:         oklch(0.93 0.005 255);
  --nb-skel-hi:      oklch(0.96 0.005 255);
}

/* ─── DARK THEME ─────────────────────────────────────────── */
[data-theme="dark"] {
  --nb-bg:           oklch(0.165 0.012 258);
  --nb-bg-sunken:    oklch(0.135 0.012 258);
  --nb-surface:      oklch(0.205 0.012 258);
  --nb-surface-2:    oklch(0.235 0.013 258);
  --nb-surface-3:    oklch(0.265 0.014 258);
  --nb-border:       oklch(0.30 0.014 258);
  --nb-border-soft:  oklch(0.255 0.013 258);
  --nb-border-strong:oklch(0.38 0.016 258);

  --nb-text:         oklch(0.95 0.005 258);
  --nb-text-muted:   oklch(0.72 0.010 258);
  --nb-text-subtle:  oklch(0.56 0.012 258);
  --nb-text-faint:   oklch(0.42 0.010 258);

  --nb-success:      oklch(0.72 0.14 152);
  --nb-success-soft: oklch(0.30 0.07 152);
  --nb-success-fg:   oklch(0.82 0.12 152);

  --nb-warning:      oklch(0.78 0.14 75);
  --nb-warning-soft: oklch(0.32 0.08 70);
  --nb-warning-fg:   oklch(0.86 0.12 75);

  --nb-error:        oklch(0.68 0.18 25);
  --nb-error-soft:   oklch(0.30 0.09 25);
  --nb-error-fg:     oklch(0.84 0.14 25);

  --nb-info:         oklch(0.70 0.13 235);
  --nb-info-soft:    oklch(0.30 0.07 235);
  --nb-info-fg:      oklch(0.82 0.10 235);

  --nb-overlay:      rgba(0, 0, 0, 0.55);
  --nb-skel:         oklch(0.27 0.012 258);
  --nb-skel-hi:      oklch(0.31 0.013 258);
}

/* ─── PALETTES (primary brand color + soft variants) ─── */
[data-palette="slate"][data-theme="light"] {
  --nb-primary:        oklch(0.48 0.10 252);
  --nb-primary-hover:  oklch(0.43 0.11 252);
  --nb-primary-active: oklch(0.38 0.11 252);
  --nb-primary-fg:     #ffffff;
  --nb-primary-soft:   oklch(0.95 0.025 252);
  --nb-primary-soft-fg:oklch(0.36 0.10 252);
  --nb-ring:           oklch(0.48 0.10 252 / 0.28);
  --nb-tint:           oklch(0.97 0.012 252);
}
[data-palette="slate"][data-theme="dark"] {
  --nb-primary:        oklch(0.72 0.13 252);
  --nb-primary-hover:  oklch(0.78 0.13 252);
  --nb-primary-active: oklch(0.82 0.12 252);
  --nb-primary-fg:     oklch(0.15 0.04 252);
  --nb-primary-soft:   oklch(0.32 0.07 252);
  --nb-primary-soft-fg:oklch(0.85 0.10 252);
  --nb-ring:           oklch(0.72 0.13 252 / 0.32);
  --nb-tint:           oklch(0.22 0.018 252);
}

[data-palette="teal"][data-theme="light"] {
  --nb-primary:        oklch(0.50 0.08 200);
  --nb-primary-hover:  oklch(0.45 0.09 200);
  --nb-primary-active: oklch(0.40 0.09 200);
  --nb-primary-fg:     #ffffff;
  --nb-primary-soft:   oklch(0.95 0.025 200);
  --nb-primary-soft-fg:oklch(0.36 0.09 200);
  --nb-ring:           oklch(0.50 0.08 200 / 0.28);
  --nb-tint:           oklch(0.97 0.012 200);
}
[data-palette="teal"][data-theme="dark"] {
  --nb-primary:        oklch(0.74 0.11 195);
  --nb-primary-hover:  oklch(0.80 0.11 195);
  --nb-primary-active: oklch(0.84 0.10 195);
  --nb-primary-fg:     oklch(0.15 0.04 200);
  --nb-primary-soft:   oklch(0.30 0.06 200);
  --nb-primary-soft-fg:oklch(0.85 0.09 200);
  --nb-ring:           oklch(0.74 0.11 195 / 0.32);
  --nb-tint:           oklch(0.22 0.017 200);
}

[data-palette="indigo"][data-theme="light"] {
  --nb-primary:        oklch(0.50 0.12 285);
  --nb-primary-hover:  oklch(0.45 0.13 285);
  --nb-primary-active: oklch(0.40 0.13 285);
  --nb-primary-fg:     #ffffff;
  --nb-primary-soft:   oklch(0.95 0.03 285);
  --nb-primary-soft-fg:oklch(0.38 0.12 285);
  --nb-ring:           oklch(0.50 0.12 285 / 0.28);
  --nb-tint:           oklch(0.97 0.014 285);
}
[data-palette="indigo"][data-theme="dark"] {
  --nb-primary:        oklch(0.74 0.13 285);
  --nb-primary-hover:  oklch(0.80 0.13 285);
  --nb-primary-active: oklch(0.84 0.12 285);
  --nb-primary-fg:     oklch(0.15 0.05 285);
  --nb-primary-soft:   oklch(0.32 0.08 285);
  --nb-primary-soft-fg:oklch(0.86 0.11 285);
  --nb-ring:           oklch(0.74 0.13 285 / 0.32);
  --nb-tint:           oklch(0.22 0.02 285);
}

[data-palette="graphite"][data-theme="light"] {
  --nb-primary:        oklch(0.32 0.014 258);
  --nb-primary-hover:  oklch(0.26 0.014 258);
  --nb-primary-active: oklch(0.22 0.014 258);
  --nb-primary-fg:     #ffffff;
  --nb-primary-soft:   oklch(0.93 0.006 258);
  --nb-primary-soft-fg:oklch(0.28 0.014 258);
  --nb-accent:         oklch(0.62 0.13 48);
  --nb-accent-soft:    oklch(0.95 0.04 48);
  --nb-accent-fg:      oklch(0.38 0.10 48);
  --nb-ring:           oklch(0.62 0.13 48 / 0.28);
  --nb-tint:           oklch(0.97 0.006 258);
}
[data-palette="graphite"][data-theme="dark"] {
  --nb-primary:        oklch(0.95 0.005 258);
  --nb-primary-hover:  oklch(0.90 0.005 258);
  --nb-primary-active: oklch(0.85 0.005 258);
  --nb-primary-fg:     oklch(0.15 0.012 258);
  --nb-primary-soft:   oklch(0.30 0.013 258);
  --nb-primary-soft-fg:oklch(0.92 0.006 258);
  --nb-accent:         oklch(0.72 0.14 48);
  --nb-accent-soft:    oklch(0.32 0.08 48);
  --nb-accent-fg:      oklch(0.86 0.12 48);
  --nb-ring:           oklch(0.72 0.14 48 / 0.32);
  --nb-tint:           oklch(0.22 0.014 258);
}

/* Default accent fallback (palettes that don't define one reuse primary) */
[data-theme] { --nb-accent: var(--nb-primary, currentColor); }
[data-palette="graphite"] { /* keep accent override */ }

/* ─── ARTBOARD ROOT ───────────────────────────────────────── */
.nb-root {
  font-family: var(--nb-font);
  color: var(--nb-text);
  background: var(--nb-bg);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ─── TYPOGRAPHY UTILITIES ───────────────────────────────── */
.nb-h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; color: var(--nb-text); margin: 0; }
.nb-h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; color: var(--nb-text); margin: 0; }
.nb-h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; color: var(--nb-text); margin: 0; }
.nb-body { font-size: 14px; color: var(--nb-text); margin: 0; }
.nb-small { font-size: 13px; color: var(--nb-text-muted); margin: 0; }
.nb-xs { font-size: 12px; color: var(--nb-text-muted); margin: 0; }
.nb-mono { font-family: var(--nb-font-mono); font-variant-numeric: tabular-nums; }
.nb-num { font-variant-numeric: tabular-nums; }
.nb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: var(--nb-radius-md);
  border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap; user-select: none;
  color: var(--nb-text);
  background: var(--nb-surface);
}
.nb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nb-ring); }
.nb-btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--nb-radius-sm); }
.nb-btn--lg { height: 44px; padding: 0 18px; font-size: 14px; border-radius: var(--nb-radius-md); }
.nb-btn--icon { width: 36px; padding: 0; }
.nb-btn--icon.nb-btn--sm { width: 30px; }

.nb-btn--primary { background: var(--nb-primary); color: var(--nb-primary-fg); border-color: transparent; }
.nb-btn--primary:hover { background: var(--nb-primary-hover); }
.nb-btn--primary:active { background: var(--nb-primary-active); }

.nb-btn--secondary { background: var(--nb-surface); color: var(--nb-text); border-color: var(--nb-border); }
.nb-btn--secondary:hover { background: var(--nb-surface-2); border-color: var(--nb-border-strong); }

.nb-btn--ghost { background: transparent; color: var(--nb-text); border-color: transparent; }
.nb-btn--ghost:hover { background: var(--nb-surface-2); }

.nb-btn--danger { background: var(--nb-error); color: #fff; }
.nb-btn--danger:hover { filter: brightness(0.95); }

.nb-btn--disabled, .nb-btn[disabled] { color: var(--nb-text-faint); cursor: not-allowed; background: var(--nb-surface-2); border-color: var(--nb-border-soft); }
.nb-btn--disabled:hover, .nb-btn[disabled]:hover { background: var(--nb-surface-2); }

/* ─── BADGES ──────────────────────────────────────────────── */
.nb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: var(--nb-radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1.5;
  background: var(--nb-surface-2); color: var(--nb-text-muted);
  border: 1px solid var(--nb-border-soft);
  white-space: nowrap;
}
.nb-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.nb-badge--success { background: var(--nb-success-soft); color: var(--nb-success-fg); border-color: transparent; }
.nb-badge--warning { background: var(--nb-warning-soft); color: var(--nb-warning-fg); border-color: transparent; }
.nb-badge--error   { background: var(--nb-error-soft);   color: var(--nb-error-fg);   border-color: transparent; }
.nb-badge--info    { background: var(--nb-info-soft);    color: var(--nb-info-fg);    border-color: transparent; }
.nb-badge--primary { background: var(--nb-primary-soft); color: var(--nb-primary-soft-fg); border-color: transparent; }
.nb-badge--neutral { background: var(--nb-surface-2); color: var(--nb-text-muted); border-color: var(--nb-border-soft); }
.nb-badge--solid-primary { background: var(--nb-primary); color: var(--nb-primary-fg); border-color: transparent; }

/* ─── INPUTS ──────────────────────────────────────────────── */
.nb-field { display: flex; flex-direction: column; gap: 6px; }
.nb-label { font-size: 13px; font-weight: 500; color: var(--nb-text); }
.nb-hint { font-size: 12px; color: var(--nb-text-subtle); }
.nb-error-text { font-size: 12px; color: var(--nb-error); }

.nb-input, .nb-select, .nb-textarea {
  display: flex; align-items: center;
  height: 36px; width: 100%;
  padding: 0 12px;
  background: var(--nb-surface); color: var(--nb-text);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md);
  font-family: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.nb-input::placeholder, .nb-textarea::placeholder { color: var(--nb-text-faint); }
.nb-input:hover, .nb-select:hover, .nb-textarea:hover { border-color: var(--nb-border-strong); }
.nb-input:focus, .nb-select:focus, .nb-textarea:focus {
  outline: none; border-color: var(--nb-primary); box-shadow: 0 0 0 3px var(--nb-ring);
}
.nb-textarea { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.nb-input--error { border-color: var(--nb-error); }
.nb-input--error:focus { box-shadow: 0 0 0 3px oklch(from var(--nb-error) l c h / 0.25); }

.nb-input-group {
  position: relative; display: flex; align-items: center;
}
.nb-input-group .nb-input { padding-left: 36px; }
.nb-input-group .nb-input-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--nb-text-subtle); pointer-events: none; display: flex;
}

/* ─── CARD ────────────────────────────────────────────────── */
.nb-card {
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg);
  padding: 20px;
}
.nb-card--flush { padding: 0; }
.nb-card--hover { transition: border-color .15s, box-shadow .15s; }
.nb-card--hover:hover { border-color: var(--nb-border-strong); box-shadow: var(--nb-shadow-md); }
.nb-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--nb-border-soft); }
.nb-card-body { padding: 20px; }

/* ─── AVATARS ─────────────────────────────────────────────── */
.nb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--nb-tint); color: var(--nb-primary-soft-fg);
  font-weight: 600; font-size: 13px;
  flex: 0 0 auto;
  border: 1px solid var(--nb-border-soft);
}
.nb-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.nb-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.nb-avatar--xl { width: 64px; height: 64px; font-size: 22px; }

/* ─── TABLE ───────────────────────────────────────────────── */
.nb-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.nb-table thead th {
  text-align: left; font-weight: 500; color: var(--nb-text-subtle); font-size: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--nb-border-soft);
  background: var(--nb-surface-2);
  text-transform: none;
  letter-spacing: 0;
}
.nb-table thead th:first-child { padding-left: 20px; border-radius: var(--nb-radius-lg) 0 0 0; }
.nb-table thead th:last-child  { padding-right: 20px; border-radius: 0 var(--nb-radius-lg) 0 0; }
.nb-table tbody td { padding: 14px 12px; border-bottom: 1px solid var(--nb-border-soft); color: var(--nb-text); vertical-align: middle; }
.nb-table tbody td:first-child { padding-left: 20px; }
.nb-table tbody td:last-child  { padding-right: 20px; }
.nb-table tbody tr:hover td { background: var(--nb-surface-2); }
.nb-table tbody tr:last-child td { border-bottom: none; }
.nb-table tbody tr { cursor: pointer; }

/* ─── DIVIDER ─────────────────────────────────────────────── */
.nb-divider { height: 1px; background: var(--nb-border-soft); width: 100%; }

/* ─── SKELETON ────────────────────────────────────────────── */
.nb-skel {
  background: linear-gradient(90deg, var(--nb-skel) 0%, var(--nb-skel-hi) 50%, var(--nb-skel) 100%);
  background-size: 200% 100%;
  border-radius: var(--nb-radius-sm);
  animation: nb-skel 1.4s ease-in-out infinite;
}
@keyframes nb-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ─── DOT INDICATORS ─────────────────────────────────────── */
.nb-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.nb-dot--success { background: var(--nb-success); }
.nb-dot--neutral { background: var(--nb-text-faint); }
.nb-dot--error   { background: var(--nb-error); }
.nb-dot--warning { background: var(--nb-warning); }

/* ─── SCROLLBARS (subtle) ─────────────────────────────────── */
.nb-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.nb-root *::-webkit-scrollbar-thumb { background: var(--nb-border); border-radius: 999px; }
.nb-root *::-webkit-scrollbar-track { background: transparent; }