/* Ventulytics Pro — base components + dark theme.
   Dark mode: <html class="dark">, set before paint by public/js/theme.js. */

[x-cloak] { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }
html { background: #f8fafc; color-scheme: light; }
body { background: #f8fafc; }

.input { width: 100%; border-radius: .5rem; border: 1px solid rgb(203 213 225); padding: .45rem .7rem; font-size: .875rem; background: #fff; color: rgb(30 41 59); }
.input:focus { outline: none; border-color: rgb(79 70 229); box-shadow: 0 0 0 3px rgb(79 70 229 / .15); }
.btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: .5rem; padding: .45rem .85rem; font-size: .875rem; font-weight: 500; line-height: 1.25rem; transition: background .15s; white-space: nowrap; }
.btn-primary { background: rgb(15 23 42); color: #fff; } .btn-primary:hover { background: rgb(30 41 59); }
.btn-accent { background: rgb(79 70 229); color: #fff; } .btn-accent:hover { background: rgb(67 56 202); }
.btn-secondary { background: #fff; color: rgb(51 65 85); border: 1px solid rgb(203 213 225); } .btn-secondary:hover { background: rgb(248 250 252); }
.btn-danger { background: #fff; color: rgb(190 18 60); border: 1px solid rgb(254 205 211); } .btn-danger:hover { background: rgb(255 241 242); }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
table.data { width: 100%; font-size: .85rem; }
table.data th { font-weight: 500; color: rgb(100 116 139); text-align: left; padding: .55rem .75rem; border-bottom: 1px solid rgb(226 232 240); white-space: nowrap; background: rgb(248 250 252); }
table.data td { padding: .55rem .75rem; border-bottom: 1px solid rgb(241 245 249); vertical-align: top; }
table.data tr:hover td { background: rgb(248 250 252); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav-link { display: flex; align-items: center; gap: .6rem; padding: .4rem .75rem; border-radius: .5rem; font-size: .85rem; color: rgb(203 213 225); }
.nav-link:hover { background: rgb(30 41 59); color: #fff; }
.nav-link.active { background: rgb(51 65 85); color: #fff; }
.nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgb(100 116 139); padding: .9rem .75rem .3rem; }

/* ---------------- Dark theme ---------------- */
html.dark { background: #020617; color-scheme: dark; }
html.dark body { background: #020617; color: rgb(203 213 225); }

/* surfaces */
html.dark .bg-white { background-color: #0f172a !important; }
html.dark .bg-white\/90 { background-color: rgb(15 23 42 / .9) !important; }
html.dark .bg-slate-50, html.dark .bg-slate-50\/50 { background-color: #0b1220 !important; }
html.dark .bg-slate-100, html.dark .bg-slate-200 { background-color: #1e293b !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; }

/* text */
html.dark .text-slate-900 { color: rgb(241 245 249) !important; }
html.dark .text-slate-800 { color: rgb(226 232 240) !important; }
html.dark .text-slate-700 { color: rgb(203 213 225) !important; }
html.dark .text-slate-600 { color: rgb(148 163 184) !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: rgb(100 116 139) !important; }
html.dark .hover\:text-slate-900:hover, html.dark .hover\:text-slate-800:hover { color: #fff !important; }

/* borders & rings */
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300, html.dark .border-slate-50 { border-color: rgb(30 41 59) !important; }
html.dark .hover\:border-slate-300:hover, html.dark .hover\:border-slate-400:hover { border-color: rgb(71 85 105) !important; }
html.dark .ring-slate-200 { --tw-ring-color: rgb(30 41 59) !important; }
html.dark .divide-slate-100 > * + * { border-color: rgb(30 41 59) !important; }

/* tinted panels (alerts, badges, insights) */
html.dark .bg-emerald-50 { background-color: rgb(6 78 59 / .35) !important; }
html.dark .bg-rose-50 { background-color: rgb(136 19 55 / .3) !important; }
html.dark .bg-amber-50 { background-color: rgb(120 53 15 / .3) !important; }
html.dark .bg-sky-50 { background-color: rgb(12 74 110 / .35) !important; }
html.dark .bg-indigo-50, html.dark .bg-indigo-50\/40, html.dark .bg-indigo-50\/50 { background-color: rgb(49 46 129 / .35) !important; }
html.dark .bg-violet-50 { background-color: rgb(76 29 149 / .35) !important; }
html.dark .bg-emerald-50\/40 { background-color: rgb(6 78 59 / .25) !important; }
html.dark .border-emerald-200, html.dark .ring-emerald-200 { border-color: rgb(6 95 70) !important; --tw-ring-color: rgb(6 95 70) !important; }
html.dark .border-rose-200, html.dark .ring-rose-200 { border-color: rgb(159 18 57) !important; --tw-ring-color: rgb(159 18 57) !important; }
html.dark .border-amber-200, html.dark .border-amber-300, html.dark .ring-amber-200 { border-color: rgb(146 64 14) !important; --tw-ring-color: rgb(146 64 14) !important; }
html.dark .border-indigo-200, html.dark .ring-indigo-200, html.dark .ring-sky-200, html.dark .ring-violet-200 { border-color: rgb(67 56 202) !important; --tw-ring-color: rgb(55 48 163) !important; }
html.dark .border-emerald-300 { border-color: rgb(4 120 87) !important; }
html.dark .text-emerald-900, html.dark .text-emerald-800, html.dark .text-emerald-700 { color: rgb(110 231 183) !important; }
html.dark .text-emerald-600 { color: rgb(52 211 153) !important; }
html.dark .text-rose-900, html.dark .text-rose-800, html.dark .text-rose-700 { color: rgb(253 164 175) !important; }
html.dark .text-rose-600 { color: rgb(251 113 133) !important; }
html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700 { color: rgb(252 211 77) !important; }
html.dark .text-amber-600 { color: rgb(251 191 36) !important; }
html.dark .text-indigo-900, html.dark .text-indigo-700 { color: rgb(165 180 252) !important; }
html.dark .text-indigo-900\/80 { color: rgb(165 180 252 / .85) !important; }
html.dark .text-sky-700 { color: rgb(125 211 252) !important; }
html.dark .text-violet-700 { color: rgb(196 181 253) !important; }

/* components */
html.dark .input { background: #0b1220; border-color: rgb(51 65 85); color: rgb(226 232 240); }
html.dark .input::placeholder { color: rgb(100 116 139); }
html.dark .btn-primary { background: rgb(226 232 240); color: rgb(15 23 42); }
html.dark .btn-primary:hover { background: #fff; }
html.dark .btn-secondary { background: #0f172a; color: rgb(203 213 225); border-color: rgb(51 65 85); }
html.dark .btn-secondary:hover { background: #1e293b; }
html.dark .btn-danger { background: #0f172a; color: rgb(251 113 133); border-color: rgb(136 19 55); }
html.dark .btn-danger:hover { background: rgb(136 19 55 / .3); }
html.dark table.data th { background: #0b1220; color: rgb(148 163 184); border-color: rgb(30 41 59); }
html.dark table.data td { border-color: rgb(30 41 59); }
html.dark table.data tr:hover td { background: #111a2e; }
html.dark select option { background: #0f172a; }
html.dark nav[role="navigation"] a, html.dark nav[role="navigation"] span { background-color: #0f172a !important; border-color: rgb(51 65 85) !important; color: rgb(203 213 225) !important; }
html.dark code { background: #0b1220 !important; }

/* theme switcher */
.theme-switch button { padding: .3rem .55rem; border-radius: .4rem; font-size: .75rem; color: rgb(100 116 139); }
.theme-switch button.on { background: #fff; color: rgb(15 23 42); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
html.dark .theme-switch { background: #1e293b !important; }
html.dark .theme-switch button.on { background: #334155; color: #fff; }