/*
 * Site-wide dark mode for the buying portal (everything that uses layouts/takaful.blade.php).
 * Loaded after takaful.css / site-header.css and before each page's @yield('styles'), so module
 * dark files (theme-dark-*.css) and homepage-theme.css (homepage only, loaded last) can still win.
 *
 * Rules here read the --tk-* tokens in takaful.css. Never remap --white / --black / --bk-grade-* /
 * --color-* : the header, hero and footer depend on them. No colour-scheme property and no Bootstrap theme attribute.
 * Every selector below the marker starts with [data-theme="dark"], so light mode is untouched.
 * The homepage hero and its plate-code select2 dropdown (.hh-select2-dropdown) are dark by design and excluded.
 */

/* Dark mode */

/* ---- a) Shared component library variables ---- */
[data-theme="dark"] .takaful-ui {
    --takaful-text: var(--tk-ink);
    --takaful-muted: var(--tk-muted);
    --takaful-border: var(--tk-border-neutral);
    --takaful-primary-deep: var(--tk-green-text);
}

[data-theme="dark"] .info-modal {
    --app-message-secondary-border: var(--tk-border-neutral);
    --app-message-secondary-hover-text: var(--tk-link);
    --app-message-focus-ring: rgba(138, 218, 226, 0.22);
    --app-message-action-shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .info-modal[data-message-variant="success"] {
    --app-message-secondary-hover-text: var(--tk-green-text);
}

[data-theme="dark"] .info-modal[data-message-variant="warning"] {
    --app-message-secondary-hover-text: #f1bc19;
}

[data-theme="dark"] .info-modal[data-message-variant="error"] {
    --app-message-secondary-hover-text: var(--tk-invalid);
}

[data-theme="dark"] .info-modal[data-message-variant="offer"] {
    --app-message-secondary-hover-text: var(--tk-green-text);
}

/* ---- b) Page and Bootstrap 5.3 bridge (no Bootstrap theme attribute) ---- */
[data-theme="dark"] {
    --bs-body-bg: var(--tk-page-bg);
    --bs-body-bg-rgb: 42, 47, 45;
    --bs-body-color: var(--tk-ink);
    --bs-body-color-rgb: 234, 242, 238;
    --bs-border-color: var(--tk-border-neutral);
    --bs-emphasis-color: var(--tk-ink);
    --bs-secondary-color: var(--tk-muted);
    --bs-secondary-bg: var(--tk-surface-alt);
    --bs-tertiary-color: var(--tk-muted);
    --bs-tertiary-bg: var(--tk-surface-alt);
    --bs-link-color: var(--tk-link);
    --bs-link-hover-color: var(--tk-link-hover);
    --bs-heading-color: var(--tk-ink);
}

[data-theme="dark"] body {
    background: var(--tk-page-bg);
    color: var(--tk-ink);
}

[data-theme="dark"] .text-dark {
    color: var(--tk-ink) !important;
}

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

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--tk-surface-raised) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom {
    border-color: var(--tk-border-neutral) !important;
}

[data-theme="dark"] hr {
    border-color: var(--tk-border-neutral);
    opacity: 1;
}

[data-theme="dark"] .card {
    --bs-card-bg: var(--tk-surface-raised);
    --bs-card-color: var(--tk-ink);
    --bs-card-border-color: var(--tk-border-neutral);
    --bs-card-cap-bg: var(--tk-surface-alt);
    background-color: var(--tk-surface-raised);
    color: var(--tk-ink);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .table {
    --bs-table-color: var(--tk-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tk-table-border);
    --bs-table-striped-color: var(--tk-ink);
    --bs-table-striped-bg: var(--tk-table-stripe);
    --bs-table-hover-color: var(--tk-ink);
    --bs-table-hover-bg: var(--tk-table-stripe);
    color: var(--tk-ink);
    border-color: var(--tk-table-border);
}

[data-theme="dark"] .table thead th {
    background-color: var(--tk-table-head-bg);
    color: var(--tk-ink);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--tk-border-neutral);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--tk-muted);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--tk-border-neutral);
    color: var(--tk-ink);
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--tk-tab-active-bg);
    border-color: var(--tk-border-neutral) var(--tk-border-neutral) var(--tk-tab-active-bg);
    color: var(--tk-ink);
}

[data-theme="dark"] .modal-content {
    background-color: var(--tk-modal-bg);
    color: var(--tk-ink);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--tk-surface-raised);
    --bs-dropdown-color: var(--tk-ink);
    --bs-dropdown-border-color: var(--tk-border-neutral);
    --bs-dropdown-link-color: var(--tk-ink);
    --bs-dropdown-link-hover-color: var(--tk-ink);
    --bs-dropdown-link-hover-bg: var(--tk-surface-alt);
    --bs-dropdown-divider-bg: var(--tk-border-neutral);
    background-color: var(--tk-surface-raised);
    color: var(--tk-ink);
}

[data-theme="dark"] .list-group {
    --bs-list-group-bg: var(--tk-surface-raised);
    --bs-list-group-color: var(--tk-ink);
    --bs-list-group-border-color: var(--tk-border-neutral);
    --bs-list-group-action-hover-bg: var(--tk-surface-alt);
    --bs-list-group-action-hover-color: var(--tk-ink);
}

[data-theme="dark"] .pagination {
    --bs-pagination-bg: var(--tk-surface-raised);
    --bs-pagination-color: var(--tk-link);
    --bs-pagination-border-color: var(--tk-border-neutral);
    --bs-pagination-hover-bg: var(--tk-surface-alt);
    --bs-pagination-hover-color: var(--tk-link-hover);
    --bs-pagination-hover-border-color: var(--tk-border-neutral);
    --bs-pagination-disabled-bg: var(--tk-input-disabled-bg);
    --bs-pagination-disabled-color: var(--tk-muted);
    --bs-pagination-disabled-border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--tk-input-bg);
    color: var(--tk-input-text);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eaf2ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--tk-input-placeholder);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--tk-input-bg);
    color: var(--tk-input-text);
    border-color: var(--tk-input-border-focus);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: var(--tk-input-disabled-bg);
    color: var(--tk-muted);
}

[data-theme="dark"] .form-control.is-valid,
[data-theme="dark"] .form-select.is-valid {
    border-color: var(--tk-valid);
}

[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-select.is-invalid {
    border-color: var(--tk-invalid);
}

[data-theme="dark"] .invalid-feedback {
    color: var(--tk-invalid);
}

[data-theme="dark"] .valid-feedback {
    color: var(--tk-valid);
}

[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--tk-input-bg);
    border-color: var(--tk-input-border);
}

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

[data-theme="dark"] .input-group-text {
    background-color: var(--tk-surface-alt);
    color: var(--tk-ink);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .accordion {
    --bs-accordion-bg: var(--tk-accordion-bg);
    --bs-accordion-color: var(--tk-ink);
    --bs-accordion-border-color: var(--tk-border-neutral);
    --bs-accordion-btn-color: var(--tk-ink);
    --bs-accordion-btn-bg: var(--tk-accordion-bg);
    --bs-accordion-active-color: var(--tk-ink);
    --bs-accordion-active-bg: var(--tk-accordion-open-bg);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1);
}

/* Scrollbar track (the thumb keeps the brand colour). */
[data-theme="dark"] * {
    scrollbar-color: var(--color-100) var(--tk-scroll-track);
}

/* ---- c) Component library (takaful.css) ---- */
[data-theme="dark"] .mandatory {
    color: var(--tk-invalid);
}

/* Messages and popups: info modal, shared message modal, OTP popup */
[data-theme="dark"] .info-modal .info-modal-body,
[data-theme="dark"] .info-modal-cover,
[data-theme="dark"] .otp-popup-shell .otp-popup-card {
    background: var(--tk-modal-bg);
    border-color: var(--tk-border-neutral);
    color: var(--tk-ink);
    box-shadow: 0 24px 48px var(--tk-shadow-color);
}

[data-theme="dark"] .info-modal .info-modal-cover {
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] .info-modal.has-image .app-message-image {
    background: var(--tk-modal-bg);
}

[data-theme="dark"] .backdrop-cover {
    background-color: var(--tk-backdrop);
}

[data-theme="dark"] .info-modal-cover .info-modal-hd h3,
[data-theme="dark"] .warning-content,
[data-theme="dark"] .info-modal .warning-content p,
[data-theme="dark"] .motor-claims-dashboard #claim-details .info-modal-hd h3 {
    color: var(--tk-ink) !important;
}

[data-theme="dark"] .info-modal .info-modal-close {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
    color: var(--tk-muted);
}

[data-theme="dark"] .info-modal .info-modal-close:hover {
    background: rgba(255, 143, 143, 0.12);
    border-color: var(--tk-invalid);
    color: var(--tk-invalid);
}

[data-theme="dark"] .app-message-action--secondary {
    color: var(--tk-ink);
    background: var(--tk-surface-alt);
    box-shadow: 0 10px 22px var(--tk-shadow-color);
}

[data-theme="dark"] .app-message-action--secondary:hover,
[data-theme="dark"] .app-message-action--secondary:focus {
    background: var(--tk-surface-raised);
}

[data-theme="dark"] .app-message-action--secondary .app-message-action__icon {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .info-modal[data-message-variant="offer"] .app-message-action--secondary {
    color: var(--tk-green-text);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-head {
    background: var(--tk-surface-alt);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-close {
    background-color: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
    color: var(--tk-muted);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-head h3,
[data-theme="dark"] .otp-popup-shell .otp-popup-number-preview,
[data-theme="dark"] .otp-popup-shell .form-label,
[data-theme="dark"] .otp-popup-shell .form-control {
    color: var(--tk-ink);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-subtitle,
[data-theme="dark"] .otp-popup-shell .otp-popup-code-label,
[data-theme="dark"] .otp-popup-shell .otp-popup-resend-timer,
[data-theme="dark"] .otp-popup-shell .otp-popup-link-wrong {
    color: var(--tk-muted);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-link-resend {
    color: var(--tk-link);
}

[data-theme="dark"] .otp-popup-shell #otp-popup-phone-section,
[data-theme="dark"] .otp-popup-shell #otp-popup-email-section,
[data-theme="dark"] .otp-popup-shell #otp-popup-code-section {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .otp-popup-shell .otp-method-tabs {
    background: var(--tk-surface-alt);
}

[data-theme="dark"] .otp-popup-shell .otp-method-tab {
    color: var(--tk-muted);
}

[data-theme="dark"] .otp-popup-shell .otp-method-tab.is-active {
    background: var(--tk-tab-active-bg);
    color: var(--tk-green-text);
}

[data-theme="dark"] .otp-popup-shell .input-group-text,
[data-theme="dark"] .otp-popup-shell .otp-fileds .otp-field {
    background-color: var(--tk-input-bg);
    border-color: var(--tk-input-border);
    color: var(--tk-input-text);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-progress-dot {
    background-color: var(--tk-bullet);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-feedback--error {
    color: var(--tk-invalid);
}

[data-theme="dark"] .otp-popup-shell .otp-popup-feedback--success {
    color: var(--tk-valid);
}

/* Form feedback, notes, hints */
[data-theme="dark"] .takaful-form-feedback {
    background: rgba(255, 143, 143, 0.1);
    border-color: rgba(255, 143, 143, 0.4);
    color: var(--tk-invalid);
}

[data-theme="dark"] .takaful-field-hint,
[data-theme="dark"] .takaful-field-note,
[data-theme="dark"] .takaful-ui .form-label,
[data-theme="dark"] .takaful-ui .input-group-text,
[data-theme="dark"] .takaful-ui .takaful-file-text {
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-ui .form-control::placeholder,
[data-theme="dark"] .takaful-ui .takaful-select2 + .select2-container .select2-selection__placeholder {
    color: var(--tk-input-placeholder);
}

[data-theme="dark"] .takaful-static-note,
[data-theme="dark"] .takaful-review-medical-note {
    background: var(--tk-accent-tint);
    border-color: var(--tk-border-neutral);
    color: var(--tk-ink);
}

/* Stepper */
[data-theme="dark"] .takaful-stepper-item,
[data-theme="dark"] .takaful-ui .takaful-journey-step,
[data-theme="dark"] .takaful-ui .takaful-journey-step.is-locked:hover,
[data-theme="dark"] .takaful-ui .takaful-journey-step__index {
    color: var(--tk-muted);
}

[data-theme="dark"] .takaful-stepper-item.active,
[data-theme="dark"] .takaful-ui .takaful-journey-step:hover,
[data-theme="dark"] .takaful-ui .takaful-journey-step.is-complete {
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-stepper-num,
[data-theme="dark"] .takaful-ui .takaful-journey-step__marker {
    background: var(--tk-surface-raised);
    border-color: var(--tk-border-neutral);
    box-shadow: 0 8px 18px var(--tk-shadow-color);
}

[data-theme="dark"] .takaful-stepper-num {
    color: var(--tk-muted);
}

[data-theme="dark"] .takaful-stepper-item.active .takaful-stepper-num {
    background: var(--takaful-primary);
    border-color: var(--takaful-primary);
    color: var(--tk-on-brand);
}

[data-theme="dark"] .takaful-ui .takaful-journey-step.is-complete .takaful-journey-step__marker {
    background: var(--tk-accent-tint);
}

[data-theme="dark"] .takaful-ui .takaful-journey-step.is-skipped .takaful-journey-step__marker {
    background: var(--tk-surface-alt);
}

[data-theme="dark"] .takaful-ui .takaful-journey-step.is-current .takaful-journey-step__index {
    color: var(--tk-on-brand);
}

/* Cards, panels, summary boxes */
[data-theme="dark"] .takaful-ui .motor-claims-form-body,
[data-theme="dark"] .takaful-ui .container-grade-body,
[data-theme="dark"] .takaful-ui .claim-policy-panel-body,
[data-theme="dark"] .takaful-ui .mot-ins-hd,
[data-theme="dark"] .takaful-ui .takaful-card,
[data-theme="dark"] .home-con-sec--landing .motor-claims-form-body {
    background: var(--tk-surface-raised);
    border-color: var(--tk-card-border);
    box-shadow: 0 12px 30px var(--tk-shadow-color);
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-ui .takaful-card .card-header {
    background: transparent;
}

[data-theme="dark"] .takaful-ui .motor-claims-form-hd h1,
[data-theme="dark"] .takaful-summary-plan-title,
[data-theme="dark"] .takaful-summary-plan-head h3,
[data-theme="dark"] .takaful-summary-bullets strong,
[data-theme="dark"] .takaful-summary-addon-title {
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-summary-bullets li,
[data-theme="dark"] .takaful-summary-addon-label,
[data-theme="dark"] .takaful-summary-addon-benefits {
    color: var(--tk-muted);
}

[data-theme="dark"] .takaful-summary-plan-card,
[data-theme="dark"] .takaful-summary-addon-card,
[data-theme="dark"] .takaful-review-item,
[data-theme="dark"] .takaful-review-total-card,
[data-theme="dark"] .claim-ref-item,
[data-theme="dark"] .timeline-item,
[data-theme="dark"] .takaful-ui .takaful-upload-block {
    background: var(--tk-surface-raised);
    border-color: var(--tk-border-neutral);
    box-shadow: none;
}

[data-theme="dark"] .takaful-summary-plan-head {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .takaful-review-item__head {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-review-item__body {
    color: var(--tk-muted);
}

[data-theme="dark"] .takaful-review-item__body strong,
[data-theme="dark"] .timeline-item .status-info,
[data-theme="dark"] .takaful-breakdown-toggle,
[data-theme="dark"] .takaful-full-loader__title {
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-review-subrow + .takaful-review-subrow {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .takaful-breakdown,
[data-theme="dark"] .takaful-review-table-wrap {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .takaful-review-table td,
[data-theme="dark"] .takaful-review-table tr {
    background: var(--tk-surface-raised);
    border-color: var(--tk-table-border);
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-review-table td:first-child,
[data-theme="dark"] .takaful-review-table-total td,
[data-theme="dark"] .takaful-review-table-total td:first-child {
    background: var(--tk-table-head-bg);
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-review-table-value,
[data-theme="dark"] .takaful-review-table td:last-child,
[data-theme="dark"] .takaful-review-total-price .amount,
[data-theme="dark"] .takaful-review-total-price .currency {
    color: var(--tk-green-text);
}

[data-theme="dark"] .timeline-item::before {
    border-color: var(--tk-surface-raised);
}

[data-theme="dark"] .timeline-item .title,
[data-theme="dark"] .claim-ref-number--highlight,
[data-theme="dark"] .claim-success-copy h1 .fw-bold {
    color: var(--tk-green-text);
}

[data-theme="dark"] .timeline-item .timestamp {
    color: var(--tk-muted);
}

[data-theme="dark"] .claim-details-table td {
    border-color: var(--tk-table-border);
}

[data-theme="dark"] .health-waiting-period {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .health-waiting-period__head {
    background: var(--tk-table-head-bg);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .health-waiting-period__title {
    color: var(--tk-ink);
}

[data-theme="dark"] .health-waiting-period__tr:nth-child(even) {
    background: var(--tk-table-stripe);
}

[data-theme="dark"] .health-waiting-period__tr:nth-child(odd) {
    background: var(--tk-surface-raised);
}

[data-theme="dark"] .health-waiting-period__td {
    color: var(--tk-ink);
    border-color: var(--tk-table-border);
}

/* Buttons: brand fills keep their colour and white text; white/outlined ones flip */
[data-theme="dark"] .takaful-ui .btn-get,
[data-theme="dark"] .takaful-ui .takaful-file-btn,
[data-theme="dark"] .app-message-action--primary,
[data-theme="dark"] .app-message-action--primary:hover,
[data-theme="dark"] .app-message-action--primary:focus {
    color: var(--tk-on-brand);
}

[data-theme="dark"] .takaful-ui .btn-get-outline,
[data-theme="dark"] .btn-takaful-outline {
    background: transparent;
    color: var(--tk-green-text);
    border-color: var(--takaful-primary);
}

[data-theme="dark"] .takaful-ui .btn-get-outline:hover,
[data-theme="dark"] .takaful-ui .btn-get-outline:active,
[data-theme="dark"] .btn-takaful-outline:hover {
    background: var(--tk-accent-tint);
    color: var(--tk-green-text);
    border-color: var(--takaful-primary);
    box-shadow: none;
}

[data-theme="dark"] .takaful-ui .btn.takaful-dismiss-button {
    background-color: transparent;
    color: var(--tk-invalid);
    border-color: var(--tk-invalid);
}

[data-theme="dark"] .takaful-ui .btn.takaful-dismiss-button:hover,
[data-theme="dark"] .takaful-ui .btn.takaful-dismiss-button:focus {
    background-color: rgba(255, 143, 143, 0.12);
    color: var(--tk-invalid);
    border-color: var(--tk-invalid);
    box-shadow: none;
}

[data-theme="dark"] .takaful-ui .radio-person {
    background: var(--tk-surface-raised);
    border-color: var(--tk-border-neutral);
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-ui .radio-person input:checked + span {
    color: var(--tk-green-text);
}

[data-theme="dark"] .takaful-ui .radio-person:has(input:checked) {
    background: var(--tk-accent-tint);
}

[data-theme="dark"] .takaful-ui .radio-person--decline:has(input:checked) {
    background: rgba(255, 143, 143, 0.1);
    border-color: var(--tk-invalid);
}

[data-theme="dark"] .takaful-ui .radio-person--decline:has(input:checked) span {
    color: var(--tk-invalid);
}

/* Checkbox / radio marks, form fields */
[data-theme="dark"] .takaful-ui .checkbox .checkmark,
[data-theme="dark"] .takaful-ui .radio-inline .checkmark {
    background-color: var(--tk-input-bg);
    border-color: var(--tk-input-border);
    box-shadow: none;
}

[data-theme="dark"] .takaful-ui .checkbox input:checked ~ .checkmark {
    background: linear-gradient(135deg, #2f4f1f, #1f8b4c);
}

[data-theme="dark"] .takaful-ui .takaful-select-panel .checkbox {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .takaful-ui .form-control:hover,
[data-theme="dark"] .takaful-ui .form-select:hover {
    border-color: var(--tk-input-border-focus);
}

[data-theme="dark"] .takaful-ui .form-control:focus,
[data-theme="dark"] .takaful-ui .form-select:focus,
[data-theme="dark"] .takaful-ui .claim-pol-dtl-item--input .form-control:focus {
    border-color: var(--tk-input-border-focus);
    box-shadow: 0 0 0 3px rgba(138, 218, 226, 0.18);
}

[data-theme="dark"] .takaful-ui .form-control.is-invalid,
[data-theme="dark"] .takaful-ui .form-select.is-invalid {
    border-color: var(--tk-invalid);
    box-shadow: 0 0 0 3px rgba(255, 143, 143, 0.14);
}

[data-theme="dark"] .takaful-ui .claim-pol-dtl-item--input .form-control {
    background: var(--tk-input-bg);
    color: var(--tk-input-text);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .takaful-ui .takaful-select2 + .select2-container .select2-selection--single {
    background: var(--tk-input-bg);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .takaful-ui .takaful-select2 + .select2-container .select2-selection__rendered {
    color: var(--tk-input-text);
}

/* File upload and previews */
[data-theme="dark"] .takaful-ui .takaful-file-ui,
[data-theme="dark"] .takaful-ui .takaful-file-preview,
[data-theme="dark"] .takaful-ui .takaful-file-preview-fallback {
    background: var(--tk-input-bg);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .takaful-ui .takaful-file-upload:hover .takaful-file-ui,
[data-theme="dark"] .takaful-ui .takaful-file-upload.has-file .takaful-file-ui {
    background: var(--tk-accent-tint);
    border-color: var(--takaful-primary);
}

[data-theme="dark"] .takaful-ui .takaful-file-upload.has-file .takaful-file-text {
    color: var(--tk-ink);
}

[data-theme="dark"] .takaful-ui .takaful-file-preview-fallback {
    color: var(--tk-muted);
}

/* PDF and image frames stay light so the document is readable; only the frame border is themed. */
[data-theme="dark"] .takaful-ui .takaful-file-preview-pdf,
[data-theme="dark"] .claim-reg-form .claim-file-upload .claim-file-preview-pdf,
[data-theme="dark"] .claim-reg-form .upload-doc .claim-review-doc-pdf {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .claim-reg-form .claim-file-upload .claim-file-preview {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
}

/* Loaders (#global-health-loader uses the .takaful-full-loader classes) */
[data-theme="dark"] .takaful-full-loader__backdrop {
    background: var(--tk-backdrop);
}

[data-theme="dark"] .takaful-full-loader__panel {
    background: var(--tk-loader-bg);
    border-color: var(--tk-border-neutral);
    box-shadow: 0 28px 72px var(--tk-shadow-color);
}

[data-theme="dark"] .takaful-full-loader__logo-orbit {
    border-color: var(--tk-line);
    border-top-color: #8cc63f;
    border-right-color: #88b8d8;
}

[data-theme="dark"] .takaful-full-loader__bar {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .takaful-full-loader__skeleton span {
    background: linear-gradient(90deg, var(--tk-surface-alt) 0%, var(--tk-surface-raised) 50%, var(--tk-surface-alt) 100%);
}

/* The "Pay Now" banner is a green gradient with a white button: it keeps its colours in both themes. */

/* Select2 dropdown renders in <body>; the homepage plate-code dropdown (.hh-select2-dropdown) is already dark. */
[data-theme="dark"] .select2-dropdown:not(.hh-select2-dropdown) {
    background-color: var(--tk-surface-raised);
    border-color: var(--tk-input-border);
    color: var(--tk-ink);
    box-shadow: 0 18px 32px var(--tk-shadow-color);
}

[data-theme="dark"] .select2-dropdown:not(.hh-select2-dropdown) .select2-results__option {
    color: var(--tk-ink);
}

[data-theme="dark"] .select2-container--default .select2-dropdown:not(.hh-select2-dropdown) .select2-results__option[aria-selected=true] {
    background-color: var(--tk-accent-tint);
    color: var(--tk-ink);
}

[data-theme="dark"] .select2-container--default .select2-dropdown:not(.hh-select2-dropdown) .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tk-surface-alt);
    color: var(--tk-ink);
}

[data-theme="dark"] .select2-container--default .select2-dropdown:not(.hh-select2-dropdown) .select2-results__option[aria-disabled=true] {
    color: var(--tk-muted);
}

[data-theme="dark"] .select2-dropdown:not(.hh-select2-dropdown) .select2-search--dropdown .select2-search__field {
    background-color: var(--tk-input-bg);
    color: var(--tk-input-text);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--tk-input-bg);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tk-input-text);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tk-muted) transparent transparent transparent;
}

/* Flatpickr calendar */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--tk-surface-raised);
    border-color: var(--tk-border-neutral);
    box-shadow: 0 14px 28px var(--tk-shadow-color);
}

[data-theme="dark"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--tk-surface-raised);
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--tk-surface-raised);
}

[data-theme="dark"] .flatpickr-months {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--tk-ink);
    fill: var(--tk-ink);
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--tk-ink);
}

[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--tk-ink);
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: var(--tk-input-bg);
    border-color: var(--tk-input-border);
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--tk-surface-raised);
    color: var(--tk-ink);
}

[data-theme="dark"] .flatpickr-weekdays {
    background: var(--tk-surface-alt);
}

[data-theme="dark"] span.flatpickr-weekday {
    color: var(--tk-muted);
}

[data-theme="dark"] .flatpickr-day {
    color: var(--tk-ink);
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day.inRange,
[data-theme="dark"] .flatpickr-day.prevMonthDay.inRange,
[data-theme="dark"] .flatpickr-day.nextMonthDay.inRange {
    background: var(--tk-surface-alt);
    border-color: var(--tk-border-neutral);
    box-shadow: -5px 0 0 var(--tk-surface-alt), 5px 0 0 var(--tk-surface-alt);
}

[data-theme="dark"] .flatpickr-day.today {
    color: var(--tk-green-text);
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange,
[data-theme="dark"] .flatpickr-day.selected:hover {
    color: var(--tk-on-brand);
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--tk-muted);
    opacity: 0.6;
}

[data-theme="dark"] .flatpickr-time {
    border-color: var(--tk-border-neutral);
}

[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator {
    color: var(--tk-ink);
    background: transparent;
}

[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--tk-surface-alt);
}

/* bootstrap-slider and swiper */
[data-theme="dark"] .slider-track {
    background-color: var(--tk-surface-alt);
    background-image: none;
}

[data-theme="dark"] .slider.slider-disabled .slider-track {
    background-color: var(--tk-input-disabled-bg);
    background-image: none;
}

[data-theme="dark"] .slider-selection:not(.tick-slider-selection) {
    background-color: var(--tk-border-neutral);
    background-image: none;
}

[data-theme="dark"] .swiper-pagination-bullet {
    background: var(--tk-bullet);
    opacity: 1;
}

/* Table borders inside the component library */
[data-theme="dark"] .takaful-ui table,
[data-theme="dark"] .takaful-ui th,
[data-theme="dark"] .takaful-ui td {
    border-color: var(--tk-table-border);
}