/* Dark-mode styles moved from index.html */
/* Ensure selectors match when the dark class is on the root element (.dark) */
.dark .bg-surface-canvas { background: #121212 !important; color: #e6e6e6 !important }
.dark .bg-white.dark\:bg-surface-container, .dark [class*="dark:bg-surface-container"] { background: #121212 !important; color: #e6e6e6 !important }
.dark #product-visuals { background: #242424 !important; color: #e6e6e6 }
.dark #features { background: #121212 !important; color: #e6e6e6 }
.dark #install { background: #313131 !important }
.dark nav { background: #0d0d0d !important; border-bottom-color: rgba(255,255,255,0.06) !important }
.dark .relative.rounded-lg.overflow-hidden { background: #121212 !important; border-color: rgba(255,255,255,0.04) !important }
.dark .bg-surface-sidebar { /* gradient removed to allow explicit background-color overrides */ background: none !important }
/* (previous conflicting feature-card text color removed to avoid overrides) */
/* Ensure all h3 headings are white in dark mode */
.dark h3, body.dark h3 { color: #ffffff !important; }

/* Dark-mode sticky nav when scrolling */
.dark nav {
    transition: background-color 200ms ease, box-shadow 200ms ease, backdrop-filter 200ms ease;
}
.dark nav.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(18,18,18,0.92) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(6px);
    z-index: 60;
}

/* Additional dark-theme tweaks to match the screenshot */
body.dark {
    background-color: #0f0f10;
    color: #e6e6e6;
}
body.dark nav {
    background: #0d0d0d;
    border-bottom-color: rgba(255,255,255,0.06);
}
body.dark .max-w-7xl { color: #e6e6e6 }

/* Hero terminal card */
body.dark .max-w-xl.mx-auto.bg-inverse-surface {
    background: linear-gradient(180deg,#141414,#1a1a1a);
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* Product visuals section background */
body.dark #product-visuals { background: #1b1b1b }

/* Feature cards */
body.dark .bg-surface-canvas { background: #121212 !important; color: #e6e6e6 }
body.dark .relative.rounded-lg.overflow-hidden { background: #151515; border-color: rgba(255,255,255,0.04); }

/* Installation guide and white cards */
body.dark .bg-white { background: #151515 !important; color: #e6e6e6; border-color: rgba(255,255,255,0.04) }
body.dark .bg-white.dark\:bg-surface-container { background: #121212 !important; }
body.dark [class*="dark:bg-surface-container"] { background: #121212 !important; color: #e6e6e6; border-color: rgba(255,255,255,0.04) !important; }
body.dark .bg-surface-sidebar { /* gradient removed to allow explicit background-color overrides */ background: none !important }

/* Table styles */
body.dark table thead tr { background: #171717 }
body.dark table tbody tr td { border-top: 1px solid rgba(255,255,255,0.03) }

/* User requested: make table header row background #242424 in dark mode */
html.dark table thead tr.bg-surface-container-low,
body.dark table thead tr.bg-surface-container-low,
.dark table thead tr.bg-surface-container-low {
    background-color: #242424 !important;
    color: #e6e6e6 !important;
}

/* User requested: make the second zebra-row (PowerShell) match header background */
html.dark table tbody tr.zebra-row:nth-child(2),
body.dark table tbody tr.zebra-row:nth-child(2),
.dark table tbody tr.zebra-row:nth-child(2) {
    background-color: #242424 !important;
    color: #e6e6e6 !important;
}

/* Footer */
body.dark footer { background: #242424 !important; border-top-color: rgba(255,255,255,0.03) !important; }

/* Extra-specific footer selectors to ensure override of Tailwind utilities */
html.dark footer,
body.dark footer,
.dark footer,
html.dark footer.bg-surface-container-low.dark\:bg-surface-dim,
body.dark footer.bg-surface-container-low.dark\:bg-surface-dim,
.dark footer.bg-surface-container-low.dark\:bg-surface-dim {
    background-color: #242424 !important;
    border-top-color: rgba(255,255,255,0.03) !important;
}

/* Buttons */
body.dark a.bg-primary { background-color: #0b78d1; box-shadow: 0 2px 10px rgba(11,120,209,0.12); }
body.dark button.border { border-color: rgba(255,255,255,0.06) }

/* Reduce card shadows for dark */
body.dark .shadow-lg { box-shadow: 0 6px 18px rgba(0,0,0,0.6) }

/* Headings and hero */
body.dark h1 { color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,0.5) }
body.dark h2 { color: #e6e6e6 }
body.dark p { color: #cfcfcf }

/* Hero subtitle smaller contrast */
body.dark .text-on-surface-variant { color: rgba(255,255,255,0.7) }

/* CTA buttons — solid primary and subtle outline */
body.dark a.bg-primary { background-color: #0a74c9; color: #ffffff }
body.dark button.border { background: transparent; color: #e6e6e6 }
body.dark button.border:hover { background: rgba(255,255,255,0.03) }

/* Central control panel cards (feature grid) */
body.dark .grid .bg-surface-canvas { background: transparent }
body.dark .grid .border { border-color: rgba(255,255,255,0.04) }
body.dark .grid .group:hover { transform: translateY(-2px) }

/* Installation list styling (blue numbered badges) */
body.dark .flex-shrink-0.w-8.h-8.bg-primary { background-color: #0b78d1; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
body.dark .flex-shrink-0.w-8.h-8.bg-primary.font-bold { font-weight: 700 }
body.dark .bg-surface-sidebar code { color: #cfe8ff }
body.dark .bg-surface-sidebar { /* gradient removed to allow explicit background-color overrides */ background: none !important }

/* Make product visuals images sit on dark cards */
body.dark img { background: #0f0f0f }

/* Fine tune footer links */
body.dark footer a { color: rgba(255,255,255,0.65) }
body.dark footer a:hover { color: rgba(255,255,255,0.9) }

/* Nav link colors in dark */
body.dark nav a { color: rgba(255,255,255,0.72); margin-left: 10px; margin-right: 10px }
body.dark nav .material-symbols-outlined { color: rgba(255,255,255,0.9) }
body.dark .md:hidden.text-on-surface { color: rgba(255,255,255,0.9) }

/* User-specified section background colors */
/* Advanced Interface Overview */
body.dark #product-visuals { background: #242424; color: #e6e6e6 }
/* Centralized Control Panel */
body.dark #features { background: #121212; color: #e6e6e6 }
body.dark #features h2, body.dark #features h3, body.dark #features h4 { color: #ffffff }
body.dark #features p, body.dark #features .text-on-surface-variant, body.dark #features .text-body-md, body.dark #features .text-label-sm { color: rgba(255,255,255,0.78) }
body.dark #features .bg-surface-canvas { background: transparent; border-color: rgba(255,255,255,0.04) }
/* Make the four feature cards fully black in dark mode */
body.dark #features .bg-surface-canvas {
    background: #121212 !important;
    border-color: rgba(255,255,255,0.04);
    box-shadow: none;
}
/* Ensure feature icon containers are solid and icons use the primary color */
body.dark #features .bg-surface-canvas .w-12 { background-color: #131C26 !important; }
body.dark #features .bg-surface-canvas h3, body.dark #features .bg-surface-canvas p { color: rgba(255,255,255,0.88) }
body.dark #features .font-headline-md { color: #e6eefc }
body.dark #features .material-symbols-outlined { color: #005faa !important; }
/* Installation Guide */
body.dark #install { background: #313131 }

/* Final override: ensure h3 headings inside feature cards are white in dark mode */
html.dark #features .bg-surface-canvas h3,
.dark #features .bg-surface-canvas h3,
html.dark h3,
.dark h3 {
    color: #ffffff !important;
}

/* PowerShell snippet dark override */
.dark #ps-snippet { background: #2f3131 !important; }

/* Set PowerShell code block background in dark mode to #1F2020 (only background) */
html.dark .bg-surface-sidebar,
body.dark .bg-surface-sidebar,
.dark .bg-surface-sidebar {
    background-color: #1F2020 !important;
}

/* (no text-color overrides here per user request) */

/* Specific: make elements with both classes use #bdbdbd in dark mode */
body.dark .text-on-surface-variant.text-body-md,
.dark .text-on-surface-variant.text-body-md {
    color: #bdbdbd !important;
}

/* Dark-mode: set paragraph text color */
html.dark p,
body.dark p,
.dark p {
    color: rgb(207 207 207) !important;
}

/* Dark-mode: make specific outline button text fully white
   Targets buttons using classes: .border .border-outline .text-on-surface */
html.dark button.border.border-outline.text-on-surface,
body.dark button.border.border-outline.text-on-surface,
.dark button.border.border-outline.text-on-surface {
    color: rgb(255 255 255) !important;
}

/* Dark-mode: force border colors to rgb(67 67 67) */
html.dark .border,
body.dark .border,
.dark .border,
html.dark .border-border-subtle,
.dark .border-border-subtle,
html.dark .border-outline,
.dark .border-outline,
html.dark .border-outline-variant,
.dark .border-outline-variant,
html.dark [class*="border-"],
body.dark [class*="border-"] {
    border-color: rgb(67 67 67) !important;
}

/* Dark-mode: feature icons background */
body.dark #features .w-12.bg-primary-container,
.dark #features .w-12.bg-primary-container,
html.dark #features .w-12.bg-primary-container {
    background-color: #131C26 !important;
}
/* Force feature icon glyph color and ensure full opacity (override Tailwind utilities) */
html.dark #features .bg-surface-canvas .w-12 .material-symbols-outlined,
body.dark #features .bg-surface-canvas .w-12 .material-symbols-outlined,
.dark #features .bg-surface-canvas .w-12 .material-symbols-outlined,
html.dark #features .w-12 .material-symbols-outlined,
body.dark #features .w-12 .material-symbols-outlined {
    color: #005faa !important;
    opacity: 1 !important;
}