:root {
    --pd-brand: #4f46e5;
    --pd-brand-dark: #3730a3;
    --pd-brand-light: #eef2ff;
    --pd-bg: #f4f5fa;
    --pd-surface: #fff;
    --pd-text: #1f2330;
    --pd-text-muted: #6c757d;
    --pd-border: rgba(31, 35, 48, 0.08);
    --pd-hover: rgba(31, 35, 48, 0.05);
}

html[data-theme="dark"] {
    --pd-brand-light: #2a2a45;
    --pd-bg: #15161e;
    --pd-surface: #1e1f2b;
    --pd-text: #e8e9f0;
    --pd-text-muted: #a0a3b1;
    --pd-border: rgba(255, 255, 255, 0.08);
    --pd-hover: rgba(255, 255, 255, 0.06);
    /* Bootstrap's own --bs-border-color (used by the .border utility, which
       is !important and otherwise beats any later non-important override —
       see the alert-light "border" class used across the app) stays fixed
       at its light-mode value unless redefined here, since we theme via
       data-theme instead of Bootstrap's own data-bs-theme. */
    --bs-border-color: rgba(255, 255, 255, 0.08);
}

/* Fixed dark palette for the API-docs code panel only (see .pd-code-panel
   further down) — unlike the sidebar/topbar, that one is deliberately not
   theme-aware, matching how code blocks in most API docs stay dark
   regardless of the surrounding page theme. */
:root {
    --pd-code-bg: #15161d;
}

body {
    background-color: var(--pd-bg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--pd-text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .modal-content {
    background-color: var(--pd-surface);
    color: var(--pd-text);
    border: 1px solid var(--pd-border);
    box-shadow: none;
}

/* Bootstrap tables paint every cell via these CSS variables (not via a
   plain background-color on .table), so overriding just background-color
   on .table left cells transparent/light in dark mode — set the variables
   Bootstrap itself reads instead. */
html[data-theme="dark"] .table {
    --bs-table-bg: var(--pd-surface);
    --bs-table-color: var(--pd-text);
    --bs-table-border-color: var(--pd-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--pd-text);
    --bs-table-active-bg: rgba(255, 255, 255, 0.06);
    --bs-table-active-color: var(--pd-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--pd-text);
    background-color: var(--pd-surface);
    color: var(--pd-text);
}

html[data-theme="dark"] .table thead th {
    background-color: var(--pd-brand-light);
    color: var(--pd-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--pd-surface);
    color: var(--pd-text);
    border-color: var(--pd-border);
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--pd-text-muted);
    opacity: 1;
}

html[data-theme="dark"] .text-muted {
    color: var(--pd-text-muted) !important;
}

/* Active sort-column header (products.php uses text-body for it) reads
   Bootstrap's --bs-body-color, which stays near-black in dark mode and
   blends into the dark thead background. */
html[data-theme="dark"] .text-body {
    color: var(--pd-text) !important;
}

html[data-theme="dark"] .alert-light {
    background-color: var(--pd-surface);
    color: var(--pd-text);
    border-color: var(--pd-border);
}

html[data-theme="dark"] .input-group-text {
    background-color: var(--pd-surface);
    color: var(--pd-text-muted);
    border-color: var(--pd-border);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--pd-surface);
    color: var(--pd-text);
    border-color: var(--pd-border);
}

/* Same subtle border as .table-card/.card, on every alert variant, in
   both themes — Bootstrap's own per-variant border color otherwise looks
   inconsistent with the rest of the (border-based, not shadow-based in
   dark mode) UI. */
.alert {
    border-color: var(--pd-border);
}

/* Sidebar (left-docked nav, Bootstrap's responsive offcanvas — see
   templates/layout.php: below lg it's a normal slide-in offcanvas with a
   hamburger trigger in .pd-topbar; at lg+ Bootstrap unhides it in place as
   a static block, and the rules below turn that into a fixed, full-height
   sidebar instead of an inline block). */
.pd-sidebar {
    background: var(--pd-surface);
    color: var(--pd-text);
    border-right: 1px solid var(--pd-border);
    box-shadow: 2px 0 8px rgba(31, 35, 48, 0.04);
    width: 260px;
}

.pd-sidebar .navbar-brand {
    letter-spacing: 0.3px;
    font-weight: 700;
    color: var(--pd-text);
}

.pd-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--pd-border);
}

.pd-sidebar hr {
    border-color: var(--pd-border);
    opacity: 1;
}

.pd-sidebar .nav-link {
    color: var(--pd-text-muted);
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pd-sidebar .nav-link i {
    font-size: 1.05rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.pd-sidebar .nav-link:hover {
    color: var(--pd-text);
    background-color: var(--pd-hover);
}

.pd-sidebar .nav-link.active {
    color: var(--pd-brand);
    background-color: var(--pd-brand-light);
    font-weight: 600;
}

/* --pd-text-muted / --pd-brand read low-contrast against the dark sidebar
   background (a fixed brand purple on a near-black brand-light tint) —
   lighten both the default and active nav-link colors specifically in
   dark mode. */
html[data-theme="dark"] .pd-sidebar .nav-link {
    color: rgba(232, 233, 240, 0.75);
}

html[data-theme="dark"] .pd-sidebar .nav-link:hover {
    color: var(--pd-text);
}

html[data-theme="dark"] .pd-sidebar .nav-link.active {
    color: #a5b4fc;
}

.pd-sidebar .nav-link .badge {
    margin-left: auto;
}

/* Sidebar buttons (mobile hamburger trigger, eshop switcher) use Bootstrap's
   btn-outline-light in the markup, which assumes a permanently-dark
   background — override it here to follow the sidebar's own (now
   theme-aware) palette instead. */
.pd-sidebar .btn-outline-light,
.pd-topbar .btn-outline-light {
    color: var(--pd-text);
    border-color: var(--pd-border);
}

.pd-sidebar .btn-outline-light:hover,
.pd-sidebar .btn-outline-light:focus,
.pd-topbar .btn-outline-light:hover,
.pd-topbar .btn-outline-light:focus {
    color: var(--pd-text);
    background-color: var(--pd-hover);
    border-color: var(--pd-border);
}

/* Same reasoning for text-white-50 (username row), which assumed a dark
   sidebar in its Bootstrap class. */
.pd-sidebar .text-white-50 {
    color: var(--pd-text-muted) !important;
}

html[data-theme="dark"] .pd-sidebar .text-white-50 {
    color: rgba(232, 233, 240, 0.75) !important;
}

/* Bootstrap's .btn-close is a dark X baked into a background-image data
   URI, invisible on any dark surface — applies to every modal/offcanvas
   close button app-wide, not just the sidebar's. */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Persistent sidebar at lg+ — Bootstrap's own responsive-offcanvas CSS
   resets .offcanvas-lg to a plain, transparent, statically-positioned block
   at this breakpoint (background-color: transparent !important, position:
   static, offcanvas-header hidden, ...) since it's designed to stop acting
   like an overlay, not to become a styled fixed sidebar. Every one of those
   resets has to be overridden here with matching !important + higher
   specificity, or the sidebar renders with no background/position and its
   light-colored nav text becomes invisible against the page. */
@media (min-width: 992px) {
    .pd-sidebar.offcanvas-lg {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px !important;
        height: 100vh !important;
        visibility: visible !important;
        background: var(--pd-surface) !important;
        border: none !important;
        border-right: 1px solid var(--pd-border) !important;
        box-shadow: 2px 0 8px rgba(31, 35, 48, 0.04) !important;
        transform: none !important;
        z-index: 1030;
    }

    .pd-sidebar.offcanvas-lg .offcanvas-header {
        display: flex !important;
        background-color: transparent !important;
    }

    .pd-sidebar.offcanvas-lg .offcanvas-body {
        display: flex !important;
        flex-direction: column;
        flex-grow: 1 !important;
        overflow-y: auto;
        background-color: transparent !important;
        /* Bootstrap zeroes this out at the responsive-offcanvas breakpoint
           too — restoring its own normal (non-responsive) default so the
           eshop switcher and the bottom user/logout block (which, unlike
           .nav-link, have no generous padding of their own) aren't flush
           against the sidebar edge. */
        padding: 1rem !important;
    }

    /* Only push content over when the sidebar is actually rendered (it
       isn't on the logged-out login page) — a general sibling selector,
       since .pd-sidebar always precedes .pd-main in the markup when both
       exist. An unconditional margin here was shoving the centered login
       card off-center even with no sidebar present. */
    .pd-sidebar ~ .pd-main {
        margin-left: 260px;
    }
}

.pd-topbar {
    background: var(--pd-surface);
    color: var(--pd-text);
    border-bottom: 1px solid var(--pd-border);
    box-shadow: 0 2px 8px rgba(31, 35, 48, 0.04);
}

.pd-topbar .navbar-brand {
    color: var(--pd-text);
    font-weight: 700;
}

/* Cards */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 35, 48, 0.06);
}

.card .card-body {
    padding: 1.5rem;
}

/* Stat cards on dashboard */
.pd-stat-card {
    border-left: 4px solid var(--pd-brand);
}

.pd-stat-card .pd-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pd-brand-light);
    color: var(--pd-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Tables */
.table-card {
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(31, 35, 48, 0.06);
}

.table {
    background-color: var(--pd-surface);
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--pd-brand-light);
    color: var(--pd-brand-dark);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: none;
}

.table-hover tbody tr:hover {
    background-color: #f8f9ff;
}

/* Expandable product rows (Compare/Products pages) */
.table > tbody > tr.collapsing,
.table > tbody > tr.collapse.show {
    display: table-row;
}

.pd-product-row .bi-chevron-right {
    transition: transform 0.15s ease;
}

.pd-product-row[aria-expanded="true"] .bi-chevron-right,
.pd-product-row.pd-expanded .bi-chevron-right {
    transform: rotate(90deg);
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--pd-brand);
    border-color: var(--pd-brand);
}

.btn-primary:hover {
    background-color: var(--pd-brand-dark);
    border-color: var(--pd-brand-dark);
}

.btn i {
    margin-right: 0.3rem;
}

/* API docs code panel — deliberately always dark (unlike the sidebar/
   topbar, which now follow the light/dark theme), matching how most API
   doc code blocks look regardless of the surrounding page theme (e.g.
   Serper.dev's own docs). */
.pd-code-panel {
    background: var(--pd-code-bg);
    border-radius: 10px;
    overflow: hidden;
}

.pd-code-panel select.form-select {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

/* The <select> itself picks up the dark styling above, but the expanded
   options list is a separate (often browser-native) render that ignores
   the select's own background/color unless the <option>s are styled too —
   without this the open dropdown renders white-on-white. */
.pd-code-panel select.form-select option {
    background-color: #1e1f2b;
    color: #fff;
}

.pd-code-panel select.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

.pd-api-snippet {
    margin: 0;
    padding: 1rem 1.25rem;
    max-height: 380px;
    overflow: auto;
    color: #e8e9f0;
    font-size: 0.85rem;
}

/* Login */
.pd-login-card {
    border-radius: 18px;
}

.pd-login-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--pd-brand-light);
    color: var(--pd-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

h1, h2 {
    color: var(--pd-text);
}