/* ============================================================================
   bliss-theme.css — ONE shared theme for every Bliss dashboard.
   Dark command sidebar + light content surface.
   Loaded AFTER each page's inline <style>, so these rules win.
   >>> Tweak the look of ALL dashboards by editing THIS file only. <<<
   ============================================================================ */

/* ---------- 1 · LIGHT CONTENT TOKENS (override the page's dark :root) -------- */
:root {
  --base: #eceef1;            /* page background — soft light grey            */
  --e1:   #ffffff;            /* elevated chips / tiles / nav pills            */
  --e2:   #f3f5f7;
  --e3:   #e6e9ed;
  --fg1:  #14161b;            /* headings — near-black                        */
  --fg2:  #363a44;            /* body text                                    */
  --fg3:  #5a606b;            /* secondary text                               */
  --fg4:  #7d848d;            /* muted labels                                 */
  --fg5:  #a6acb4;            /* faint labels                                 */
  --b1:   rgba(17, 22, 30, .10);   /* hairline borders                       */
  --b2:   rgba(17, 22, 30, .15);
  --b3:   rgba(17, 22, 30, .24);
  --glass: linear-gradient(180deg, #ffffff, #fbfcfd);
  /* plane accents — darkened so they read on white */
  --seo:    #4d7c0f;
  --aeo:    #0e7490;
  --cyan:   #0e7490;
  --geo:    #b45309;
  --amber:  #b45309;
  --violet: #6d28d9;
  --aiv:    #6d28d9;          /* AI-Visibility plane accent on the light surface */
  --vis:    #6d28d9;          /* legacy alias used by ai-visibility-dashboard.html */
  --pink:   #be185d;
  --comp:   #be185d;
  --tech:   #0284c7;
  --oracle: #4f46e5;
  --cite:   #0d9488;
  --action: #059669;
  /* score bands */
  --elite:    #3f8f1f;
  --strong:   #4d7c0f;
  --moderate: #2563eb;
  --weak:     #b45309;
  --critical: #e11d48;
}

body { background: var(--base); color: var(--fg2); }
body::before, body::after { display: none !important; }   /* drop the dark-mode grid + glow */

/* ---------- 2 · SIDEBAR STAYS DARK (re-scope dark tokens to its subtree) ----- */
.side {
  background: #0b0c10 !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  --base: #07070a; --e1: #15151c; --e2: #1c1c25; --e3: #23232d;
  --fg1: #fafafa; --fg2: #d4d4d8; --fg3: #a1a1aa; --fg4: #9aa0a8; --fg5: #6b7178;
  --b1: rgba(255, 255, 255, .08); --b2: rgba(255, 255, 255, .14); --b3: rgba(255, 255, 255, .22);
}
/* sidebar logo — larger brand lockup + small, readable version badge */
.side .bm .nm { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.side .bm .nm .bn { font-size:14px; font-weight:750; color:var(--fg1); letter-spacing:.005em; line-height:1.1; white-space:nowrap; }
.side .bm .nm .ver { flex:0 0 auto; font-family:var(--mono); font-size:9px; font-weight:600; color:var(--fg3); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); padding:1px 4px; border-radius:5px; letter-spacing:.01em; line-height:1.45; white-space:nowrap; }

/* ---------- 3 · LIGHT-SURFACE COMPONENT FIXES ------------------------------- */
.card {
  background: #ffffff !important;
  border: 1px solid var(--b1) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px rgba(16, 24, 40, .06);
  backdrop-filter: none !important;
}
.bar { background: var(--e3) !important; }                 /* progress-track visible on white */
.topbar { border-bottom-color: var(--b1) !important; }
/* page title — ONE unified "Command Center" scale across every dashboard + module.
   Pages still own the colored leading <span> in their own markup; this only sizes it. */
.topbar .t, .topbar .pgh .t, .pgh .t { font-size:35px; font-weight:750; letter-spacing:-.025em; line-height:1.05; }
.sec .ln { background: var(--b1) !important; }
table.pp th { border-bottom-color: var(--b2) !important; }
table.pp tr:hover { background: rgba(17, 22, 30, .035) !important; }
.navrow a { background: var(--e1); }                        /* white nav pills on the grey page */

/* ---------- 4 · TOOL RIBBON + GO-DEEPER GRID (rendered by bliss-sidebar.js) -- */
.toolrow { --tool-accent:var(--seo); --tool-accent-soft:rgba(77,124,15,.26); display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; margin:2px 0 18px; padding-bottom:3px; scrollbar-width:thin; }
.toolrow::-webkit-scrollbar { height:5px; }
.toolrow::-webkit-scrollbar-thumb { background:var(--b2); border-radius:3px; }
.toolpill { position:relative; flex:0 0 auto; font-family:var(--mono); font-size:12px; color:var(--fg1); text-decoration:none; padding:10px 13px; border:1px solid var(--b2); border-radius:10px; background:#fff; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s, border-color .15s, color .15s; }
.toolpill:hover { transform:translateY(-3px); border-color:var(--tool-accent); color:var(--tool-accent); box-shadow:0 10px 24px var(--tool-accent-soft); }
.toolpill b { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; background:color-mix(in srgb,var(--tool-accent) 13%,#fff); color:var(--tool-accent); border-radius:5px; font-size:10px; font-weight:700; transition:background .15s, color .15s; }
.toolpill.tool { padding-right:29px; }
.toolpill.tool::after { content:"\2197"; position:absolute; right:11px; color:var(--fg4); font-size:12px; font-weight:700; transition:transform .15s, color .15s; }
.toolpill.tool:hover::after { color:var(--tool-accent); transform:translate(3px,-3px); }
.toolpill.tool:hover b { background:var(--tool-accent); color:#fff; }
.toolpill.on { background:var(--tool-accent); border-color:var(--tool-accent); color:#fff; cursor:default; box-shadow:0 4px 14px var(--tool-accent-soft); }
.toolpill.on b { background:rgba(255,255,255,.24); color:#fff; }
.toolpill.on:hover { transform:none; color:#fff; box-shadow:0 4px 14px var(--tool-accent-soft); }
.toolpill.soon { opacity:.55; cursor:default; pointer-events:none; padding-right:38px; }
.toolpill.soon::after { content:"soon"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:7.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg5); }
.toolgrid { --tool-accent:var(--seo); --tool-accent-soft:rgba(77,124,15,.26); display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; margin-top:14px; }
.toolcard { position:relative; display:block; text-decoration:none; background:#fff; border:1px solid var(--b2); border-radius:13px; padding:16px 17px; box-shadow:0 1px 2px rgba(16,24,40,.05); transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s, border-color .16s; }
.toolcard:hover { transform:translateY(-4px); border-color:var(--tool-accent); box-shadow:0 14px 30px var(--tool-accent-soft); }
.toolcard .tn { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.toolcard .tn b { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:21px; background:color-mix(in srgb,var(--tool-accent) 13%,#fff); color:var(--tool-accent); border-radius:6px; font-family:var(--mono); font-size:11px; font-weight:700; transition:background .16s, color .16s; }
.toolcard .tn { padding-right:16px; }
.toolcard .tt { font-size:13.5px; font-weight:650; color:var(--fg1); }
.toolcard .td { font-size:12px; color:var(--fg3); line-height:1.5; }
.toolcard .tgo { position:absolute; top:15px; right:15px; color:var(--fg4); font-family:var(--mono); font-size:13px; transition:transform .16s, color .16s; }
.toolcard:hover .tgo { color:var(--tool-accent); transform:translate(3px,-3px); }
.toolcard:hover .tn b { background:var(--tool-accent); color:#fff; }
/* go-deeper card — headline stat + a glanceable mini visual */
.toolcard .tstat { display:flex; align-items:baseline; gap:8px; margin:10px 0 9px; }
.toolcard .tstat b { font-family:var(--mono); font-size:25px; font-weight:700; color:var(--fg1); line-height:1; letter-spacing:-.02em; }
.toolcard .tstat span { font-size:10.5px; color:var(--fg4); line-height:1.25; }
.toolcard .tmeter { height:7px; background:var(--e3); border-radius:4px; overflow:hidden; display:flex; margin-bottom:11px; }
.toolcard .tmeter i { display:block; height:100%; border-radius:4px; }
.toolcard .tmeter.tstack i { border-radius:0; }
.toolcard .tmeter.tstack i:first-child { border-radius:4px 0 0 4px; }
.toolcard .tmeter.tstack i:last-child { border-radius:0 4px 4px 0; }
.toolcard .tdots { display:flex; gap:5px; margin-bottom:11px; }
.toolcard .tdots span { width:9px; height:9px; border-radius:50%; background:var(--e3); }
.toolcard .tdots span.on { background:var(--comp); box-shadow:0 0 0 3px rgba(190,24,93,.16); }
.toolcard .tdelta { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; font-weight:700; padding:4px 9px; border-radius:7px; margin-bottom:11px; }
.toolcard .tdelta.down { color:var(--critical); background:rgba(225,29,72,.09); }
.toolcard .tdelta.up { color:var(--strong); background:rgba(77,124,15,.10); }
.toolcard.soon { opacity:.62; pointer-events:none; }
.toolcard.soon .tgo::after { content:"soon"; font-size:8px; letter-spacing:.06em; text-transform:uppercase; }
.toolcard.soon .tgo { font-family:var(--mono); }
/* per-plane ribbon/grid accents — default is SEO green; override the container var */
.ribbon-aiv, .grid-aiv { --tool-accent:var(--aiv); --tool-accent-soft:rgba(109,40,217,.24); }
.ribbon-aeo, .grid-aeo { --tool-accent:var(--aeo); --tool-accent-soft:rgba(14,116,144,.24); }
.ribbon-geo, .grid-geo { --tool-accent:var(--geo); --tool-accent-soft:rgba(180,83,9,.24); }
.ribbon-cite, .grid-cite { --tool-accent:var(--cite); --tool-accent-soft:rgba(13,148,136,.24); }
.ribbon-comp, .grid-comp { --tool-accent:var(--comp); --tool-accent-soft:rgba(190,24,93,.24); }
.ribbon-tech, .grid-tech { --tool-accent:var(--tech); --tool-accent-soft:rgba(2,132,199,.24); }
.ribbon-action, .grid-action { --tool-accent:var(--action); --tool-accent-soft:rgba(5,150,105,.24); }