/*
 * ClusterPilot — Premium Dark Glass
 * Dark-only visual layer. Layout, behavior and status colors are unchanged.
 */

html[data-theme="dark"] {
  color-scheme: dark;
  --dg-canvas: #040812;
  --dg-canvas-2: #07101f;
  --dg-glass: rgba(10, 20, 37, .76);
  --dg-glass-strong: rgba(9, 18, 34, .90);
  --dg-glass-soft: rgba(15, 27, 48, .64);
  --dg-line: rgba(148, 184, 220, .14);
  --dg-line-blue: rgba(96, 165, 250, .23);
  --dg-text: #e8f0ff;
  --dg-muted: #a8bdd7;
  --dg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    0 18px 48px rgba(0, 0, 0, .34);
  --dg-shadow-soft:
    inset 0 1px 0 rgba(255, 255, 255, .065),
    0 10px 30px rgba(0, 0, 0, .26);
  --dg-mirror:
    linear-gradient(118deg, rgba(20, 37, 64, .82), rgba(9, 19, 35, .77) 52%, rgba(10, 25, 47, .70));
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--dg-canvas) !important;
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 8% 2%, rgba(37, 99, 235, .17), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(124, 58, 237, .11), transparent 27%),
    radial-gradient(circle at 58% 100%, rgba(8, 145, 178, .07), transparent 34%),
    linear-gradient(145deg, #030711, #07101e 55%, #040914) !important;
}

html[data-theme="dark"] #dashboard-bg-cv {
  opacity: .42;
}

html[data-theme="dark"] .dash-noise {
  opacity: .018;
}

/* Main structural glass */
html[data-theme="dark"] .sidebar {
  background:
    linear-gradient(180deg, rgba(8, 16, 32, .90), rgba(5, 11, 24, .88)) !important;
  border-right: 1px solid rgba(96, 165, 250, .18) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.025),
    12px 0 44px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(26px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.25) !important;
}

html[data-theme="dark"] .topbar {
  background: rgba(5, 12, 26, .78) !important;
  border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 36px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(26px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.25) !important;
}

html[data-theme="dark"] .sidebar.inv-sidebar-v2 .sidebar-brand-strip {
  background: linear-gradient(115deg, rgba(37,99,235,.12), rgba(124,58,237,.09), transparent) !important;
  border-bottom-color: rgba(96,165,250,.17) !important;
}

html[data-theme="dark"] .sidebar.inv-sidebar-v2 .sb-cluster-badge.inv-cluster-v2 {
  background: linear-gradient(120deg, rgba(21,38,61,.82), rgba(7,19,35,.74)) !important;
  border-color: rgba(45,212,191,.23) !important;
  box-shadow: var(--dg-shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

html[data-theme="dark"] .sidebar.inv-sidebar-v2 .inv-acc.open {
  background: linear-gradient(130deg, rgba(37,99,235,.09), rgba(124,58,237,.075), rgba(8,145,178,.045)) !important;
  border-color: rgba(129,140,248,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 24px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .inv-theme-dock {
  background: linear-gradient(145deg, rgba(17,31,54,.88), rgba(7,16,31,.82)) !important;
  border-color: var(--dg-line) !important;
  box-shadow: var(--dg-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.22) !important;
}

html[data-theme="dark"] .inv-theme-switch {
  background: rgba(2, 8, 20, .58) !important;
  border-color: rgba(148,184,220,.13) !important;
}

html[data-theme="dark"] .inv-theme-current-label {
  color: #a8c4e0 !important;
}

html[data-theme="dark"] .inv-theme-choice.active {
  background: linear-gradient(135deg, rgba(37,99,235,.75), rgba(59,130,246,.58), rgba(8,145,178,.58)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 22px rgba(37,99,235,.25) !important;
}

/* Shared interactive controls */
html[data-theme="dark"] :where(
  input,
  select,
  textarea,
  .tb-search-wrap,
  .search-box,
  .search-wrap,
  .swrap,
  .ls-bar,
  .log-search
) {
  background-color: rgba(7, 16, 31, .70) !important;
  border-color: rgba(148,184,220,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] :where(
  .dropdown,
  .dropdown-menu,
  .menu,
  .popover,
  .context-menu,
  .ns-dropdown,
  .user-menu-dd,
  #gs-dropdown,
  .export-dialog-box,
  .profile-panel,
  #profile-panel
) {
  background: rgba(7, 16, 31, .94) !important;
  border-color: var(--dg-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.52) !important;
  backdrop-filter: blur(24px) saturate(1.25) !important;
}

/* Dashboard panels and feature cards */
html[data-theme="dark"] .main :where(
  .panel,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-box"],
  [class*="-box "],
  [class$="-widget"],
  [class*="-widget "],
  [class$="-table-wrap"],
  [class$="-chart-wrap"]
) {
  background: var(--dg-mirror) !important;
  border-color: var(--dg-line) !important;
  box-shadow: var(--dg-shadow-soft) !important;
}

html[data-theme="dark"] .main :where(
  [class$="-head"],
  [class*="-head "],
  [class$="-header"],
  [class*="-header "],
  [class$="-toolbar"],
  [class*="-toolbar "]
) {
  background: rgba(8, 18, 35, .62) !important;
  border-color: rgba(148,184,220,.11) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="dark"] :where(table, .gt, .data-table) {
  background: rgba(8,18,35,.66) !important;
  border-color: var(--dg-line) !important;
}

html[data-theme="dark"] :where(thead, th) {
  background: rgba(17,31,52,.82) !important;
  border-color: rgba(148,184,220,.11) !important;
}

html[data-theme="dark"] tbody tr:hover td {
  background: rgba(37,99,235,.075) !important;
}

html[data-theme="dark"] .main :where(
  .panel,
  .card,
  [class$="-card"],
  [class*="-card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-box"],
  [class*="-box "]
):hover {
  border-color: rgba(96,165,250,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 18px 42px rgba(0,0,0,.34) !important;
}

/* Exact Overview surfaces */
html[data-theme="dark"] #sec-overview .sc1-card,
html[data-theme="dark"] #sec-overview .ov2-graph-card,
html[data-theme="dark"] #sec-overview :where(
  .pgc-card,
  .ngc-card,
  .r3-card,
  .r5-card,
  .r6-card
) {
  background: var(--dg-mirror) !important;
  border-color: var(--dg-line) !important;
  box-shadow: var(--dg-shadow-soft) !important;
}

html[data-theme="dark"] #sec-overview .ov2-graph-hdr {
  background: linear-gradient(180deg, rgba(18,32,55,.88), rgba(8,18,34,.82)) !important;
  border-bottom-color: rgba(148,184,220,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html[data-theme="dark"] #sec-overview :where(
  #lt-legend,
  .hm-toolbar,
  .ov2-top5-summary,
  .r3-filter-bar
) {
  background: rgba(5, 13, 27, .46) !important;
  border-color: rgba(148,184,220,.10) !important;
}

html[data-theme="dark"] #sc1-popup {
  background: rgba(8, 18, 35, .93) !important;
  border-color: rgba(96,165,250,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 30px 80px rgba(0,0,0,.68) !important;
  backdrop-filter: blur(24px) saturate(1.24) !important;
}

html[data-theme="dark"] #sc1-popup .sc1-ph {
  background: linear-gradient(110deg, rgba(var(--p-rgb,59,130,246),.13), rgba(13,26,46,.68)) !important;
}

/* Expanded views get the same glass hierarchy */
html[data-theme="dark"] :where(
  .gs2-modal-box,
  .r3-modal-box,
  .r4-modal-box,
  .r5-modal-box,
  .r6-modal-box,
  .pgc-modal-box,
  #ngc-node-modal > div,
  #pgc-expand-modal > div
) {
  background: rgba(7, 16, 31, .94) !important;
  border-color: rgba(96,165,250,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 38px 100px rgba(0,0,0,.72) !important;
  backdrop-filter: blur(26px) saturate(1.22) !important;
}

html[data-theme="dark"] :where(
  .gs2-modal-hdr,
  .r3-modal-hdr,
  .r4-modal-hdr,
  .r5-modal-hdr,
  .r6-modal-hdr,
  .pgc-modal-header,
  .pgc-modal-tabs
) {
  background: linear-gradient(180deg, rgba(20,36,61,.90), rgba(9,20,38,.84)) !important;
  border-color: rgba(148,184,220,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065) !important;
}

html[data-theme="dark"] :where(
  .gs2-modal-chart-area,
  .gs2-modal-details,
  .r3-modal-body,
  .r3-modal-left,
  .r3-modal-right,
  .r4-modal-body,
  .r5-modal-body,
  .r6-modal-body,
  .pgc-modal-body,
  .pgc-modal-detail
) {
  background-color: rgba(6, 14, 29, .74) !important;
  border-color: rgba(148,184,220,.10) !important;
}

/* Semantic overlays remain overlays, not glass cards. */
html[data-theme="dark"] :where(
  .modal,
  .modal-bg,
  .modal-overlay,
  .overlay,
  [class$="-overlay"],
  [class*="-overlay "],
  #gs2-modal,
  #r3-modal,
  #r4-modal,
  #r5-modal,
  #r6-modal,
  #pgc-pod-modal
) {
  background: rgba(1, 5, 13, .72) !important;
  backdrop-filter: blur(12px) !important;
}

/* Standalone pages */
html[data-theme="dark"] :where(.pd-topbar, .pd-health-bar, .pd-tabs-wrap) {
  background: rgba(5, 13, 27, .83) !important;
  border-color: var(--dg-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
}

html[data-theme="dark"] :where(
  .pd-card,
  .pd-stat,
  .cluster-card,
  .stat-card,
  .hero,
  .feature-card,
  .doc-card,
  .architecture-card,
  .del-box
) {
  background: var(--dg-mirror) !important;
  border-color: var(--dg-line) !important;
  box-shadow: var(--dg-shadow) !important;
}

html[data-theme="dark"] .login-box {
  padding: clamp(24px,3vw,38px) !important;
  border: 1px solid rgba(148,184,220,.15) !important;
  border-radius: 24px !important;
  background: rgba(7,16,31,.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 28px 76px rgba(0,0,0,.48) !important;
  backdrop-filter: blur(26px) saturate(1.2) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] *,
  html[data-theme="dark"] *::before,
  html[data-theme="dark"] *::after {
    transition-duration: .01ms !important;
  }
}

/* ===============================================================
   Metallic white typography
   Replaces low-contrast gray text without flattening status colors.
   =============================================================== */
html[data-theme="dark"] {
  --txt: #f8fafc;
  --txt2: #e7edf5;
  --txt3: #bcc8d7;
  --theme-text: #f8fafc;
  --theme-text-strong: #ffffff;
  --theme-muted: #d7e0eb;
  --theme-subtle: #b9c6d6;
  --dg-text: #f8fafc;
  --dg-muted: #d3dce8;
}

/* Silver reflection is reserved for headings and structural labels. */
html[data-theme="dark"] :where(
  .ov2-graph-title,
  .sc1-label,
  .sc1-ph-title,
  .card-title,
  .panel-title,
  .section-title,
  .ph-title,
  .gs2-modal-title,
  .r3-modal-title,
  .r4-modal-title,
  .r5-modal-title,
  .r6-modal-title,
  .pgc-modal-podname,
  .pd-card-title,
  .stat-label
) {
  color: #f8fafc !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #f4f7fb 38%, #bcc8d6 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* Navigation stays crisp metallic-white without a gradient on every row. */
html[data-theme="dark"] .sidebar.inv-sidebar-v2 :where(
  .nav-label,
  .inv-acc-head,
  .inv-acc-body .nav-item,
  .sb-cluster-name
) {
  color: #eaf0f7 !important;
}

html[data-theme="dark"] .sidebar.inv-sidebar-v2 :where(
  .sidebar-sub,
  .sb-cluster-ver,
  .inv-ext,
  .inv-chevron
) {
  color: #c4cfdd !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  .sc1-sub,
  .sc1-pstat-l,
  .sc1-pgraph-lbl,
  .sc1-plist-hdr,
  .sc1-pmsg,
  .sc1-pts,
  .ov2-top5-name,
  .ov2-top5-sum-l,
  .lt-legend-item,
  .hm-adv-node-name,
  .hm-row-name,
  .hm-time-lbl,
  .r3-modal-hm-lbl,
  .r3-modal-time-lbl,
  .r3-modal-legend-lbl,
  .r3-modal-summary-l,
  .pgc-modal-chip-label,
  .pgc-modal-table-label,
  .pd-meta-label,
  .pd-meta-val
) {
  color: #d2dce8 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
}

/* Convert hardcoded gray and slate text emitted by dynamic renderers. */
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:#64748b"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: #64748b"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:#475569"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: #475569"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:#94a3b8"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: #94a3b8"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:#a8c4e0"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: #a8c4e0"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:rgba(100,116,139"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: rgba(100,116,139"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:rgba(148,163,184"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: rgba(148,163,184"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:rgba(160,190,230"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: rgba(160,190,230"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color:rgba(200,220,255"],
html[data-theme="dark"] :where(.main, .sidebar, #sc1-popup) [style*="color: rgba(200,220,255"] {
  color: #d6e0eb !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .main :where(
  [class$="-label"],
  [class$="-meta"],
  [class$="-desc"],
  [class$="-hint"]
):not(.lt-kpi-lbl):not([class*="status"]):not([class*="severity"]) {
  color: #d2dce8 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: #b8c5d4 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(td, .log-msg, .code-line) {
  color: #dce5ef !important;
}

html[data-theme="dark"] th {
  color: #f1f5f9 !important;
}