/*
 * Dark-mode compatibility layer.
 *
 * Page-level styles in the portal predate the shared colour variables in
 * style.css. This late-loaded stylesheet normalises their semantic states
 * without changing the intentionally light printable documents.
 */

html[data-color-mode="light"] {
    color-scheme: light;
}

html[data-color-mode="dark"] {
    color-scheme: dark;
    --dark-surface: #202731;
    --dark-surface-raised: #28313d;
    --dark-border: #425062;
    --dark-success-bg: rgba(34, 197, 94, 0.16);
    --dark-success-border: rgba(74, 222, 128, 0.42);
    --dark-success-text: #86efac;
    --dark-warning-bg: rgba(245, 158, 11, 0.16);
    --dark-warning-border: rgba(251, 191, 36, 0.44);
    --dark-warning-text: #fcd34d;
    --dark-danger-bg: rgba(239, 68, 68, 0.16);
    --dark-danger-border: rgba(252, 113, 113, 0.42);
    --dark-danger-text: #fca5a5;
    --dark-info-bg: rgba(59, 130, 246, 0.18);
    --dark-info-border: rgba(96, 165, 250, 0.42);
    --dark-info-text: #bfdbfe;
    --dark-neutral-bg: rgba(148, 163, 184, 0.16);
    --dark-neutral-border: rgba(148, 163, 184, 0.38);
    --dark-neutral-text: #cbd5e1;
}

/* Native controls otherwise retain the browser's light option list. */
html[data-color-mode="dark"] :is(input, select, textarea) {
    color-scheme: dark;
}

html[data-color-mode="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-color-mode="dark"] select option {
    background: var(--dark-surface);
    color: var(--text-primary);
}

/* Success and completed states. */
html[data-color-mode="dark"] :is(
    .alert-success, .notice-success, .notice.success, .status-success,
    .status-completed, .status-paid, .status-approved,
    .status-resolved, .status-connected, .status-present, .status-verified,
    .status-attached, .status-cleared, .status-issued, .status-signed,
    .status-hired, .status-converted, .status-reconciled, .status-employed,
    .badge-success, .badge-verified, .is-paid, .is-compliant
) {
    background-color: var(--dark-success-bg) !important;
    border-color: var(--dark-success-border) !important;
    color: var(--dark-success-text) !important;
}

/* Pending and attention-needed states. */
html[data-color-mode="dark"] :is(
    .alert-warning, .notice-warning, .notice.warning, .status-warning,
    .status-pending, .status-draft, .status-review, .status-reviewing,
    .status-in_review, .status-requested, .status-follow_up, .status-lead, .status-interest,
    .status-proposal, .status-negotiation, .status-partially_paid,
    .status-overdue, .status-late, .status-missed, .status-open,
    .status-idea, .status-existing, .badge-pending, .badge-warning,
    .order-modal-warning
) {
    background-color: var(--dark-warning-bg) !important;
    border-color: var(--dark-warning-border) !important;
    color: var(--dark-warning-text) !important;
}

/* Failed, declined, or closed negative states. */
html[data-color-mode="dark"] :is(
    .alert-error, .alert-danger, .notice-error, .notice.danger,
    .status-danger, .status-error, .status-failed, .status-cancelled,
    .status-declined, .status-rejected, .status-suspended, .status-expired,
    .status-deleted, .status-ceased, .status-terminated, .status-lost,
    .status-disconnected, .status-penalized, .status-closed, .badge-rejected
) {
    background-color: var(--dark-danger-bg) !important;
    border-color: var(--dark-danger-border) !important;
    color: var(--dark-danger-text) !important;
}

/* Informational progress states. */
html[data-color-mode="dark"] :is(
    .alert-info, .notice-info, .notice.info, .status-info, .status-new,
    .status-contacted, .status-qualified, .status-posted, .status-published,
    .status-sent, .status-generated, .status-live, .status-matched,
    .status-active, .status-submitted, .status-in-progress,
    .status-in_progress, .status-inprogress, .status-scheduled,
    .status-reviewed, .badge-info
) {
    background-color: var(--dark-info-bg) !important;
    border-color: var(--dark-info-border) !important;
    color: var(--dark-info-text) !important;
}

html[data-color-mode="dark"] :is(
    .status-archived, .status-paused, .status-unregistered, .status-inactive,
    .badge-secondary, .badge-soft, .status-neutral
) {
    background-color: var(--dark-neutral-bg) !important;
    border-color: var(--dark-neutral-border) !important;
    color: var(--dark-neutral-text) !important;
}

/* Page-specific notices with fixed light palettes. */
html[data-color-mode="dark"] :is(
    .attendance-alert-warning, .attendance-report-banner, .attendance-overtime,
    .attendance-policy-alert, .utility-alert, .permission-warning,
    .delete-warning, .audit-alert, .hub-alert.warning, .kyc-alert.warning,
    .setup-notice, .request-alert.warning, .custom-order-notice,
    .marketplace-wallet-page .process-steps .active,
    .marketplace-wallet-page .process-steps .done,
    .marketplace-dashboard-container .alert-warning,
    .marketplace-wallet-page .alert-warning
) {
    background-color: var(--dark-warning-bg) !important;
    border-color: var(--dark-warning-border) !important;
    color: var(--dark-warning-text) !important;
}

html[data-color-mode="dark"] :is(
    .attendance-alert-success, .attendance-record-status.status-present,
    .attendance-record-status.status-completed, .attendance-record-status.status-approved,
    .delete-warning-success,
    .marketplace-wallet-page .process-steps .done
) {
    background-color: var(--dark-success-bg) !important;
    border-color: var(--dark-success-border) !important;
    color: var(--dark-success-text) !important;
}

html[data-color-mode="dark"] :is(
    .attendance-alert-error, .attendance-record-status.status-rejected
) {
    background-color: var(--dark-danger-bg) !important;
    border-color: var(--dark-danger-border) !important;
    color: var(--dark-danger-text) !important;
}

html[data-color-mode="dark"] .attendance-report-banner > div:first-child {
    background-color: rgba(245, 158, 11, 0.24) !important;
    color: var(--dark-warning-text) !important;
}

html[data-color-mode="dark"] :is(
    .attendance-report-banner strong, .attendance-report-banner span,
    .attendance-overtime strong, .attendance-overtime span
) {
    color: var(--dark-warning-text) !important;
}

/* Keep rendered paper and downloaded-document previews deliberately light. */
html[data-color-mode="dark"] :is(
    .print-sheet, .a4-document, .receipt-card, .receipt-document,
    .invoice-document, .quotation-document, .marketplace-invoice-document,
    .marketplace-receipt-document, .marketplace-quotation-document,
    .certificate-document, .certificate-sheet
) {
    color-scheme: light;
}