/* ── Light Theme Variables ── */
/* Applied when html[data-theme="light"] */

:root[data-theme="light"] {
  --bg: #f0f2f5;
  --panel: #ffffff;
  --panel2: #f8f9fb;
  --border: #e2e6ec;
  --border2: #d0d5dd;
  --text: #1a1f2e;
  --dim: #6b7a8d;
  --sec: #4a5568;
  --blue: #2E6DB4;
  --blue-d: #1B5A8C;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #d97706;
  --cyan: #0891b2;
  --white: #1a1f2e;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', 'Barlow', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;

  /* Generator page variables */
  --bg-deep: #f0f2f5;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f0f4f8;
  --bg-inset: #f5f7fa;
  --border-lit: #c0c8d4;
  --border-card: #e2e6ec;
  --accent: #2E6DB4;
  --accent-dim: #1B5A8C;
  --accent-glow: rgba(46,109,180,.1);
  --green-glow: rgba(22,163,74,.1);
  --red-glow: rgba(220,38,38,.1);
  --amber-glow: rgba(217,119,6,.1);
  --blue-glow: rgba(46,109,180,.1);
  --amber: #d97706;
  --amber-dim: #92400e;
  --red-dim: #991b1b;
  --text-pri: #1a1f2e;
  --text-val: #0f172a;
  --text-sec: #4a5568;
  --text-dim: #94a3b8;
}

/* ── Light mode overrides ── */

/* Body background */
[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) !important;
}

/* Orbs — lighter, more subtle */
[data-theme="light"] .orb-1 { background: radial-gradient(circle, rgba(46,109,180,.06), transparent 70%) !important; }
[data-theme="light"] .orb-2 { background: radial-gradient(circle, rgba(100,60,200,.04), transparent 70%) !important; }
[data-theme="light"] .orb-3 { background: radial-gradient(circle, rgba(46,180,120,.03), transparent 70%) !important; }

/* Glass cards — light glass */
[data-theme="light"] .login-card,
[data-theme="light"] .gc,
[data-theme="light"] .card,
[data-theme="light"] .alarm-card {
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* Headers — light glass */
[data-theme="light"] #stickyTop,
[data-theme="light"] header {
  background: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* Stats bar */
[data-theme="light"] .stats {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .stat {
  background: rgba(255,255,255,.8) !important;
}

/* Tabs */
[data-theme="light"] .tab-nav {
  background: rgba(255,255,255,.8) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* Nav sidebar (admin) */
[data-theme="light"] nav {
  background: rgba(248,249,251,.9) !important;
  border-right-color: rgba(0,0,0,.06) !important;
}

/* Tables */
[data-theme="light"] .tw {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] thead {
  background: rgba(240,242,245,.8) !important;
}
[data-theme="light"] td {
  border-top-color: rgba(0,0,0,.05) !important;
}

/* Modals */
[data-theme="light"] .mbg,
[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,.3) !important;
}
[data-theme="light"] .mbox,
[data-theme="light"] .modal {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: rgba(240,242,245,.8) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #1a1f2e !important;
}
[data-theme="light"] input::placeholder {
  color: #94a3b8 !important;
}

/* Buttons */
[data-theme="light"] .btn-login,
[data-theme="light"] .btn-p,
[data-theme="light"] .modal-btn,
[data-theme="light"] .lbtn {
  box-shadow: 0 2px 8px rgba(46,109,180,.2) !important;
}

/* Connection badge */
[data-theme="light"] .conn-badge {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* Alarm items */
[data-theme="light"] .aitem {
  border-bottom-color: rgba(0,0,0,.05) !important;
}
[data-theme="light"] .aitem:hover {
  background: rgba(0,0,0,.02) !important;
}

/* Skeleton cards */
[data-theme="light"] .skeleton-card {
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .sk-line,
[data-theme="light"] .sk-badge,
[data-theme="light"] .sk-mv,
[data-theme="light"] .sk-ml,
[data-theme="light"] .sk-ft {
  background: rgba(0,0,0,.06) !important;
}

/* Intro overlay */
[data-theme="light"] #introOverlay {
  background: #f0f2f5 !important;
}

/* Scrollbars */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15) !important;
}

/* Dashboard card metrics */
[data-theme="light"] .gc-metrics {
  background: rgba(0,0,0,.02) !important;
  border-top-color: rgba(0,0,0,.05) !important;
}
[data-theme="light"] .gc-foot {
  background: rgba(0,0,0,.02) !important;
  border-top-color: rgba(0,0,0,.05) !important;
}

/* Theme selector style for light mode */
[data-theme="light"] #themeSelector,
[data-theme="light"] #langSelector {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #4a5568 !important;
}

/* Header buttons */
[data-theme="light"] .hbtn {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #4a5568 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .hbtn:hover {
  background: #f5f7fa !important;
  color: #1a1f2e !important;
}
[data-theme="light"] #logoutBtn {
  color: #dc2626 !important;
}

/* Logo text */
[data-theme="light"] .hlogo,
[data-theme="light"] .brand,
[data-theme="light"] .s-sentry,
[data-theme="light"] .ib-s {
  color: #1a1f2e !important;
}

/* Status bar icons */
[data-theme="light"] .sico {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* Filter buttons */
[data-theme="light"] .ev-filter {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #4a5568 !important;
}
[data-theme="light"] .ev-filter.active {
  background: rgba(46,109,180,.1) !important;
  border-color: rgba(46,109,180,.3) !important;
  color: #2E6DB4 !important;
}

/* Confirm modals (AUTO/START/STOP) */
[data-theme="light"] #confirmModal {
  background: rgba(0,0,0,.3) !important;
}
[data-theme="light"] .confirm-box {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}
[data-theme="light"] .confirm-body {
  color: #4a5568 !important;
}
[data-theme="light"] .confirm-body strong {
  color: #1a1f2e !important;
}
[data-theme="light"] .confirm-warn {
  background: rgba(217,119,6,.06) !important;
  border-color: rgba(217,119,6,.2) !important;
  color: #92400e !important;
}
[data-theme="light"] .confirm-cancel {
  background: #f5f7fa !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #4a5568 !important;
}

/* Export modal */
[data-theme="light"] .export-modal {
  background: rgba(0,0,0,.3) !important;
}
[data-theme="light"] .export-box {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #1a1f2e !important;
}
[data-theme="light"] .export-box h3 {
  color: #1a1f2e !important;
}
[data-theme="light"] .export-box label {
  color: #4a5568 !important;
}
[data-theme="light"] .export-box input {
  background: #f5f7fa !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #1a1f2e !important;
}

/* Mobile menu drawer */
[data-theme="light"] .menu-drawer {
  background: #ffffff !important;
  border-left-color: rgba(0,0,0,.08) !important;
}
[data-theme="light"] .menu-item {
  color: #4a5568 !important;
}
[data-theme="light"] .menu-item:hover,
[data-theme="light"] .menu-item.active {
  background: rgba(46,109,180,.06) !important;
  color: #2E6DB4 !important;
}
[data-theme="light"] .menu-drawer-header {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .menu-drawer-footer {
  color: #94a3b8 !important;
}

/* Control buttons */
[data-theme="light"] .cbtn.g {
  background: rgba(22,163,74,.08) !important;
  border-color: rgba(22,163,74,.3) !important;
  color: #16a34a !important;
}
[data-theme="light"] .cbtn.b {
  background: rgba(46,109,180,.08) !important;
  border-color: rgba(46,109,180,.3) !important;
  color: #2E6DB4 !important;
}
[data-theme="light"] .cbtn.r {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.25) !important;
  color: #dc2626 !important;
}

/* Energy rows */
[data-theme="light"] .erow {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
[data-theme="light"] .elbl {
  color: #4a5568 !important;
}
[data-theme="light"] .eval {
  color: #1a1f2e !important;
}

/* Badges */
[data-theme="light"] .cbadge {
  border-color: rgba(0,0,0,.1) !important;
}

/* Pill states */
[data-theme="light"] .prow {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
[data-theme="light"] .ptxt {
  color: #94a3b8 !important;
}
[data-theme="light"] .on .ptxt {
  color: #1a1f2e !important;
}