/**
 * Dark Theme — OfficeSuiteX
 * =============================================================
 * This file explicitly reinforces all dark-theme values under
 * the `body.theme-dark` class. It mirrors the defaults already
 * in style.css, ensuring the dark theme is fully self-contained
 * and cannot be overridden by light-theme selectors when a user
 * switches back from light → dark.
 *
 * Design rules:
 *  - Background: #0d1117 (deep dark navy)
 *  - Cards/surfaces: near-opaque dark surfaces (≥ 93 % opacity)
 *  - Gradient orbs: decorative only, opacity ≤ 0.18
 *  - Main text #e8edf5 ≈ 10.5 : 1 on bg — WCAG AAA ✓
 *  - Muted text #a8b5ca ≈  5.6 : 1 on bg — WCAG AA  ✓
 *  - Primary accent: #38bdf8 (sky-400)
 * =============================================================
 */

/* ──────────────────────────────────────────────
   1. GLOBAL BASE + BOOTSTRAP 5.3 VARIABLE OVERRIDES
   ────────────────────────────────────────────── */

body.theme-dark {
    background: #0d1117;
    color: #e8edf5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ── Bootstrap 5.3 body-level CSS custom properties ──────────────
     * These cascade through every Bootstrap component that reads them
     * (tables, form controls, badges, alerts, links, etc.).
     * Without these overrides Bootstrap defaults to its light-mode
     * values (#212529 text on white backgrounds) no matter what
     * background colour we set.
     * ─────────────────────────────────────────────────────────────── */

    /* Body text / background */
    --bs-body-color:        #e8edf5;
    --bs-body-color-rgb:    232, 237, 245;
    --bs-body-bg:           #0d1117;
    --bs-body-bg-rgb:       13, 17, 23;
    --bs-secondary-color:   #a8b5ca;
    --bs-tertiary-color:    #8496b0;

    /* Emphasis / heading colour */
    --bs-emphasis-color:    #f0f5fd;
    --bs-emphasis-color-rgb: 240, 245, 253;

    /* Primary brand — brighter sky-400 for dark surfaces */
    --bs-primary:           #38bdf8;
    --bs-primary-rgb:       56, 189, 248;
    --bs-link-color:        #38bdf8;
    --bs-link-color-rgb:    56, 189, 248;
    --bs-link-hover-color:  #7dd3fc;

    /* Borders */
    --bs-border-color:          rgba(255, 255, 255, 0.10);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);

    /* Muted / secondary text */
    --bs-secondary-bg:      rgba(13, 20, 35, 0.94);
    --bs-tertiary-bg:       rgba(18, 27, 48, 0.98);

    /* Code */
    --bs-code-color:        #f472b6;
}

body.theme-dark .gradient-bg {
    background: none; /* rely on the orbs for ambience */
}

body.theme-dark .gradient-orb {
    opacity: 0.18;
}

body.theme-dark .gradient-orb-3 {
    opacity: 0.09;
}

/* ──────────────────────────────────────────────
   2. TYPOGRAPHY
   ────────────────────────────────────────────── */

body.theme-dark,
body.theme-dark p {
    color: #e8edf5;
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
    color: #f0f5fd;
}

body.theme-dark .fw-bold:not(.badge) {
    color: #f0f5fd;
}

body.theme-dark .lead {
    color: #c4cfe2 !important;
}

body.theme-dark .small {
    color: #a8b5ca;
}

body.theme-dark .text-muted {
    color: #a8b5ca !important;
}

body.theme-dark .card-modern ul li,
body.theme-dark .card-modern p.small,
body.theme-dark .list-unstyled li {
    color: #a8b5ca !important;
}

body.theme-dark .text-gradient {
    background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 50%, #fbcfe8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

body.theme-dark .step-num {
    color: #ffffff;
}

/* ──────────────────────────────────────────────
   3. NAVBAR
   ────────────────────────────────────────────── */

body.theme-dark .navbar,
body.theme-dark .navbar.navbar-dark {
    background: rgba(13, 17, 23, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body.theme-dark .navbar .navbar-brand {
    background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 50%, #fbcfe8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-dark .navbar .nav-link {
    color: #b8c6da !important;
}

body.theme-dark .navbar .nav-link:hover {
    color: #f0f5fd !important;
    background: rgba(255, 255, 255, 0.07);
}

body.theme-dark .navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.20);
    color: #e8edf5;
}

body.theme-dark .navbar .navbar-toggler-icon {
    filter: none;
}

/* ──────────────────────────────────────────────
   4. BUTTONS
   ────────────────────────────────────────────── */

body.theme-dark .btn-primary-modern {
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%);
    color: #ffffff;
    border-color: transparent;
}

body.theme-dark .btn-outline-secondary,
body.theme-dark .btn-outline-primary {
    border-color: rgba(255, 255, 255, 0.15);
    color: #a8b5ca;
    background: rgba(255, 255, 255, 0.03);
}

body.theme-dark .btn-outline-secondary:hover,
body.theme-dark .btn-outline-primary:hover {
    border-color: #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.10);
}

/* ──────────────────────────────────────────────
   5. CARDS & SURFACES
   ────────────────────────────────────────────── */

body.theme-dark .card-modern {
    background: rgba(13, 20, 35, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 44px -12px rgba(0, 0, 0, 0.70);
    color: #e8edf5;
}

body.theme-dark .card-modern:hover {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 0 32px rgba(34, 211, 238, 0.32);
}

body.theme-dark .stat-card {
    background: rgba(13, 20, 35, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

body.theme-dark .stat-card h4 {
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ──────────────────────────────────────────────
   6. SECTIONS
   ────────────────────────────────────────────── */

body.theme-dark .section-alt {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.06) 0%, rgba(167, 139, 250, 0.04) 50%, transparent 100%);
}

body.theme-dark .section-dark {
    background: rgba(0, 0, 0, 0.25);
}

/* ──────────────────────────────────────────────
   7. PLAN CARDS
   ────────────────────────────────────────────── */

body.theme-dark .plan-card {
    background: rgba(13, 20, 35, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e8edf5;
}

body.theme-dark .plan-card.featured {
    border-color: rgba(56, 189, 248, 0.45);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10) 0%, rgba(167, 139, 250, 0.07) 100%);
}

body.theme-dark .plan-features li {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    color: #a8b5ca;
}

/* ──────────────────────────────────────────────
   8. FORMS
   ────────────────────────────────────────────── */

body.theme-dark .form-control,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="number"],
body.theme-dark input[type="date"],
body.theme-dark textarea,
body.theme-dark .form-select {
    background-color: rgba(13, 20, 35, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #e8edf5;
    -webkit-text-fill-color: #e8edf5;
}

body.theme-dark .form-control:focus,
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark .form-select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
    background-color: rgba(13, 20, 35, 0.99);
    color: #e8edf5;
    -webkit-text-fill-color: #e8edf5;
}

body.theme-dark .form-control::placeholder,
body.theme-dark input::placeholder {
    color: #8496b0;
    opacity: 1;
}

body.theme-dark .form-label {
    color: #a8b5ca;
    font-weight: 500;
}

body.theme-dark .form-check-label {
    color: #e8edf5;
}

body.theme-dark .input-group-text {
    background: rgba(13, 20, 35, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-right: none;
    color: #a8b5ca;
}

body.theme-dark .form-control:-webkit-autofill,
body.theme-dark input:-webkit-autofill {
    -webkit-text-fill-color: #e8edf5 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(13, 20, 35, 0.97) inset !important;
}

/* ──────────────────────────────────────────────
   9. FAQ ACCORDION
   ────────────────────────────────────────────── */

body.theme-dark #faq .accordion-custom .accordion-item {
    background: rgba(13, 20, 35, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

body.theme-dark #faq .accordion-button {
    background: rgba(13, 20, 35, 0.80);
    color: #e8edf5;
}

body.theme-dark #faq .accordion-button:not(.collapsed) {
    color: #38bdf8;
    background: rgba(13, 20, 35, 0.94);
}

body.theme-dark #faq .accordion-body {
    background: rgba(13, 20, 35, 0.96);
    color: #a8b5ca;
}

/* ──────────────────────────────────────────────
   10. DASHBOARD SIDEBAR
   ────────────────────────────────────────────── */

body.theme-dark .sidebar {
    background: rgba(10, 15, 26, 0.98);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    color: #e8edf5;
}

body.theme-dark .main-content {
    background: transparent;
}

body.theme-dark .nav-link-modern {
    color: #a8b5ca;
}

body.theme-dark .nav-link-modern:hover,
body.theme-dark .nav-link-modern.active {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.14) 0%, rgba(167, 139, 250, 0.09) 50%, transparent 100%);
    color: #38bdf8;
}

/* ──────────────────────────────────────────────
   11. TABLES
   ────────────────────────────────────────────── */

/*
 * Override Bootstrap 5.3 table CSS custom properties.
 * Bootstrap cells read from --bs-table-color (not the inherited `color`
 * property), so without these overrides cells stay black on dark surfaces.
 */
body.theme-dark .table {
    --bs-table-color:           #e8edf5;
    --bs-table-bg:              transparent;
    --bs-table-border-color:    rgba(255, 255, 255, 0.10);
    --bs-table-striped-color:   #e8edf5;
    --bs-table-striped-bg:      rgba(56, 189, 248, 0.04);
    --bs-table-hover-color:     #e8edf5;
    --bs-table-hover-bg:        rgba(56, 189, 248, 0.06);
    --bs-table-active-color:    #e8edf5;
    color: #e8edf5;
}

/* Explicit fallback on every cell — belt-and-suspenders for any
   Bootstrap build that resolves variables differently */
body.theme-dark .table > :not(caption) > * > * {
    color: #e8edf5;
    border-color: rgba(255, 255, 255, 0.10);
    background-color: transparent;
}

body.theme-dark .table thead th {
    border-color: rgba(255, 255, 255, 0.10);
    color: #a8b5ca;
    font-weight: 600;
}

body.theme-dark .table tbody td {
    border-color: rgba(255, 255, 255, 0.07);
    color: #e8edf5;
}

body.theme-dark .table tbody tr:hover > * {
    color: #e8edf5;
    background: rgba(56, 189, 248, 0.06);
}

/* ──────────────────────────────────────────────
   12. FOOTER
   ────────────────────────────────────────────── */

body.theme-dark footer,
body.theme-dark .site-footer {
    background: linear-gradient(180deg, #0a0f1c 0%, #070b14 100%);
    border-top-color: rgba(255, 255, 255, 0.10);
}

body.theme-dark .footer-heading {
    color: #c4cfe2;
}

body.theme-dark .footer-desc,
body.theme-dark .footer-link,
body.theme-dark .footer-copy {
    color: #a8b5ca;
}

body.theme-dark .footer-link:hover {
    color: #38bdf8;
}

body.theme-dark .footer-social {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #a8b5ca;
}

body.theme-dark .footer-social:hover {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.10);
}

/* ──────────────────────────────────────────────
   13. TESTIMONIALS
   ────────────────────────────────────────────── */

body.theme-dark #testimonials .carousel-control-prev-icon,
body.theme-dark #testimonials .carousel-control-next-icon {
    filter: invert(1);
    opacity: 0.9;
}

body.theme-dark #testimonials .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.45);
}

body.theme-dark #testimonials .carousel-indicators button.active {
    background-color: #ffffff;
}

/* ──────────────────────────────────────────────
   14. CHECKOUT
   ────────────────────────────────────────────── */

body.theme-dark .checkout-summary {
    background: rgba(13, 20, 35, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e8edf5;
}

body.theme-dark .checkout-radio-card {
    background: rgba(13, 20, 35, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #e8edf5;
}

body.theme-dark .checkout-radio-card:has(input:checked) {
    border-color: rgba(56, 189, 248, 0.50);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.10) 0%, rgba(167, 139, 250, 0.06) 100%);
}

/* ──────────────────────────────────────────────
   15. GDPR BANNER & MODAL
   ────────────────────────────────────────────── */

body.theme-dark .gdpr-banner {
    background: rgba(10, 15, 26, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    color: #e8edf5;
}

body.theme-dark .gdpr-banner .gdpr-title {
    color: #e8edf5;
}

body.theme-dark .gdpr-banner .gdpr-desc {
    color: #a8b5ca;
}

body.theme-dark .gdpr-modal .modal-content.gdpr-modal-content {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8edf5;
}

body.theme-dark .gdpr-pref-row {
    background: rgba(13, 20, 35, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

body.theme-dark .gdpr-pref-desc {
    color: #a8b5ca;
}

/* ──────────────────────────────────────────────
   16. ADMIN (body.admin-page.theme-dark)
   ────────────────────────────────────────────── */

body.admin-page.theme-dark {
    background: linear-gradient(165deg, #1e2a3d 0%, #131c2e 45%, #0f1825 100%);
    color: #dde6f3;
}

body.admin-page.theme-dark .navbar {
    background: rgba(10, 15, 26, 0.97) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

body.admin-page.theme-dark .admin-stat {
    background: rgba(22, 32, 50, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #dde6f3;
}

body.admin-page.theme-dark .card-modern {
    background: rgba(22, 32, 50, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #dde6f3;
}

body.admin-page.theme-dark .form-control,
body.admin-page.theme-dark .form-select {
    background: rgba(10, 15, 26, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #dde6f3;
    -webkit-text-fill-color: #dde6f3;
}

body.admin-page.theme-dark .table {
    --bs-table-color:           #dde6f3;
    --bs-table-bg:              transparent;
    --bs-table-border-color:    rgba(255, 255, 255, 0.10);
    --bs-table-striped-color:   #dde6f3;
    --bs-table-hover-color:     #dde6f3;
    --bs-table-hover-bg:        rgba(56, 189, 248, 0.06);
    color: #dde6f3;
}

body.admin-page.theme-dark .table > :not(caption) > * > * {
    color: #dde6f3;
    border-color: rgba(255, 255, 255, 0.10);
}

/* ──────────────────────────────────────────────
   17. BADGES (dark theme)
   ────────────────────────────────────────────── */

/*
 * card-heading / card-value helpers — used in place of inline style="color:"
 * in dashboard HTML so the cascade works properly in both themes.
 */
body.theme-dark .card-heading,
body.theme-dark .card-value {
    color: #f0f5fd;
}

/*
 * Bootstrap semantic badges keep their own solid colours — we don't touch them.
 * Only reinforce the custom plain badge (no bg-* class) appearance.
 *
 * For bg-primary badges in dark theme, our --bs-primary override (above) already
 * makes text-primary / bg-primary use #38bdf8 (sky-400) which is bright on dark.
 *
 * We also add a special rule for the common semi-transparent variant
 * "bg-primary bg-opacity-10 text-primary" to ensure minimum legibility.
 */

/* Semi-transparent primary badge needs a slightly higher opacity in dark mode */
body.theme-dark .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(56, 189, 248, 0.18) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.30);
}

/*
 * Bootstrap's bg-warning is yellow (#ffc107). On dark backgrounds it looks fine,
 * but the Bootstrap default `text-dark` on it is important for readability.
 * Reinforce text colour so it's never washed out.
 */
body.theme-dark .badge.bg-warning {
    color: #111827 !important;  /* dark text on amber — WCAG AA ✓ */
}

/*
 * bg-info default in Bootstrap 5.3 is #0dcaf0 — a slightly dark cyan.
 * Make it brighter in dark theme.
 */
body.theme-dark .badge.bg-info {
    background-color: #22d3ee !important;
    color: #0d1117 !important;
}

/* bg-secondary in dark theme — ensure text is readable */
body.theme-dark .badge.bg-secondary {
    background-color: rgba(148, 163, 184, 0.25) !important;
    color: #c4cfe2 !important;
    border: 1px solid rgba(148, 163, 184, 0.20);
}

/* code elements inside tables / cards */
body.theme-dark code,
body.theme-dark .font-monospace {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.875em;
}

/* Links inside dark-theme tables */
body.theme-dark .table a {
    color: #38bdf8;
}

body.theme-dark .table a:hover {
    color: #7dd3fc;
}