/* ==========================================================================
   Modern Dental Concept — Dark Theme
   Applied automatically via the media="(prefers-color-scheme: dark)"
   attribute on its <link> tag in include/header.php — no JS toggle needed.
   Loads after purple.css and layers on top of it.

   --white and --color-brand-primary/-secondary are dual-purpose in
   purple.css (used as both text/icon color AND as button/badge backgrounds
   under white text), so they are NOT blindly inverted here. Structural
   surfaces (body, cards, nav, footer, forms) get explicit dark values;
   the brand tokens are re-tuned to values that stay readable both as text
   on the dark page background and as a button background under white text.
   ========================================================================== */

:root {
    --color-brand-primary: #8A5CC5;
    --color-brand-primary-dark: #6B3FA0;
    --color-brand-primary-light: #B18FDD;
    --color-brand-secondary: #9B72D1;
    --color-brand-secondary-dark: #7C56A8;
    --color-brand-secondary-light: #C9A9EA;

    --light-grey: #2B2144;
    --dark-neutral: #EDE6F7;
    --muted-neutral: #B3A6C9;

    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* --- Base page surface --- */
body {
    background-color: #17101F;
}

/* --- Elevated surfaces (cards, forms, dropdowns) ---
   --white is left alone (still used for button/badge text), so these
   surfaces are overridden directly instead of via the variable. */
.service-card,
.form-card,
.review-card,
.tier-card,
.dropdown-menu {
    background-color: #221A36;
}

.navbar {
    background-color: rgba(28, 21, 46, 0.97);
}

/* Header logo + hamburger must stay visible on the dark navbar.
   The logo PNG is recolored to brand-purple via filter in purple.css, which
   is too dark against the dark nav — force it white here (matching the mobile
   overlay treatment). Bootstrap's default toggler icon uses a dark stroke
   because the navbar isn't .navbar-dark, so swap in the light-stroke SVG. */
.navbar .logo-brand-primary {
    filter: brightness(0) invert(1);
}

.navbar-toggler {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-item {
    color: var(--dark-neutral);
}

.price-number {
    color: var(--color-brand-primary);
}

/* --- Footer: kept as the darkest anchor surface, independent of
   --color-brand-primary-dark (which is now a mid-purple hover tone,
   not dark enough on its own for a full-section background). --- */
footer {
    background-color: #120C1C;
}

/* --- Forms --- */
.form-control,
.form-select {
    background-color: #1C1530;
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--dark-neutral);
}

.form-control::placeholder {
    color: var(--muted-neutral);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: #1C1530;
    color: var(--dark-neutral);
}

/* --- Tables --- */
.table-premium td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Bootstrap sets --bs-table-bg to the (light) body background, which paints
   every cell white and hides the row .bg-white / .bg-light-grey surfaces
   (e.g. the same-day-crowns comparison table). Make cells transparent so the
   row background classes show through, and use light table text. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dark-neutral);
    --bs-table-border-color: rgba(255, 255, 255, 0.12);
}

/* --- Accordions (FAQ on the landing/service pages) ---
   All of Bootstrap's accordion vars default to light (white item bg, dark
   chevron icons, light-blue active state). Remap them to dark surfaces so the
   FAQ reads correctly in dark mode. */
.accordion {
    --bs-accordion-bg: #221A36;
    --bs-accordion-color: var(--dark-neutral);
    --bs-accordion-btn-color: var(--dark-neutral);
    --bs-accordion-btn-bg: #221A36;
    --bs-accordion-active-bg: #2B2144;
    --bs-accordion-active-color: var(--color-brand-primary-light);
    --bs-accordion-border-color: rgba(255, 255, 255, 0.12);
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(138, 92, 197, 0.25);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B18FDD'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9A9EA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* The accordion buttons carry a .text-brand-primary class in the markup; keep
   the open panel's header on the lighter active tone for contrast. */
.accordion-body {
    color: var(--muted-neutral);
}

/* --- Bootstrap utility classes not covered by our custom variables ---
   These are used dozens of times across the site's markup directly. */
.text-muted {
    color: var(--muted-neutral) !important;
}

.bg-white,
.bg-light {
    background-color: #221A36 !important;
}

.border,
.border-light {
    border-color: rgba(255, 255, 255, 0.12) !important;
}