/* ============================================================
   Lead Enrich — design system
   Tokens (light + dark + system) + utility classes.
   Tailwind via CDN supplies the rest; this file owns the
   semantic palette so every view can speak the same language.
   ============================================================ */

[x-cloak] { display: none !important; }

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */

/* Light tokens (default). Values are space-separated R G B so
   Tailwind-style opacity works:
     background: rgb(var(--bg-base) / <alpha-value>);
*/
:root {
  /* Surfaces */
  --bg-base:        250 250 249;   /* warm cream-white page bg */
  --bg-elevated:    255 255 255;   /* cards, table bg */
  --bg-subtle:      244 244 241;   /* hovered row, nested card */
  --bg-overlay:     24 24 27;      /* modal backdrop with /40 */

  /* Lines */
  --border:         228 228 226;
  --border-strong:  212 212 209;

  /* Text */
  --text-primary:   24 24 27;
  --text-secondary: 82 82 89;
  --text-muted:     113 113 122;
  --text-inverse:   250 250 249;

  /* Status */
  --success:        22 163 74;
  --success-soft:   220 252 231;
  --warning:        217 119 6;
  --warning-soft:   254 243 199;
  --danger:         220 38 38;
  --danger-soft:    254 226 226;
  --info:           37 99 235;
  --info-soft:      219 234 254;

  /* Primary accent (used by Login + Lead Finder primary CTA) */
  --accent:         180 83 9;      /* amber 700 */
  --accent-hover:   120 53 15;     /* amber 800 */
  --accent-soft:    254 243 199;   /* amber 100 */
  --accent-fg:      255 255 255;

  /* Per-feature accents (nav rail dot + page title color) */
  --accent-uploads:   5 150 105;    /* emerald */
  --accent-prompts:   124 58 237;   /* violet */
  --accent-icps:      79 70 229;    /* indigo */
  --accent-runs:      2 132 199;    /* sky */
  --accent-webhooks:  236 72 153;   /* pink */
  --accent-search:    180 83 9;     /* amber 700 — Super Search (legacy) */
  --accent-finder:    146 64 14;    /* deep amber — Lead Finder */

  /* Shadow + radius */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-pop:  0 10px 30px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.06);
  --radius-card: 12px;
  --radius-btn:  10px;

  /* Font */
  --font-display: ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --rail-width:   60px;
  --topbar-h:     56px;
  --max-content:  1200px;
}

/* Dark tokens — override when [data-theme="dark"] is set, OR
   when system preference is dark and user has not picked light. */
[data-theme="dark"] {
  --bg-base:        9 9 11;
  --bg-elevated:    24 24 27;
  --bg-subtle:      39 39 42;
  --bg-overlay:     0 0 0;

  --border:         39 39 42;
  --border-strong:  63 63 70;

  --text-primary:   250 250 249;
  --text-secondary: 161 161 170;
  --text-muted:     113 113 122;
  --text-inverse:   24 24 27;

  --success:        74 222 128;
  --success-soft:   20 83 45;
  --warning:        251 191 36;
  --warning-soft:   67 20 7;
  --danger:         248 113 113;
  --danger-soft:    76 18 18;
  --info:           96 165 250;
  --info-soft:      30 58 138;

  --accent:         245 158 11;   /* brighter amber for dark bg */
  --accent-hover:   251 191 36;
  --accent-soft:    67 20 7;
  --accent-fg:      24 24 27;

  --accent-uploads:   52 211 153;
  --accent-prompts:   167 139 250;
  --accent-icps:      129 140 248;
  --accent-runs:      56 189 248;
  --accent-webhooks:  244 114 182;
  --accent-search:    245 158 11;
  --accent-finder:    245 158 11;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.40);
  --shadow-pop:  0 10px 30px rgb(0 0 0 / 0.50), 0 2px 6px rgb(0 0 0 / 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base:        9 9 11;
    --bg-elevated:    24 24 27;
    --bg-subtle:      39 39 42;
    --bg-overlay:     0 0 0;
    --border:         39 39 42;
    --border-strong:  63 63 70;
    --text-primary:   250 250 249;
    --text-secondary: 161 161 170;
    --text-muted:     113 113 122;
    --text-inverse:   24 24 27;
    --success:        74 222 128;
    --success-soft:   20 83 45;
    --warning:        251 191 36;
    --warning-soft:   67 20 7;
    --danger:         248 113 113;
    --danger-soft:    76 18 18;
    --info:           96 165 250;
    --info-soft:      30 58 138;
    --accent:         245 158 11;
    --accent-hover:   251 191 36;
    --accent-soft:    67 20 7;
    --accent-fg:      24 24 27;
    --accent-uploads:   52 211 153;
    --accent-prompts:   167 139 250;
    --accent-icps:      129 140 248;
    --accent-runs:      56 189 248;
    --accent-webhooks:  244 114 182;
    --accent-search:    245 158 11;
    --accent-finder:    245 158 11;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 1px 3px rgb(0 0 0 / 0.40);
    --shadow-pop:  0 10px 30px rgb(0 0 0 / 0.50), 0 2px 6px rgb(0 0 0 / 0.40);
  }
}

/* ------------------------------------------------------------
   2. Base element styling (so every view inherits tokens)
   ------------------------------------------------------------ */

html, body {
  background-color: rgb(var(--bg-base));
  color:            rgb(var(--text-primary));
  font-family:      var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links default to text-primary (not browser blue) */
a { color: inherit; text-decoration: none; }

/* Scrollbar — subtle, themed */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(var(--border-strong)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--text-muted)); }

/* Focus ring — visible everywhere */
:focus-visible {
  outline: 2px solid rgb(var(--accent));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form controls reset to inherit theme */
input, select, textarea, button {
  font-family: inherit;
  color: inherit;
}

/* ------------------------------------------------------------
   3. Utility classes (the "vocabulary" views use)
   ------------------------------------------------------------ */

/* Surfaces */
.bg-base     { background-color: rgb(var(--bg-base)); }
.bg-elevated { background-color: rgb(var(--bg-elevated)); }
.bg-subtle   { background-color: rgb(var(--bg-subtle)); }

/* Text */
.text-primary   { color: rgb(var(--text-primary)); }
.text-secondary { color: rgb(var(--text-secondary)); }
.text-muted     { color: rgb(var(--text-muted)); }
.text-inverse   { color: rgb(var(--text-inverse)); }

/* Borders */
.border-default { border: 1px solid rgb(var(--border)); }
.border-strong  { border: 1px solid rgb(var(--border-strong)); }
.border-t-default { border-top: 1px solid rgb(var(--border)); }
.border-b-default { border-bottom: 1px solid rgb(var(--border)); }

/* Cards */
.card {
  background-color: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-flat {
  background-color: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-card);
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  background-color: rgb(var(--bg-subtle));
  color: rgb(var(--text-secondary));
}
.pill-success { background-color: rgb(var(--success-soft)); color: rgb(var(--success)); }
.pill-warning { background-color: rgb(var(--warning-soft)); color: rgb(var(--warning)); }
.pill-danger  { background-color: rgb(var(--danger-soft));  color: rgb(var(--danger)); }
.pill-info    { background-color: rgb(var(--info-soft));    color: rgb(var(--info)); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: background-color 100ms ease, border-color 100ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background-color: rgb(var(--accent));
  color: rgb(var(--accent-fg));
}
.btn-primary:hover:not(:disabled) { background-color: rgb(var(--accent-hover)); }

.btn-ghost {
  background-color: transparent;
  color: rgb(var(--text-primary));
  border-color: rgb(var(--border-strong));
}
.btn-ghost:hover:not(:disabled) { background-color: rgb(var(--bg-subtle)); }

.btn-danger {
  background-color: rgb(var(--danger));
  color: white;
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

/* Inputs */
.input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  background-color: rgb(var(--bg-elevated));
  color: rgb(var(--text-primary));
  border: 1px solid rgb(var(--border-strong));
  border-radius: 8px;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.input:focus {
  outline: none;
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.15);
}
.input::placeholder { color: rgb(var(--text-muted)); }

/* Select — match inputs but keep native arrow */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23828289'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
}

/* Code blocks */
pre, code, .font-mono {
  font-family: var(--font-mono);
}

/* Display headings — opinionated serif for hero/landing copy */
.font-display {
  font-family: var(--font-display);
}

/* ------------------------------------------------------------
   4. App shell (used by layouts/app.php)
   ------------------------------------------------------------ */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell .topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid rgb(var(--border));
  background-color: rgb(var(--bg-elevated));
  position: sticky;
  top: 0;
  z-index: 30;
}

.app-shell .main-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-shell .rail {
  width: var(--rail-width);
  border-right: 1px solid rgb(var(--border));
  background-color: rgb(var(--bg-elevated));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 4px;
  flex-shrink: 0;
}

.app-shell .rail-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgb(var(--text-muted));
  position: relative;
  transition: background-color 120ms ease, color 120ms ease;
}
.app-shell .rail-link:hover { background-color: rgb(var(--bg-subtle)); color: rgb(var(--text-primary)); }
.app-shell .rail-link.active {
  background-color: rgb(var(--bg-subtle));
  color: rgb(var(--accent));
}
.app-shell .rail-link.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background-color: rgb(var(--accent));
  border-radius: 0 3px 3px 0;
}
.app-shell .rail-link .icon {
  width: 22px;
  height: 22px;
}
.app-shell .rail-link .label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(var(--text-primary));
  color: rgb(var(--text-inverse));
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
}
.app-shell .rail-link:hover .label { opacity: 1; }

.app-shell .content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--bg-base));
}

.app-shell .content-body {
  flex: 1;
  padding: 28px 32px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .app-shell .content-body { padding: 20px 16px; }
}

@media (max-width: 768px) {
  .app-shell .rail { display: none; }
  .app-shell .rail.mobile-open {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    background-color: rgb(var(--bg-elevated));
    z-index: 40;
    padding-top: 60px;
    gap: 8px;
  }
}

/* Theme switcher pill */
.theme-switch {
  display: inline-flex;
  background-color: rgb(var(--bg-subtle));
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  padding: 2px;
}
.theme-switch button {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgb(var(--text-muted));
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.theme-switch button.active {
  background-color: rgb(var(--bg-elevated));
  color: rgb(var(--text-primary));
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------
   5. Legacy helpers (kept for views still being migrated)
   ------------------------------------------------------------ */

/* Variable highlight in prompt editor */
.var-highlight {
  background-color: rgb(var(--warning-soft));
  color: rgb(var(--warning));
  padding: 0 2px;
  border-radius: 2px;
  font-family: var(--font-mono);
}

/* Progress bar shimmer (uploads/show.php, runs/show.php) */
.progress-shimmer {
  background: linear-gradient(90deg,
    rgb(var(--success)) 0%,
    rgb(var(--success) / 0.6) 50%,
    rgb(var(--success)) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Section dividers */
.section-divider {
  border: 0;
  border-top: 1px solid rgb(var(--border));
  margin: 24px 0;
}