/* =========================================================
   SFS Tools v16 — Theme Engine Fix
   IMPORTANT: global.js stores theme on <html data-theme="dark">.
   This file intentionally loads LAST on every page.
   ========================================================= */

:root{
  --v16-bg:#f7f9fc;
  --v16-surface:#ffffff;
  --v16-surface-2:#f8f9fd;
  --v16-text:#12182b;
  --v16-muted:#69758c;
  --v16-border:#e4e8f0;
  --v16-input:#ffffff;
}

html[data-theme="dark"]{
  --v16-bg:#0a1020;
  --v16-surface:#121a2a;
  --v16-surface-2:#101827;
  --v16-text:#f4f7ff;
  --v16-muted:#aab5ca;
  --v16-border:#29344b;
  --v16-input:#0e1728;
  color-scheme:dark;
}

html:not([data-theme="dark"]){color-scheme:light}

/* Global page canvas */
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% 0%,rgba(99,91,255,.10),transparent 28rem),
    radial-gradient(circle at 95% 8%,rgba(34,211,238,.06),transparent 24rem),
    var(--v16-bg) !important;
  color:var(--v16-text) !important;
}

/* Header and navigation */
html[data-theme="dark"] header,
html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .app-sidebar,
html[data-theme="dark"] .mobile-bottom-nav{
  background:rgba(10,16,32,.94) !important;
  color:var(--v16-text) !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] .logo,
html[data-theme="dark"] .brand-wrap,
html[data-theme="dark"] .app-brand,
html[data-theme="dark"] .mobile-brand,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .side-link{
  color:var(--v16-text) !important;
}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .side-note{color:var(--v16-muted) !important}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .side-link:hover,
html[data-theme="dark"] .side-link.active{
  background:#182136 !important;
  color:#ffffff !important;
}

/* General cards and panels */
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .account-panel,
html[data-theme="dark"] .planner-panel,
html[data-theme="dark"] .visual-tool,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .plan-metric,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .tool,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .trust-item,
html[data-theme="dark"] .ai-result,
html[data-theme="dark"] .smartbar{
  background:var(--v16-surface) !important;
  color:var(--v16-text) !important;
  border-color:var(--v16-border) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22) !important;
}

/* Account/dashboard side navigation and main areas */
html[data-theme="dark"] .dash-shell,
html[data-theme="dark"] .dash-main,
html[data-theme="dark"] .dashboard-wrap,
html[data-theme="dark"] .dashboard-content,
html[data-theme="dark"] .account-layout,
html[data-theme="dark"] .account-main,
html[data-theme="dark"] .account-content,
html[data-theme="dark"] main,
html[data-theme="dark"] .page{
  color:var(--v16-text) !important;
}
html[data-theme="dark"] .dash-sidebar,
html[data-theme="dark"] .dashboard-sidebar,
html[data-theme="dark"] .account-sidebar{
  background:#0e1627 !important;
  color:var(--v16-text) !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] .dash-sidebar a,
html[data-theme="dark"] .dashboard-sidebar a,
html[data-theme="dark"] .account-sidebar a{
  color:#b9c4d8 !important;
}
html[data-theme="dark"] .dash-sidebar a.active,
html[data-theme="dark"] .dashboard-sidebar a.active,
html[data-theme="dark"] .account-sidebar a.active,
html[data-theme="dark"] .dash-sidebar a:hover,
html[data-theme="dark"] .dashboard-sidebar a:hover,
html[data-theme="dark"] .account-sidebar a:hover{
  background:#1a2439 !important;
  color:#fff !important;
}

/* Text contrast */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] b,
html[data-theme="dark"] strong{
  color:var(--v16-text) !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .title p,
html[data-theme="dark"] .tool p,
html[data-theme="dark"] .visual-tool p,
html[data-theme="dark"] .category-card small{
  color:var(--v16-muted) !important;
}

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field,
html[data-theme="dark"] .top-search input,
html[data-theme="dark"] .planner-field input,
html[data-theme="dark"] .planner-field select{
  background:var(--v16-input) !important;
  color:var(--v16-text) !important;
  border-color:#34425e !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#7e8aa2 !important;
}

/* Buttons */
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .app-icon-btn,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .plan-btn.secondary,
html[data-theme="dark"] .hero-secondary,
html[data-theme="dark"] .login-btn{
  background:#172137 !important;
  color:#f2f5ff !important;
  border-color:#34425e !important;
}
html[data-theme="dark"] .btn.secondary{
  background:rgba(139,135,255,.14) !important;
  color:#aaa5ff !important;
}
html[data-theme="dark"] .btn:not(.secondary):not(.ghost),
html[data-theme="dark"] .signup-btn,
html[data-theme="dark"] .hero-primary,
html[data-theme="dark"] .plan-btn.primary{
  color:#fff !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  color:#eaf0ff !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] th{background:#161f33 !important}
html[data-theme="dark"] td{background:#101827 !important}

/* Planner + helper blocks */
html[data-theme="dark"] .risk-helper,
html[data-theme="dark"] .plan-summary,
html[data-theme="dark"] .feature-strip{
  background:linear-gradient(135deg,#131c2e,#171d34) !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] .guide-row,
html[data-theme="dark"] .tool-help{
  background:#111a2b !important;
  color:#c6d0e2 !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] .goal-status{
  background:#10261f !important;
  border-color:#24523f !important;
  color:#a6ddcb !important;
}
html[data-theme="dark"] .plan-warning{
  background:#2b2514 !important;
  border-color:#625421 !important;
  color:#eadb99 !important;
}
html[data-theme="dark"] .allocation-donut:after{background:#121a2a !important}

/* Homepage app-specific canvas */
html[data-theme="dark"] body.home-app{
  background:
    radial-gradient(circle at 80% 8%,rgba(99,91,255,.12),transparent 22%),
    radial-gradient(circle at 65% 17%,rgba(46,196,255,.08),transparent 23%),
    #0a1020 !important;
}
html[data-theme="dark"] .app-hero{
  background:
    radial-gradient(circle at 76% 30%,rgba(99,91,255,.16),transparent 25%),
    radial-gradient(circle at 95% 45%,rgba(246,99,174,.08),transparent 22%),
    linear-gradient(110deg,#0a1020 5%,#0a1020 54%,#10172a 100%) !important;
  border-color:#202a40 !important;
}
html[data-theme="dark"] .report-card{
  background:rgba(18,26,42,.90) !important;
  border-color:var(--v16-border) !important;
}
html[data-theme="dark"] .report-card:after{border-color:#2a344b !important}
html[data-theme="dark"] .chart-box{
  background:#0e1728 !important;
  border-color:#2b3650 !important;
}
html[data-theme="dark"] .report-line{background:#29354d !important}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .about-mini{
  background:#0a1020 !important;
  color:var(--v16-muted) !important;
  border-color:var(--v16-border) !important;
}

/* Login/signup specific: clean professional dark card */
html[data-theme="dark"] .auth-shell{
  background:transparent !important;
}
html[data-theme="dark"] .auth-card{
  background:#121a2a !important;
  border:1px solid #2d3952 !important;
}
html[data-theme="dark"] .auth-card .auth-sep{
  color:#8d99b1 !important;
}
html[data-theme="dark"] .auth-card .actions a{
  color:#a8a4ff !important;
}

/* Light mode safety: v15 accidental body.dark selectors do not control v16 */
html:not([data-theme="dark"]) body{
  background:
    radial-gradient(circle at 10% 0%,rgba(99,91,255,.08),transparent 28rem),
    radial-gradient(circle at 95% 8%,rgba(34,211,238,.06),transparent 24rem),
    var(--v16-bg) !important;
  color:var(--v16-text) !important;
}