/* ==========================================================================
   MentalJoy public site: dark theme.
   Active when <html data-theme="dark"> (set before paint by the theme script
   in base.html: automatic from the device, or picked in the navbar switch).
   The light theme lives in base.html / app-style.css and is left untouched;
   everything here only re-colors it: deep teal-ink surfaces, warm gold
   headings, a brighter teal for links and accents.
   ========================================================================== */

/* ---- Logo swap + theme switch (both themes) ---------------------------- */
.logo-on-dark { display: none !important; }
:root[data-theme="dark"] .logo-on-light { display: none !important; }
:root[data-theme="dark"] .logo-on-dark { display: inline-block !important; }
:root[data-theme="dark"] .about-seal-logo.logo-on-dark { display: block !important; }

.theme-switch__icon { display: none; }
:root[data-theme-pref="auto"] .theme-switch__icon--auto,
:root[data-theme-pref="light"] .theme-switch__icon--light,
:root[data-theme-pref="dark"] .theme-switch__icon--dark,
:root:not([data-theme-pref]) .theme-switch__icon--auto { display: inline-block; }

.theme-switch__btn:not(.mj-icon-btn) {
    width: 40px; height: 40px; padding: 0;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 128, 128, 0.18);
    background: rgba(0, 128, 128, 0.06);
    color: var(--color-primary-dark);
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.theme-switch__btn:not(.mj-icon-btn):hover { background: rgba(0, 128, 128, 0.14); transform: rotate(-12deg); }
.theme-switch__menu { min-width: 13rem; padding: 0.4rem; border-radius: 12px; font-size: 0.95rem; }
.theme-switch__menu .dropdown-item { display: flex; align-items: center; gap: 0.6rem; border-radius: 8px; padding: 0.5rem 0.75rem; }
.theme-switch__menu .dropdown-item i { width: 1.1rem; text-align: center; color: var(--color-primary); }
.theme-switch__menu .dropdown-item small { margin-left: auto; opacity: 0.6; font-size: 0.75rem; }
:root[data-theme-pref="auto"] .theme-switch__menu [data-theme-set="auto"],
:root[data-theme-pref="light"] .theme-switch__menu [data-theme-set="light"],
:root[data-theme-pref="dark"] .theme-switch__menu [data-theme-set="dark"] {
    background: rgba(0, 128, 128, 0.12); color: inherit; font-weight: 600;
}

/* ---- Tokens ------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --dk-canvas: #0E1819;
    --dk-surface: #152224;
    --dk-surface-2: #1A2A2C;
    --dk-surface-3: #213436;
    --dk-border: rgba(143, 203, 201, 0.14);
    --dk-border-strong: rgba(143, 203, 201, 0.26);
    --dk-text: #E4ECEA;
    --dk-text-2: #B3C2BF;
    --dk-text-3: #8FA1A2;
    --dk-teal: #4FC0BC;
    --dk-teal-strong: #0E7C7B;
    --dk-teal-hover: #13A09E;
    --dk-gold: #E2C27A;
    --dk-gold-2: #C9A54E;
    --dk-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* Remap the site's own palette so every var()-based rule follows. */
    --color-primary: #3FB3AF;
    --color-primary-dark: #5CC9C5;
    --color-primary-light: #2C7C7A;
    --color-secondary: #C9A54E;
    --color-secondary-dark: #E2C27A;
    --color-secondary-light: #4A3D1E;
    --color-background-light: #152224;
    --color-background-medium: #1A2A2C;
    --color-text-dark: #E4ECEA;
    --color-text-medium: #B3C2BF;
    --color-text-light: #87999A;
    --color-border: rgba(143, 203, 201, 0.14);
    --color-shadow-light: rgba(0, 0, 0, 0.25);
    --color-shadow-medium: rgba(0, 0, 0, 0.4);

    /* Bootstrap 5.3 dark mode, nudged to the brand */
    --bs-body-bg: #0E1819;
    --bs-body-color: #E4ECEA;
    --bs-secondary-color: #B3C2BF;
    --bs-tertiary-bg: #1A2A2C;
    --bs-border-color: rgba(143, 203, 201, 0.14);
    --bs-link-color: #4FC0BC;
    --bs-link-color-rgb: 79, 192, 188;
    --bs-link-hover-color: #7AD6D2;
    --bs-emphasis-color: #F3F7F6;
}

/* ---- Page background ---------------------------------------------------- */
:root[data-theme="dark"] body:not(.admin-app-body):not(.admin-login-body):not(.print-body) {
    color: var(--dk-text);
    background:
        radial-gradient(circle at 10% 18%, rgba(0, 128, 128, 0.22), transparent 30rem),
        radial-gradient(circle at 88% 10%, rgba(184, 134, 11, 0.14), transparent 27rem),
        radial-gradient(circle at 54% 112%, rgba(77, 153, 153, 0.16), transparent 34rem),
        linear-gradient(135deg, #0C1617 0%, #0F1B1C 45%, #14170F 100%);
    background-size: 135% 135%, 130% 130%, 125% 125%, 100% 100%;
}
:root[data-theme="dark"] body:not(.admin-app-body)::before { opacity: 0.45; }
:root[data-theme="dark"] body:not(.admin-app-body)::after {
    background:
        linear-gradient(115deg, rgba(10, 20, 21, 0.55), rgba(10, 20, 21, 0.2)),
        radial-gradient(circle at 50% 0%, rgba(79, 192, 188, 0.06), transparent 36rem);
}

/* ---- Shell: navbar, footer, cookie banner ------------------------------ */
:root[data-theme="dark"] .navbar {
    background-color: rgba(14, 24, 25, 0.88) !important;
    -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
    border-bottom-color: var(--dk-border);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35) !important;
}
:root[data-theme="dark"] .navbar-nav .nav-link { color: var(--dk-text-2) !important; }
:root[data-theme="dark"] .navbar-nav .nav-link:hover { color: var(--dk-teal) !important; }
:root[data-theme="dark"] .navbar-toggler { border-color: var(--dk-border-strong); }
:root[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23B3C2BF' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .theme-switch__btn:not(.mj-icon-btn) {
    border-color: var(--dk-border-strong); background: rgba(79, 192, 188, 0.08); color: var(--dk-gold);
}
:root[data-theme="dark"] .theme-switch__btn:not(.mj-icon-btn):hover { background: rgba(79, 192, 188, 0.16); }
:root[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--dk-surface-2);
    --bs-dropdown-border-color: var(--dk-border-strong);
    --bs-dropdown-link-color: var(--dk-text);
    --bs-dropdown-link-hover-bg: rgba(79, 192, 188, 0.12);
    --bs-dropdown-link-hover-color: var(--dk-text);
    box-shadow: var(--dk-shadow);
}
:root[data-theme="dark"] .theme-switch__menu .dropdown-item i { color: var(--dk-teal); }
:root[data-theme="dark"] footer {
    background-color: var(--dk-canvas) !important;
    color: var(--dk-text-2);
    border-top-color: var(--dk-border);
}
:root[data-theme="dark"] footer a { color: var(--dk-gold); }
:root[data-theme="dark"] footer a:hover { color: var(--dk-teal); }
:root[data-theme="dark"] footer .legal-links a:first-child {
    background-color: var(--dk-surface-2) !important; color: var(--dk-text-2) !important; border-color: var(--dk-border-strong) !important;
}
:root[data-theme="dark"] footer img[alt="ANPC SAL"] { filter: brightness(0.92); border-radius: 4px; background: #fff; padding: 2px; }
:root[data-theme="dark"] #cookie-banner { background-color: var(--dk-surface-2); color: var(--dk-text); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] #cookie-banner #reject-cookies { background-color: var(--dk-surface-3); }

/* ---- Typography --------------------------------------------------------- */
:root[data-theme="dark"] .text-dark { color: var(--dk-text) !important; }
:root[data-theme="dark"] .text-muted { color: var(--dk-text-3) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; }
:root[data-theme="dark"] .bg-light { background-color: var(--dk-surface-2) !important; }
:root[data-theme="dark"] .page-title { text-shadow: none; }
:root[data-theme="dark"] [style*="color: #333333"],
:root[data-theme="dark"] [style*="color: rgb(51, 51, 51)"] { color: var(--dk-text-2) !important; }
:root[data-theme="dark"] ::selection { background: rgba(79, 192, 188, 0.35); color: #fff; }

/* ---- Generic surfaces (cards, sections, inline-styled panels) ---------- */
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content {
    background-color: var(--dk-surface);
    color: var(--dk-text);
    border-color: var(--dk-border);
}
/* site-motion.js sets a custom property on revealed elements, and the browser
   then rewrites the whole style attribute with rgb() colors, so each hex
   selector below needs its rgb() twin. */
:root[data-theme="dark"] [style*="background: #ffffff"],
:root[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
:root[data-theme="dark"] [style*="background-color: white"]:not(footer *),
:root[data-theme="dark"] [style*="linear-gradient(135deg, #ffffff"],
:root[data-theme="dark"] [style*="linear-gradient(135deg, rgb(255, 255, 255)"] {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
:root[data-theme="dark"] [style*="background: #f8faf9"],
:root[data-theme="dark"] [style*="background: rgb(248, 250, 249)"],
:root[data-theme="dark"] [style*="background-color: #f8f9fa"],
:root[data-theme="dark"] [style*="background-color: rgb(248, 249, 250)"],
:root[data-theme="dark"] [style*="linear-gradient(135deg, #f8faf9"],
:root[data-theme="dark"] [style*="linear-gradient(135deg, rgb(248, 250, 249)"] {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
}
:root[data-theme="dark"] [style*="background: #fff8eb"],
:root[data-theme="dark"] [style*="background: rgb(255, 248, 235)"] {
    background: rgba(201, 165, 78, 0.12) !important;
    border-color: rgba(226, 194, 122, 0.25) !important;
}
:root[data-theme="dark"] .shadow,
:root[data-theme="dark"] .shadow-sm { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32) !important; }

/* ---- Buttons ------------------------------------------------------------ */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-success { background-color: var(--dk-teal-strong); color: #fff; }
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-success:hover { background-color: var(--dk-teal-hover); color: #fff; }
:root[data-theme="dark"] .btn-secondary { background-color: #A77C17; color: #fff; }
:root[data-theme="dark"] .btn-info { background-color: var(--dk-gold-2); color: #1A1407; }
:root[data-theme="dark"] .btn-outline-primary { color: var(--dk-teal); border-color: rgba(79, 192, 188, 0.45); }
:root[data-theme="dark"] .btn-outline-primary:hover { background: var(--dk-teal-strong); border-color: var(--dk-teal-strong); color: #fff; }

/* ---- Forms -------------------------------------------------------------- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--dk-canvas);
    color: var(--dk-text);
    border-color: var(--dk-border-strong);
    box-shadow: none;
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--dk-text-3); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: var(--dk-canvas); color: var(--dk-text);
    border-color: var(--dk-teal); box-shadow: 0 0 0 0.22rem rgba(79, 192, 188, 0.22);
}
:root[data-theme="dark"] label { color: var(--dk-text-2); }

/* ---- Tables / alerts ---------------------------------------------------- */
:root[data-theme="dark"] .table {
    --bs-table-bg: var(--dk-surface);
    --bs-table-color: var(--dk-text);
    --bs-table-striped-bg: var(--dk-surface-2);
    --bs-table-hover-bg: rgba(201, 165, 78, 0.12);
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
}
:root[data-theme="dark"] .table thead th { background-color: #7A5E17; color: #FFF7E3; }
:root[data-theme="dark"] .table tbody tr:hover { background-color: rgba(201, 165, 78, 0.12); }
:root[data-theme="dark"] .alert-info { background: rgba(201, 165, 78, 0.14); color: var(--dk-gold); border-color: rgba(226, 194, 122, 0.3); }
:root[data-theme="dark"] .alert-success { background: rgba(79, 192, 188, 0.14); color: var(--dk-teal); border-color: rgba(79, 192, 188, 0.3); }
:root[data-theme="dark"] .alert-warning { background: rgba(217, 160, 40, 0.16); color: #F2C46B; border-color: rgba(242, 196, 107, 0.3); }
:root[data-theme="dark"] .alert-danger { background: rgba(240, 138, 138, 0.12); color: #F3A3A3; border-color: rgba(240, 138, 138, 0.3); }

/* ---- Article / announcement cards -------------------------------------- */
:root[data-theme="dark"] .announcement-card,
:root[data-theme="dark"] .article-card {
    background-color: var(--dk-surface);
    border-color: var(--dk-border) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .announcement-card:hover,
:root[data-theme="dark"] .article-card:hover { border-color: rgba(79, 192, 188, 0.4) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important; }
:root[data-theme="dark"] .content-card-media,
:root[data-theme="dark"] .article-cover-frame,
:root[data-theme="dark"] .announcement-image-frame {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.12), rgba(184, 134, 11, 0.1)), var(--dk-surface-2);
    border-color: var(--dk-border);
}
:root[data-theme="dark"] .card-body-fixed { background: var(--dk-surface); }
:root[data-theme="dark"] .card-author-tag { color: var(--dk-text-3); }
:root[data-theme="dark"] .card-title-fixed,
:root[data-theme="dark"] .card-title-fixed a { color: var(--dk-text); }
:root[data-theme="dark"] .card-title-fixed a:hover,
:root[data-theme="dark"] .article-card:hover .card-title-fixed a { color: var(--dk-teal); }
:root[data-theme="dark"] .card-preview-fixed { color: var(--dk-text-2); }
:root[data-theme="dark"] .btn-card-action { background: rgba(79, 192, 188, 0.1); color: var(--dk-teal); border-color: rgba(79, 192, 188, 0.25); }
:root[data-theme="dark"] .btn-card-action:hover { background: var(--dk-teal-strong); }
:root[data-theme="dark"] .card-date-badge { background: rgba(79, 192, 188, 0.1); color: var(--dk-teal); }

/* ---- Home --------------------------------------------------------------- */
:root[data-theme="dark"] .hero-wrapper-c {
    background: rgba(21, 34, 36, 0.92);
    border-color: var(--dk-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .hero-wrapper-c::before { opacity: 0.6; }
:root[data-theme="dark"] .hero-chip-badge { background: rgba(79, 192, 188, 0.1); border-color: rgba(79, 192, 188, 0.3); color: var(--dk-teal); }
:root[data-theme="dark"] .hero-trust-item { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .btn-hero-call { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-teal); }
:root[data-theme="dark"] .btn-hero-call:hover { background: var(--dk-teal-strong); color: #fff; }
:root[data-theme="dark"] .doctor-portrait-box,
:root[data-theme="dark"] .doctor-overlay-card { background: var(--dk-surface-2); border-color: var(--dk-border); }
:root[data-theme="dark"] .home-highlight-card,
:root[data-theme="dark"] .home-highlight-content { background: var(--dk-surface); border-color: var(--dk-border); }
:root[data-theme="dark"] .home-highlight-media { background: var(--dk-surface-2); }
:root[data-theme="dark"] .home-highlight-desc { color: var(--dk-text-2); }
:root[data-theme="dark"] .section-wrapper-c,
:root[data-theme="dark"] .about-doctor-container,
:root[data-theme="dark"] .contact-hub-wrapper,
:root[data-theme="dark"] .specialty-grid-item,
:root[data-theme="dark"] .booking-pathway-card,
:root[data-theme="dark"] .cas-step-card {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
:root[data-theme="dark"] .specialty-grid-item:hover,
:root[data-theme="dark"] .booking-pathway-card:hover { border-color: rgba(79, 192, 188, 0.4); }
:root[data-theme="dark"] .pathway-logo-container { background: #F4F7F6; } /* partner logos are dark-on-transparent */
:root[data-theme="dark"] .cas-banner-container {
    background: linear-gradient(135deg, #152224 0%, #172628 50%, #1F2216 100%);
    border-color: var(--dk-border);
}
:root[data-theme="dark"] .about-badge-pill { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .about-profile-card { background: var(--dk-surface); border-color: var(--dk-border); }

/* Google reviews */
:root[data-theme="dark"] .google-reviews-panel {
    background: linear-gradient(135deg, rgba(0, 128, 128, 0.14), rgba(184, 134, 11, 0.1)), var(--dk-surface);
    border-color: var(--dk-border);
}
:root[data-theme="dark"] .google-reviews-link,
:root[data-theme="dark"] .google-review-slide,
:root[data-theme="dark"] .google-review-control { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .google-review-text { color: var(--dk-text-2); }

/* ---- Contact ------------------------------------------------------------ */
:root[data-theme="dark"] .working-hour-row,
:root[data-theme="dark"] .address-box-c { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .btn-contact-phone,
:root[data-theme="dark"] .btn-contact-email { background: var(--dk-surface-2); border-color: var(--dk-border-strong); color: var(--dk-teal); }
:root[data-theme="dark"] .map-frame-wrapper { border-color: var(--dk-border); }
:root[data-theme="dark"] .map-frame-wrapper iframe { filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(0.95); }

/* ---- Booking ------------------------------------------------------------ */
:root[data-theme="dark"] .booking-form-panel,
:root[data-theme="dark"] .booking-choice-panel { background: var(--dk-surface); border-color: var(--dk-border); }
:root[data-theme="dark"] .booking-support-panel {
    background: linear-gradient(180deg, rgba(0, 128, 128, 0.14), rgba(184, 134, 11, 0.06)), var(--dk-surface);
    border-color: var(--dk-border);
}
:root[data-theme="dark"] .booking-support-content { background: rgba(21, 34, 36, 0.94); border-top-color: var(--dk-border); }
:root[data-theme="dark"] .booking-support-steps div { background: linear-gradient(90deg, rgba(79, 192, 188, 0.12), transparent); color: var(--dk-text); }
:root[data-theme="dark"] .booking-section-mark { background: radial-gradient(circle at 35% 28%, rgba(79, 192, 188, 0.22), rgba(184, 134, 11, 0.12)); border-color: var(--dk-border); }
:root[data-theme="dark"] .booking-form .form-control { background: var(--dk-canvas); }
:root[data-theme="dark"] .booking-section-heading p,
:root[data-theme="dark"] .booking-option-card p,
:root[data-theme="dark"] .booking-support-content p { color: var(--dk-text-2); }

/* ---- Article body ------------------------------------------------------- */
:root[data-theme="dark"] .article-content { color: var(--dk-text-2) !important; }
:root[data-theme="dark"] .article-content :is(h1, h2, h3, h4) { color: var(--dk-gold); }
:root[data-theme="dark"] .article-content a { color: var(--dk-teal); }
:root[data-theme="dark"] .article-content blockquote { border-left-color: var(--dk-teal); color: var(--dk-text); }

/* Photos: a touch less glare on a dark page */
:root[data-theme="dark"] .content-card-image,
:root[data-theme="dark"] .article-cover-image,
:root[data-theme="dark"] .announcement-image { filter: brightness(0.94); }

/* ---- Visibility fixes: dark artwork and Bootstrap colors on dark ------ */
/* Bootstrap's own blue/red/green utilities are tuned for white pages. */
:root[data-theme="dark"] .text-primary { color: var(--dk-teal) !important; }
:root[data-theme="dark"] .text-danger { color: #F3A3A3 !important; }
:root[data-theme="dark"] .badge.bg-light.text-success { color: var(--dk-teal) !important; }

/* White digits on the light-gold step badges */
:root[data-theme="dark"] .cas-step-num { color: #1A1407; }

/* The CNAS logo is navy artwork; give it a light tile like the partner logos. */
:root[data-theme="dark"] .cas-banner-logo-img {
    background: #F4F7F6;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
}

/* TikTok's black circle disappears on the dark canvas */
:root[data-theme="dark"] .social-icon-tiktok {
    background-color: #000;
    box-shadow: 0 0 0 1px rgba(228, 236, 234, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Consent checkboxes were a dark square on a dark card */
:root[data-theme="dark"] .form-check-input {
    background-color: var(--dk-surface-3);
    border: 1px solid rgba(228, 236, 234, 0.55);
}
:root[data-theme="dark"] .form-check-input:checked { background-color: var(--dk-teal-strong); border-color: var(--dk-teal); }
:root[data-theme="dark"] .form-check-input:focus { border-color: var(--dk-teal); box-shadow: 0 0 0 0.22rem rgba(79, 192, 188, 0.22); }

/* Booking day and time picker */
:root[data-theme="dark"] .slot-option label { background: var(--dk-canvas); border-color: var(--dk-border-strong); color: var(--dk-text); }
:root[data-theme="dark"] .slot-option label:hover { background: rgba(79, 192, 188, 0.12); border-color: var(--dk-teal); }
:root[data-theme="dark"] .slot-day-note { color: var(--dk-text-3); }
:root[data-theme="dark"] .slot-radio:checked + label { background: var(--dk-teal-strong); border-color: var(--dk-teal); color: #fff; }
:root[data-theme="dark"] .slot-radio:checked + label .slot-day-note { color: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .slot-radio:focus-visible + label { outline-color: var(--dk-gold); }
:root[data-theme="dark"] .slot-radio:disabled + label { background: transparent; color: var(--dk-text-3); }