/* GENERATED by web/tools/gen_theme_light.py from index.html + assets/*.js and
   web/tools/theme-light.components.css: do not edit by hand.
   Light theme = html[data-theme="light"]. */

/* ---- Tailwind colour utilities in use ---- */
html[data-theme="light"] .bg-amber-950\/30 { background-color: rgb(255 251 235 / 0.6) }
html[data-theme="light"] .bg-amber-950\/40 { background-color: rgb(255 251 235 / 0.8) }
html[data-theme="light"] .bg-black { background-color: rgb(15 23 42 / 0.25) }
html[data-theme="light"] .bg-black\/20 { background-color: rgb(15 23 42 / 0.05) }
html[data-theme="light"] .bg-emerald-950\/40 { background-color: rgb(236 253 245 / 0.8) }
html[data-theme="light"] .bg-red-900\/70 { background-color: rgb(254 242 242) }
html[data-theme="light"] .bg-red-950\/40 { background-color: rgb(254 242 242 / 0.8) }
html[data-theme="light"] .bg-sky-950\/40 { background-color: rgb(240 249 255 / 0.8) }
html[data-theme="light"] .bg-slate-600\/30 { background-color: rgb(203 213 225 / 0.3) }
html[data-theme="light"] .bg-slate-800 { background-color: rgb(241 245 249) }
html[data-theme="light"] .bg-slate-800\/70 { background-color: rgb(241 245 249 / 0.7) }
html[data-theme="light"] .bg-slate-800\/80 { background-color: rgb(241 245 249 / 0.8) }
html[data-theme="light"] .bg-slate-800\/90 { background-color: rgb(241 245 249 / 0.9) }
html[data-theme="light"] .bg-slate-900 { background-color: rgb(255 255 255) }
html[data-theme="light"] .bg-slate-900\/40 { background-color: rgb(255 255 255 / 0.4) }
html[data-theme="light"] .bg-slate-900\/60 { background-color: rgb(255 255 255 / 0.6) }
html[data-theme="light"] .bg-slate-900\/80 { background-color: rgb(255 255 255 / 0.8) }
html[data-theme="light"] .bg-slate-900\/95 { background-color: rgb(255 255 255 / 0.95) }
html[data-theme="light"] .bg-slate-950 { background-color: rgb(245 247 251) }
html[data-theme="light"] .bg-slate-950\/40 { background-color: rgb(245 247 251 / 0.4) }
html[data-theme="light"] .bg-slate-950\/50 { background-color: rgb(245 247 251 / 0.5) }
html[data-theme="light"] .bg-slate-950\/60 { background-color: rgb(245 247 251 / 0.6) }
html[data-theme="light"] .bg-slate-950\/70 { background-color: rgb(245 247 251 / 0.7) }
html[data-theme="light"] .bg-white\/20 { background-color: rgb(15 23 42 / 0.12) }
html[data-theme="light"] .border-emerald-700\/60 { border-color: rgb(110 231 183 / 0.6) }
html[data-theme="light"] .border-red-700 { border-color: rgb(252 165 165) }
html[data-theme="light"] .border-sky-700\/60 { border-color: rgb(125 211 252 / 0.6) }
html[data-theme="light"] .border-slate-500\/80 { border-color: rgb(148 163 184 / 0.8) }
html[data-theme="light"] .border-slate-600 { border-color: rgb(203 213 225) }
html[data-theme="light"] .border-slate-600\/70 { border-color: rgb(203 213 225 / 0.7) }
html[data-theme="light"] .border-slate-700 { border-color: rgb(226 232 240) }
html[data-theme="light"] .border-slate-700\/60 { border-color: rgb(226 232 240 / 0.6) }
html[data-theme="light"] .border-slate-700\/70 { border-color: rgb(226 232 240 / 0.7) }
html[data-theme="light"] .border-slate-800 { border-color: rgb(226 232 240) }
html[data-theme="light"] .border-slate-800\/40 { border-color: rgb(226 232 240 / 0.6) }
html[data-theme="light"] .border-slate-800\/50 { border-color: rgb(226 232 240 / 0.6) }
html[data-theme="light"] .border-slate-800\/60 { border-color: rgb(226 232 240 / 0.6) }
html[data-theme="light"] .border-slate-800\/70 { border-color: rgb(226 232 240 / 0.7) }
html[data-theme="light"] .border-slate-900\/40 { border-color: rgb(226 232 240 / 0.6) }
html[data-theme="light"] .focus\:bg-slate-900:focus { background-color: rgb(255 255 255) }
html[data-theme="light"] .hover\:bg-black:hover { background-color: rgb(15 23 42 / 0.25) }
html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: rgb(226 232 240) }
html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: rgb(241 245 249) }
html[data-theme="light"] .hover\:bg-slate-800\/30:hover { background-color: rgb(241 245 249 / 0.3) }
html[data-theme="light"] .hover\:bg-slate-800\/40:hover { background-color: rgb(241 245 249 / 0.4) }
html[data-theme="light"] .hover\:bg-slate-800\/50:hover { background-color: rgb(241 245 249 / 0.5) }
html[data-theme="light"] .hover\:bg-slate-800\/60:hover { background-color: rgb(241 245 249 / 0.6) }
html[data-theme="light"] .hover\:bg-slate-900\/60:hover { background-color: rgb(255 255 255 / 0.6) }
html[data-theme="light"] .hover\:bg-white\/30:hover { background-color: rgb(15 23 42 / 0.18) }
html[data-theme="light"] .hover\:text-amber-200:hover { color: rgb(146 64 14) }
html[data-theme="light"] .hover\:text-amber-300:hover { color: rgb(146 64 14) }
html[data-theme="light"] .hover\:text-amber-400:hover { color: rgb(146 64 14) }
html[data-theme="light"] .hover\:text-blue-200:hover { color: rgb(29 78 216) }
html[data-theme="light"] .hover\:text-blue-300:hover { color: rgb(29 78 216) }
html[data-theme="light"] .hover\:text-red-300:hover { color: rgb(185 28 28) }
html[data-theme="light"] .hover\:text-red-500:hover { color: rgb(220 38 38) }
html[data-theme="light"] .hover\:text-sky-300:hover { color: rgb(3 105 161) }
html[data-theme="light"] .hover\:text-slate-100:hover { color: rgb(15 23 42) }
html[data-theme="light"] .hover\:text-slate-200:hover { color: rgb(30 41 59) }
html[data-theme="light"] .hover\:text-slate-300:hover { color: rgb(51 65 85) }
html[data-theme="light"] .ring-white\/10 { --tw-ring-color: rgb(15 23 42 / 0.08) }
html[data-theme="light"] .shadow-black\/30 { --tw-shadow-color: rgb(15 23 42 / 0.09); --tw-shadow: var(--tw-shadow-colored) }
html[data-theme="light"] .shadow-black\/50 { --tw-shadow-color: rgb(15 23 42 / 0.12); --tw-shadow: var(--tw-shadow-colored) }
html[data-theme="light"] .text-amber-200 { color: rgb(146 64 14) }
html[data-theme="light"] .text-amber-200\/80 { color: rgb(146 64 14 / 0.85) }
html[data-theme="light"] .text-amber-300 { color: rgb(146 64 14) }
html[data-theme="light"] .text-amber-300\/70 { color: rgb(146 64 14 / 0.85) }
html[data-theme="light"] .text-amber-300\/80 { color: rgb(146 64 14 / 0.85) }
html[data-theme="light"] .text-amber-400 { color: rgb(146 64 14) }
html[data-theme="light"] .text-amber-400\/90 { color: rgb(146 64 14 / 0.9) }
html[data-theme="light"] .text-blue-200 { color: rgb(29 78 216) }
html[data-theme="light"] .text-blue-300 { color: rgb(29 78 216) }
html[data-theme="light"] .text-blue-300\/70 { color: rgb(29 78 216 / 0.85) }
html[data-theme="light"] .text-blue-300\/80 { color: rgb(29 78 216 / 0.85) }
html[data-theme="light"] .text-blue-400 { color: rgb(29 78 216) }
html[data-theme="light"] .text-cyan-100 { color: rgb(14 116 144) }
html[data-theme="light"] .text-cyan-300\/80 { color: rgb(14 116 144 / 0.85) }
html[data-theme="light"] .text-emerald-300 { color: rgb(4 120 87) }
html[data-theme="light"] .text-emerald-300\/80 { color: rgb(4 120 87 / 0.85) }
html[data-theme="light"] .text-emerald-300\/90 { color: rgb(4 120 87 / 0.9) }
html[data-theme="light"] .text-emerald-400 { color: rgb(4 120 87) }
html[data-theme="light"] .text-emerald-400\/80 { color: rgb(4 120 87 / 0.85) }
html[data-theme="light"] .text-emerald-500 { color: rgb(5 150 105) }
html[data-theme="light"] .text-purple-300 { color: rgb(126 34 206) }
html[data-theme="light"] .text-red-200 { color: rgb(185 28 28) }
html[data-theme="light"] .text-red-300 { color: rgb(185 28 28) }
html[data-theme="light"] .text-red-300\/80 { color: rgb(185 28 28 / 0.85) }
html[data-theme="light"] .text-red-400 { color: rgb(185 28 28) }
html[data-theme="light"] .text-red-400\/70 { color: rgb(185 28 28 / 0.85) }
html[data-theme="light"] .text-rose-300\/80 { color: rgb(190 18 60 / 0.85) }
html[data-theme="light"] .text-rose-300\/90 { color: rgb(190 18 60 / 0.9) }
html[data-theme="light"] .text-sky-300 { color: rgb(3 105 161) }
html[data-theme="light"] .text-slate-100 { color: rgb(15 23 42) }
html[data-theme="light"] .text-slate-200 { color: rgb(30 41 59) }
html[data-theme="light"] .text-slate-300 { color: rgb(51 65 85) }
html[data-theme="light"] .text-slate-400 { color: rgb(71 85 105) }
html[data-theme="light"] .text-slate-500 { color: rgb(100 116 139) }
html[data-theme="light"] .text-slate-600 { color: rgb(148 163 184) }
html[data-theme="light"] .text-violet-300 { color: rgb(109 40 217) }
html[data-theme="light"] .text-white:not([class*="bg-"]) { color: rgb(15 23 42) }
html[data-theme="light"] .from-slate-950 { --tw-gradient-from: rgb(245 247 251) var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 247 251 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }
html[data-theme="light"] .via-slate-950 { --tw-gradient-to: rgb(245 247 251 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(245 247 251) var(--tw-gradient-via-position), var(--tw-gradient-to) }
html[data-theme="light"] .to-black { --tw-gradient-to: rgb(238 242 247) var(--tw-gradient-to-position) }

/* ---- components (web/tools/theme-light.components.css) ---- */
/* Light-theme overrides for the hand-written component CSS (index.html <style>,
   the telemetry widget, assets/ipam.js) whose colours are not Tailwind classes.
   Appended to /assets/theme-light.css by gen_theme_light.py. */
html[data-theme="light"] :is(input, select, textarea):is(.ui-control, .bg-slate-950, .bg-slate-900) { background-color: #ffffff; }
html[data-theme="light"] :is(input, select, textarea)::placeholder { color: #94a3b8; }
html[data-theme="light"] .btn-base[data-btn-variant="primary"] { color: #ffffff; }
html[data-theme="light"] .btn-base[data-btn-state="loading"]::before { border-color: rgba(15, 23, 42, .2); border-top-color: rgba(15, 23, 42, .7); }
html[data-theme="light"] .btn-base[data-btn-variant="primary"][data-btn-state="loading"]::before { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
html[data-theme="light"] .brand-byline { background-image: linear-gradient(90deg, var(--acc), rgba(37, 99, 235, 0)); }
html[data-theme="light"] #themeToggle .tt-knob { border-color: rgba(37, 99, 235, .35); }
html[data-theme="light"] .tab-btn.active { border-color: rgba(37, 99, 235, .25); }

/* inline-styled panels (firmware panel, batch table) */
html[data-theme="light"] [style*="background:rgba(15,23,42,"] { background: #f8fafc !important; }

/* toasts */
html[data-theme="light"] .toast { box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
html[data-theme="light"] .toast-info { background: #eff6ff; border-color: rgba(37, 99, 235, .3); color: #1e3a8a; }
html[data-theme="light"] .toast-warn { background: #fffbeb; border-color: rgba(217, 119, 6, .35); color: #78350f; }
html[data-theme="light"] .toast-error { background: #fef2f2; border-color: rgba(220, 38, 38, .3); color: #7f1d1d; }
html[data-theme="light"] .toast-success { background: #ecfdf5; border-color: rgba(5, 150, 105, .3); color: #064e3b; }

/* deploy status lights */
html[data-theme="light"] .status-ready { color: #334155; border-color: rgba(100, 116, 139, .35); background: rgba(100, 116, 139, .08); }
html[data-theme="light"] .status-ready::before { background: #94a3b8; }
html[data-theme="light"] :is(.status-acquiring, .status-upgrading, .status-reboot, .status-upgrade-warn) { color: #92400e; border-color: rgba(217, 119, 6, .45); background: rgba(245, 158, 11, .10); }
html[data-theme="light"] :is(.status-downloading, .status-blue, .status-blue-pulse) { color: #075985; border-color: rgba(2, 132, 199, .40); background: rgba(14, 165, 233, .08); }
html[data-theme="light"] .status-validating { color: #5b21b6; border-color: rgba(124, 58, 237, .35); background: rgba(139, 92, 246, .08); }
html[data-theme="light"] :is(.status-deployed, .status-verified, .status-saved) { color: #065f46; border-color: rgba(5, 150, 105, .45); background: rgba(16, 185, 129, .10); }
html[data-theme="light"] .status-error { color: #991b1b; border-color: rgba(220, 38, 38, .40); background: rgba(239, 68, 68, .08); }

/* deploy timeline */
html[data-theme="light"] .deploy-timeline li { color: #475569; }
html[data-theme="light"] .deploy-timeline li.done { color: #047857; }
html[data-theme="light"] .deploy-timeline li.active { color: #0369a1; }
html[data-theme="light"] .deploy-timeline li.error { color: #b91c1c; }
html[data-theme="light"] .deploy-timeline li.warn { color: #92400e; }
html[data-theme="light"] .deploy-timeline .tl-ts { color: #64748b; }

/* subnet helper bubble, VLAN multi-select */
html[data-theme="light"] .subnet-helper-bubble { background: #ffffff; border-color: rgba(15, 23, 42, .14); color: #0f172a; box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
html[data-theme="light"] .subnet-helper-bubble-title { color: #0369a1; }
html[data-theme="light"] :is(.subnet-helper-bubble p, .subnet-helper-bubble ol) { color: #334155; }
html[data-theme="light"] .subnet-helper-bubble a { color: #0369a1; }
html[data-theme="light"] .vlan-multi > summary { background: #ffffff; border-color: #cbd5e1; }
html[data-theme="light"] .vlan-multi-panel { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
html[data-theme="light"] .vlan-multi-row:hover { background: #f1f5f9; }

/* banners: still loud, readable on white */
html[data-theme="light"] .stack-banner { background: #fef2f2; color: #7f1d1d; }
html[data-theme="light"] .stack-banner b { color: #450a0a; }
html[data-theme="light"] .cable-banner.cable-ok { background: #ecfdf5; border-color: rgba(16, 185, 129, .5); color: #065f46; }
html[data-theme="light"] .segment-title { color: var(--acc); text-shadow: none; }
html[data-theme="light"] .ui-title-glow { text-shadow: none; }

/* busy overlay */
html[data-theme="light"] .app-busy-overlay { background: #ffffff; border-color: rgba(15, 23, 42, .14); box-shadow: 0 16px 34px rgba(15, 23, 42, .16); }
html[data-theme="light"] .app-busy-spinner { border-color: rgba(37, 99, 235, .25); border-top-color: #2563eb; }
html[data-theme="light"] .app-busy-bar { background: rgba(15, 23, 42, .08); }

/* telemetry + transport-health widget (top right) */
html[data-theme="light"] #tw-pill, html[data-theme="light"] #th-pill { background: rgba(255, 255, 255, .92); border-color: rgba(15, 23, 42, .14); box-shadow: 0 4px 16px rgba(15, 23, 42, .08); }
html[data-theme="light"] #tw-pill:hover { background: #ffffff; border-color: rgba(15, 23, 42, .25); }
html[data-theme="light"] #tw-pill.tw-alarm, html[data-theme="light"] #th-pill.th-alarm { background: #dc2626; border-color: #ef4444; }
html[data-theme="light"] .tw-label { color: #475569; }
html[data-theme="light"] #tw-panel, html[data-theme="light"] #th-panel { background: #ffffff; border-color: rgba(15, 23, 42, .12); box-shadow: 0 12px 40px rgba(15, 23, 42, .16); color: #0f172a; }
html[data-theme="light"] .tw-row-label { color: #475569; }
html[data-theme="light"] .tw-header { color: #64748b; }
html[data-theme="light"] :is(.tw-sub, .tw-ts) { color: #64748b; }
html[data-theme="light"] .tw-ts.stale { color: #b45309; }
html[data-theme="light"] .tw-divider { background: rgba(15, 23, 42, .08); }
html[data-theme="light"] .tw-bar { background: rgba(15, 23, 42, .08); }
html[data-theme="light"] .tw-row-value.up { color: #059669; }
html[data-theme="light"] .tw-row-value.down { color: #dc2626; }
html[data-theme="light"] .tw-row-value.amber { color: #b45309; }
html[data-theme="light"] #th-panel .tw-row-label, html[data-theme="light"] #th-panel .th-val, html[data-theme="light"] #th-panel .tw-header { color: #0f172a; }
html[data-theme="light"] #th-panel .tw-sub { color: #334155; }
html[data-theme="light"] .th-grid th { color: #334155; background: #ffffff; }
html[data-theme="light"] .th-grid td { color: #0f172a; border-top-color: rgba(15, 23, 42, .08); }
html[data-theme="light"] .th-grid tr.th-down td, html[data-theme="light"] .th-grid tr.na td { color: #64748b; }
html[data-theme="light"] .th-grid tr.red td { background: rgba(239, 68, 68, .10); }
html[data-theme="light"] .th-alert { color: #b91c1c; }
html[data-theme="light"] .tw-toggle { border-color: rgba(15, 23, 42, .2); color: #475569; }

/* IPAM combo dropdown, column menu, inline editor, group rows (assets/ipam.js) */
html[data-theme="light"] :is(.ipam-dd, .ipam-menu) { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
html[data-theme="light"] .ipam-dd-item { color: #0f172a; }
html[data-theme="light"] .ipam-dd-item[data-muted="1"] { color: #94a3b8; }
html[data-theme="light"] :is(.ipam-dd-item[aria-selected="true"], .ipam-dd-item:hover) { background: rgba(37, 99, 235, .10); }
html[data-theme="light"] :is(.ipam-menu label, .ipam-menu button) { color: #334155; }
html[data-theme="light"] td.ipam-editing input { background: #ffffff; color: #0f172a; }
html[data-theme="light"] tr.ipam-group td { background: #f1f5f9; color: #334155; }
html[data-theme="light"] tr.ipam-selected td { background: rgba(37, 99, 235, .08); }

/* phase 2 variant classes on .btn-base: they beat the primary colour pin above */
html[data-theme="light"] .btn-base.def[data-btn-variant], html[data-theme="light"] .btn-base.def { color: var(--text); }
html[data-theme="light"] .btn-base.pri[data-btn-variant], html[data-theme="light"] .btn-base.pri { color: #ffffff; }
html[data-theme="light"] .btn-base.good[data-btn-variant], html[data-theme="light"] .btn-base.good { color: var(--ok-ink); }
html[data-theme="light"] .btn-base.danger[data-btn-variant], html[data-theme="light"] .btn-base.danger { color: var(--bad-ink); }
html[data-theme="light"] .btn-base.ghost[data-btn-variant]:not(.danger), html[data-theme="light"] .btn-base.ghost:not(.danger) { color: var(--mut); }

/* Who's online, docked in the status pill row */
html[data-theme="light"] #presenceCard.docked #presenceToggle { background: rgba(255, 255, 255, .92); border-color: rgba(15, 23, 42, .14); box-shadow: 0 4px 16px rgba(15, 23, 42, .08); }
html[data-theme="light"] #presenceCard.docked #presenceToggle:hover { background: #ffffff; border-color: rgba(15, 23, 42, .25); }
html[data-theme="light"] #presenceCard.docked #presenceBody { background: #ffffff; border-color: rgba(15, 23, 42, .12); box-shadow: 0 12px 40px rgba(15, 23, 42, .16); }