/* ============================================================================
   eTechFlow brand theme (DARK) for the Store Portal admin.
   Matches the live etechflow.com / etechflow-webstore dark theme.
   Loaded AFTER each page's inline <style>, so equal-specificity rules win and
   re-skin the existing UI without markup churn.

   Dark tokens (etechflow-webstore globals.css .dark):
     bg #0E0E11 · card #18181C · text #F4F2EE · muted #A0A0A8
     brand purple #9C6BC2 (hover #B083D2, accent #C29CDE, soft rgba)
     gradient #683C8B→#9C6BC2 · cta green #2EA86C · link #6FA0E8
     borders = faint white · font Inter + JetBrains Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* shared tokens used by every admin template */
  --primary:   #9C6BC2;   /* brand purple (dark-mode, brighter) */
  --primary-h: #B083D2;
  --bg:        #0E0E11;
  --surface:   #18181C;   /* card surface */
  --text:      #F4F2EE;
  --muted:     #A0A0A8;
  --border:    rgba(244,242,238,0.10);
  --sh:    0 1px 3px rgba(0,0,0,.45);
  --sh-md: 0 8px 28px rgba(0,0,0,.55);
  --radius: 12px;

  /* brand + functional palette */
  --etf-bg:        #0E0E11;
  --etf-surface:   #18181C;   /* cards */
  --etf-surface-2: #1F1F23;   /* chips, inputs, hover */
  --etf-surface-3: #26262C;   /* accent surface */
  --etf-text:      #F4F2EE;
  --etf-muted:     #A0A0A8;
  --etf-faint:     #6B6B72;
  --etf-border:    rgba(244,242,238,0.10);
  --etf-border-2:  rgba(244,242,238,0.16);
  --etf-brand:        #9C6BC2;
  --etf-brand-hover:  #B083D2;
  --etf-brand-accent: #C29CDE;
  --etf-brand-soft:   rgba(156,107,194,0.14);
  --etf-grad: linear-gradient(135deg, #683C8B 0%, #9C6BC2 100%);
  --etf-glow: 0 2px 16px rgba(124,77,160,.45);
  --etf-cta:        #2EA86C;  --etf-cta-hover: #34B879;
  --etf-link:       #6FA0E8;
  --etf-success: #34B879; --etf-success-soft: rgba(52,184,121,.14);
  --etf-warn:    #E0A042; --etf-warn-soft:    rgba(224,160,66,.14);
  --etf-danger:  #E5645F; --etf-danger-soft:  rgba(229,100,95,.14);
  --etf-info:    #6FA0E8; --etf-info-soft:    rgba(111,160,232,.14);
  /* status vars some templates define themselves */
  --success: #34B879; --success-mid: rgba(52,184,121,.30); --success-lt: rgba(52,184,121,.12);
  --warn:    #E0A042; --warn-mid:    rgba(224,160,66,.30); --warn-lt:    rgba(224,160,66,.12);
  --danger:  #E5645F; --danger-mid:  rgba(229,100,95,.30); --danger-lt:  rgba(229,100,95,.12);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--etf-text) !important;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(124,77,160,.18), transparent 70%),
    #0E0E11 !important;
  -webkit-font-smoothing: antialiased;
}
code, pre, .json-editor, textarea.json-editor, .mono { font-family: 'JetBrains Mono', 'Consolas', monospace !important; }

/* ── Nav: dark bar + hexagon mark + CSS wordmark ───────────────────────────── */
nav { background: rgba(14,14,17,.85) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--etf-border) !important; box-shadow: none !important; }
.nav-brand { font-size: 0 !important; line-height: 0; display: inline-flex; align-items: center; gap: 10px; }
.nav-brand span { display: none; }
.nav-brand::before {
  content: ""; display: inline-block; width: 32px; height: 32px;
  background: url('/static/img/etech-mark.png') center / contain no-repeat; border-radius: 7px;
}
.nav-brand::after { content: "eTechFlow"; font-size: 18px; font-weight: 700; letter-spacing: -.3px; color: var(--etf-text); }
.nav-links a { color: var(--etf-muted) !important; font-weight: 500; }
.nav-links a:hover { background: var(--etf-surface-2) !important; color: var(--etf-text) !important; }
.nav-links a.active { background: var(--etf-brand-soft) !important; color: var(--etf-brand-accent) !important; font-weight: 600; }

/* ── Text ──────────────────────────────────────────────────────────────────── */
.page-header h1, h1, h2, h3 { color: var(--etf-text) !important; letter-spacing: -.2px; }
.page-header p, .hint, .sub-name, .sub-email, .stat-card .lbl, .meta-chip, label, p, .lbl { color: var(--etf-muted); }
a { color: var(--etf-link); }
.nav-links a { color: var(--etf-muted); }

/* ── Surfaces / cards ──────────────────────────────────────────────────────── */
.card, .sub-card, .stat-card, .empty, .pf-sidebar, .panel, .box, .table-wrap, table {
  background: var(--etf-surface) !important; border-color: var(--etf-border) !important; box-shadow: var(--sh) !important;
}
.sub-card:hover { box-shadow: var(--sh-md), 0 0 0 1px rgba(156,107,194,.35) !important; border-color: rgba(156,107,194,.45) !important; }
.stat-card .num { color: var(--etf-brand-accent) !important; }
.sub-domain { color: var(--etf-brand-accent) !important; }
.meta-chip { background: var(--etf-surface-2) !important; border-color: var(--etf-border) !important; color: var(--etf-muted) !important; }
.meta-chip strong { color: var(--etf-text) !important; }

/* status accents */
.sub-card.status-active    { border-left-color: var(--etf-success) !important; }
.sub-card.status-pending   { border-left-color: var(--etf-warn) !important; }
.sub-card.status-suspended { border-left-color: var(--etf-surface-3) !important; }
.status-active  { color: var(--etf-success) !important; }
.status-pending { color: var(--etf-warn) !important; }
.provider-stripe { color: var(--etf-brand-accent) !important; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert.success { background: var(--etf-success-soft) !important; border: 1px solid rgba(52,184,121,.35) !important; color: #7FE0AE !important; }
.alert.error   { background: var(--etf-danger-soft)  !important; border: 1px solid rgba(229,100,95,.35) !important; color: #F2A3A0 !important; }

/* ── Filter tabs / plan tabs / sidebar items ───────────────────────────────── */
.filter-tab, .pf-navitem { color: var(--etf-muted) !important; }
.filter-tab.active { background: var(--etf-brand-soft) !important; border-color: rgba(156,107,194,.35) !important; color: var(--etf-brand-accent) !important; }
.filter-tab:hover  { background: var(--etf-surface-2) !important; color: var(--etf-text) !important; }
.pf-navitem:hover  { background: var(--etf-surface-2) !important; color: var(--etf-text) !important; }
.pf-navitem.active { background: var(--etf-brand-soft) !important; color: var(--etf-brand-accent) !important; }
.pf-navitem .dot   { background: var(--etf-brand-accent) !important; }
.pf-group-title    { color: var(--etf-faint) !important; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.plan-badge         { background: var(--etf-brand-soft) !important; border: 1px solid rgba(156,107,194,.35) !important; color: var(--etf-brand-accent) !important; }
.badge-solo         { background: var(--etf-info-soft) !important;    border-color: rgba(111,160,232,.35) !important; color: var(--etf-info) !important; }
.badge-growth       { background: var(--etf-success-soft) !important; border-color: rgba(52,184,121,.35) !important;  color: #7FE0AE !important; }
.badge-business     { background: var(--etf-warn-soft) !important;    border-color: rgba(224,160,66,.35) !important;  color: #F0C886 !important; }
.badge-all_channels { background: var(--etf-brand-soft) !important;   border-color: rgba(156,107,194,.35) !important; color: var(--etf-brand-accent) !important; }
.badge-enterprise   { background: var(--etf-danger-soft) !important;  border-color: rgba(229,100,95,.35) !important;  color: #F2A3A0 !important; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
/* primary action → brand gradient + glow (matches the live hero CTA) */
.btn-activate, .btn-save, .btn-primary, .btn-cta, .btn.primary {
  background: var(--etf-grad) !important; color: #fff !important; border: none !important; box-shadow: var(--etf-glow) !important;
}
.btn-activate:hover, .btn-save:hover, .btn-primary:hover, .btn-cta:hover { filter: brightness(1.08); box-shadow: 0 4px 22px rgba(124,77,160,.6) !important; }

/* secondary → outlined dark pill */
.btn-suspend, .btn-reset, .btn-ghost, .btn-secondary {
  background: transparent !important; color: var(--etf-text) !important; border: 1px solid var(--etf-border-2) !important;
}
.btn-suspend:hover, .btn-reset:hover { border-color: var(--etf-brand-accent) !important; color: var(--etf-brand-accent) !important; }

/* tinted utility buttons (dark soft) */
.btn-features { background: var(--etf-brand-soft) !important;  color: var(--etf-brand-accent) !important; border: 1px solid rgba(156,107,194,.35) !important; }
.btn-domains  { background: var(--etf-info-soft) !important;   color: var(--etf-info) !important;          border: 1px solid rgba(111,160,232,.35) !important; }
.btn-ips      { background: var(--etf-success-soft) !important;color: #7FE0AE !important;                  border: 1px solid rgba(52,184,121,.35) !important; }
.btn-delete   { background: var(--etf-danger-soft) !important; color: #F2A3A0 !important;                  border: 1px solid rgba(229,100,95,.35) !important; }
.btn-features:hover,.btn-domains:hover,.btn-ips:hover,.btn-delete:hover { filter: brightness(1.15); }

/* ── Forms / inputs ────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea, .json-editor, textarea.json-editor, .num-field input, .pf-mobile-select {
  background: var(--etf-surface-2) !important; color: var(--etf-text) !important; border: 1.5px solid var(--etf-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--etf-faint) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--etf-brand) !important; box-shadow: 0 0 0 3px rgba(156,107,194,.18) !important; outline: none; }
.feat-toggle { background: var(--etf-surface-2) !important; border-color: var(--etf-border) !important; }
.feat-toggle:hover { border-color: rgba(156,107,194,.45) !important; background: var(--etf-brand-soft) !important; }
.feat-toggle.on { border-color: var(--etf-brand) !important; background: var(--etf-brand-soft) !important; }
.feat-toggle-label { color: var(--etf-text) !important; }
.feat-toggle.on .feat-toggle-label { color: var(--etf-brand-accent) !important; }
.feat-toggle input, .num-field input[type="checkbox"] { accent-color: var(--etf-brand); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
th { color: var(--etf-muted) !important; border-color: var(--etf-border) !important; }
td { border-color: var(--etf-border) !important; color: var(--etf-text); }
tr:hover td { background: var(--etf-surface-2) !important; }
.empty h3 { color: var(--etf-muted) !important; }
hr { border-color: var(--etf-border) !important; }