/**
 * Light Theme — OfficeSuiteX
 * =============================================================
 * Design rules:
 *  - Every text/background pair meets WCAG AA (≥ 4.5 : 1 for normal, ≥ 3 : 1 for large)
 *  - Gradient orbs are decorative only — opacity capped at 0.14 so they never wash out text
 *  - Cards are solid white; no glass/transparency that can pick up a coloured background
 *  - Section backgrounds are clearly distinct: white → off-white → pale-blue-tint
 *  - All form controls have dark text (#0f172a) on white backgrounds
 *  - Muted text is #4b5a72  (≈ 6 : 1 on white) — never below 4.5 : 1
 * =============================================================
 */

/* ──────────────────────────────────────────────
   1. GLOBAL BASE
   ────────────────────────────────────────────── */

body.theme-light {
    background: #f0f4fa;        /* cool off-white base */
    color: #1a2740;             /* dark navy — ≈ 12 : 1 on white */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ── Bootstrap 5.3 body-level CSS custom properties ──────────────
     * These cascade through tables, badges, forms, links, etc.
     * Needed because Bootstrap 5.3 reads --bs-body-color / --bs-primary
     * from these variables on every component — not from our custom vars.
     * ─────────────────────────────────────────────────────────────── */

    --bs-body-color:        #1a2740;
    --bs-body-color-rgb:    26, 39, 64;
    --bs-body-bg:           #f0f4fa;
    --bs-body-bg-rgb:       240, 244, 250;
    --bs-secondary-color:   #4b5a72;
    --bs-tertiary-color:    #6b7a99;

    --bs-emphasis-color:    #0d1a2e;
    --bs-emphasis-color-rgb: 13, 26, 46;

    /* Primary brand — deep blue-600 for light surfaces */
    --bs-primary:           #1d4ed8;
    --bs-primary-rgb:       29, 78, 216;
    --bs-link-color:        #1d4ed8;
    --bs-link-color-rgb:    29, 78, 216;
    --bs-link-hover-color:  #1e40af;

    /* Borders */
    --bs-border-color:              #dde4f0;
    --bs-border-color-translucent:  rgba(15, 30, 60, 0.12);

    /* Code */
    --bs-code-color:        #7c3aed;
}

/* Animated background — very subtle gradient, NO harsh colours behind text */
body.theme-light .gradient-bg {
    background:
        radial-gradient(circle at 10% 8%,  rgba(56, 189, 248, 0.08) 0, transparent 48%),
        radial-gradient(circle at 90% 92%, rgba(167, 139, 250, 0.07) 0, transparent 46%),
        linear-gradient(180deg, #f8faff 0%, #f0f4fa 50%, #e8edf8 100%);
}

body.theme-light .gradient-orb {
    opacity: 0.12; /* Max so colours never interfere with text */
}

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

body.theme-light,
body.theme-light p {
    color: #1a2740;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
    color: #0d1a2e;  /* near-black navy — ≈ 14 : 1 on white */
}

body.theme-light .fw-bold:not(.badge) {
    color: #0d1a2e;
}

body.theme-light .lead {
    color: #2d3f59;  /* ≈ 8 : 1 on white */
}

body.theme-light .small {
    color: #3d5270;
}

body.theme-light .hero-section .lead {
    color: #2d3f59 !important;
}

body.theme-light .text-muted {
    color: #4b5a72 !important;  /* ≈ 6 : 1 on white ✓ */
}

/* Card list items and inline muted content */
body.theme-light .card-modern ul li,
body.theme-light .card-modern p.small,
body.theme-light .list-unstyled li {
    color: #3d5270 !important;
}

/* Gradient text — richer blue-to-violet for light surfaces */
body.theme-light .text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Step numbers */
body.theme-light .step-num {
    color: #ffffff;
}

/* Inline styles that use CSS variables we're overriding */
body.theme-light [style*="var(--text-muted)"] {
    color: #4b5a72 !important;
}

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

body.theme-light .navbar,
body.theme-light .navbar.navbar-dark {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #dde4f0;
    box-shadow: 0 1px 12px rgba(15, 30, 60, 0.07);
}

body.theme-light .navbar .navbar-brand {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .navbar .nav-link {
    color: #253655 !important;   /* ≈ 8 : 1 on white ✓ */
    font-weight: 500;
}

body.theme-light .navbar .nav-link:hover {
    color: #0d1a2e !important;
    background: rgba(15, 30, 60, 0.07);
}

body.theme-light .navbar .navbar-toggler {
    border-color: #c5cfe0;
    color: #1a2740;
}

body.theme-light .navbar .navbar-toggler-icon {
    filter: brightness(0.3);  /* darken the icon, never pure invert */
}

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

body.theme-light .btn-primary-modern {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(29, 78, 216, 0.30);
}

body.theme-light .btn-primary-modern:hover {
    background: linear-gradient(135deg, #1e40af 0%, #0284c7 100%);
    box-shadow: 0 6px 24px rgba(29, 78, 216, 0.38);
}

body.theme-light .btn-outline-secondary,
body.theme-light .btn-outline-primary {
    border-color: #c5cfe0;
    color: #253655;
    background: #ffffff;
}

body.theme-light .btn-outline-secondary:hover,
body.theme-light .btn-outline-primary:hover {
    background: #eff4ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

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

body.theme-light .card-modern {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 4px 24px rgba(15, 30, 60, 0.07);
    color: #1a2740;
    /* Cancel out dark-mode glass */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.theme-light .card-modern:hover {
    box-shadow: 0 8px 36px rgba(15, 30, 60, 0.11);
    border-color: rgba(29, 78, 216, 0.22);
    transform: translateY(-6px);
}

body.theme-light .stat-card {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 4px 18px rgba(15, 30, 60, 0.06);
    color: #1a2740;
}

body.theme-light .stat-card h4 {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Admin stat cards */
body.theme-light .admin-stat {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 4px 18px rgba(15, 30, 60, 0.06);
    color: #1a2740;
    backdrop-filter: none;
}

body.theme-light .admin-stat h6 {
    color: #4b5a72;
}

body.theme-light .admin-stat h2 {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .admin-stat.stat-success {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}

body.theme-light .admin-stat.stat-success h2 {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .admin-stat.stat-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
}

body.theme-light .admin-stat.stat-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}

body.theme-light .admin-stat.stat-warning h2 {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

body.theme-light .section-alt {
    background: linear-gradient(180deg, #eef4ff 0%, #f5f8ff 60%, #f0f4fa 100%);
}

body.theme-light .section-dark {
    background: #e8edf8;
}

body.theme-light #app-portal {
    background: linear-gradient(180deg, #f5f8ff 0%, #edf2ff 50%, #f5f8ff 100%);
    border-top-color: #dde4f0;
    border-bottom-color: #dde4f0;
}

body.theme-light #app-portal .card-modern i {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

body.theme-light .plan-card {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 6px 28px rgba(15, 30, 60, 0.07);
    color: #1a2740;
    backdrop-filter: none;
}

body.theme-light .plan-card.featured {
    border-color: rgba(29, 78, 216, 0.40);
    background: linear-gradient(145deg, #eff4ff 0%, #f3f0ff 100%);
    box-shadow: 0 12px 40px rgba(29, 78, 216, 0.14);
}

body.theme-light .plan-features li {
    border-bottom-color: #e8edf5;
    color: #3d5270;
}

body.theme-light .price span {
    color: #4b5a72;
    -webkit-text-fill-color: #4b5a72;
}

/* ──────────────────────────────────────────────
   8. TABLES
   ────────────────────────────────────────────── */

/* Override Bootstrap 5.3 table CSS custom properties for light theme */
body.theme-light table.table,
body.theme-light .main-content .table,
body.theme-light .card-modern .table {
    --bs-table-color:           #1a2740;
    --bs-table-bg:              transparent;
    --bs-table-border-color:    #dde4f0;
    --bs-table-striped-color:   #1a2740;
    --bs-table-striped-bg:      rgba(29, 78, 216, 0.03);
    --bs-table-hover-color:     #1a2740;
    --bs-table-hover-bg:        rgba(29, 78, 216, 0.04);
    --bs-table-active-color:    #1a2740;
    color: #1a2740;
}

/* Belt-and-suspenders: explicit colour on every cell */
body.theme-light .table > :not(caption) > * > *,
body.theme-light .main-content .table > :not(caption) > * > *,
body.theme-light .card-modern .table > :not(caption) > * > * {
    color: #1a2740;
    border-color: #dde4f0;
    background-color: transparent;
}

body.theme-light .table thead th,
body.theme-light .main-content .table thead th,
body.theme-light .card-modern .table thead th {
    border-bottom-color: #dde4f0;
    border-color: #dde4f0;
    color: #4b5a72;
    font-weight: 600;
}

body.theme-light .table tbody tr,
body.theme-light .main-content .table tbody td,
body.theme-light .card-modern .table tbody td {
    border-color: #e8edf5;
    color: #1a2740;
}

body.theme-light .table tbody tr:hover > *,
body.theme-light .main-content .table tbody tr:hover > *,
body.theme-light .card-modern .table tbody tr:hover > * {
    color: #1a2740;
    background: rgba(29, 78, 216, 0.04);
}

/* ──────────────────────────────────────────────
   9. DASHBOARD SIDEBAR & NAV
   ────────────────────────────────────────────── */

body.theme-light .sidebar {
    background: #ffffff;
    border-right: 1px solid #dde4f0;
    box-shadow: 2px 0 20px rgba(15, 30, 60, 0.05);
    color: #1a2740;
}

body.theme-light .main-content {
    background:
        radial-gradient(circle at 5% 0%, rgba(56, 189, 248, 0.06) 0, transparent 50%),
        #f0f4fa;
}

body.theme-light .nav-link-modern {
    color: #3d5270;
}

body.theme-light .nav-link-modern:hover,
body.theme-light .nav-link-modern.active {
    color: #1d4ed8;
    background: #eef4ff;
}

body.theme-light .navbar-brand,
body.theme-light .gradient-header .navbar-brand,
body.theme-light .sidebar .navbar-brand {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

body.theme-light .sidebar .px-4.mt-auto {
    border-top-color: #dde4f0;
}

body.theme-light .sidebar .d-flex.align-items-center.mb-3 {
    background: #f5f8ff;
    border-color: #dde4f0;
}

/* ──────────────────────────────────────────────
   10. PLAN UPGRADE CARDS (Dashboard)
   ────────────────────────────────────────────── */

body.theme-light .plan-upgrade-card {
    background: #f8faff;
    border: 1px solid #dde4f0;
    color: #1a2740;
}

body.theme-light .plan-upgrade-card:hover {
    background: #ffffff;
    border-color: rgba(29, 78, 216, 0.38);
    box-shadow: 0 6px 24px rgba(29, 78, 216, 0.10);
}

body.theme-light .plan-upgrade-card h6 {
    color: #0d1a2e;
    font-weight: 700;
}

body.theme-light .plan-upgrade-card .small,
body.theme-light .plan-upgrade-card .text-muted,
body.theme-light .plan-upgrade-card p {
    color: #4b5a72 !important;
}

body.theme-light .main-content .card-modern:has(#plansList) {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 4px 20px rgba(15, 30, 60, 0.06);
}

body.theme-light .main-content .card-modern:has(#plansList) h5.text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .main-content .badge {
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
    border: 1px solid rgba(29, 78, 216, 0.22);
    font-weight: 600;
}

/* ──────────────────────────────────────────────
   11. BILLING SECTION
   ────────────────────────────────────────────── */

body.theme-light #billingSection h5,
body.theme-light #billingPlanName {
    color: #0d1a2e !important;
}

body.theme-light #billingPlanExpiry,
body.theme-light #billingDevices,
body.theme-light #billingPaymentMode {
    color: #3d5270 !important;
}

/* ──────────────────────────────────────────────
   12. FORMS
   ────────────────────────────────────────────── */

body.theme-light .form-control,
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="password"],
body.theme-light input[type="tel"],
body.theme-light input[type="number"],
body.theme-light input[type="date"],
body.theme-light textarea,
body.theme-light .form-select {
    background-color: #ffffff;
    border: 1px solid #c5cfe0;
    color: #0d1a2e;
    -webkit-text-fill-color: #0d1a2e;
    box-shadow: inset 0 1px 3px rgba(15, 30, 60, 0.04);
}

body.theme-light .form-control:focus,
body.theme-light input:focus,
body.theme-light textarea:focus,
body.theme-light .form-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    background-color: #ffffff;
    color: #0d1a2e;
    -webkit-text-fill-color: #0d1a2e;
}

body.theme-light .form-control::placeholder,
body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
    color: #8fa3be;
    opacity: 1;
}

body.theme-light .form-label {
    color: #3d5270;
    font-weight: 500;
}

body.theme-light .form-check-input {
    background-color: #ffffff;
    border-color: #8fa3be;
}

body.theme-light .form-check-input:checked {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    border-color: transparent;
}

body.theme-light .form-check-label {
    color: #1a2740;
}

body.theme-light .input-group-text {
    background: #f0f4fa;
    border: 1px solid #c5cfe0;
    border-right: none;
    color: #4b5a72;
}

/* Autofill override — white bg, dark text */
body.theme-light .form-control:-webkit-autofill,
body.theme-light .form-control:-webkit-autofill:hover,
body.theme-light .form-control:-webkit-autofill:focus,
body.theme-light input:-webkit-autofill,
body.theme-light input:-webkit-autofill:hover,
body.theme-light input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0d1a2e !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ──────────────────────────────────────────────
   13. FAQ ACCORDION
   ────────────────────────────────────────────── */

body.theme-light #faq .accordion-custom .accordion-item {
    background: #ffffff;
    border: 1px solid #dde4f0;
}

body.theme-light #faq .accordion-button {
    background: #f8faff;
    color: #0d1a2e;
    font-weight: 500;
}

body.theme-light #faq .accordion-button:not(.collapsed) {
    color: #1d4ed8;
    background: #eef4ff;
    box-shadow: none;
}

body.theme-light #faq .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

body.theme-light #faq .accordion-body {
    background: #ffffff;
    color: #3d5270;
    border-top: 1px solid #e8edf5;
}

/* ──────────────────────────────────────────────
   14. TESTIMONIALS CAROUSEL
   ────────────────────────────────────────────── */

body.theme-light #testimonials .carousel-control-prev-icon,
body.theme-light #testimonials .carousel-control-next-icon {
    filter: invert(0.6) sepia(1) saturate(0.2);
    opacity: 1;
}

body.theme-light #testimonials .carousel-indicators button {
    background-color: rgba(15, 30, 60, 0.22);
}

body.theme-light #testimonials .carousel-indicators button.active {
    background-color: #1d4ed8;
}

/* ──────────────────────────────────────────────
   15. CHECKOUT
   ────────────────────────────────────────────── */

body.theme-light .checkout-summary {
    background: #f8faff !important;
    border: 1px solid #dde4f0;
    backdrop-filter: none;
    color: #1a2740;
}

body.theme-light .checkout-summary hr {
    border-color: #dde4f0;
}

body.theme-light .checkout-radio-card {
    background: #ffffff;
    border: 1px solid #dde4f0;
    color: #1a2740;
}

body.theme-light .checkout-radio-card:has(input:checked) {
    border-color: rgba(29, 78, 216, 0.42);
    background: linear-gradient(135deg, #eff4ff 0%, #f0ecff 100%);
    box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.18);
}

/* ──────────────────────────────────────────────
   16. FOOTER
   ────────────────────────────────────────────── */

body.theme-light footer,
body.theme-light .site-footer {
    background: linear-gradient(180deg, #e8edf8 0%, #dde4f0 100%);
    border-top-color: #c5cfe0;
}

body.theme-light .footer-heading {
    color: #253655;
}

body.theme-light .footer-desc,
body.theme-light .footer-link,
body.theme-light .footer-copy {
    color: #3d5270;
}

body.theme-light .footer-link:hover {
    color: #1d4ed8;
}

body.theme-light .footer-brand .footer-logo {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .footer-social {
    background: #ffffff;
    border: 1px solid #c5cfe0;
    color: #4b5a72;
}

body.theme-light .footer-social:hover {
    color: #1d4ed8;
    border-color: rgba(29, 78, 216, 0.30);
    background: #eff4ff;
}

body.theme-light .footer-bottom {
    border-top-color: #c5cfe0;
}

/* Footer email subscribe input */
body.theme-light .footer-subscribe .form-control,
body.theme-light #footerEmail {
    background-color: #ffffff !important;
    border-color: #c5cfe0 !important;
    color: #0d1a2e !important;
    -webkit-text-fill-color: #0d1a2e !important;
}

body.theme-light .footer-subscribe .form-control::placeholder {
    color: #8fa3be;
}

body.theme-light .footer-subscribe .form-control:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.18);
}

body.theme-light .footer-subscribe-msg {
    color: #4b5a72;
}

body.theme-light .link-accent {
    color: #1d4ed8;
}

body.theme-light .link-accent:hover {
    color: #1e40af;
}

/* ──────────────────────────────────────────────
   17. ADMIN DASHBOARD (body.admin-page.theme-light)
   ────────────────────────────────────────────── */

body.admin-page.theme-light {
    background: linear-gradient(165deg, #eef4ff 0%, #e8edf8 50%, #f0f4fa 100%);
    color: #1a2740;
}

body.admin-page.theme-light .gradient-bg {
    opacity: 0.30;
}

body.admin-page.theme-light .gradient-orb {
    opacity: 0.10;
}

body.admin-page.theme-light .navbar,
body.admin-page.theme-light .navbar.navbar-dark {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #dde4f0;
    box-shadow: 0 1px 12px rgba(15, 30, 60, 0.07);
}

body.admin-page.theme-light .navbar .navbar-brand {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

body.admin-page.theme-light .navbar .nav-link {
    color: #253655 !important;
}

body.admin-page.theme-light .admin-stat {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 4px 18px rgba(15, 30, 60, 0.06);
    color: #1a2740;
    backdrop-filter: none;
}

body.admin-page.theme-light .admin-stat h6 {
    color: #4b5a72;
}

body.admin-page.theme-light .admin-stat h2 {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.admin-page.theme-light .admin-stat.stat-success h2 {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.admin-page.theme-light .admin-stat.stat-warning h2 {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.admin-page.theme-light .admin-tabs .nav-pills .nav-link {
    background: #ffffff;
    border: 1px solid #dde4f0;
    color: #3d5270;
    font-weight: 500;
}

body.admin-page.theme-light .admin-tabs .nav-pills .nav-link:hover {
    color: #0d1a2e;
    border-color: rgba(29, 78, 216, 0.30);
    background: #f5f8ff;
}

body.admin-page.theme-light .admin-tabs .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    color: #ffffff;
    border-color: transparent;
}

body.admin-page.theme-light .card-modern {
    background: #ffffff;
    border: 1px solid #dde4f0;
    color: #1a2740;
    box-shadow: 0 4px 24px rgba(15, 30, 60, 0.07);
    backdrop-filter: none;
}

body.admin-page.theme-light .card-modern:hover {
    box-shadow: 0 8px 36px rgba(15, 30, 60, 0.11);
}

body.admin-page.theme-light .card-modern .text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.admin-page.theme-light .table {
    --bs-table-color:           #1a2740;
    --bs-table-bg:              transparent;
    --bs-table-border-color:    #dde4f0;
    --bs-table-hover-color:     #1a2740;
    --bs-table-hover-bg:        rgba(29, 78, 216, 0.04);
    --bs-table-striped-color:   #1a2740;
    color: #1a2740;
}

body.admin-page.theme-light .table > :not(caption) > * > * {
    color: #1a2740;
    border-color: #dde4f0;
    background-color: transparent;
}

body.admin-page.theme-light .table thead th {
    border-color: #dde4f0;
    color: #4b5a72;
}

body.admin-page.theme-light .table tbody td {
    border-color: #e8edf5;
    color: #1a2740;
}

body.admin-page.theme-light .table tbody tr:hover > * {
    color: #1a2740;
    background: rgba(29, 78, 216, 0.04);
}

body.admin-page.theme-light .form-control,
body.admin-page.theme-light .form-select {
    background: #ffffff;
    border: 1px solid #c5cfe0;
    color: #0d1a2e;
    -webkit-text-fill-color: #0d1a2e;
}

body.admin-page.theme-light .form-control:focus,
body.admin-page.theme-light .form-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    background: #ffffff;
}

body.admin-page.theme-light .form-label {
    color: #3d5270;
    font-weight: 500;
}

body.admin-page.theme-light .input-group-text {
    background: #f0f4fa;
    border-color: #c5cfe0;
    color: #4b5a72;
}

body.admin-page.theme-light .pagination .page-link {
    background: #ffffff;
    border-color: #dde4f0;
    color: #253655;
}

body.admin-page.theme-light .pagination .page-link:hover {
    background: #f0f4fa;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

body.admin-page.theme-light .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
    border-color: transparent;
    color: #ffffff;
}

body.admin-page.theme-light .text-muted {
    color: #4b5a72 !important;
}

/* ──────────────────────────────────────────────
   18. ADMIN LOGIN (body.admin-login-page.theme-light)
   ────────────────────────────────────────────── */

body.admin-login-page.theme-light {
    background: linear-gradient(165deg, #dbeafe 0%, #f0f4fa 50%, #f8faff 100%);
    color: #1a2740;
}

body.admin-login-page.theme-light .gradient-orb {
    opacity: 0.10;
}

body.admin-login-page.theme-light .card-modern {
    background: #ffffff;
    border: 1px solid #dde4f0;
    box-shadow: 0 16px 48px rgba(15, 30, 60, 0.12);
    color: #1a2740;
    backdrop-filter: none;
}

body.admin-login-page.theme-light .form-control,
body.admin-login-page.theme-light .input-group-text {
    background: #ffffff;
    border: 1px solid #c5cfe0;
    color: #0d1a2e;
    -webkit-text-fill-color: #0d1a2e;
}

body.admin-login-page.theme-light .form-control:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

body.admin-login-page.theme-light .text-muted,
body.admin-login-page.theme-light label {
    color: #3d5270 !important;
}

/* ──────────────────────────────────────────────
   19. GDPR CONSENT BANNER & MODAL
   ────────────────────────────────────────────── */

body.theme-light .gdpr-banner {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #dde4f0;
    box-shadow: 0 -6px 28px rgba(15, 30, 60, 0.08);
    color: #1a2740;
}

body.theme-light .gdpr-banner .gdpr-title {
    color: #0d1a2e;
    font-weight: 600;
}

body.theme-light .gdpr-banner .gdpr-desc {
    color: #3d5270;
}

body.theme-light .gdpr-banner .gdpr-link {
    color: #1d4ed8;
}

body.theme-light .gdpr-banner .gdpr-link:hover {
    color: #1e40af;
}

body.theme-light .gdpr-modal .modal-content.gdpr-modal-content,
body.theme-light .gdpr-modal-content {
    background: #ffffff;
    border: 1px solid #dde4f0;
    color: #1a2740;
}

body.theme-light .gdpr-modal .modal-header {
    border-bottom-color: #e8edf5;
}

body.theme-light .gdpr-modal .modal-footer {
    border-top-color: #e8edf5;
}

body.theme-light .gdpr-modal .modal-title {
    color: #0d1a2e;
}

body.theme-light .gdpr-modal-intro {
    color: #3d5270;
}

body.theme-light .gdpr-pref-row {
    background: #f5f8ff;
    border: 1px solid #dde4f0;
}

body.theme-light .gdpr-pref-desc {
    color: #4b5a72;
}

body.theme-light .gdpr-modal .form-check-input {
    background-color: #ffffff;
    border-color: #8fa3be;
}

body.theme-light .gdpr-modal .form-check-input:checked {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

body.theme-light .gdpr-modal-footer-text {
    color: #4b5a72;
}

body.theme-light .gdpr-modal-footer-text .gdpr-link {
    color: #1d4ed8;
}

body.theme-light .notification-toast {
    color: #0d1a2e;
    background: #ffffff;
    border: 1px solid #dde4f0;
}

/* ──────────────────────────────────────────────
   20. MISC UTILITY OVERRIDES
   ────────────────────────────────────────────── */

/* Gradient header bar used in mobile dashboard */
body.theme-light .gradient-header {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #dde4f0;
    box-shadow: 0 1px 12px rgba(15, 30, 60, 0.07);
}

/* Section alt with visible background */
body.theme-light .section-alt {
    background: linear-gradient(180deg, #eef4ff 0%, #f5f8ff 70%, #f0f4fa 100%);
}

/* Hero badge */
body.theme-light .hero-section .badge {
    background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
}

/* Outline button text in main content area */
body.theme-light .main-content .btn-outline-primary {
    border-color: #1d4ed8;
    color: #1d4ed8;
    background: transparent;
}

body.theme-light .main-content .btn-outline-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}

body.theme-light .main-content .btn-outline-danger {
    border-color: #dc2626;
    color: #dc2626;
    background: transparent;
}

body.theme-light .main-content .btn-outline-danger:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Admin tabs in nav-tabs (light variant) */
body.theme-light .admin-tabs .nav-link {
    color: #3d5270;
    background: rgba(240, 244, 250, 0.95);
    border: 1px solid #dde4f0;
    font-weight: 500;
}

body.theme-light .admin-tabs .nav-link.active {
    color: #0d1a2e;
    background: #ffffff;
    border-bottom: 2px solid #1d4ed8;
}

/* Hero device slider — clean light frame */
body.theme-light .hero-device-slider {
    background: radial-gradient(circle at top left, #dbeafe, #eff6ff);
    border: 1px solid #c5cfe0;
    box-shadow: 0 16px 48px rgba(15, 30, 60, 0.12);
}

body.theme-light .hero-device-frame {
    background: radial-gradient(circle at top, #e0f2fe, #f0f9ff);
    border: 1px solid #c5cfe0;
}

/* Dot active indicator */
body.theme-light .hero-device-dots .dot {
    background: rgba(15, 30, 60, 0.25);
}

body.theme-light .hero-device-dots .dot.active {
    background: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.20);
}

/* ──────────────────────────────────────────────
   21. BADGES (light theme)
   ────────────────────────────────────────────── */

/*
 * card-heading / card-value — replaces inline style="color: #f1f5f9;" in HTML
 * so billing section headings and values are dark in light theme.
 */
body.theme-light .card-heading {
    color: #0d1a2e;
}

body.theme-light .card-value {
    color: #1a2740;
}

/* Semi-transparent primary badge in light theme — ensure dark text on light bg */
body.theme-light .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(29, 78, 216, 0.10) !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(29, 78, 216, 0.22);
}

/* bg-warning: amber bg with dark text — keep Bootstrap default, reinforce text */
body.theme-light .badge.bg-warning {
    color: #111827 !important;
}

/* bg-info: Bootstrap cyan — dark text for contrast */
body.theme-light .badge.bg-info {
    color: #0d1a2e !important;
}

/* bg-secondary: ensure readable on light */
body.theme-light .badge.bg-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

/* code / monospace elements in tables */
body.theme-light code,
body.theme-light .font-monospace {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.07);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.875em;
}

/* Links inside light-theme tables */
body.theme-light .table a {
    color: #1d4ed8;
}

body.theme-light .table a:hover {
    color: #1e40af;
}

/* Custom plain badge (no bg-* class) in light theme */
body.theme-light .main-content .badge:not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="bg-secondary"]):not([class*="bg-dark"]):not([class*="bg-light"]):not([class*="bg-primary"]) {
    background: rgba(29, 78, 216, 0.10);
    color: #1d4ed8;
    border: 1px solid rgba(29, 78, 216, 0.22);
    font-weight: 600;
}