/* Academy theme tokens. Palette sampled from the student app: navy canvas, slate cards, sky accent. */
:root,
html[data-theme="light"] {
    --ink: #141a22;
    --muted: #4a5568;
    --paper: #f3f6f9;
    --card: #ffffff;
    --surface-2: #f6f8fb;
    --surface-3: #e9eef4;
    --line: #dbe2ea;
    --cobalt: #18718f;
    --cobalt-deep: #145f79;
    --wash: #e3f2f8;
    --accent-ink: #ffffff;
    --dock-bg: rgba(255, 255, 255, 0.94);
    --shadow: 0 10px 28px rgba(20, 30, 45, 0.08);
    color-scheme: light;
}

html[data-theme="dark"] {
    --ink: #eef2f7;
    --muted: #9aa6b8;
    --paper: #111820;
    --card: #1d2530;
    --surface-2: #18202a;
    --surface-3: #263040;
    --surface: var(--card);
    --ink-soft: #c9d2de;
    --ok: #4fd1a1;
    --ok-wash: rgba(79, 209, 161, 0.14);
    --lock: #ff8a80;
    --lock-wash: rgba(255, 138, 128, 0.14);
    --line: #2b3646;
    --cobalt: #6fc0de;
    --cobalt-deep: #8fd0e8;
    --wash: rgba(111, 192, 222, 0.14);
    --accent-ink: #0d1a22;
    --dock-bg: rgba(29, 37, 48, 0.94);
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;

    --bs-body-bg: var(--paper);
    --bs-body-bg-rgb: 17, 24, 32;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 238, 242, 247;
    --bs-emphasis-color: var(--ink);
    --bs-emphasis-color-rgb: 238, 242, 247;
    --bs-secondary-color: var(--muted);
    --bs-secondary-bg: var(--card);
    --bs-secondary-bg-rgb: 29, 37, 48;
    --bs-tertiary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-2);
    --bs-tertiary-bg-rgb: 24, 32, 42;
    --bs-heading-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-link-color: var(--cobalt);
    --bs-link-color-rgb: 111, 192, 222;
    --bs-link-hover-color: var(--cobalt-deep);
    --bs-link-hover-color-rgb: 143, 208, 232;
    --bs-primary: #6fc0de;
    --bs-primary-rgb: 111, 192, 222;
    --bs-primary-text-emphasis: #a9dcef;
    --bs-primary-bg-subtle: rgba(111, 192, 222, 0.14);
    --bs-primary-border-subtle: rgba(111, 192, 222, 0.35);
    --bs-form-valid-color: #4fd1a1;
    --bs-form-invalid-color: #ff8a80;
}

html[data-theme="dark"] body {
    background-color: var(--paper);
    color: var(--ink);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--ink);
}

html[data-theme="dark"] ::selection {
    background: rgba(111, 192, 222, 0.35);
    color: var(--ink);
}

html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 2px;
}

/* Logos: show the light variant on dark surfaces */
.theme-logo-light { display: none !important; }
html[data-theme="dark"] .theme-logo-dark { display: none !important; }
html[data-theme="dark"] .theme-logo-light { display: inline-block !important; }

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--cobalt);
    color: var(--cobalt);
}

.theme-toggle:active {
    transform: scale(0.96);
}

.theme-toggle--compact {
    width: 40px;
    padding: 0;
}

.header-area .theme-toggle,
.ol-header .theme-toggle {
    margin-inline-end: 8px;
}

.theme-toggle-icon,
.theme-toggle-label {
    display: none;
}

.theme-toggle-icon {
    font-size: 15px;
}

html[data-theme="dark"] .theme-toggle-icon--sun,
html[data-theme="dark"] .theme-toggle-label--light,
html[data-theme="light"] .theme-toggle-icon--moon,
html[data-theme="light"] .theme-toggle-label--dark {
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}

/* Shared surfaces Bootstrap does not theme on its own */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .toast {
    background-color: var(--card) !important;
    color: var(--ink);
    border-color: var(--line) !important;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--wash) !important;
    color: var(--cobalt);
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .link-dark {
    color: var(--ink) !important;
}

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

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr {
    border-color: var(--line) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .nice-select,
html[data-theme="dark"] .nice-select .list,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .tagify,
html[data-theme="dark"] .note-editor,
html[data-theme="dark"] .note-editable,
html[data-theme="dark"] .note-toolbar,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] {
    background-color: var(--surface-2) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] input:focus {
    border-color: var(--cobalt) !important;
    box-shadow: 0 0 0 3px rgba(111, 192, 222, 0.2) !important;
}

html[data-theme="dark"] ::placeholder,
html[data-theme="dark"] .form-control::placeholder {
    color: #7d8a9c !important;
    opacity: 1;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--card) !important;
    color: var(--muted) !important;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
    color: var(--ink);
}

html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus,
html[data-theme="dark"] .nice-select .option.selected.focus,
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--wash) !important;
    color: var(--cobalt) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .nice-select .current {
    color: var(--ink) !important;
}

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: rgba(111, 192, 222, 0.07);
    --bs-table-hover-color: var(--ink);
    color: var(--ink);
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--ink);
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table thead td {
    color: var(--muted);
    background-color: var(--surface-2);
}

/* Buttons: sky accent with dark ink, matching the app */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .eBtn.gradient,
html[data-theme="dark"] .gradient,
html[data-theme="dark"] .ol-btn-primary {
    background: var(--cobalt) !important;
    border-color: var(--cobalt) !important;
    color: var(--accent-ink) !important;
    -webkit-text-fill-color: currentColor;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .eBtn.gradient:hover,
html[data-theme="dark"] .ol-btn-primary:hover {
    background: var(--cobalt-deep) !important;
    border-color: var(--cobalt-deep) !important;
    color: var(--accent-ink) !important;
}

html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .ol-btn-outline-secondary,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-outline-secondary {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .ol-btn-outline-secondary:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--wash) !important;
    color: var(--cobalt) !important;
    border-color: var(--cobalt) !important;
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-dark {
    background-color: var(--surface-3) !important;
    color: var(--ink) !important;
}

/* Gradient text in legacy headings stays readable */
html[data-theme="dark"] .gradient.color,
html[data-theme="dark"] .gradient-text,
html[data-theme="dark"] span.gradient {
    background: none !important;
    color: var(--cobalt) !important;
    -webkit-text-fill-color: var(--cobalt) !important;
}

/* Inline SVG icons drawn with hardcoded dark strokes */
html[data-theme="dark"] svg [stroke="#192335"],
html[data-theme="dark"] svg [stroke="#6B7385"],
html[data-theme="dark"] svg [stroke="#6b7385"],
html[data-theme="dark"] svg [stroke="#2D4356"],
html[data-theme="dark"] svg [stroke="#000"],
html[data-theme="dark"] svg [stroke="#000000"],
html[data-theme="dark"] svg [stroke="black"] {
    stroke: var(--ink);
}

html[data-theme="dark"] svg [fill="#192335"],
html[data-theme="dark"] svg [fill="#6B7385"],
html[data-theme="dark"] svg [fill="#6b7385"],
html[data-theme="dark"] svg [fill="#2D4356"],
html[data-theme="dark"] svg [fill="#000"],
html[data-theme="dark"] svg [fill="#000000"],
html[data-theme="dark"] svg [fill="black"] {
    fill: var(--ink);
}

/* Inline style attributes left in templates */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--card) !important;
}

html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #192335"],
html[data-theme="dark"] [style*="color:#192335"],
html[data-theme="dark"] [style*="color: black"] {
    color: var(--ink) !important;
}

/* Footer and header framing */
html[data-theme="dark"] .header-area,
html[data-theme="dark"] .ol-header {
    background-color: rgba(17, 24, 32, 0.92) !important;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="dark"] .footer-area,
html[data-theme="dark"] footer {
    background-color: #0c1218 !important;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

html[data-theme="dark"] .footer-area a,
html[data-theme="dark"] footer a {
    color: var(--muted);
}

html[data-theme="dark"] .footer-area a:hover,
html[data-theme="dark"] footer a:hover {
    color: var(--cobalt);
}

/* Admin and instructor shells */
html[data-theme="dark"] .ol-sidebar {
    background-color: #0c1218 !important;
    border-inline-end: 1px solid var(--line);
}

html[data-theme="dark"] .ol-sidebar-content,
html[data-theme="dark"] .ol-body-content,
html[data-theme="dark"] main {
    background-color: var(--paper);
}

html[data-theme="dark"] .ol-card,
html[data-theme="dark"] .ol-card-body {
    background-color: var(--card) !important;
    color: var(--ink);
    border-color: var(--line) !important;
}

html[data-theme="dark"] .ol-sidebar a,
html[data-theme="dark"] .ol-sidebar .sidebar-nav-link,
html[data-theme="dark"] .ol-sidebar .text {
    color: var(--muted) !important;
}

html[data-theme="dark"] .ol-sidebar a:hover,
html[data-theme="dark"] .ol-sidebar .active > a,
html[data-theme="dark"] .ol-sidebar a.active {
    color: var(--cobalt) !important;
    background-color: var(--wash) !important;
}

html[data-theme="dark"] .ol-sidebar [class^="fi-"],
html[data-theme="dark"] .ol-sidebar [class*=" fi-"] {
    color: inherit;
}

/* Parent portal uses its own tokens */
html[data-theme="dark"] .pp {
    --pp-canvas: var(--paper);
    --pp-surface: var(--card);
    --pp-ink: var(--ink);
    --pp-navy: var(--cobalt);
    --pp-muted: var(--muted);
    --pp-line: var(--line);
    --pp-accent: var(--cobalt);
    --pp-accent-soft: var(--wash);
    --pp-present: #4fd1a1;
    --pp-late: #f0b429;
    --pp-absent: #ff8a80;
    --pp-excused: #a7b4c4;
    --pp-shadow: var(--shadow);
}

/* EMS (classes, attendance, chat) */
html[data-theme="dark"] {
    --ems-ink: var(--ink);
    --ems-paper: var(--paper);
    --ems-card: var(--card);
    --ems-line: var(--line);
    --ems-muted: var(--muted);
    --ems-accent: var(--cobalt);
    --ems-accent-deep: var(--cobalt-deep);
    --ems-wash: var(--wash);
    --ems-ok: #4fd1a1;
    --ems-warn: #f0b429;
    --ems-danger: #ff8a80;
    --ems-shadow: var(--shadow);
}

html[data-theme="dark"] .ems-badge.late { background: rgba(240, 180, 41, 0.16); color: #f0b429; }
html[data-theme="dark"] .ems-badge.absent { background: rgba(255, 138, 128, 0.16); color: #ff8a80; }
html[data-theme="dark"] .ems-badge.present { background: rgba(79, 209, 161, 0.16); color: #4fd1a1; }

/* Status colors that are too dark on navy */
html[data-theme="dark"] .text-success { color: #4fd1a1 !important; }
html[data-theme="dark"] .text-danger { color: #ff8a80 !important; }
html[data-theme="dark"] .text-warning { color: #f0b429 !important; }
html[data-theme="dark"] .text-primary { color: var(--cobalt) !important; }
html[data-theme="dark"] .text-info { color: #8fd0e8 !important; }

html[data-theme="dark"] .alert {
    background-color: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

html[data-theme="dark"] .alert-success { border-color: rgba(79, 209, 161, 0.4); }
html[data-theme="dark"] .alert-danger { border-color: rgba(255, 138, 128, 0.4); }
html[data-theme="dark"] .alert-warning { border-color: rgba(240, 180, 41, 0.4); }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary { border-color: rgba(111, 192, 222, 0.4); }

/* Toastr + SweetAlert */
html[data-theme="dark"] .swal2-popup {
    background: var(--card) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--ink) !important;
}

/* Plyr / video surfaces stay black */
html[data-theme="dark"] .plyr,
html[data-theme="dark"] video {
    background: #000;
}

/* Filled accent surfaces carry dark ink, never white */
html[data-theme="dark"] .pp-btn-primary,
html[data-theme="dark"] .pp-btn-primary:hover,
html[data-theme="dark"] .pp-tabs a:hover,
html[data-theme="dark"] .pp-tabs a.active,
html[data-theme="dark"] .pp-msg.mine,
html[data-theme="dark"] .pp-msg.child,
html[data-theme="dark"] .ems-btn-primary,
html[data-theme="dark"] .ems-btn-primary:hover,
html[data-theme="dark"] .footer-area .eBtn,
html[data-theme="dark"] .footer-area .eBtn:hover,
html[data-theme="dark"] .footer-contact-btn,
html[data-theme="dark"] .footer-contact-btn:hover,
html[data-theme="dark"] .newslater-form button,
html[data-theme="dark"] .playing-header-btns .my-courses-btn,
html[data-theme="dark"] .playing-header-btns .my-courses-btn:hover,
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--cobalt) !important;
    border-color: var(--cobalt) !important;
    color: var(--accent-ink) !important;
}

html[data-theme="dark"] .pp-btn-primary:hover,
html[data-theme="dark"] .ems-btn-primary:hover,
html[data-theme="dark"] .footer-area .eBtn:hover,
html[data-theme="dark"] .footer-contact-btn:hover,
html[data-theme="dark"] .playing-header-btns .my-courses-btn:hover {
    background-color: var(--cobalt-deep) !important;
}

html[data-theme="dark"] .pp-msg.mine *,
html[data-theme="dark"] .pp-msg.child * {
    color: inherit;
}

html[data-theme="dark"] .booking-link-box {
    background: var(--card) !important;
    border: 1px solid var(--line);
    color: var(--ink) !important;
}

html[data-theme="dark"] .booking-link-box .text-white,
html[data-theme="dark"] .booking-link-box h5 {
    color: var(--ink) !important;
}

html[data-theme="dark"] .booking-link-box .text-white-50 {
    color: var(--muted) !important;
}

/* Secondary "learn more" style links read as quiet outline buttons */
html[data-theme="dark"] .eBtn.learn-btn,
html[data-theme="dark"] .learn-btn {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor;
    box-shadow: none !important;
}

html[data-theme="dark"] .eBtn.learn-btn:hover,
html[data-theme="dark"] .learn-btn:hover {
    background: var(--wash) !important;
    border-color: var(--cobalt) !important;
    color: var(--cobalt) !important;
}

html[data-theme="dark"] .banner-btn .learn-btn i {
    background: var(--surface-3);
    color: var(--ink);
}

html[data-theme="dark"] .cart-top-number {
    background-color: var(--cobalt);
    color: var(--accent-ink);
    font-weight: 700;
}

html[data-theme="dark"] .ol-btn-secondary {
    background: var(--surface-3) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme="dark"] .ol-btn-secondary:hover {
    border-color: var(--cobalt) !important;
    color: var(--cobalt) !important;
}

/* Quieter framing on navy: hairline frames and a tinted banner instead of solid sky */
html[data-theme="dark"] .gradient-border,
html[data-theme="dark"] .gradient-border2 {
    background: var(--line);
    border-color: var(--line) !important;
    color: inherit;
}

html[data-theme="dark"] body.student-surface .profile-banner-area {
    background:
        radial-gradient(circle at 85% 0%, rgba(111, 192, 222, 0.22), transparent 55%),
        linear-gradient(120deg, #16212c, #1a2836 60%, #1d2f3d);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

/* Static page header (about, faq, policies): its image is missing, so it needs its own surface */
section.py-56[data-background] {
    background:
        radial-gradient(circle at 85% 0%, rgba(111, 192, 222, 0.22), transparent 55%),
        linear-gradient(120deg, #16212c, #1a2836 60%, #1d2f3d);
}

section.py-56[data-background] {
    padding: 48px 0 56px;
    color: #eef2f7;
}

section.py-56[data-background] .ul-ol {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

section.py-56[data-background] .ul-ol li {
    gap: 10px;
}

section.py-56[data-background] .ul-ol p {
    margin: 0;
    font-size: 15px;
    color: #9aa6b8 !important;
}

section.py-56[data-background] .ul-ol li:last-child p {
    color: #eef2f7 !important;
}

section.py-56[data-background] .ul-ol img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

html[dir="rtl"] section.py-56[data-background] .ul-ol img[src*="arrow-right"] {
    transform: scaleX(-1);
}

section.py-56[data-background] h4 {
    margin: 0;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    color: #eef2f7 !important;
}

section.py-56[data-background] img[src*="home.svg"] {
    filter: brightness(0) invert(1);
}

.accordion-button,
.accordion-button h1,
.accordion-button h2,
.accordion-button h3,
.accordion-button h4,
.accordion-button h5,
.accordion-button h6 {
    font-family: inherit;
}

/* Light mode: one accent, no legacy blue-purple gradients */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .eBtn.gradient,
html[data-theme="light"] .ol-btn-primary {
    background: var(--cobalt) !important;
    border-color: var(--cobalt) !important;
    color: var(--accent-ink) !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .eBtn.gradient:hover,
html[data-theme="light"] .ol-btn-primary:hover {
    background: var(--cobalt-deep) !important;
    border-color: var(--cobalt-deep) !important;
}

html[data-theme="light"] .booking-link-box {
    background: linear-gradient(135deg, #18718f, #145f79) !important;
}

html[data-theme="light"] .cart-top-number {
    background-color: var(--cobalt);
    color: #fff;
}

html[data-theme="light"] .badge.bg-active { background: #d8f3ea !important; color: #0b6b51 !important; }
html[data-theme="light"] .badge.bg-pending { background: #fde4ee !important; color: #b0144f !important; }

html[data-theme="light"] .login-form .form-check-label,
html[data-theme="light"] .login-form p,
html[data-theme="light"] .login-form p a,
html[data-theme="light"] .accordion-body .answer,
html[data-theme="light"] .banner-content p {
    color: var(--muted);
}

html[data-theme="light"] .login-form p a {
    color: var(--cobalt);
}

html[data-theme="light"] .course-sideBar .profile-info .email,
html[data-theme="light"] .frontend-shell section > .container.py-4 > h4,
html[data-theme="light"] .frontend-shell section > .container.py-4 > p {
    color: var(--muted);
}

html[data-theme="light"] .frontend-shell section > .container.py-4 > h4 {
    color: var(--ink);
}

html[data-theme="light"] .eBtn.learn-btn {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] .eBtn.learn-btn:hover {
    background: var(--wash) !important;
    border-color: var(--cobalt) !important;
    color: var(--cobalt) !important;
}

html[data-theme="light"] .ol-body-content .badge.bg-success { color: #0b6b51 !important; }
html[data-theme="light"] .ol-body-content .badge.bg-warning { color: #7a4f00 !important; }

/* Dashboard chart legend swatches match the themed chart */
html[data-theme="dark"] .info-list-color.bg-upcoming { background-color: var(--cobalt); }
html[data-theme="dark"] .info-list-color.bg-private { background-color: #5b6678; }
html[data-theme="dark"] .info-list-color.bg-inactive { background-color: #334155; }
html[data-theme="light"] .info-list-color.bg-upcoming { background-color: var(--cobalt); }
html[data-theme="light"] .info-list-color.bg-private { background-color: #141a22; }

/* Status badges: tinted fills with readable text */
html[data-theme="dark"] .badge.bg-active { background: rgba(79, 209, 161, 0.16) !important; color: #4fd1a1 !important; }
html[data-theme="dark"] .badge.bg-pending { background: rgba(255, 138, 128, 0.16) !important; color: #ff8a80 !important; }
html[data-theme="dark"] .badge.bg-upcoming { background: rgba(111, 192, 222, 0.16) !important; color: var(--cobalt) !important; }
html[data-theme="dark"] .badge.bg-private { background: var(--surface-3) !important; color: var(--ink) !important; }
html[data-theme="dark"] .badge.bg-draft { background: rgba(154, 166, 184, 0.16) !important; color: var(--muted) !important; }

/* Course player */
html[data-theme="dark"] .playing-header-section {
    background: #0c1218;
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .playing-video-title .title {
    color: var(--ink);
}

html[data-theme="dark"] .course-video-area,
html[data-theme="dark"] .custom-system-video {
    background: #0a0f14 !important;
}

html[data-theme="dark"] #pills-tab .nav-link {
    background: transparent;
    color: var(--muted);
}

html[data-theme="dark"] #pills-tab .nav-link span {
    color: inherit;
}

html[data-theme="dark"] #pills-tab .nav-link:hover {
    color: var(--ink);
}

html[data-theme="dark"] #pills-tab .nav-link.active {
    color: var(--cobalt);
}

/* Scrollbars */
html[data-theme="dark"] {
    scrollbar-color: #334155 var(--paper);
}