/* =============================================================
   Supabase-inspired UI Stylesheet
   Dark-first token set lifted from the Supabase dashboard.
   Light-theme overrides included. Use alongside s3-dashboard.css —
   this one provides richer component primitives (buttons, inputs,
   tables, tooltips) while s3-dashboard supplies the page/card
   surface grammar.
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand */
  --brand-500: #3ecf8e;
  --brand-600: #24b47e;
  --brand-700: #1c9a6a;
  --brand-400: #65d9a5;
  --brand-300: #9fe8c4;
  --brand-200: #c8f1dc;
  --brand-100: #e6faf0;
  --brand-fg:  #0b3b25;

  /* Neutral (Radix-style gray scale) */
  --gray-1:  hsl(0, 0%, 99%);
  --gray-2:  hsl(0, 0%, 97.3%);
  --gray-3:  hsl(0, 0%, 95.1%);
  --gray-4:  hsl(0, 0%, 93%);
  --gray-5:  hsl(0, 0%, 90.9%);
  --gray-6:  hsl(0, 0%, 88.7%);
  --gray-7:  hsl(0, 0%, 85.8%);
  --gray-8:  hsl(0, 0%, 78%);
  --gray-9:  hsl(0, 0%, 56.1%);
  --gray-10: hsl(0, 0%, 52.3%);
  --gray-11: hsl(0, 0%, 43.5%);
  --gray-12: hsl(0, 0%, 9%);

  /* Semantic */
  --success-bg:     hsl(150, 100%, 6%);
  --success-border: hsl(147, 100%, 12%);
  --success-text:   hsl(150, 86%, 65%);
  --info-bg:        hsl(215, 100%, 6%);
  --info-border:    hsl(223, 100%, 12%);
  --info-text:      hsl(216, 87%, 65%);
  --warning-bg:     hsl(64, 100%, 6%);
  --warning-border: hsl(60, 100%, 12%);
  --warning-text:   hsl(46, 87%, 65%);
  --error-bg:       hsl(358, 76%, 10%);
  --error-border:   hsl(357, 89%, 16%);
  --error-text:     hsl(358, 100%, 81%);

  /* Surfaces (dark default) — values sampled live from supabase.com/dashboard.
     getComputedStyle returned: body rgb(28,28,28), card rgb(35,35,35),
     border rgb(52,52,52), foreground rgb(237,237,237). Root --foreground-muted
     was hsl(0,0%,43.9%) = rgb(112,112,112). */
  --background:        rgb(28, 28, 28);   /* hsl 0 0% 11%  */
  --background-alt:    rgb(24, 24, 24);   /* slightly darker chrome (topbar / rail) */
  --surface-100:       rgb(35, 35, 35);   /* hsl 0 0% 13.7% — card body */
  --surface-200:       rgb(40, 40, 40);   /* hsl 0 0% 15.7% — hover */
  --surface-300:       rgb(47, 47, 47);   /* active */
  --overlay:           rgba(0, 0, 0, 0.55);
  --border-default:    rgb(52, 52, 52);   /* hsl 0 0% 20.4% */
  --border-strong:     rgb(62, 62, 62);   /* hsl 0 0% 24.3% */
  --border-muted:      rgb(32, 32, 32);
  --foreground:        rgb(237, 237, 237);
  --foreground-muted:  rgb(112, 112, 112); /* hsl 0 0% 43.9% — eyebrow labels */
  --foreground-light:  rgb(160, 160, 160); /* secondary body */
  --foreground-lighter:rgb(90, 90, 90);    /* placeholder / tertiary */

  /* Typography */
  /* Font stack — Circular/Inter aren't loaded as web fonts here, so we
     fall back to San Francisco on macOS (-apple-system + BlinkMacSystemFont),
     Segoe UI on Windows, Roboto on Android/CrOS, then the classics. */
  --font-sans: "Circular", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Source Code Pro", "Fira Code", Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7;

  /* Radii */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px;

  /* Spacing (4px base) */
  --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;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

  /* Focus ring */
  --ring: 0 0 0 2px var(--background), 0 0 0 4px var(--brand-500);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-default: 180ms; --dur-slow: 260ms;
}

[data-theme="light"] {
  --background: #ffffff; --background-alt: #fafafa;
  --surface-100: #ffffff; --surface-200: #f4f4f5; --surface-300: #e4e4e7;
  --overlay: rgba(17, 17, 17, 0.45);
  --border-default: hsl(0, 0%, 89%); --border-strong: hsl(0, 0%, 78%); --border-muted: hsl(0, 0%, 94%);
  --foreground: hsl(0, 0%, 9%); --foreground-muted: hsl(0, 0%, 30%);
  --foreground-light: hsl(0, 0%, 45%); --foreground-lighter: hsl(0, 0%, 60%);
  --success-bg: hsl(150, 100%, 96%); --success-border: hsl(147, 60%, 80%); --success-text: hsl(150, 86%, 25%);
  --info-bg: hsl(215, 100%, 96%); --info-border: hsl(223, 70%, 85%); --info-text: hsl(216, 87%, 35%);
  --warning-bg: hsl(48, 100%, 96%); --warning-border: hsl(48, 80%, 80%); --warning-text: hsl(30, 87%, 35%);
  --error-bg: hsl(358, 100%, 97%); --error-border: hsl(357, 70%, 85%); --error-text: hsl(358, 75%, 40%);
}


/* ---------- 1.5. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html, body {
  height: auto;
}
body {
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

img, svg, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--brand-500); color: var(--brand-fg); }


/* ---------- 2. BUTTONS (Supabase style) ---------- */
.sb-btn {
  --btn-bg: var(--surface-200);
  --btn-bg-hover: var(--surface-300);
  --btn-fg: var(--foreground);
  --btn-border: var(--border-default);

  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-3);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sb-btn:hover  { background: var(--btn-bg-hover); }
.sb-btn:active { transform: translateY(1px); }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }

.sb-btn--primary   { --btn-bg: var(--brand-500); --btn-bg-hover: var(--brand-600); --btn-fg: var(--brand-fg); --btn-border: var(--brand-600); }
.sb-btn--secondary { --btn-bg: var(--surface-100); --btn-bg-hover: var(--surface-200); --btn-border: var(--border-default); }
.sb-btn--ghost     { --btn-bg: transparent; --btn-bg-hover: var(--surface-200); --btn-border: transparent; }
.sb-btn--outline   { --btn-bg: transparent; --btn-bg-hover: var(--surface-200); --btn-border: var(--border-default); }
.sb-btn--danger    { --btn-bg: var(--error-bg); --btn-bg-hover: var(--error-border); --btn-fg: var(--error-text); --btn-border: var(--error-border); }

.sb-btn--sm { height: 26px; padding: 0 var(--space-2); font-size: var(--fs-xs); }
.sb-btn--lg { height: 40px; padding: 0 var(--space-4); font-size: var(--fs-base); }
.sb-btn--icon { width: 32px; padding: 0; }


/* ---------- 3. BADGES / PILLS ---------- */
.sb-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 8px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  background: var(--surface-200);
  color: var(--foreground-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  line-height: 1.5;
}
.sb-badge--brand   { background: color-mix(in srgb, var(--brand-500) 14%, transparent); color: var(--brand-500); border-color: color-mix(in srgb, var(--brand-500) 30%, transparent); }
.sb-badge--success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.sb-badge--info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.sb-badge--warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.sb-badge--error   { background: var(--error-bg);   color: var(--error-text);   border-color: var(--error-border); }


/* ---------- 4. INPUTS ---------- */
.sb-input, .sb-textarea, .sb-select {
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--foreground);
  background: var(--surface-100);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sb-textarea { min-height: 80px; padding: var(--space-2) var(--space-3); line-height: var(--lh-base); resize: vertical; }
.sb-input::placeholder, .sb-textarea::placeholder { color: var(--foreground-lighter); }
.sb-input:hover, .sb-textarea:hover, .sb-select:hover { border-color: var(--border-strong); }
.sb-input:focus, .sb-textarea:focus, .sb-select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent);
}


/* ---------- 5. TABLES ---------- */
.sb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  background: var(--surface-100);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sb-table th, .sb-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}
.sb-table thead th {
  background: var(--background-alt);
  color: var(--foreground-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sb-table tbody tr:hover { background: var(--surface-200); }
.sb-table tbody tr:last-child td { border-bottom: 0; }


/* ---------- 6. TOOLTIP ---------- */
.sb-tooltip {
  position: absolute;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  background: var(--gray-12);
  color: var(--gray-1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
}


/* ---------- 7b. TOPBAR (app chrome, shared across pages) ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-6);
  background: var(--background);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--foreground);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.topbar__brand:hover { color: var(--foreground); }
.topbar__brand-mark {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--brand-500);
  color: var(--brand-fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
}
.topbar__crumbs {
  color: var(--foreground-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.topbar__crumbs a {
  color: var(--foreground-light);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.topbar__crumbs a:hover { color: var(--foreground); }
.topbar__crumbs .sep { color: var(--foreground-lighter); }
.topbar__crumbs .current {
  color: var(--foreground);
  font-weight: var(--fw-medium);
}
.topbar__spacer { flex: 1; }
.topbar__tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--foreground-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ---------- 7. SCROLLBARS (thin, Supabase-style) ---------- */
.sb-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.sb-scroll::-webkit-scrollbar-track { background: transparent; }
.sb-scroll::-webkit-scrollbar-thumb {
  background: var(--surface-300);
  border-radius: var(--radius-full);
  border: 2px solid var(--background);
}
.sb-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }