/* =======================================================================
   ENTERPRISE THEME LAYER  —  JustBull Issuer
   Loaded AFTER css/style.css. Overrides the design tokens so the whole app
   re-skins from one place: a calm slate surface, a corporate-blue accent,
   a clean sans UI with monospace kept only for addresses, hashes and numbers.
   Dark is the default; light and system-default are handled below.
   Nothing here changes layout or markup — only colour, type and depth.
   ========================================================================== */

:root {
  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* alias: several JS widgets reference var(--text) (a token that never existed,
     so they always fell back to a hard light colour and vanished in light mode).
     Point it at the real text token so those widgets follow the theme. */
  --text: var(--text-primary);

  /* enterprise DARK (default) — slate + corporate blue */
  --bg-base:        #0b1220;
  --bg-surface:     #111a2b;
  --bg-card:        #16213a;
  --bg-hover:       #1e2c47;
  --border:         #26344f;
  --border-bright:  #38507a;

  --text-primary:   #eef2f8;
  --text-secondary: #9fb0c8;
  --text-muted:     #64748b;

  --gold:           #3b82f6;
  --gold-light:     #60a5fa;
  --gold-dim:       #1e40af;
  --violet:         #3b82f6;
  --pink:           #2563eb;
  --cyan:           #38bdf8;

  --red:            #ef4444;
  --red-dim:        #7f1d1d;

  --brand-grad:     linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --brand-grad-r:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --rainbow:        linear-gradient(135deg, #3b82f6, #38bdf8);

  --radius:         6px;
  --radius-lg:      10px;

  --shadow-card:    0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-pop:     0 10px 30px rgba(2,6,23,0.55);
}

/* ---- LIGHT (explicit toggle) ------------------------------------------- */
html[data-theme="light"] {
  --bg-base:        #f1f5f9;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-hover:       #f1f5f9;
  --border:         #e2e8f0;
  --border-bright:  #cbd5e1;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  --gold:           #2563eb;
  --gold-light:     #3b82f6;
  --gold-dim:       #bfdbfe;
  --violet:         #2563eb;
  --pink:           #1d4ed8;
  --cyan:           #0284c7;

  --red:            #dc2626;
  --red-dim:        #fecaca;

  --brand-grad:     linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --brand-grad-r:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --rainbow:        linear-gradient(135deg, #2563eb, #0284c7);

  --shadow-card:    0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
  --shadow-pop:     0 12px 34px rgba(15,23,42,0.14);
}

/* ---- SYSTEM DEFAULT: follow OS when the user hasn't chosen -------------- */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --bg-base:        #f1f5f9;
    --bg-surface:     #ffffff;
    --bg-card:        #ffffff;
    --bg-hover:       #f1f5f9;
    --border:         #e2e8f0;
    --border-bright:  #cbd5e1;
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --gold:           #2563eb;
    --gold-light:     #3b82f6;
    --gold-dim:       #bfdbfe;
    --violet:         #2563eb;
    --pink:           #1d4ed8;
    --cyan:           #0284c7;
    --red:            #dc2626;
    --red-dim:        #fecaca;
    --brand-grad:     linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    --brand-grad-r:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --rainbow:        linear-gradient(135deg, #2563eb, #0284c7);
    --shadow-card:    0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
    --shadow-pop:     0 12px 34px rgba(15,23,42,0.14);
  }
}

/* ==========================================================================
   TYPOGRAPHY  —  clean sans everywhere; monospace only for values
   ========================================================================== */
body,
.logo-main, .page-title, .hero-text h2, .dash-card h3,
.history-header h3, .info-block h3, .how-list li::before,
.form-header h2, .section-title, .nav-divider,
.nft-type-name, .nft-preview-title, .nft-card-title,
.btn, .api-key-btn, .preview-meta span, .nft-offer-from, .amm-tab {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
}

/* headings a touch tighter and firmer for an enterprise feel */
.page-title, .form-header h2, .section-title,
.hero-text h2, .dash-card h3, .info-block h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* monospace kept ONLY for addresses, hashes and numeric values */
.wallet-addr, .history-txid, .history-currency,
.stat-value, .nft-offer-amount, .path-source-amount,
.field-input, .preview-code, code, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   DEPTH & FOCUS  —  subtle borders, soft shadows, visible keyboard focus
   ========================================================================== */
.card, .dash-card, .stat-card, .info-block, .history-panel,
.form-section, .nft-card, .preview-box {
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   PANELS THAT HARD-CODED A DARK GRADIENT  →  make them theme-aware
   (.hero-banner and .token-preview-card baked in a fixed near-black stop,
    which turned into an ugly white-to-black wash in light mode.)
   ========================================================================== */
.hero-banner {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
}
.token-preview-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
  border-color: var(--border);
}
html[data-theme="light"] .hero-banner {
  background: linear-gradient(135deg, #e8f0ff 0%, #ffffff 100%);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .hero-banner {
    background: linear-gradient(135deg, #e8f0ff 0%, #ffffff 100%);
  }
}

*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ==========================================================================
   THEME TOGGLE BUTTON  (injected into the top bar by js/theme.js)
   ========================================================================== */
.jb-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: var(--transition);
  flex: 0 0 auto;
}
.jb-theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--bg-hover);
}
.jb-theme-toggle svg { width: 18px; height: 18px; display: block; }


/* RECOLOUR HARD-CODED PURPLE/PINK ACCENTS -> corporate blue (added v3) */
.nav-item.active { background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(96,165,250,0.08)); border-color: rgba(59,130,246,0.30); }
.btn--primary:hover { box-shadow: 0 4px 20px rgba(59,130,246,0.40); }
.dash-card:hover { box-shadow: 0 8px 32px rgba(59,130,246,0.12); }
.history-badge--issued { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.30); }
.field-input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.10); }
.flag-toggle input:checked + .toggle-ui { background: rgba(59,130,246,0.20); }
.flag-tx-note { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.20); }
.token-preview-card { border-color: rgba(59,130,246,0.35); }
.tx-summary { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.25); }
.nft-type-card input:checked + .nft-type-inner { background: rgba(59,130,246,0.10); box-shadow: 0 0 0 1px rgba(59,130,246,0.30); }
.nft-preview-badge { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.30); }
.nft-card:hover { box-shadow: 0 0 0 1px rgba(59,130,246,0.20); }
.nft-card.selected { background: rgba(59,130,246,0.10); box-shadow: 0 0 0 1px rgba(59,130,246,0.30); }
.amm-tab.active { background: rgba(59,130,246,0.15); }
.issue-tab.active { background: rgba(59,130,246,0.15); }
.path-card--best { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.30); }
.path-best-badge { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.30); }


/* ── toasts ─────────────────────────────────────────────────────────────────
 * These had NO styling anywhere. #toastContainer sits at the end of <body>, so with
 * position:static every toast rendered ~500px above the viewport on a long page and was
 * completely invisible. The app has been silently swallowing every success, warning and
 * error message it has ever shown. Fixed position, top-right, above everything. */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:99999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;max-width:min(380px,calc(100vw - 2rem))}
.toast{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .9rem;border-radius:9px;background:var(--bg-card,#161628);border:1px solid var(--border,#2a2a44);color:var(--text-primary,#e8e8f0);font-size:.85rem;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto;animation:jbToastIn .25s ease}
.toast-icon{flex:0 0 auto;font-weight:700;line-height:1.45}
.toast--success{border-color:rgba(76,175,80,.55)}.toast--success .toast-icon{color:#4caf50}
.toast--error{border-color:rgba(255,107,107,.55)}.toast--error .toast-icon{color:#ff6b6b}
.toast--warn{border-color:rgba(234,179,8,.55)}.toast--warn .toast-icon{color:#eab308}
.toast--info{border-color:rgba(59,130,246,.55)}.toast--info .toast-icon{color:#3b82f6}
@keyframes jbToastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:640px){.toast-container{left:1rem;right:1rem;max-width:none}}