/* ── ATP Portal — Base variables & theme ─────────────────────── */

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html,
    body {
      height: 100%
    }

    :root {
      --bg0: #0e0e10;
      --bg1: #17171a;
      --bg2: #1f1f23;
      --bg3: #28282e;
      --border: #2e2e35;
      --text1: #f0f0f2;
      --text2: #9494a0;
      --text3: #5c5c6a;
      --blue: #378ADD;
      --blue-dim: #185FA5;
      --teal: #1D9E75;
      --amber: #EF9F27;
      --red: #E24B4A;
      --purple: #7F77DD;
      --shadow: 0 8px 24px rgba(0, 0, 0, .25)
    }

    html[data-theme="light"] {
      --bg0: #eef0f4;
      --bg1: #ffffff;
      --bg2: #f2f3f7;
      --bg3: #e5e6ed;
      --border: #d0d2dc;
      --text1: #111118;
      --text2: #4a4a5a;
      --text3: #888898;
      --shadow: 0 8px 24px rgba(0, 0, 0, .10)
    }

    html[data-theme="light"] .badge-live    { background: #d0f0e4; color: #1a8c65 }
    html[data-theme="light"] .badge-closed  { background: #e5e5ec; color: #6a6a7a }
    html[data-theme="light"] .badge-archived{ background: #e5e5ec; color: #6a6a7a }
    html[data-theme="light"] .badge-pending { background: #fdf0d5; color: #b07010 }
    html[data-theme="light"] .badge-imported{ background: #eaeaf8; color: #5f57bb }
    html[data-theme="light"] .chip-import   { background: rgba(127,119,221,.10) }
    html[data-theme="light"] .pace-ok       { background: rgba(29,158,117,.12); color: #1a8c65 }
    html[data-theme="light"] .pace-warn     { background: rgba(239,159,39,.12);  color: #b07010 }
    html[data-theme="light"] .pace-crit     { background: rgba(226,75,74,.12);   color: #c03030 }
    html[data-theme="light"] .pill.good     { background: rgba(29,158,117,.12);  color: #1a8c65 }
    html[data-theme="light"] .pill.warning  { background: rgba(239,159,39,.12);  color: #b07010 }
    html[data-theme="light"] .pill.critical { background: rgba(226,75,74,.12);   color: #c03030 }
    html[data-theme="light"] .pill.info     { background: rgba(55,138,221,.12);  color: #1a5fa0 }
    html[data-theme="light"] .modal-backdrop{ background: rgba(0,0,0,.45) }
    html[data-theme="light"] .admin-overlay { background: rgba(0,0,0,.35) }
    html[data-theme="light"] .admin-table tr:hover td { background: var(--bg2) }
    html[data-theme="light"] .action-btn.primary { color: #fff }
    html[data-theme="light"] .admin-btn.primary   { color: #fff }

    /* theme toggle switch */
    .theme-switch {
      width: 100px;
      height: 38px;
      border-radius: 999px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      user-select: none;
      background: #212126;
      border: 1px solid #38383f;
      box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
      transition: background .3s, border-color .3s, box-shadow .3s
    }
    .theme-switch-label {
      position: absolute;
      right: 14px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .7px;
      text-transform: uppercase;
      line-height: 1.4;
      color: var(--text3);
      text-align: center;
      pointer-events: none;
      transition: color .3s
    }
    .theme-switch-knob {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      position: absolute;
      top: 3px;
      left: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 1;
      background: #3c3c48;
      box-shadow: 0 2px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3);
      pointer-events: none;
      transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s, box-shadow .3s
    }
    /* light mode state — knob slides right, label moves left */
    html[data-theme="light"] .theme-switch {
      background: #dcdde5;
      border-color: #c4c5d0;
      box-shadow: inset 0 2px 4px rgba(0,0,0,.08), 0 1px 3px rgba(255,255,255,.85)
    }
    html[data-theme="light"] .theme-switch-label { right: auto; left: 14px }
    html[data-theme="light"] .theme-switch-knob {
      transform: translateX(62px);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1)
    }