/* ==========================================================================
   RCC SENTINEL - GLOBAL THEME & CUSTOM CSS
   Supports Seamless Light Mode & Dark Mode with Smooth Transitions
   ========================================================================== */

:root, html[data-theme="dark"], html.dark-mode {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'JetBrains Mono', ui-monospace, monospace;
    --bg-canvas: #020617;
    --bg-surface: #0f172a;
    --bg-surface-alt: #0a0f1d;
    --bg-glass: rgba(15, 23, 42, 0.75);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-card: rgba(255, 255, 255, 0.1);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent-purple: #a78bfa;
    --accent-cyan: #22d3ee;
    --accent-emerald: #34d399;
    --accent-amber: #fbbf24;
    --accent-rose: #fb7185;
    --input-bg: #090d14;
    --input-border: rgba(255, 255, 255, 0.12);
    --input-text: #f8fafc;
    --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    --dial-track: #1e293b;
    --table-stripe: rgba(255, 255, 255, 0.015);
    --table-hover: rgba(255, 255, 255, 0.04);
    --scrollbar-track: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
}

html[data-theme="light"], html.light-mode {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-code: 'JetBrains Mono', ui-monospace, monospace;
    --bg-canvas: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f1f5f9;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-card: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --accent-purple: #6366f1;
    --accent-cyan: #0284c7;
    --accent-emerald: #059669;
    --accent-amber: #d97706;
    --accent-rose: #e11d48;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-text: #0f172a;
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
    --dial-track: #e2e8f0;
    --table-stripe: #f8fafc;
    --table-hover: #f1f5f9;
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(15, 23, 42, 0.18);
}

body {
    font-family: var(--font-main);
    letter-spacing: -0.011em;
    background: radial-gradient(circle at top right, var(--bg-surface), var(--bg-canvas));
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Enterprise SaaS Typography & Solid Color System --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: var(--font-main);
    letter-spacing: -0.025em;
    font-weight: 700;
}

p, span, li, label {
    font-family: var(--font-main);
}

/* Eliminate all low-contrast or rainbow gradient text */
.text-transparent,
[class*="bg-clip-text"],
[class*="text-transparent"] {
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    color: var(--text-primary) !important;
}

code, pre, kbd, samp, .font-mono, [class*="font-mono"] {
    font-family: var(--font-code) !important;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   GLOBAL 12PX MAXIMUM CORNER RADIUS RULE (ACROSS ALL PAGES & DASHBOARD)
   ========================================================================== */
/* All Cards, Panels, Modals, Frames, Containers, Tables, Dropdowns */
.glass,
.soc-card,
.card,
.gf-card,
.price-card,
.step-card,
.trust-card,
.cta-box,
.cta-bar,
.feature-card,
.feature-row-img,
.block-img,
.mockup-wrapper,
.mockup-frame,
.console-mockup,
.cli-box,
.terminal-box,
.email-preview,
.email-mockup,
.info-box,
.code-block,
.otp,
.highlight-box,
header,
header.glass,
header.p-4,
.modal-content,
.console-modal,
.fixed.inset-0 > div,
#notification-dropdown,
#server-dropdown-menu,
#live-ticker-inner,
#sub-tabs-container,
#vps-controls-panel,
#top-utility-bar,
#utility-bar,
div.rounded-3xl,
div.rounded-2xl,
div.rounded-xl,
[class*="rounded-3xl"],
[class*="rounded-2xl"],
[class*="rounded-xl"] {
    border-radius: 12px !important;
}

/* All Buttons, Links styled as Buttons, Theme Toggles, Tabs */
button,
a.btn,
.btn,
.btn-primary,
.btn-outline,
.btn-cyan,
.btn-lg,
.btn-full,
.btn-ghost,
.btn-copy,
.theme-toggle-btn,
.mobile-toggle-btn,
.tab-btn,
.sub-tab-btn,
.diag-tab-btn,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
.mobile-menu-actions .btn {
    border-radius: 10px !important;
}

/* All Form Controls */
input,
select,
textarea {
    border-radius: 10px !important;
}

/* Sub-elements, action pills, tags & badges capped at 8px (<= 12px) */
.badge,
.free-badge,
.popular-tag,
.feature-tag,
.doc-version,
.release-tag,
.c-badge,
.b-get, .b-post, .b-del,
table button,
span[class*="rounded-full"] {
    border-radius: 8px !important;
}

/* Preserve circular shape for status indicator dots & round avatar logos only */
.w-2\.5.h-2\.5.rounded-full,
.h-2\.5.w-2\.5.rounded-full,
.w-3.h-3.rounded-full,
.h-3.w-3.rounded-full,
.w-2.h-2.rounded-full,
.h-2.w-2.rounded-full,
.w-1\.5.h-1\.5.rounded-full,
.h-1\.5.w-1\.5.rounded-full,
.badge-dot,
.dot,
.live-indicator,
.logo img,
img.rounded-full,
#live-indicator-dot,
#live-indicator-ping,
.check,
.cross,
.step-number,
.step-num {
    border-radius: 50% !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); }

/* ==========================================================================
   LIGHT MODE EYE-CATCHING COMPREHENSIVE THEME SYSTEM (CRYSTAL CLEAR CONTRAST)
   ========================================================================== */
html.light-mode body {
    background-color: #f1f5f9 !important;
    background: radial-gradient(circle at 85% 15%, #e2e8f0 0%, #f1f5f9 100%) !important;
    color: #0f172a !important;
}

/* Card Elevation, Crisp Borders & Deep Visual Clarity */
html.light-mode [class*="bg-slate-900"],
html.light-mode [class*="bg-slate-950"],
html.light-mode [class*="bg-slate-800"],
html.light-mode [class*="bg-gray-900"],
html.light-mode [class*="bg-gray-950"],
html.light-mode [class*="bg-gray-800"],
html.light-mode [class*="bg-[#0e1626]"],
html.light-mode [class*="bg-[#0f172a]"],
html.light-mode [class*="bg-[#090d14]"],
html.light-mode [class*="bg-[#070a12]"],
html.light-mode .soc-card,
html.light-mode .glass,
html.light-mode .card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

/* Elevated Hover Depth */
html.light-mode div.rounded-xl:hover,
html.light-mode div.rounded-2xl:hover,
html.light-mode .soc-card:hover,
html.light-mode .card:hover {
    border-color: #cbd5e1 !important;
}

/* Nested secondary stat tiles / inner pills / headers */
html.light-mode [class*="bg-slate-950/40"],
html.light-mode [class*="bg-slate-950/60"],
html.light-mode [class*="bg-slate-950/70"],
html.light-mode [class*="bg-slate-950/80"],
html.light-mode [class*="bg-slate-900/50"],
html.light-mode [class*="bg-slate-900/40"],
html.light-mode [class*="bg-slate-900/60"],
html.light-mode [class*="bg-slate-900/80"],
html.light-mode [class*="bg-white/2"],
html.light-mode [class*="bg-white/5"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Border overrides */
html.light-mode [class*="border-slate-800"],
html.light-mode [class*="border-slate-700"],
html.light-mode [class*="border-white/5"],
html.light-mode [class*="border-white/10"],
html.light-mode [class*="border-white/15"],
html.light-mode [class*="border-white/20"] {
    border-color: #e2e8f0 !important;
}

/* --- Top Utility Bar & Alert Ticker --- */
html.light-mode #utility-bar #live-ticker-inner {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html.light-mode #utility-bar #live-ticker-inner .bg-sky-500\/10 {
    background-color: #0284c7 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}
html.light-mode #utility-bar #live-ticker-text {
    color: #1e293b !important;
    font-weight: 600 !important;
}
html.light-mode #notification-bell-container button {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #d97706 !important;
}
html.light-mode #notification-bell-container button:hover {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}
html.light-mode #utility-bar button[onclick="openNotificationModal()"] {
    background-color: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    font-weight: 800 !important;
}
html.light-mode #utility-bar button[onclick="openNotificationModal()"]:hover {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}
html.light-mode #utility-bar button[onclick="logout()"] {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #e11d48 !important;
    font-weight: 800 !important;
}
html.light-mode #utility-bar button[onclick="logout()"]:hover {
    background-color: #e11d48 !important;
    color: #ffffff !important;
}
html.light-mode #notification-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}
html.light-mode #notification-dropdown > div:first-child {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* --- Target Node & Last Sync --- */
html.light-mode header .bg-slate-900\/50 {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html.light-mode #server-dropdown-selected {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}
html.light-mode #server-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important;
}
html.light-mode #server-dropdown-menu .sticky {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html.light-mode #server-search-input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode .server-item {
    color: #334155 !important;
    border-bottom-color: #f1f5f9 !important;
}
html.light-mode .server-item:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
html.light-mode button[onclick="openAddVpsModal()"] {
    background-color: #059669 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}
html.light-mode button[onclick="openAddVpsModal()"]:hover {
    background-color: #047857 !important;
}
html.light-mode #last-update,
html.light-mode #last-update-mobile {
    color: #059669 !important;
    font-weight: 800 !important;
    font-family: var(--font-code) !important;
}

/* --- Main Navigation Tabs --- */
html.light-mode #btn-tab-vps.border-indigo-500,
html.light-mode #btn-tab-admin.border-indigo-500 {
    color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    font-weight: 800 !important;
}
html.light-mode #btn-tab-vps:not(.border-indigo-500),
html.light-mode #btn-tab-admin:not(.border-indigo-500) {
    color: #64748b !important;
    font-weight: 700 !important;
}

/* --- Sub-tabs Pill Navigation Bar --- */
html.light-mode #sub-tabs-container {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 4px !important;
    border-radius: 12px !important;
}
html.light-mode #sub-tabs-container button.bg-indigo-600 {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35) !important;
}
html.light-mode #sub-tabs-container button:not(.bg-indigo-600) {
    color: #475569 !important;
    font-weight: 600 !important;
    background-color: transparent !important;
}
html.light-mode #sub-tabs-container button:not(.bg-indigo-600):hover {
    color: #0f172a !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* --- VPS Controls Panel --- */
html.light-mode #vps-controls-panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode #vps-uptime-text {
    color: #047857 !important;
    font-weight: 800 !important;
}
html.light-mode #vps-agent-badge {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}
html.light-mode #vps-update-badge {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
    font-weight: 800 !important;
}
html.light-mode #btn-live-console,
html.light-mode .btn-live-console-styled {
    background-color: #0284c7 !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    font-weight: 800 !important;
}
html.light-mode #btn-update-agent {
    background-color: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    color: #4338ca !important;
    font-weight: 800 !important;
}
html.light-mode #btn-restart {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #b45309 !important;
    font-weight: 800 !important;
}
html.light-mode #btn-shutdown {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #be123c !important;
    font-weight: 800 !important;
}

/* --- KPI / Stat Metric Cards --- */
html.light-mode #subtab-content-overview > div.grid > div:first-child > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
}
html.light-mode #subtab-content-overview span.text-gray-400 {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
html.light-mode #stat-cpu,
html.light-mode #stat-mem,
html.light-mode #stat-disk,
html.light-mode #stat-conn {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-family: var(--font-code) !important;
}
html.light-mode #stat-disk-sub {
    color: #64748b !important;
    font-weight: 700 !important;
}

/* KPI Card Icon Containers */
html.light-mode #subtab-content-overview .bg-indigo-500\/10 {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}
html.light-mode #subtab-content-overview .bg-violet-500\/10 {
    background-color: #faf5ff !important;
    color: #7c3aed !important;
    border: 1px solid #ddd6fe !important;
}
html.light-mode #subtab-content-overview .bg-amber-500\/10 {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}
html.light-mode #subtab-content-overview .bg-emerald-500\/10 {
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}

/* --- TOTAL BANNED IPS Widget Card in Light Mode --- */
html.light-mode #banned-ips-widget-card,
html.light-mode div:has(> div > #stat-banned-widget) {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid #fecdd3 !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.08) !important;
}
html.light-mode #stat-banned-widget {
    color: #be123c !important;
    font-weight: 800 !important;
}
html.light-mode div:has(> div > #stat-banned-widget) button {
    background: #ffffff !important;
    color: #be123c !important;
    border: 1px solid #fca5a5 !important;
    box-shadow: 0 1px 3px rgba(190, 18, 60, 0.12) !important;
    font-weight: 700 !important;
}
html.light-mode div:has(> div > #stat-banned-widget) button:hover {
    background: #be123c !important;
    color: #ffffff !important;
}

/* --- Resource History Chart --- */
html.light-mode #chart-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html.light-mode #btn-live.bg-indigo-500,
html.light-mode #btn-24h.bg-indigo-500 {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}
html.light-mode #btn-live:not(.bg-indigo-500),
html.light-mode #btn-24h:not(.bg-indigo-500) {
    color: #64748b !important;
    background-color: transparent !important;
}
html.light-mode div:has(> #btn-live) {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* --- Interactive Map Header & Container --- */
html.light-mode .leaflet-container,
html.light-mode #login-map {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}
html.light-mode span.uppercase:contains("Geospatial Audit"),
html.light-mode span[class*="Geospatial Audit"],
html.light-mode #subtab-content-overview span.bg-indigo-500\/10.text-indigo-400 {
    background-color: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
    font-weight: 800 !important;
}

/* --- Top 5 Connected IPs / Countries / Users Lists --- */
html.light-mode #top-ips-list > div,
html.light-mode #top-countries-list > div,
html.light-mode #top-users-list > div {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
html.light-mode #top-ips-list > div:hover,
html.light-mode #top-countries-list > div:hover,
html.light-mode #top-users-list > div:hover {
    background-color: #f8fafc !important;
}
html.light-mode #top-ips-list span.bg-indigo-500\/20,
html.light-mode #top-countries-list span.bg-indigo-500\/20,
html.light-mode #top-users-list span.bg-indigo-500\/20 {
    background-color: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
    font-weight: 800 !important;
}
html.light-mode #top-users-list .text-indigo-300 {
    color: #1e1b4b !important;
    font-weight: 800 !important;
}

/* --- Typography & Headings in Light Mode --- */
html.light-mode h1:not(.text-indigo-400):not(.text-emerald-400):not(.text-rose-400):not(.text-cyan-400):not(.text-amber-400),
html.light-mode h2:not(.text-indigo-400):not(.text-emerald-400):not(.text-rose-400):not(.text-cyan-400):not(.text-amber-400),
html.light-mode h3:not(.text-indigo-400):not(.text-emerald-400):not(.text-rose-400):not(.text-cyan-400):not(.text-amber-400),
html.light-mode h4:not(.text-indigo-400):not(.text-emerald-400):not(.text-rose-400):not(.text-cyan-400):not(.text-amber-400),
html.light-mode h5:not(.text-indigo-400):not(.text-emerald-400):not(.text-rose-400):not(.text-cyan-400):not(.text-amber-400) {
    color: #0f172a !important;
}

html.light-mode .text-white {
    color: #0f172a !important;
}

/* Preserve bright white text inside solid colored buttons & badges */
html.light-mode .btn-primary,
html.light-mode .btn-primary *,
html.light-mode button[type="submit"]:not(.bg-transparent),
html.light-mode .bg-indigo-600,
html.light-mode .bg-indigo-600 *,
html.light-mode .bg-indigo-500,
html.light-mode .bg-indigo-500 *,
html.light-mode .bg-emerald-600,
html.light-mode .bg-emerald-600 *,
html.light-mode .bg-rose-600,
html.light-mode .bg-rose-600 *,
html.light-mode .bg-blue-600,
html.light-mode .bg-blue-600 *,
html.light-mode .bg-rose-500,
html.light-mode .bg-rose-500 *,
html.light-mode .badge-white-text,
html.light-mode .text-white-force {
    color: #ffffff !important;
}

html.light-mode .text-gray-400,
html.light-mode .text-slate-400,
html.light-mode .text-gray-300,
html.light-mode .text-slate-300 {
    color: #475569 !important;
}

html.light-mode .text-gray-500,
html.light-mode .text-slate-500 {
    color: #64748b !important;
}

/* Form controls in light mode */
html.light-mode input:not([type="checkbox"]):not([type="radio"]),
html.light-mode select,
html.light-mode textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* Tables across all tabs */
html.light-mode table {
    background-color: #ffffff !important;
}
html.light-mode table thead tr,
html.light-mode table thead th {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    font-weight: 800 !important;
}
html.light-mode table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #0f172a !important;
}
html.light-mode table tbody tr:nth-child(even) {
    background-color: #fafbfd !important;
}
html.light-mode table tbody tr:hover {
    background-color: #f1f5f9 !important;
}
html.light-mode table tbody td {
    color: #334155 !important;
}
html.light-mode table tbody td .font-mono {
    color: #0f172a !important;
}
html.light-mode table button:not(.bg-indigo-600):not(.bg-emerald-600):not(.bg-rose-600) {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
html.light-mode table button:hover {
    background-color: #f1f5f9 !important;
}

/* Modals & Dialogs */
html.light-mode .fixed.inset-0.bg-black\/50,
html.light-mode .fixed.inset-0.bg-black\/60,
html.light-mode .fixed.inset-0.bg-black\/70,
html.light-mode .fixed.inset-0.bg-black\/80 {
    background-color: rgba(15, 23, 42, 0.5) !important;
}
html.light-mode .fixed.inset-0 .glass,
html.light-mode .fixed.inset-0 [class*="bg-slate-900"],
html.light-mode .fixed.inset-0 [class*="bg-slate-950"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.2) !important;
}

/* Terminal log output */
html.light-mode #pm2-live-log-container,
html.light-mode .terminal-box {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #4ade80 !important;
}

/* --- THEME TOGGLE & SEGMENTED SWITCHER COMPONENT --- */
.theme-segmented-group {
    display: inline-flex;
    align-items: center;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.theme-mode-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.theme-mode-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.08);
}

.theme-mode-btn.active {
    background: #4f46e5;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Light Mode Theme Segmented Group */
html.light-mode .theme-segmented-group {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.light-mode .theme-mode-btn {
    color: #64748b;
}

html.light-mode .theme-mode-btn:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.06);
}

html.light-mode .theme-mode-btn.active {
    background: #ffffff;
    color: #4f46e5 !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.theme-toggle-btn svg {
    width: 14px;
    height: 14px;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.04);
}

html.light-mode .theme-toggle-btn {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #4f46e5;
}

html.light-mode .theme-toggle-btn:hover {
    background: #e2e8f0;
}

/* Hide sun in dark mode, hide moon in light mode */
html.dark-mode .theme-toggle-btn .icon-moon,
html[data-theme="dark"] .theme-toggle-btn .icon-moon,
html.dark-mode .theme-toggle-btn .moon-icon,
html[data-theme="dark"] .theme-toggle-btn .moon-icon {
    display: inline-block !important;
}
html.dark-mode .theme-toggle-btn .icon-sun,
html[data-theme="dark"] .theme-toggle-btn .icon-sun,
html.dark-mode .theme-toggle-btn .sun-icon,
html[data-theme="dark"] .theme-toggle-btn .sun-icon {
    display: none !important;
}

html.light-mode .theme-toggle-btn .icon-sun,
html[data-theme="light"] .theme-toggle-btn .icon-sun,
html.light-mode .theme-toggle-btn .sun-icon,
html[data-theme="light"] .theme-toggle-btn .sun-icon {
    display: inline-block !important;
}
html.light-mode .theme-toggle-btn .icon-moon,
html[data-theme="light"] .theme-toggle-btn .icon-moon,
html.light-mode .theme-toggle-btn .moon-icon,
html[data-theme="light"] .theme-toggle-btn .moon-icon {
    display: none !important;
}

/* --- SECURITY CARDS LAYOUT PRESERVATION --- */
div:has(> div > div:contains("WINDOWS DEFENDER")), 
div:has(> div > div:contains("FIREWALL PROFILES")) {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.security-cards-wrapper, div:has(> div > div:contains("WINDOWS DEFENDER")), div:has(> div > div:contains("FIREWALL PROFILES")) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

div:has(> div:contains("WINDOWS DEFENDER")), div:has(> div:contains("FIREWALL PROFILES")) {
    flex: 1 1 420px !important;
    max-width: 480px !important;
}

div:has(> div:contains("WINDOWS DEFENDER")) .flex, 
div:has(> div:contains("FIREWALL PROFILES")) .flex {
    max-width: 360px;
}

#security-firewall-container, .security-cards-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
}
.security-card-left {
    grid-column: span 12;
}
@media (min-width: 1024px) {
    .security-card-left { grid-column: span 6; }
    .security-card-right { grid-column: span 6; }
}

.defender-card-fix, .firewall-card-fix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
}

#sub-tabs-container::-webkit-scrollbar { display: none; }