/*
 * Dark theme for what the site does not draw itself: Bootstrap 5.1 (it has no dark mode, its components carry literal
 * colours) and the widgets from outside (flatpickr, noUiSlider, select2, toastr, sweetalert, jQuery UI). The site's own pages
 * (results, hotel, booking, account, auth, ...) are drawn with the tokens of tokens.css and switch by themselves.
 * Everything here is scoped to the dark theme, so the light theme is exactly what it was.
 * Loaded after main.css, app.css and tokens.css.
 */
:root[data-theme="dark"] {
    --bs-body-bg: var(--wj-paper);
    --bs-body-color: var(--wj-ink);
}
:root[data-theme="dark"] body { background-color: var(--wj-paper); color: var(--wj-ink); }
:root[data-theme="dark"] ::placeholder { color: var(--wj-placeholder); }
:root[data-theme="dark"] .modal-body a:not([class]), :root[data-theme="dark"] .card-body a:not([class]) { color: var(--wj-orange-ink); }
:root[data-theme="dark"] .dropdown-item.active, :root[data-theme="dark"] .dropdown-item:active { background-color: var(--wj-orange); color: #fff; }
:root[data-theme="dark"] hr { color: var(--wj-line); }
:root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .text-secondary { color: var(--wj-ink-2) !important; }
:root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black { color: var(--wj-ink) !important; }
:root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light { background-color: var(--wj-card) !important; }
:root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom { border-color: var(--wj-line) !important; }

/* components */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .accordion-item,
:root[data-theme="dark"] .accordion-button,
:root[data-theme="dark"] .popover { background-color: var(--wj-card); border-color: var(--wj-line); color: var(--wj-ink); }
:root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--wj-line); background-color: transparent; }
:root[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--wj-orange-tint); color: var(--wj-orange-ink); }
:root[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
:root[data-theme="dark"] .dropdown-item { color: var(--wj-link-ink); }
:root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: var(--wj-orange-tint); color: var(--wj-orange-hover-ink); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--wj-line); }
:root[data-theme="dark"] .modal-backdrop { background-color: #000; }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] .input-group-text {
    background-color: var(--wj-card); border-color: var(--wj-line-strong); color: var(--wj-ink);
}
:root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--wj-card); border-color: var(--wj-orange); color: var(--wj-ink); box-shadow: 0 0 0 .2rem rgba(242, 76, 0, .25); }
:root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly], :root[data-theme="dark"] .form-select:disabled { background-color: var(--wj-fill); }
:root[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='%23A9AEB5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
:root[data-theme="dark"] .form-check-input { background-color: var(--wj-card); border-color: var(--wj-line-strong); }
:root[data-theme="dark"] .form-check-input:checked { background-color: var(--wj-orange); border-color: var(--wj-orange); }
:root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--wj-fill); --bs-table-hover-bg: var(--wj-fill); color: var(--wj-ink); border-color: var(--wj-line); }
:root[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--wj-line); box-shadow: none; }
:root[data-theme="dark"] .page-link { background-color: var(--wj-card); border-color: var(--wj-line); color: var(--wj-link-ink); }
:root[data-theme="dark"] .page-item.active .page-link { background-color: var(--wj-orange); border-color: var(--wj-orange); color: #fff; }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--wj-fill); color: var(--wj-ink-3); }
:root[data-theme="dark"] .nav-tabs { border-color: var(--wj-line); }
:root[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--wj-card); border-color: var(--wj-line) var(--wj-line) var(--wj-card); color: var(--wj-ink); }
:root[data-theme="dark"] .alert-success { background-color: var(--wj-ok-tint); border-color: var(--wj-ok-ink); color: var(--wj-ok-ink); }
:root[data-theme="dark"] .alert-danger { background-color: var(--wj-danger-tint); border-color: var(--wj-danger-ink); color: var(--wj-danger-ink); }
:root[data-theme="dark"] .alert-warning { background-color: var(--wj-warn-tint); border-color: var(--wj-warn-ink); color: var(--wj-warn-ink); }
:root[data-theme="dark"] .alert-info { background-color: var(--wj-teal-tint); border-color: var(--wj-teal-ink); color: var(--wj-teal-ink); }
:root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-outline-secondary { background-color: var(--wj-card); border-color: var(--wj-line-strong); color: var(--wj-ink); }
:root[data-theme="dark"] .btn-dark { background-color: var(--wj-ink); border-color: var(--wj-ink); color: var(--wj-paper); }
:root[data-theme="dark"] .btn-outline-walanja, :root[data-theme="dark"] .btn-outline-reviews { color: var(--wj-orange-ink); border-color: var(--wj-orange-ink); background-color: transparent; }
:root[data-theme="dark"] .btn-outline-walanja:hover, :root[data-theme="dark"] .btn-outline-reviews:hover { background-color: var(--wj-orange); border-color: var(--wj-orange); color: #fff; }

/* flatpickr (the calendar of the search card and the date fields) */
:root[data-theme="dark"] .flatpickr-calendar { background: var(--wj-card); border-color: var(--wj-line); box-shadow: 0 16px 40px var(--wj-shadow); }
:root[data-theme="dark"] .flatpickr-calendar:before, :root[data-theme="dark"] .flatpickr-calendar:after { border-bottom-color: var(--wj-card); border-top-color: var(--wj-card); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month, :root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year, :root[data-theme="dark"] span.flatpickr-weekday { background: transparent; color: var(--wj-ink); fill: var(--wj-ink); }
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: var(--wj-card); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month, :root[data-theme="dark"] .flatpickr-months .flatpickr-next-month { color: var(--wj-ink); fill: var(--wj-ink); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, :root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--wj-ink); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg, :root[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--wj-orange-ink); }
:root[data-theme="dark"] .flatpickr-day { color: var(--wj-ink); }
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled, :root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--wj-ink-3); }
:root[data-theme="dark"] .flatpickr-day.selected, :root[data-theme="dark"] .flatpickr-day.startRange, :root[data-theme="dark"] .flatpickr-day.endRange { color: #fff; }
:root[data-theme="dark"] .flatpickr-calendar .flatpickr-day.inRange, :root[data-theme="dark"] .flatpickr-calendar .flatpickr-day.inRange:hover { color: var(--wj-ink); }

/* jQuery UI (destination suggestions), noUiSlider, select2, toastr, sweetalert */
:root[data-theme="dark"] .ui-widget-content { background: var(--wj-card); border-color: var(--wj-line); color: var(--wj-ink); }
:root[data-theme="dark"] .ui-widget-content .ui-state-active, :root[data-theme="dark"] .ui-widget-content .ui-state-focus { background: var(--wj-orange-tint); color: var(--wj-ink); }
:root[data-theme="dark"] .noUi-target { background: var(--wj-fill); border-color: var(--wj-line); box-shadow: none; }
:root[data-theme="dark"] .select2-container--default .select2-selection--single, :root[data-theme="dark"] .select2-dropdown { background-color: var(--wj-card); border-color: var(--wj-line-strong); }
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, :root[data-theme="dark"] .select2-results__option { color: var(--wj-ink); }
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--wj-orange-tint); color: var(--wj-orange-hover-ink); }
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--wj-card); border-color: var(--wj-line-strong); color: var(--wj-ink); }
:root[data-theme="dark"] .sweet-alert { background-color: var(--wj-card); color: var(--wj-ink); }
:root[data-theme="dark"] .sweet-alert h2, :root[data-theme="dark"] .sweet-alert p { color: var(--wj-ink); }
:root[data-theme="dark"] .sweet-alert .sa-icon.sa-success:before, :root[data-theme="dark"] .sweet-alert .sa-icon.sa-success:after, :root[data-theme="dark"] .sweet-alert .sa-icon.sa-success .sa-fix { background: var(--wj-card); }

/* text written in the dashboard editor (Highlight posts, CMS pages): it may carry its own inline colours, meant for a white page */
:root[data-theme="dark"] .hl-prose *:not(a), :root[data-theme="dark"] .dc-prose *:not(a) { color: inherit !important; background-color: transparent !important; }