/* Global dark mode system for every LMS page.
   This file is intentionally loaded after page CSS so all portals share one theme. */

html[data-theme="dark"] {
    color-scheme: dark;
    --dark-page: #343840;
    --dark-surface: #424750;
    --dark-surface-soft: #4a505a;
    --dark-control: #4d535d;
    --dark-hover: #5a616d;
    --dark-border: #64707f;
    --dark-control-border: #6f7a89;
    --dark-text: #ffffff;
    --dark-muted: #d6deea;
    --dark-disabled: #b8c2cf;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .site-frame,
html[data-theme="dark"] main,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] [class*="page"],
html[data-theme="dark"] [class*="shell"],
html[data-theme="dark"] [class*="main"],
html[data-theme="dark"] [class*="workspace"],
html[data-theme="dark"] [class*="layout"] {
    background: var(--dark-page) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(
    .navbar,
    .card,
    .glass-card,
    .modal-content,
    .modal-header,
    .modal-body,
    .modal-footer,
    .dropdown-menu,
    .list-group-item,
    .accordion,
    .accordion-item,
    .accordion-button,
    .alert,
    .page-link,
    .footer-shell,
    [class*="card"],
    [class*="panel"],
    [class*="box"],
    [class*="frame"],
    [class*="tile"],
    [class*="drawer"],
    [class*="feature"],
    [class*="launcher"],
    [class*="summary"],
    [class*="activity"],
    [class*="document"],
    [class*="module"],
    [class*="request"],
    [class*="history"],
    [class*="notification"],
    [class*="empty"],
    [class*="hero"],
    [class*="banner"],
    [class*="notice"],
    [class*="strip"],
    [class*="meta"],
    [class*="list"],
    [class*="section"]
):not(.badge):not(.badge *):not(.status-pill):not(.status-pill *):not(.doc-status):not(.doc-status *):not(.target-pill):not(.target-pill *):not(.state-pill):not(.state-pill *):not(.admin-role-pill):not(.admin-role-pill *):not(.version-badge):not(.version-badge *) {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(
    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .input-group-text,
    .btn-outline-primary,
    .btn-outline-secondary,
    .page-item:not(.active) .page-link,
    [class*="input"],
    [class*="select"],
    [class*="filter"],
    [class*="search"],
    [class*="field"],
    [class*="tab"],
    [class*="pill"],
    [class*="action"],
    [class*="button"],
    [class*="toggle"]
):not(.badge):not(.badge *):not(.status-pill):not(.status-pill *):not(.doc-status):not(.doc-status *):not(.target-pill):not(.target-pill *):not(.state-pill):not(.state-pill *):not(.admin-role-pill):not(.admin-role-pill *):not(.version-badge):not(.version-badge *):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(
    a[class*="card"],
    a[class*="link"],
    button[class*="button"],
    button[class*="action"],
    .btn-outline-primary,
    .btn-outline-secondary,
    .dropdown-item,
    .page-link
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover,
html[data-theme="dark"] :is(
    a[class*="card"],
    a[class*="link"],
    button[class*="button"],
    button[class*="action"],
    .btn-outline-primary,
    .btn-outline-secondary,
    .dropdown-item,
    .page-link
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):focus {
    background: var(--dark-hover) !important;
    border-color: #8a94a3 !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table {
    --bs-table-bg: var(--dark-surface);
    --bs-table-color: var(--dark-text);
    --bs-table-border-color: var(--dark-border);
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] table :is(th, td) {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] table thead :is(th, td),
html[data-theme="dark"] .table thead :is(th, td) {
    background: var(--dark-control) !important;
}

html[data-theme="dark"] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    strong,
    small,
    label,
    legend,
    dt,
    dd,
    li,
    td,
    th,
    a,
    div,
    .text-muted,
    .card-title,
    .card-text,
    .form-label,
    .form-text,
    .dropdown-item
):not(.badge):not(.badge *):not(.status-pill):not(.status-pill *):not(.doc-status):not(.doc-status *):not(.target-pill):not(.target-pill *):not(.state-pill):not(.state-pill *):not(.admin-role-pill):not(.admin-role-pill *):not(.version-badge):not(.version-badge *):not(.text-primary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info):not(.text-violet):not(.btn):not([class*="btn-"]) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--dark-text) !important;
    opacity: 1;
}

html[data-theme="dark"] :is(select, input, textarea, button, a, .btn, .form-control, .form-select):focus {
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.18) !important;
}

/* Keep semantic badges and alerts meaningful while making any nested text readable. */
html[data-theme="dark"] :is(.badge, .status-pill, .doc-status, .target-pill, .state-pill, .admin-role-pill, .version-badge),
html[data-theme="dark"] :is(.badge, .status-pill, .doc-status, .target-pill, .state-pill, .admin-role-pill, .version-badge) * {
    color: inherit !important;
}

/* Final dark-mode wash for page-local styles and small "chip" surfaces.
   Many templates define their own light cards, pills, field groups, and upload widgets. */
html[data-theme="dark"] :where(
    .admin-page-card,
    .admin-page-card-body,
    .admin-page-intro,
    .admin-page-section,
    .sams-import-card,
    .sams-action-fieldset,
    .sams-table-wrap,
    .sams-rule-summary,
    .sams-upload-file-summary,
    .sams-upload-progress-modal,
    .edit-request-card,
    .edit-request-grid,
    .student-active-filter,
    .student-history-item,
    .student-history-empty,
    .application-doc-summary div,
    .application-doc-missing,
    .application-edit-status,
    .application-notice,
    .emis-province-tab,
    .emis-stat-card,
    .emis-info-banner,
    .emis-search-input-wrap,
    .emis-table-wrap,
    .guided-register-shell,
    .guided-register-aside,
    .guided-register-form-panel,
    .guided-register-benefits > div,
    .guided-step-panel,
    .guided-derived-card,
    .guided-note-card,
    .guided-submit-card,
    .guided-password-field,
    .guided-phone-group,
    .guided-school-suggestions,
    .guided-school-suggestion,
    .progress-step,
    .progress-track,
    .mobile-step-chip,
    .portal-drawer-panel,
    .portal-drawer-header,
    .portal-drawer-body,
    .portal-drawer-close,
    .portal-emergency-panel,
    .portal-system-field,
    .portal-system-empty,
    .portal-notification-card,
    .portal-school-suggestions,
    .portal-school-suggestion,
    .portal-activity-card,
    .module-card,
    .module-page-toolbar,
    .module-protected-note,
    .module-image-viewer,
    .upload-panel,
    .academic-summary-block,
    .section-progress-row,
    .report-status-row,
    .learning-material-row,
    .parent-dashboard-tag,
    .id-eye-button,
    .bypass-step-item,
    .mock-email-frame
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill):not(.admin-role-pill):not(.version-badge):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :where(
    .sams-mapping-list > span,
    .sams-required-columns > span,
    .sams-toggle-row,
    .sams-file-picker,
    .learning-stream-list > span,
    .mobile-step-dots span,
    .student-tab-pill,
    .activity-filter,
    .portal-secondary-button,
    .guided-outline-btn,
    .guided-secondary-btn,
    .guided-password-toggle,
    .guided-phone-prefix,
    .submission-document-warning-badge,
    .submission-document-required-item,
    .parent-document-summary div
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill):not(.admin-role-pill):not(.version-badge):not(.is-active):not(.active):not(.is-complete):not(.is-uploaded) {
    background: var(--dark-control) !important;
    background-image: none !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

/* Explicit coverage for compact surfaces that otherwise appear as empty white
   slots when their text is recolored by the global dark theme. */
html[data-theme="dark"] :where(
    .metric-chip,
    .workflow-timer,
    .workflow-check,
    .parent-access-launch,
    .parent-access-launch-icon,
    .parent-academic-overview article,
    .parent-finance-overview article,
    .parent-detail-panel,
    .parent-detail-list > div,
    .parent-detail-heading > span,
    .parent-detail-empty,
    .payment-review-item,
    .payment-review-filters a,
    .payment-review-details div,
    .payment-review-note,
    .payment-review-decision
) {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] :where(
    .payment-proof-grid input,
    .payment-proof-grid select,
    .payment-proof-grid textarea,
    .payment-review-form select,
    .payment-review-form textarea
) {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
    .payment-proof-grid label > span,
    .payment-proof-submit p,
    .payment-admin-response,
    .payment-review-item p,
    .payment-review-details dt,
    .payment-review-note span,
    .payment-review-decision span,
    .payment-review-decision small
) {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .mobile-step-dots span:not(.is-active):not(.is-complete) {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
}

html[data-theme="dark"] :where(
    .parent-finance-overview article.paid,
    .parent-finance-overview article.clear
) {
    background: #0f2f25 !important;
    border-color: #166534 !important;
}

html[data-theme="dark"] .parent-finance-overview article.outstanding {
    background: #33240b !important;
    border-color: #92400e !important;
}

html[data-theme="dark"] input[type="file"],
html[data-theme="dark"] input[type="file"]::file-selector-button {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
    .alert-inline.success,
    .status-pill.status-accepted,
    .status-pill.status-completed,
    .doc-status.verified,
    .parent-viewer-total.is-clear,
    .submission-document-required-item.is-uploaded
) {
    background: #0f2f25 !important;
    border-color: #166534 !important;
    color: #bbf7d0 !important;
}

html[data-theme="dark"] :where(
    .alert-inline.warning,
    .status-pill.status-pending,
    .status-pill.status-in_progress,
    .doc-status.pending,
    .submission-document-warning-badge,
    .application-notice
) {
    background: #33240b !important;
    border-color: #92400e !important;
    color: #fde68a !important;
}

html[data-theme="dark"] :where(
    .alert-inline.error,
    .status-pill.status-rejected,
    .parent-viewer-total,
    .submission-document-required-item,
    .portal-field.is-prefilled-locked
) {
    background: #3f1722 !important;
    border-color: #7f1d1d !important;
    color: #fecdd3 !important;
}

html[data-theme="dark"] .notification-message.notification-success {
    background: #14532d !important;
    border-color: #4ade80 !important;
    color: #f0fdf4 !important;
}

html[data-theme="dark"] .notification-message.notification-info {
    background: #1e3a8a !important;
    border-color: #60a5fa !important;
    color: #eff6ff !important;
}

html[data-theme="dark"] .notification-message.notification-warning {
    background: #f59e0b !important;
    border-color: #fcd34d !important;
    color: #291703 !important;
}

html[data-theme="dark"] .notification-message.notification-error {
    background: #991b1b !important;
    border-color: #f87171 !important;
    color: #fef2f2 !important;
}

html[data-theme="dark"] .notification-message.notification-security {
    background: #450a0a !important;
    border-color: #ef4444 !important;
    color: #fff1f2 !important;
}

html[data-theme="dark"] body :where(
    [style*="background:#fff"],
    [style*="background: #fff"],
    [style*="background:#f8"],
    [style*="background: #f8"],
    [style*="background:#f9"],
    [style*="background: #f9"],
    [style*="background:#fa"],
    [style*="background: #fa"],
    [style*="background:#fb"],
    [style*="background: #fb"],
    [style*="background:#fc"],
    [style*="background: #fc"],
    [style*="background:#fd"],
    [style*="background: #fd"],
    [style*="background:#fe"],
    [style*="background: #fe"],
    [style*="background-color:#fff"],
    [style*="background-color: #fff"],
    [style*="background-color:#f8"],
    [style*="background-color: #f8"],
    [style*="background-color:#f9"],
    [style*="background-color: #f9"],
    [style*="background-color:#fa"],
    [style*="background-color: #fa"],
    [style*="background-color:#fb"],
    [style*="background-color: #fb"],
    [style*="background-color:#fc"],
    [style*="background-color: #fc"],
    [style*="background-color:#fd"],
    [style*="background-color: #fd"],
    [style*="background-color:#fe"],
    [style*="background-color: #fe"]
):not(.btn):not([class*="btn-"]):not(.badge):not([class*="badge"]):not(.status-pill):not([class*="status"]):not(.doc-status) {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Portal text normalization.
   Keep admin, learner, and parent portal panels readable even when page-local
   light-theme colors are declared after generic component styles. */
html[data-theme="dark"] :where(
    .admin-clean-shell,
    .admin-clean-page,
    .student-portal-shell,
    .student-portal-page,
    .parent-viewer-shell,
    .parent-detail-shell,
    .parent-access-control,
    .parent-panel,
    .parent-detail-panel,
    .portal-feature-card,
    .portal-document-card,
    .module-card,
    .learning-material-row
) :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    dd,
    .admin-clean-panel-title,
    .parent-panel-header h2,
    .parent-collapsible-title,
    .parent-detail-heading h2,
    .parent-detail-list strong,
    .portal-feature-card strong,
    .portal-document-main strong,
    .student-portal-titlebar h2,
    .module-card h3,
    .learning-material-row strong,
    .parent-access-control-copy strong
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill) {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
    .admin-clean-shell,
    .admin-clean-page,
    .student-portal-shell,
    .student-portal-page,
    .parent-viewer-shell,
    .parent-detail-shell,
    .parent-access-control,
    .parent-panel,
    .parent-detail-panel,
    .portal-feature-card,
    .portal-document-card,
    .module-card,
    .learning-material-row
) :where(
    p,
    span,
    small,
    label,
    dt,
    li,
    time,
    .text-muted,
    .form-text,
    .parent-muted,
    .parent-detail-muted,
    .parent-info-grid dt,
    .parent-detail-list small,
    .parent-detail-list time,
    .parent-access-control-copy > span,
    .parent-access-control-copy small,
    .parent-access-control label > span,
    .student-portal-header p,
    .student-portal-titlebar p,
    .portal-feature-card span,
    .portal-document-main span,
    .portal-document-meta small,
    .module-card p,
    .module-meta,
    .module-subject,
    .learning-material-row span,
    .report-status-row span,
    .report-status-meta small
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill) {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(
    .parent-access-control,
    .parent-access-note,
    .parent-document-summary div,
    .parent-info-grid,
    .parent-access-launch,
    .parent-detail-list > div,
    .portal-feature-card,
    .portal-document-card,
    .module-card,
    .learning-material-row
):not(.badge):not(.status-pill):not(.doc-status):not(.target-pill):not(.state-pill) {
    background: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* Page-specific fixes: landing + login/register/recovery workflow pages. */
html[data-theme="dark"] body.landing-shell,
html[data-theme="dark"] body.workflow-page,
html[data-theme="dark"] body.admin-login-page {
    background: var(--dark-page) !important;
    background-image: none !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.landing-shell .hero-panel,
html[data-theme="dark"] body.landing-shell .hero-card,
html[data-theme="dark"] body.landing-shell .hero-logo-slot,
html[data-theme="dark"] body.landing-shell .metric-chip,
html[data-theme="dark"] body.landing-shell .signal-card,
html[data-theme="dark"] body.landing-shell .feature-panel,
html[data-theme="dark"] body.landing-shell .footer-shell {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.landing-shell .hero-actions {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.landing-shell .hero-entry-button.btn-outline-light {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.landing-shell .hero-entry-button.btn-outline-light:hover,
html[data-theme="dark"] body.landing-shell .hero-entry-button.btn-outline-light:focus {
    background: var(--dark-hover) !important;
    border-color: #8a94a3 !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .workflow-wrap,
html[data-theme="dark"] body.workflow-page .workflow-card,
html[data-theme="dark"] body.workflow-page .stepper-card,
html[data-theme="dark"] body.workflow-page .method-card,
html[data-theme="dark"] body.workflow-page .login-choice-card,
html[data-theme="dark"] body.workflow-page .info-strip,
html[data-theme="dark"] body.workflow-page .autosave-panel,
html[data-theme="dark"] body.admin-login-page .workflow-wrap,
html[data-theme="dark"] body.admin-login-page .workflow-card,
html[data-theme="dark"] body.admin-login-page .method-card,
html[data-theme="dark"] body.admin-login-page .notice-card {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border-color: var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .workflow-input,
html[data-theme="dark"] body.workflow-page .workflow-input.admin-highlight,
html[data-theme="dark"] body.workflow-page .workflow-language-switch select,
html[data-theme="dark"] body.admin-login-page .workflow-input,
html[data-theme="dark"] body.admin-login-page .workflow-input.admin-highlight,
html[data-theme="dark"] body.admin-login-page .workflow-language-switch select {
    background: var(--dark-control) !important;
    background-image: none !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .workflow-input::placeholder,
html[data-theme="dark"] body.admin-login-page .workflow-input::placeholder {
    color: var(--dark-disabled) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body.workflow-page .workflow-secondary,
html[data-theme="dark"] body.admin-login-page .workflow-secondary {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .workflow-secondary:disabled,
html[data-theme="dark"] body.admin-login-page .workflow-secondary:disabled {
    background: #3d424b !important;
    border-color: #596474 !important;
    color: var(--dark-disabled) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body.workflow-page .stepper-line {
    background: var(--dark-control-border) !important;
}

html[data-theme="dark"] body.workflow-page .stepper-item {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] body.workflow-page .stepper-item.active,
html[data-theme="dark"] body.workflow-page .stepper-item.done {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .browser-chip {
    background: var(--dark-control) !important;
    border-color: var(--dark-control-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .autosave-heading,
html[data-theme="dark"] body.workflow-page .autosave-copy,
html[data-theme="dark"] body.workflow-page .mobile-support,
html[data-theme="dark"] body.workflow-page .workflow-label,
html[data-theme="dark"] body.workflow-page .workflow-back,
html[data-theme="dark"] body.admin-login-page .workflow-label,
html[data-theme="dark"] body.admin-login-page .workflow-back {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] body.workflow-page .workflow-subtitle,
html[data-theme="dark"] body.workflow-page .workflow-help,
html[data-theme="dark"] body.workflow-page .workflow-language-switch label,
html[data-theme="dark"] body.admin-login-page .workflow-subtitle,
html[data-theme="dark"] body.admin-login-page .workflow-help,
html[data-theme="dark"] body.admin-login-page .workflow-language-switch label {
    color: var(--dark-muted) !important;
}

html[data-theme="dark"] .popia-modal,
html[data-theme="dark"] .intake-privacy-modal {
    background: var(--dark-surface) !important;
    background-image: none !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: none !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .intake-privacy-copy,
html[data-theme="dark"] .popia-actions {
    background: var(--dark-surface-soft) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .intake-privacy-copy p,
html[data-theme="dark"] .popia-actions span {
    color: var(--dark-text) !important;
}

html[data-theme="dark"] .popia-actions input[type="checkbox"] {
    accent-color: #6ea8fe;
}