/**
 * Dark-mode overrides for third-party widgets that don't respond to Bootstrap's data-bs-theme on
 * their own (select2, flatpickr, FullCalendar) - everything else in the app re-themes through the
 * CSS custom properties applied in includes/layout/page.php's inline theme script (see its comment
 * for why that's JS-applied rather than left to a CSS selector alone). Every rule here is scoped
 * under [data-bs-theme="dark"] and !important, so this file is a no-op in light mode and reliably
 * wins against select2/flatpickr/FullCalendar's own bundled CSS regardless of their specificity -
 * see docs/architecture.md's "Dark mode" section for the full story on why !important is load-
 * bearing here, not decorative (a real, reproducible specificity fight, confirmed live).
 */

/* === Select2 (bootstrap-5 theme) === */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-search__field {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--brand-color) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--text-muted) !important;
}

/* === Flatpickr === */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

[data-bs-theme="dark"] .flatpickr-months,
[data-bs-theme="dark"] .flatpickr-weekdays {
    background: var(--bg-card) !important;
}

[data-bs-theme="dark"] .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

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

[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .flatpickr-day:hover {
    background: var(--hover-color) !important;
    border-color: var(--hover-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day.selected {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .flatpickr-day.today {
    border-color: var(--brand-color) !important;
}

[data-bs-theme="dark"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--text-muted) !important;
}

/* === FullCalendar (meeting-room/availability.php) === */
[data-bs-theme="dark"] .fc {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th,
[data-bs-theme="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .fc-col-header-cell,
[data-bs-theme="dark"] .fc-daygrid-day-number {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .fc-day-today {
    background-color: var(--hover-color) !important;
}

[data-bs-theme="dark"] .fc-button-primary {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
}

[data-bs-theme="dark"] .fc-button-primary:disabled {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted) !important;
}

/* === Bootstrap native outline buttons (added 2026-08-18) === Bootstrap hardcodes its own
   --bs-btn-color/--bs-btn-border-color per outline variant (e.g. .btn-outline-danger ships literal
   #dc3545), same "doesn't consume our tokens" problem as the widgets above - .btn-outline-brand/
   .btn-outline-success ARE ours (components.css) and already point at the readable --*-text tokens,
   this fills the gap for the plain Bootstrap ones still used in modules/sales-call+meeting-room
   (calendar.php's "Batalkan Rencana", visit_form.php's GPS-refresh button, etc). Resting state only -
   the hover fill (Bootstrap's own darker hover-bg + white text) was already high-contrast in both
   themes, untouched here. */
[data-bs-theme="dark"] .btn-outline-danger {
    color: var(--status-danger-text) !important;
    border-color: var(--status-danger-text) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--status-secondary-text) !important;
    border-color: var(--status-secondary-text) !important;
}

/* === modules/maintenance + modules/room-maintenance (added 2026-08-04) === Both modules'
   page-specific CSS predates the dark-mode rollout (docs/architecture.md's "Dark mode" section:
   only sales-call/meeting-room were built token-based from the start) and has real hardcoded-hex
   light backgrounds/borders/text that stay invisible in dark mode since they never reference the
   app's own CSS custom properties. Fixed as targeted overrides here rather than rewriting each
   page CSS file in place, per docs/pilot-rollout-checklist.md Part A - keeps light mode provably
   unchanged (every rule is [data-bs-theme="dark"]-scoped) without needing a browser to verify.
   Saturated/themed badge colors (status colors, brand gradients) were left alone - only literal
   light grays/whites/pale-tint backgrounds and near-black literal text got a token equivalent. */

/* -- Stale pre-dark-mode body gradient, ~14 modules/maintenance/*.css files (body{background:
   linear-gradient(#f5f7fa,#c3cfe2)}) - predates base.css's own token-based
   body{background-color:var(--bg-primary)} and overrides it with a hardcoded light gradient that
   the theme-token JS can't touch (it only rewrites --bg-primary's value, not this literal rule).
   One global override covers all of them; a no-op on any page that never had the stale rule. */
[data-bs-theme="dark"] body {
    background: var(--bg-primary) !important;
}

/* -- room-maintenance-shared.css / room-maintenance-dashboard.css / room-maintenance-preventive-
   form.css: the primary white card container used on nearly every page in both modules. */
[data-bs-theme="dark"] .content-card,
[data-bs-theme="dark"] .form-card,
[data-bs-theme="dark"] .calendar-card,
[data-bs-theme="dark"] .list-card,
[data-bs-theme="dark"] .fc,
[data-bs-theme="dark"] .submit-section,
[data-bs-theme="dark"] .datatable-card,
[data-bs-theme="dark"] .stat-box,
[data-bs-theme="dark"] .history-card,
[data-bs-theme="dark"] .detail-card,
[data-bs-theme="dark"] .work-card,
[data-bs-theme="dark"] .chat-container,
[data-bs-theme="dark"] .table-card,
[data-bs-theme="dark"] .ticket-header,
[data-bs-theme="dark"] .info-card,
[data-bs-theme="dark"] .chat-message.requester .chat-bubble,
[data-bs-theme="dark"] .chat-message.engineer .chat-bubble {
    background: var(--bg-card) !important;
}

[data-bs-theme="dark"] .timeline-content,
[data-bs-theme="dark"] .parts-table th,
[data-bs-theme="dark"] .input-group-text {
    background: var(--secondary-color) !important;
}

[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .attachment-item {
    border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .info-box,
[data-bs-theme="dark"] .equipment-preview,
[data-bs-theme="dark"] .chat-message.system .chat-bubble {
    background: var(--alert-info-bg) !important;
}

[data-bs-theme="dark"] .info-label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .equipment-preview .info-value,
[data-bs-theme="dark"] .info-value,
[data-bs-theme="dark"] .item-text-en {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .alert-overdue {
    background: var(--alert-danger-bg) !important;
}

[data-bs-theme="dark"] .alert-due-soon {
    background: var(--alert-warning-bg) !important;
}

[data-bs-theme="dark"] .alert-scheduled {
    background: var(--alert-success-bg) !important;
}

[data-bs-theme="dark"] .file-upload-box:hover,
[data-bs-theme="dark"] .file-upload-label:hover {
    background: var(--alert-danger-bg) !important;
}

[data-bs-theme="dark"] .filter-card,
[data-bs-theme="dark"] .room-info,
[data-bs-theme="dark"] .checklist-item,
[data-bs-theme="dark"] .info-item,
[data-bs-theme="dark"] .cost-summary,
[data-bs-theme="dark"] .equipment-card,
[data-bs-theme="dark"] .parts-row,
[data-bs-theme="dark"] .room-item:hover,
[data-bs-theme="dark"] .log-item,
[data-bs-theme="dark"] .photo-upload-box {
    background: var(--secondary-color) !important;
}

[data-bs-theme="dark"] .stat-item,
[data-bs-theme="dark"] .stat-card {
    background: var(--secondary-color) !important;
    background-image: none !important;
}

[data-bs-theme="dark"] .category-badge,
[data-bs-theme="dark"] .equipment-count,
[data-bs-theme="dark"] .category-header,
[data-bs-theme="dark"] .log-item:hover {
    background: var(--hover-color) !important;
}

[data-bs-theme="dark"] .room-card,
[data-bs-theme="dark"] .photo-upload-box {
    border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .room-item,
[data-bs-theme="dark"] .floor-row,
[data-bs-theme="dark"] .cost-row.total,
[data-bs-theme="dark"] .cost-summary .total {
    border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .info-item .value {
    color: var(--text-color) !important;
}

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

[data-bs-theme="dark"] .stat-item .label,
[data-bs-theme="dark"] .stat-card .label,
[data-bs-theme="dark"] .room-card .room-info,
[data-bs-theme="dark"] .room-item .room-info .floor,
[data-bs-theme="dark"] .log-item .log-date,
[data-bs-theme="dark"] .checklist-item .order-handle,
[data-bs-theme="dark"] .info-item .label,
[data-bs-theme="dark"] .empty-state {
    color: var(--text-muted) !important;
}

[data-bs-theme="dark"] .equipment-thumb-placeholder {
    background: var(--secondary-color) !important;
    color: var(--text-muted) !important;
}

/* -- Pale status-tint badge backgrounds paired with saturated text (real contrast risk once the
   card behind them goes dark) - map to the alert-* tokens built for exactly this pairing. */
[data-bs-theme="dark"] .room-item .badge-overdue {
    background: var(--alert-danger-bg) !important;
}

[data-bs-theme="dark"] .room-item .badge-due {
    background: var(--alert-warning-bg) !important;
}

[data-bs-theme="dark"] .photo-upload-box:hover {
    background: var(--alert-danger-bg) !important;
}