/* Gorton Solutions – shared light-theme panel/card overrides
 * Referenced by all 6 pages via <link rel="stylesheet" href="light-theme.css">
 * The base html[data-theme="light"] variable block lives in each page's <style>
 * tag so the early FOUC-prevention script doesn't need an extra HTTP round-trip. */

/* ── Cards & panels ─────────────────────────────────────────────────────── */
html[data-theme="light"] .card{
  background:rgba(255,255,255,.80);
  filter:drop-shadow(0 4px 16px rgba(37,99,235,.08));
}
html[data-theme="light"] .kpi{background:rgba(255,255,255,.65);}
html[data-theme="light"] .repair-item{background:rgba(255,255,255,.65);}
html[data-theme="light"] .parts-cat{background:rgba(255,255,255,.65);}
html[data-theme="light"] .game-card{background:rgba(255,255,255,.62);}
html[data-theme="light"] .overview-card{background:rgba(255,255,255,.58);}
html[data-theme="light"] .overview-card:hover{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.22);}

/* ── Chat widget (inline) ────────────────────────────────────────────────── */
html[data-theme="light"] .chat-widget{background:rgba(240,244,255,.88);}
html[data-theme="light"] .chat-input-row input{background:rgba(255,255,255,.92);}
html[data-theme="light"] .chat-input-row input:focus{background:#fff;}
html[data-theme="light"] .chat-bubble--ai{
  background:rgba(37,99,235,.07);
  border-color:rgba(37,99,235,.16);
}
html[data-theme="light"] .chat-bubble--user{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.10);
}

/* ── Floating chat panel ─────────────────────────────────────────────────── */
html[data-theme="light"] .chat-float-panel{background:rgba(235,241,255,.97);}
html[data-theme="light"] .chat-float-panel-header{background:rgba(37,99,235,.06);}

/* ── Callout box ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .callout{
  background:rgba(37,99,235,.05);
  border-color:rgba(37,99,235,.18);
  border-left-color:rgba(37,99,235,.80);
}

/* ── Tags, pills, misc text ──────────────────────────────────────────────── */
html[data-theme="light"] .tag{
  color:#2a3a60;
  border-color:rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
}
html[data-theme="light"] .pill{
  color:#2a3a60;
  border-color:rgba(0,0,0,.12);
  background:rgba(255,255,255,.55);
}
html[data-theme="light"] li{color:rgba(11,16,32,.88);}
html[data-theme="light"] .fine{color:rgba(11,16,32,.58);}
html[data-theme="light"] footer{color:rgba(11,16,32,.55);}
html[data-theme="light"] footer a{color:rgba(11,16,32,.45);}

/* ── Form inputs ─────────────────────────────────────────────────────────── */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background:rgba(255,255,255,.82);
  border-color:rgba(0,0,0,.14);
  color:#0b1020;
}

/* ── Nav toggle / sidebar chat section ──────────────────────────────────── */
html[data-theme="light"] .menu-toggle{background:rgba(0,0,0,.04);}
html[data-theme="light"] .sidebar-chat{background:rgba(37,99,235,.04);}
html[data-theme="light"] .sidebar-nav a:hover,
html[data-theme="light"] .sidebar-nav a[aria-current="page"]{
  background:rgba(37,99,235,.06);
}

/* ── KPI labels ──────────────────────────────────────────────────────────── */
html[data-theme="light"] .kpi .label{color:#4a5a88;}
html[data-theme="light"] .kpi .value{color:#0b1020;}
html[data-theme="light"] .kpi .note{color:#4a5a88;}

/* ── Background canvas + content stacking ────────────────────────────────── */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
/* Ensure page content layers above the canvas.
   header already has position:sticky + z-index:10 from each page's own <style>;
   .wrap just needs position:relative to create a stacking context above z-index:0. */
.wrap{position:relative;z-index:1;}
main.page-slide-in{position:relative;z-index:1;}