/* ==========================================================================
   Foster Wealth Ventures — Dashboard Base Styles
   File: /assets/css/styles.css
   ========================================================================== */

/* ---------- CSS Variables (Brand) ---------- */
:root{
  --fwv-bg:#0b0f14;
  --fwv-surface:#10161c;
  --fwv-panel:#131b23;
  --fwv-text:#e7eef6;
  --fwv-text-dim:#a8b3c2;
  --fwv-border:#243140;
  --fwv-green:#1b8f5a;
  --fwv-green-700:#146a43;
  --fwv-gold:#d4af37;
  --fwv-gold-700:#b8931f;

  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --shadow-1:0 6px 20px rgba(0,0,0,.25);
  --shadow-2:0 10px 30px rgba(0,0,0,.35);
  --container:1200px;

  --text:var(--fwv-text);
  --text-secondary:var(--fwv-text-dim);
  --panel:var(--fwv-panel);
  --border:var(--fwv-border);

  /* optional btn vars (used with fallbacks below) */
  --btn-info-bg:#0ea5e9;
  --btn-info-fg:#ffffff;
  --btn-info-border:rgba(0,0,0,.15);
  --btn-info-bg-dark:#22d3ee;
  --btn-info-fg-dark:#05222e;
  --btn-info-bg-light:#0ea5e9;
  --btn-info-fg-light:#063044;
}

/* === GoldMIND theme tokens (behavior-only) === */
:root {
  --gm-bg: #ffffff;
  --gm-elev: #f8fafc;
  --gm-fg: #0f172a;
  --gm-muted: #475569;
  --gm-border: rgba(15,23,42,.12);
  --gm-accent: #D4AF37; /* Gold */
  --gm-mask: rgba(0,0,0,.55); /* overlay for light mode */
}

@media (prefers-color-scheme: dark) {
  :root {
    --gm-bg: #0b1020;
    --gm-elev: #121830;
    --gm-fg: #e6e9f5;
    --gm-muted: #b7c0da;
    --gm-border: rgba(230,233,245,.14);
    --gm-accent: #D4AF37; /* keep brand gold */
    --gm-mask: rgba(0,0,0,.65); /* slightly darker overlay */
  }
}

/* If your site toggles with a class or data-attr, mirror tokens explicitly. */
[data-theme="dark"], .dark {
  --gm-bg: #0b1020;
  --gm-elev: #121830;
  --gm-fg: #e6e9f5;
  --gm-muted: #b7c0da;
  --gm-border: rgba(230,233,245,.14);
  --gm-accent: #D4AF37;
  --gm-mask: rgba(0,0,0,.65);
}

body.theme-light{
  --fwv-bg:#f6f9ff;
  --fwv-surface:#fff;
  --fwv-panel:#ffffff;
  --fwv-text:#0b1522;
  --fwv-text-dim:#4a5a70;
  --fwv-border:#d7e0ef;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:linear-gradient(180deg,var(--fwv-bg),#0e141a 40%,var(--fwv-surface));
  color:var(--fwv-text);
  font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:var(--fwv-gold); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--fwv-border); margin:24px 0; }

/* ---------- Utilities ---------- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.grid{ display:grid; gap:16px; }
.hidden{ display:none !important; }
.text-dim{ color:var(--fwv-text-dim); }
.center{ display:flex; align-items:center; justify-content:center; }
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}
.p-0{padding:0}.p-1{padding:8px}.p-2{padding:12px}.p-3{padding:16px}.p-4{padding:24px}

/* ---------- Header / Brand ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(16,22,28,.8);
  border-bottom:1px solid var(--fwv-border);
}
body.theme-light .site-header{ background:rgba(255,255,255,.85); }

.site-header .bar{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px; }
.brand .logo{ width:36px; height:36px; border-radius:10px; overflow:hidden; box-shadow:var(--shadow-1); }
.brand-kicker{ display:block; font-size:.78rem; color:var(--text-secondary); }
.brand-verse{ display:block; font-size:.72rem; color:var(--text-secondary); opacity:.85; margin-top:2px; letter-spacing:.15px; }
body.theme-light .brand-verse{ opacity:.75; }
.header-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

/* ---------- App Shell ---------- */
.app{ display:grid; grid-template-columns:260px 1fr; gap:20px; padding:24px; }
.sidebar{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
  padding:16px;
  height:calc(100dvh - 64px - 48px);
  position:sticky; top:88px; overflow:auto;
}
.nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:var(--fwv-text-dim); }
.nav a:hover{ background:#0f1620; color:var(--fwv-text); }
.nav a.active{ background:rgba(27,143,90,.15); color:#d7ffeb; border:1px solid rgba(27,143,90,.35); }
.main{ min-width:0; }

/* ---------- Cards ---------- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-1); padding:20px; }
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.card-title{ font-weight:700; font-size:1.05rem; }
.card-sub{ color:var(--fwv-text-dim); font-size:.9rem; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:600; transition:transform .04s ease, box-shadow .2s ease, background .2s ease; box-shadow:var(--shadow-1); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:linear-gradient(180deg,var(--fwv-green),var(--fwv-green-700)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-gold{ background:linear-gradient(180deg,var(--fwv-gold),var(--fwv-gold-700)); color:#16130a; }
.btn-neutral{ background:rgba(15,22,32,.75); color:#e7eef6; border:1px solid rgba(255,255,255,.15); }
body.theme-light .btn-neutral{ background:#f1f5ff; color:#0b1522; border-color:rgba(11,21,34,.1); }
.btn-outline{ background:transparent; color:var(--fwv-text); border-color:var(--fwv-border); }
.btn-outline:hover{ background:#0f1620; }
.btn-outline-light{ color:#f9fbff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); }
.btn-outline-light:hover{ background:rgba(255,255,255,.15); }
body.theme-light .btn-outline-light{ color:#0b1522; border-color:rgba(11,21,34,.15); background:rgba(11,21,34,.05); }
body.theme-light .btn-outline-light:hover{ background:rgba(11,21,34,.08); }

/* ---------- Tables ---------- */
.table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--fwv-border); }
.table th,.table td{ padding:12px 14px; text-align:left; }
.table thead th{ background:#0f1620; color:var(--fwv-text); font-weight:700; }
.table tbody tr{ border-top:1px solid var(--fwv-border); }
.table tbody tr:hover{ background:#0f1620; }
body.theme-light .table thead th{ background:#f4f7fd; }

/* ---------- Alerts ---------- */
.alert{ border-radius:14px; padding:12px 14px; border:1px solid; display:flex; gap:10px; align-items:flex-start; background:#101820; }
.alert.info{ border-color:rgba(46,160,255,.45); background:rgba(46,160,255,.10); color:#cfe6ff; }
.alert.success{ border-color:rgba(27,143,90,.45); background:rgba(27,143,90,.12); color:#d7ffeb; }
.alert.warn{ border-color:rgba(244,180,0,.45); background:rgba(244,180,0,.10); color:#fff3c3; }
.alert.danger{ border-color:rgba(226,61,61,.45); background:rgba(226,61,61,.10); color:#ffd6d6; }

/* ---------- Badges / Pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.75rem; background:#0f1620; border:1px solid var(--fwv-border); }
.pill.gold{ background:rgba(212,175,55,.12); color:var(--fwv-gold); border-color:rgba(212,175,55,.35); }
.pill.green{ background:rgba(27,143,90,.12); color:#8ff5c3; border-color:rgba(27,143,90,.35); }

/* ---------- KPIs & Charts ---------- */
.kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi .stat{ background:linear-gradient(180deg,#111821,#0f1620); border:1px solid var(--fwv-border); border-radius:var(--radius-lg); padding:16px; }
.kpi .label{ color:var(--fwv-text-dim); font-size:.85rem; }
.kpi .value{ font-weight:800; font-size:1.6rem; letter-spacing:.3px; }
.kpi .delta.up{ color:#9cffd1; }
.kpi .delta.down{ color:#ffb3b3; }

.chart{ height:280px; border-radius:var(--radius-lg); border:1px dashed var(--fwv-border); background:repeating-linear-gradient(45deg,#0f1620,#0f1620 12px,#0e141a 12px,#0e141a 24px); }

/* ---------- Footer ---------- */
.site-footer{ color:var(--fwv-text-dim); font-size:.85rem; padding:20px; text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .kpi{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:relative; height:auto; top:auto; }
}
@media (max-width:520px){
  .kpi{ grid-template-columns:1fr; }
  .site-header .bar{ height:58px; }
}

/* ---------- Motion Pref ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* == GoldMIND Disclaimer Modal (clean) == */
#disclaimerModal,
.gm-disclaimer-overlay,
[data-modal="disclaimer"]{
  position:fixed;
  inset:0;
  z-index:2147483646;
  background:rgba(2,6,23,0.72);
  display:grid;
  place-items:center;
  overflow:auto; /* allow page scroll when content taller than viewport */
}

/* Dialog/Card */
#disclaimerModal .gm-disclaimer-card,
[data-modal="disclaimer"] [role="dialog"]{
  width:min(880px,calc(100vw - 2rem));
  max-height:min(92vh,900px);
  background:#fff;
  color:#111;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 24px 72px rgba(2,6,23,0.35);
  border:1px solid rgba(148,163,184,0.15);
}

/* Body scroll */
#disclaimerModal .gm-modal-body,
[data-modal="disclaimer"] .modal-body{
  padding:20px;
  overflow:auto;
}

/* Sticky footer actions */
#disclaimerModal .gm-modal-actions,
[data-modal="disclaimer"] .modal-footer{
  position:sticky;
  bottom:0;
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding:14px 16px;
  border-top:1px solid rgba(0,0,0,0.08);
  background:rgba(250,250,250,0.96);
  backdrop-filter:saturate(120%) blur(4px);
}

/* Dark theme */
[data-bs-theme="dark"] #disclaimerModal .gm-disclaimer-card{
  background:#101114; color:#e6e6e6;
  box-shadow:0 24px 72px rgba(0,0,0,0.45);
  border-color:rgba(255,255,255,0.08);
}
[data-bs-theme="dark"] #disclaimerModal .gm-modal-actions{
  background:rgba(16,17,20,0.96);
  border-top-color:rgba(255,255,255,0.08);
}
/* == /GoldMIND Disclaimer Modal == */

/* ===== Navbar Settings alignment & theme-safe styles ===== */

/* Flex host for right-side controls (Help / Enable Alerts / Walkthrough / Settings) */
.nav-actions, .navbar-actions, .header-actions, #topActions, .site-header .actions {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* Normalize and style the Settings trigger no matter which selector is used */
#settingsBtn,
#gmSettingsBtn,
#gm-settings-btn,
.gm-settings-btn,
.settings-btn,
button[data-bs-target="#settingsPanel"]{
  position:static !important;
  top:auto !important; left:auto !important; transform:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 14px; margin:0 0 0 8px; /* space from neighbor */
  border-radius:999px; font-weight:600; line-height:1; white-space:nowrap;
  background:var(--btn-info-bg,#0ea5e9);
  color:var(--btn-info-fg,#ffffff);
  border:1px solid var(--btn-info-border,rgba(0,0,0,.15));
  box-shadow:0 2px 6px rgba(0,0,0,.20);
}

/* Dark mode */
[data-theme="dark"] #settingsBtn,
[data-theme="dark"] #gmSettingsBtn,
[data-theme="dark"] #gm-settings-btn,
[data-theme="dark"] .gm-settings-btn,
[data-theme="dark"] .settings-btn,
.theme-dark #settingsBtn,
.theme-dark #gmSettingsBtn,
.theme-dark #gm-settings-btn,
.theme-dark .gm-settings-btn,
.theme-dark .settings-btn{
  background:var(--btn-info-bg-dark,#22d3ee);
  color:var(--btn-info-fg-dark,#05222e);
  border-color:rgba(255,255,255,.08);
}

/* Light mode */
[data-theme="light"] #settingsBtn,
[data-theme="light"] #gmSettingsBtn,
[data-theme="light"] #gm-settings-btn,
[data-theme="light"] .gm-settings-btn,
[data-theme="light"] .settings-btn,
.theme-light #settingsBtn,
.theme-light #gmSettingsBtn,
.theme-light #gm-settings-btn,
.theme-light .gm-settings-btn,
.theme-light .settings-btn,
body.theme-light #settingsBtn,
body.theme-light #gmSettingsBtn,
body.theme-light #gm-settings-btn,
body.theme-light .gm-settings-btn,
body.theme-light .settings-btn{
  background:var(--btn-info-bg-light,#0ea5e9);
  color:var(--btn-info-fg-light,#063044);
  border-color:rgba(0,0,0,.08);
}

/* Slight breathing room under the verse line on narrow screens */
.brand-verse{ margin-top:4px; }

/* REMOVE the old margin-top tweak for the settings button (replaced above) */
/* (intentionally omitted)
button[data-bs-target="#settingsPanel"] { margin-top:.5rem; }
@media (min-width:768px){ button[data-bs-target="#settingsPanel"]{ margin-top:0; } }
*/

/* ===== GoldMIND Theme Components ===== */

/* Walkthrough — tooltip + mask + highlight ring */
#gm-wt-tooltip {
 background: var(--gm-elev) !important;
 color: var(--gm-fg) !important;
 border: 1px solid var(--gm-border) !important;
}
#gm-wt-tooltip .gm-wt-title { color: var(--gm-fg) !important; }
#gm-wt-tooltip .gm-wt-text  { color: var(--gm-muted) !important; }
#gm-wt-mask { background: var(--gm-mask) !important; }

/* Keep the gold focus ring readable in both themes */
.gm-wt-highlight {
 outline: 3px solid var(--gm-accent) !important;
 outline-offset: 3px;
 border-radius: 8px;
}

/* Disclaimer modal */
#gmDisclaimerOverlay {
 background: var(--gm-mask) !important;
}
#gmDisclaimerOverlay .gm-card {
 background: var(--gm-elev) !important;
 color: var(--gm-fg) !important;
 border: 1px solid var(--gm-border) !important;
}
#gmDisclaimerOverlay .gm-card h3 { color: var(--gm-fg) !important; }
#gmDisclaimerOverlay .gm-card p,
#gmDisclaimerOverlay .gm-card li { color: var(--gm-muted) !important; }

/* Help modal */
#helpModal .modal-content{
  background:var(--gm-elev) !important;
  color:var(--gm-fg) !important;
  border:1px solid var(--gm-border) !important;
}
#helpModal .modal-title,
#helpModal .modal-body,
#helpModal .modal-body h5,
#helpModal .modal-body p,
#helpModal .modal-body li,
#helpModal .modal-body strong{
  color:var(--gm-fg) !important;
}
#helpModal .modal-body h5{
  font-weight:700;
  margin-bottom:.75rem;
}
#helpModal .modal-body strong{
  font-weight:600;
}
#helpModal .modal-body .text-primary{
  color:var(--gm-accent) !important;
}
body.theme-light #helpModal .modal-body .text-primary{
  color:var(--gm-fg) !important;
}
#helpModal .modal-body .alert{
  background:rgba(56,69,99,.18);
  border-color:var(--gm-border) !important;
  color:var(--gm-fg) !important;
}
body.theme-light #helpModal .modal-body .alert{
  background:rgba(15,23,42,.08);
}
#helpModal .alert strong{
  color:var(--gm-fg) !important;
}
#helpModal .accordion-button{
  color:var(--gm-fg) !important;
}
#helpModal .accordion-body{
  color:var(--gm-muted) !important;
}

/* Alerts (enable/test banners & list items) */
#alertsBanner, .gm-banner {
 background: var(--gm-elev) !important;
 color: var(--gm-fg) !important;
 border: 1px solid var(--gm-border) !important;
}
#alertsList .gm-alert-item {
 background: var(--gm-elev) !important;
 color: var(--gm-fg) !important;
 border-bottom: 1px solid var(--gm-border) !important;
}

/* Buttons/links inside these surfaces */
.gm-btn, .gm-link, #enableNotificationsBtn, #testAlert, #walkthroughBtn, #helpBtn, #gmAgreeBtn, #gmDeclineBtn {
 color: var(--gm-fg);
 border-color: var(--gm-border);
}
.gm-btn-primary, #gmAgreeBtn, #walkthroughBtn {
 background: var(--gm-accent) !important;
 color: #1a1a1a !important; /* high contrast on gold */
 border: none !important;
}

/* Accessibility: visible focus in both themes */
:where(button, a, [tabindex]):focus-visible {
 outline: 3px solid var(--gm-accent);
 outline-offset: 2px;
 border-radius: 8px;
}

/* Ensure inline SVGs use current text color */
svg { fill: currentColor; stroke: currentColor; }

/* From your walkthrough sizing task (kept here for completeness) */
#gm-wt-tooltip { width:420px!important; height:280px!important; overflow:hidden!important; }
#gm-wt-content { height:100%!important; overflow:hidden!important; }