/* Light / dark theme for every dashboard page - see theme.js (one shared setting, dark by default).
   Each page keeps its own stylesheet as one of the two themes and this file supplies the other:
     - /home (body.page-home) and /iscdashboard (body.page-isc) are light by design -> dark rules below.
     - /addashboard (body.page-ad) and /cpdashboardv2 (body.page-cp) are dark by design -> light rules below.
   The white navbar and footer look the same in both themes. */

/* --- Toggle (sun · switch · moon), sits in the white footer --- */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #14204a;
	cursor: pointer;
	font: inherit;
}
.theme-toggle:hover { background: rgba(20, 32, 74, 0.06); }
.theme-toggle:focus-visible { outline: 2px solid #3ddc84; outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-track {
	position: relative;
	width: 38px;
	height: 20px;
	border-radius: 999px;
	background: #c9cee0;
	transition: background 0.2s;
}
.theme-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(20, 32, 74, 0.3);
	transition: transform 0.2s;
}
.theme-toggle[aria-checked="true"] .theme-track { background: #14204a; }
.theme-toggle[aria-checked="true"] .theme-knob { transform: translateX(18px); }


/* ========================================================================
   DARK - /home and /iscdashboard (matches the AD Security Dashboard)
   ======================================================================== */
html[data-theme="dark"]:has(body.page-home, body.page-isc),
html[data-theme="dark"] body:is(.page-home, .page-isc) {
	color: #ffffff;
	background:
		radial-gradient(ellipse at 75% 35%, rgba(90, 110, 200, 0.25), transparent 60%),
		linear-gradient(160deg, #1d2d66 0%, #121b47 100%);
	background-attachment: fixed;
}
html[data-theme="dark"] body:is(.page-home, .page-isc) #loading { color: #aab2d5; }

/* /iscdashboard portal cards */
html[data-theme="dark"] .page-isc h3.text-center { color: #ffffff; }
html[data-theme="dark"] .page-isc .portal-category-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
html[data-theme="dark"] .page-isc .portal-category-title { background: #0c1233; }
html[data-theme="dark"] .page-isc .portal-category-card li a { color: #dfe4ff; }
html[data-theme="dark"] .page-isc .portal-category-card li a::before { background-color: #3ddc84; }
html[data-theme="dark"] .page-isc .portal-category-card li a:hover { background: #141c47; color: #ffffff; }

/* /home cards */
html[data-theme="dark"] .page-home .cards .card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}
html[data-theme="dark"] .page-home .cards .card:hover { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .page-home .cards .card h2 { color: #ffffff; }
html[data-theme="dark"] .page-home .cards .card p { color: #aab2d5; }
html[data-theme="dark"] .page-home .cards .card .open { color: #3ddc84; }


/* ========================================================================
   LIGHT - /addashboard. The page is built on CSS variables, so most of the
   switch is swapping them; the rest are its few hard-coded dark colours.
   ======================================================================== */
html[data-theme="light"] body.page-ad {
	--bg-1: #f5f6fa;
	--bg-2: #eef1f8;
	--panel: #ffffff;
	--panel-line: #e2e5f1;
	--tile: #f2f4fa;
	--tile-hover: #e8ebf5;
	--text: #14204a;
	--muted: #5b6785;
	--accent: #1a9c55;
	--r-critical: #e0731b;
	--r-high: #b8860b;
	--r-medium: #3b6fd8;
	--r-low: #2f9e66;
	background: #f5f6fa;
}
html[data-theme="light"] .page-ad .panel { box-shadow: 0 10px 30px rgba(20, 32, 74, 0.08); }
html[data-theme="light"] .page-ad .kpi { background: #ffffff; border: 1px solid #e2e5f1; box-shadow: 0 6px 18px rgba(20, 32, 74, 0.06); }
html[data-theme="light"] .page-ad :is(.panel h2, .kpi .l, .risk .name, .tip-box, .change) { color: #2a3766; }
html[data-theme="light"] .page-ad .bar-tag { color: #14204a; }
html[data-theme="light"] .page-ad .risk .track { background: rgba(20, 32, 74, 0.06); }
html[data-theme="light"] .page-ad :is(.ms-pop, .tip-box) { background: #ffffff; box-shadow: 0 12px 30px rgba(20, 32, 74, 0.18); }
html[data-theme="light"] .page-ad .slider { background: #c9cee0; }
html[data-theme="light"] .page-ad .switch input:focus-visible + .slider { outline-color: #14204a; }
html[data-theme="light"] .page-ad .domain-grid::-webkit-scrollbar-thumb { background: #c9cee0; }
html[data-theme="light"] .page-ad .status.err { color: #b45309; }
html[data-theme="light"] .page-ad .modal { background: rgba(20, 32, 74, 0.45); }
html[data-theme="light"] .page-ad .modal-box { background: #ffffff; box-shadow: 0 24px 60px rgba(20, 32, 74, 0.25); }
html[data-theme="light"] .page-ad :is(.tip-box td, .um-table td) { border-top-color: #e6e8f0; }
html[data-theme="light"] .page-ad .um-table tr:hover td { background: rgba(20, 32, 74, 0.03); }
html[data-theme="light"] .page-ad :is(.chip, .change .tag) { background: rgba(20, 32, 74, 0.06); }
html[data-theme="light"] .page-ad .change .tag.added { color: #15803d; }
html[data-theme="light"] .page-ad .change .tag.removed { color: #c2410c; }
html[data-theme="light"] .page-ad .gate-box button { color: #ffffff; }
/* The page's own icons are drawn in white via SVG attributes; CSS properties override those. */
html[data-theme="light"] .page-ad :is(.gate-box svg, .wrap > header svg.logo, .wrap > header svg.info) { stroke: #14204a; }
html[data-theme="light"] .page-ad :is(.gate-box svg, .wrap > header svg.logo) rect[fill] { fill: #14204a; }


/* ========================================================================
   LIGHT - /cpdashboardv2 (User Cyber Risk View)
   ======================================================================== */
html[data-theme="light"] body.page-cp {
	color: #14204a;
	background: #f5f6fa;
}
html[data-theme="light"] .page-cp #loading { color: #5b6785; }
html[data-theme="light"] .page-cp .panel {
	background: #ffffff;
	border-color: #e2e5f1;
	box-shadow: 0 10px 30px rgba(20, 32, 74, 0.08);
}
html[data-theme="light"] .page-cp .map-card { background: transparent; box-shadow: none; }
html[data-theme="light"] .page-cp .hero-divider { background: #e2e5f1; }
html[data-theme="light"] .page-cp .avatar { background: #eef1f8; }
html[data-theme="light"] .page-cp .avatar svg { stroke: #14204a; }
html[data-theme="light"] .page-cp :is(.topbar-icon, .checklist-row .row-icon, .tile .tile-icon) { color: #14204a; }
html[data-theme="light"] .page-cp :is(.profile-info p, .gauge-card h3, .gauge-caption, .risk-flags-block h3,
	.posture-col h4, .tile .tile-label, .devices-columns h5) { color: #5b6785; }
html[data-theme="light"] .page-cp :is(.tile .tile-subvalue, .empty-note, .map-placeholder .leaflet-control-attribution,
	.map-placeholder .leaflet-control-attribution a) { color: #7a849f; }
html[data-theme="light"] .page-cp .topbar-title .info-icon { border-color: #7a849f; color: #7a849f; }
html[data-theme="light"] .page-cp :is(.status-pill, .checklist-row, .tile, .device-tile) { background: #ffffff; color: #14204a; }
/* These sit straight on the page background, so they need an edge to read as tiles. */
html[data-theme="light"] .page-cp :is(.checklist-row, .tile, .device-tile) { border: 1px solid #e2e5f1; }
html[data-theme="light"] .page-cp .panel :is(.status-pill, .tile, .device-tile) { background: #f2f4fa; }
html[data-theme="light"] .page-cp .device-tile:hover { background: #e8ebf5; }
html[data-theme="light"] .page-cp .device-tile.selected { background: #dfe6ff; border-color: #5b7cff; }
html[data-theme="light"] .page-cp .map-placeholder .leaflet-container { background: #e8ebf5; }
/* Status colours darkened just enough to read on white. */
html[data-theme="light"] .page-cp .flag-enabled { color: #3b5bdb; }
html[data-theme="light"] .page-cp .flag-vip { color: #a16207; }
html[data-theme="light"] .page-cp .flag-privileged { color: #c2410c; }
html[data-theme="light"] .page-cp .flag-warn { color: #c92a4a; }
html[data-theme="light"] .page-cp :is(.severity-critical, .severity-high) { color: #c92a4a; }
html[data-theme="light"] .page-cp :is(.severity-medium, .severity-moderate) { color: #c2410c; }
html[data-theme="light"] .page-cp .severity-low { color: #15803d; }
html[data-theme="light"] .page-cp .check-good { color: #16a34a; }
html[data-theme="light"] .page-cp .check-neutral { color: #a0a7c4; }
html[data-theme="light"] .page-cp .check-bad { color: #dc2626; }


/* ========================================================================
   LIGHT - /pentest (Penetration Testing Dashboard). Its body also has .page-ad, so the AD rules above apply;
   these cover its own charts.
   ======================================================================== */
html[data-theme="light"] .page-pt .hbars .name { color: #2a3766; }
html[data-theme="light"] .page-pt .hbars .track { background: rgba(20, 32, 74, 0.06); }
html[data-theme="light"] .page-pt :is(.hbars, .um-table-wrap, .ms-list) { scrollbar-color: #c9cee0 transparent; }
html[data-theme="light"] .page-pt :is(.hbars, .um-table-wrap, .ms-list)::-webkit-scrollbar-thumb { background: #c9cee0; }
html[data-theme="light"] .page-pt .sev { background: rgba(20, 32, 74, 0.06); }
html[data-theme="light"] .page-pt .kpi.medium .v { color: #b8860b; }
html[data-theme="light"] .page-pt .d-body { scrollbar-color: #c9cee0 transparent; }
html[data-theme="light"] .page-pt .d-body::-webkit-scrollbar-thumb { background: #c9cee0; }
html[data-theme="light"] .page-pt .d-box :is(input, textarea) { background: #ffffff; }
html[data-theme="light"] .page-pt .d-box input[type="date"] { color-scheme: light; }
html[data-theme="light"] .page-pt .d-activity { scrollbar-color: #c9cee0 transparent; }
html[data-theme="light"] .page-pt .d-activity::-webkit-scrollbar-thumb { background: #c9cee0; }
html[data-theme="light"] .page-pt .d-save button { color: #ffffff; }