/*
 * Pure-black admin theme override.
 * Scoped entirely to `body.dark`, so the light theme is never affected.
 * Loaded AFTER app-creative-dark.min.css so these rules win.
 * The stock "creative-dark" theme uses blue-greys (#323a46 / #36404a / #3b4651);
 * here we remap the structural surfaces to true black (#000) with white text.
 */

/* ---- Base ---- */
body.dark,
body.dark #wrapper {
    background-color: #000 !important;
    color: #ffffff !important;
}

/* ---- Main structural surfaces -> black ---- */
body.dark .content-page,
body.dark .content,
body.dark .navbar-custom,
body.dark .left-side-menu,
body.dark #sidebar-menu,
body.dark .footer,
body.dark .card,
body.dark .card-box,
body.dark .card-header,
body.dark .card-body,
body.dark .card-footer,
body.dark .page-title-box,
body.dark .modal-content,
body.dark .modal-header,
body.dark .modal-footer,
body.dark .dropdown-menu,
body.dark .table,
body.dark .list-group-item,
body.dark .bg-white,
body.dark .bg-light {
    background-color: #000 !important;
    color: #ffffff !important;
}

/* Slightly raised surfaces for subtle separation (optional depth) */
body.dark .card,
body.dark .card-box {
    background-color: #0a0a0a !important;
    border: 1px solid #2e2e2e !important;
}

/* ---- Borders (keep them visible on black, not invisible) ---- */
body.dark .card,
body.dark .card-box,
body.dark .card-header,
body.dark .card-footer,
body.dark .modal-content,
body.dark .modal-header,
body.dark .modal-footer,
body.dark .dropdown-menu,
body.dark .table td,
body.dark .table th,
body.dark .nav-tabs,
body.dark .page-title-box,
body.dark .border,
body.dark .border-bottom,
body.dark .border-top {
    border-color: #3a3a3a !important;
}

/* ---- Text -> white ---- */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark p, body.dark span, body.dark label, body.dark li,
body.dark td, body.dark th, body.dark .card-title, body.dark .page-title,
body.dark .header-title, body.dark .table, body.dark .dropdown-item,
body.dark .text-dark, body.dark .text-body, body.dark .text-muted,
body.dark .nav-link {
    color: #ffffff !important;
}

/* Muted text a touch dimmer so hierarchy survives */
body.dark .text-muted,
body.dark small.text-muted {
    color: #b5b5b5 !important;
}

/* ---- Sidebar menu ---- */
body.dark .left-side-menu,
body.dark #sidebar-menu {
    background-color: #000 !important;
}
body.dark #sidebar-menu > ul > li > a {
    color: #cfcfcf !important;
}
body.dark .menu-title {
    color: #8a8a8a !important;
}

/* Active item: stock theme forces a light #ecfbff bg (invisible white text).
   Use the brand highlight with white text, matching the light-theme active. */
body.dark #sidebar-menu .menuitem-active .active,
body.dark #sidebar-menu .menuitem-active > a,
body.dark #sidebar-menu > ul > li > a.active {
    background-color: var(--dashboard_color, #FED801) !important; /* brand gold */
    color: #ffffff !important;
    border-radius: 5px !important;
}
body.dark #sidebar-menu .menuitem-active .active,
body.dark #sidebar-menu .menuitem-active .active *,
body.dark #sidebar-menu .menuitem-active > a,
body.dark #sidebar-menu .menuitem-active > a * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Hover: subtle dark highlight (not the light #ecfbff) */
body.dark #sidebar-menu > ul > li > a:hover,
body.dark #sidebar-menu > ul > li > a:focus,
body.dark #sidebar-menu > ul > li > a:active,
body.dark .nav-second-level li a:hover,
body.dark .nav-second-level li a:focus {
    background-color: #161616 !important;
    color: #ffffff !important;
}

/* ---- Topbar ---- */
body.dark .navbar-custom {
    background-color: #000 !important;
}

/* ---- Tables ---- */
body.dark .table {
    color: #ffffff !important;
}
body.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: #0d0d0d !important;
}
body.dark .table-centered td,
body.dark .table thead th {
    background-color: transparent !important;
}
body.dark .table-hover tbody tr:hover {
    background-color: #161616 !important;
}

/* ---- Form controls ---- */
body.dark .form-control,
body.dark .custom-select,
body.dark textarea,
body.dark .select2-container--default .select2-selection--single,
body.dark .select2-container--default .select2-selection--multiple,
body.dark .dataTables_wrapper .dataTables_filter input,
body.dark .dataTables_wrapper .dataTables_length select {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}
body.dark .form-control::placeholder {
    color: #7a7a7a !important;
}

/* ---- Dropdowns ---- */
body.dark .dropdown-menu {
    background-color: #0a0a0a !important;
}
body.dark .dropdown-item {
    color: #ffffff !important;
}
body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ---- Tabs ---- */
body.dark .nav-tabs .nav-link.active {
    background-color: #000 !important;
    color: #ffffff !important;
    border-color: #3a3a3a #3a3a3a #000 !important;
}

/* ---- Modals ---- */
body.dark .modal-content {
    background-color: #000 !important;
}

/* ---- List / data tables: force black rows + readable text ----
   Some list tables (CMS Emails/Notifications/SMS) render white rows, so the
   white label text becomes invisible. Force the whole table black + white. */
body.dark .table,
body.dark .table > thead > tr > th,
body.dark .table > tbody > tr,
body.dark .table > tbody > tr > td,
body.dark .table-striped > tbody > tr,
body.dark .table-striped > tbody > tr:nth-of-type(odd),
body.dark .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark .table-striped > tbody > tr:nth-of-type(even),
body.dark .table-striped > tbody > tr:nth-of-type(even) > td,
body.dark .pages-list-data table tr,
body.dark .pages-list-data td,
body.dark tr.page-title,
body.dark tr.email-page-detail,
body.dark .dataTable tbody tr,
body.dark .dataTable tbody td {
    background-color: #000 !important;
    color: #ffffff !important;
}
body.dark .table td a,
body.dark .table th a,
body.dark .pages-list-data td a,
body.dark .table .text-body {
    color: #ffffff !important;
}
/* Selected / active list row -> subtle gold highlight instead of white */
body.dark tr.page-title.active-page,
body.dark tr.active-page,
body.dark .table tbody tr.active {
    background-color: color-mix(in srgb, var(--dashboard_color, #FED801) 20%, transparent) !important;
    border-left: 3px solid var(--dashboard_color, #FED801) !important;
}
body.dark .table-hover tbody tr:hover,
body.dark .table-hover tbody tr:hover > td {
    background-color: #161616 !important;
}

/* ---- Buttons: unify primary/action buttons to the gold-outline look ----
   Stock theme already renders .btn-info as a gold-bordered pill; extend the
   same treatment to the other solid action buttons for a consistent look. */
body.dark .content-page .btn.btn-primary,
body.dark .content-page .btn.btn-blue,
body.dark .content-page .btn.btn-success,
body.dark .content-page .btn.btn-light,
body.dark .content-page .btn.btn-white,
body.dark .content-page .btn.btn-outline-primary,
body.dark .content-page .btn.btn-outline-secondary,
body.dark .content-page .btn.btn-outline-info,
body.dark .dt-buttons .btn,
body.dark .dt-buttons button,
body.dark .dt-button,
body.dark .btn.Export_btn {
    background: transparent !important;
    background-image: none !important; /* kill DataTables blue gradient */
    border: 2px solid var(--dashboard_color, #FED801) !important;
    color: var(--dashboard_color, #FED801) !important;
    border-radius: 50px !important;
}
body.dark .content-page .btn.btn-primary:hover,
body.dark .content-page .btn.btn-blue:hover,
body.dark .content-page .btn.btn-success:hover,
body.dark .content-page .btn.btn-light:hover,
body.dark .content-page .btn.btn-white:hover,
body.dark .content-page .btn.btn-outline-primary:hover,
body.dark .content-page .btn.btn-outline-secondary:hover,
body.dark .content-page .btn.btn-outline-info:hover,
body.dark .dt-buttons .btn:hover,
body.dark .dt-buttons button:hover,
body.dark .dt-button:hover,
body.dark .btn.Export_btn:hover {
    background: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}

/* Export CSV/PDF buttons carry both .btn-secondary AND .btn-success and are
   forced blue (#0080FF !important) by a high-specificity custom.css rule
   (button.btn.btn-secondary.btn-success.waves-effect.waves-light). Match that
   specificity (here 0,6,2) + load order to win in the black theme. */
body.dark button.btn.btn-secondary.btn-success.waves-effect.waves-light,
body.dark button.btn.btn-secondary.btn-success.waves-effect.waves-light:hover,
body.dark button.btn.btn-secondary.btn-success.waves-effect.waves-light:focus,
body.dark button.btn.btn-secondary.btn-success.Export_btn.waves-light {
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid var(--dashboard_color, #FED801) !important;
    color: var(--dashboard_color, #FED801) !important;
    border-radius: 50px !important;
}
body.dark button.btn.btn-secondary.btn-success.waves-effect.waves-light:hover,
body.dark button.btn.btn-secondary.btn-success.waves-effect.waves-light:focus {
    background-color: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}

/* ---- Modal fields readability (e.g. Add Category) ---- */
body.dark .modal-content,
body.dark .modal-body .card,
body.dark .modal-body .bg-white,
body.dark .modal-body [class*="bg-light"] {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
}
body.dark .modal-body label,
body.dark .modal-body h5,
body.dark .modal-body h6,
body.dark .modal-body .control-label,
body.dark .modal-body p,
body.dark .modal-body span {
    color: #ffffff !important;
}
body.dark .modal-body .form-control,
body.dark .modal-body textarea,
body.dark .modal-body .custom-select {
    background-color: #141414 !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

/* ---- Catch-all: EVERY button follows the Dashboard Theme Color ----
   Any .btn in the panel/modals (regardless of class: btn-primary, btn-blue,
   btn-secondary, custom, etc.) becomes a theme-coloured outline pill.
   Destructive (danger) buttons keep red so they stay distinguishable. */
body.dark .content-page .btn:not(.btn-danger):not(.btn-outline-danger),
body.dark .modal-content .btn:not(.btn-danger):not(.btn-outline-danger),
body.dark .dt-buttons .btn,
body.dark .dt-button {
    background: transparent !important;
    background-image: none !important;
    border: 2px solid var(--dashboard_color, #FED801) !important;
    color: var(--dashboard_color, #FED801) !important;
    border-radius: 50px !important;
    box-shadow: none !important;
}
body.dark .content-page .btn:not(.btn-danger):not(.btn-outline-danger):hover,
body.dark .content-page .btn:not(.btn-danger):not(.btn-outline-danger):focus,
body.dark .modal-content .btn:not(.btn-danger):not(.btn-outline-danger):hover,
body.dark .dt-buttons .btn:hover,
body.dark .dt-button:hover {
    background: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
    border-color: var(--dashboard_color, #FED801) !important;
}
/* Keep icons/labels inside buttons on the accent colour too */
body.dark .content-page .btn:not(.btn-danger) i,
body.dark .content-page .btn:not(.btn-danger) .btn-label {
    color: inherit !important;
}
/* Destructive buttons stay red (readable on black) */
body.dark .content-page .btn.btn-danger,
body.dark .modal-content .btn.btn-danger {
    background: transparent !important;
    border: 2px solid #E24C4C !important;
    color: #E24C4C !important;
    border-radius: 50px !important;
}
body.dark .content-page .btn.btn-danger:hover {
    background: #E24C4C !important;
    color: #ffffff !important;
}

/* ---- Dynamic accent (Dashboard Theme Color) across the whole dark panel ----
   Everywhere the panel uses its fixed brand blue as an accent, follow the
   configured Dashboard Theme Color instead (var --dashboard_color). */
body.dark .text-info,
body.dark .text-primary,
body.dark .text-custom,
body.dark a.text-info,
body.dark a.text-primary,
body.dark .content-page .header-title .text-primary,
body.dark .tab-count,
body.dark sup.badge {
    color: var(--dashboard_color, #FED801) !important;
}
/* Active tab (e.g. Active / Awaiting Approval / Blocked) */
body.dark .nav-tabs .nav-link.active,
body.dark .nav-pills .nav-link.active {
    color: var(--dashboard_color, #FED801) !important;
    border-bottom: 2px solid var(--dashboard_color, #FED801) !important;
    background-color: transparent !important;
}
/* Pagination current page */
body.dark .page-item.active .page-link,
body.dark .pagination .active > a {
    background-color: var(--dashboard_color, #FED801) !important;
    border-color: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}
/* Count superscripts next to tab labels (e.g. "Active (3)") */
body.dark .nav-tabs .nav-link sup,
body.dark .nav-tabs .nav-link .badge,
body.dark .nav-link sup {
    color: var(--dashboard_color, #FED801) !important;
}
/* Links styled as brand accent (exclude table/body/menu/button links) */
body.dark .content-page a.text-info,
body.dark .content-page a.link-primary,
body.dark .content-page a.text-custom {
    color: var(--dashboard_color, #FED801) !important;
}

/* ---- Order-type filter chips (All / Food / take away / Drive Thru / Shop) ----
   Each chip has a hardcoded pastel/white background with black text; in dark
   mode the text turns white and disappears. Force dark chips + white text,
   and colour the selected chip with the Dashboard Theme Color. */
body.dark .tabs_radio_controls label {
    background-color: #111111 !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
body.dark .tabs_radio_controls label h5,
body.dark .tabs_radio_controls label span,
body.dark .content .tabs_radio_controls h5 {
    color: #ffffff !important;
}
body.dark .tabs_radio_controls label:hover {
    border-color: var(--dashboard_color, #FED801) !important;
}
body.dark .tabs_radio:checked + label {
    background-color: var(--dashboard_color, #FED801) !important;
    border-color: var(--dashboard_color, #FED801) !important;
}
body.dark .tabs_radio:checked + label h5,
body.dark .tabs_radio:checked + label span {
    color: #000000 !important;
}

/* ---- Booking calendar slots (FullCalendar) ----
   Slot blocks get a light colour inline from the server (data.color), which
   looks off on the dark grid. Force them to the Dashboard Theme Color. */
body.dark .fc .fc-event,
body.dark .fc .fc-timegrid-event,
body.dark .fc .fc-daygrid-event,
body.dark .fc .fc-h-event,
body.dark .fc .fc-v-event {
    background-color: var(--dashboard_color, #FED801) !important;
    border-color: var(--dashboard_color, #FED801) !important;
}
body.dark .fc .fc-event .fc-event-title,
body.dark .fc .fc-event .fc-event-time,
body.dark .fc .fc-event .fc-event-main,
body.dark .fc .fc-event .fc-event-main * {
    color: #000000 !important;
}
/* Calendar grid readability on black */
body.dark .fc .fc-col-header-cell-cushion,
body.dark .fc .fc-timegrid-slot-label-cushion,
body.dark .fc .fc-daygrid-day-number,
body.dark .fc .fc-toolbar-title,
body.dark .fc .fc-list-day-text {
    color: #e5e5e5 !important;
}

/* ---- Scrollbars across the whole dark panel ---- */
body.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.dark ::-webkit-scrollbar-track {
    background: #0d0d0d !important;
    border-radius: 8px;
}
body.dark ::-webkit-scrollbar-thumb {
    background: #3a3a3a !important;
    border-radius: 8px;
    box-shadow: none !important;
}
body.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dashboard_color, #FED801) !important;
}
body.dark ::-webkit-scrollbar-corner {
    background: #0d0d0d;
}
/* Firefox */
body.dark * {
    scrollbar-color: #3a3a3a #0d0d0d;
    scrollbar-width: thin;
}

/* ---- Chat (Driver/User & Vendor/User) dark theme ----
   chat.css uses many light backgrounds (#fff/#f5f5f5/#eee/#f1f3fa). Re-skin
   the chat surfaces for the black theme; outgoing bubbles use the theme tint. */
body.dark .chat-input-section,
body.dark .chat-list-container,
body.dark .messages-box .list-group {
    background-color: #0a0a0a !important;
}
body.dark .chat-list-item:hover,
body.dark .messages-box .list-group.active {
    background-color: #1a1a1a !important;
}
body.dark .conversation-head {
    border-bottom-color: #2a2a2a !important;
}
body.dark .conversation-name,
body.dark .conversationText,
body.dark .conversation-list .ctext-wrap p,
body.dark .alNameTime {
    color: #ffffff !important;
}
body.dark .orderChatMessage {
    color: #b5b5b5 !important;
}
/* Incoming (left) message bubble */
body.dark .left-message .conversation-list .ctext-wrap,
body.dark .conversation-list .ctext-wrap {
    background: #1e1e1e !important;
}
body.dark .left-message .conversation-list .ctext-wrap p,
body.dark .left-message .conversation-list .ctext-wrap * {
    color: #ffffff !important;
}
/* Outgoing (right) message bubble -> theme tint */
body.dark .right-message .conversation-list .ctext-wrap {
    background: color-mix(in srgb, var(--dashboard_color, #FED801) 22%, transparent) !important;
}
body.dark .right-message .conversation-list .ctext-wrap p,
body.dark .right-message .conversation-list .ctext-wrap * {
    color: #ffffff !important;
}
/* Order-number chip inside chat */
body.dark .orderNumber {
    background-color: color-mix(in srgb, var(--dashboard_color, #FED801) 20%, transparent) !important;
    color: var(--dashboard_color, #FED801) !important;
}
/* Chat search input */
body.dark .outer_search input {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

/* ---- DataTable / table row lines: force VISIBLE borders ----
   The dark theme sets cell border-width to 0, so colour-only overrides did
   nothing. Set explicit width + style + colour, with datatable-specific
   selectors so they win. */
body.dark table.dataTable,
body.dark .table-responsive > .table,
body.dark .content-page .table {
    border: 1px solid #3f3f3f !important;
}
body.dark table.dataTable > thead > tr > th,
body.dark table.dataTable > tbody > tr > td,
body.dark table.dataTable > tbody > tr > th,
body.dark .content-page .table > thead > tr > th,
body.dark .content-page .table > tbody > tr > td,
body.dark .content-page .table > tbody > tr > th,
body.dark .content-page .table-centered td,
body.dark .content-page .table-centered th {
    border-top: 1px solid #3f3f3f !important;
    border-bottom: 1px solid #3f3f3f !important;
    border-color: #3f3f3f !important;
    border-style: solid !important;
}
body.dark table.dataTable > thead > tr > th,
body.dark .content-page .table > thead > tr > th {
    border-bottom-width: 2px !important;
    border-bottom-color: #4d4d4d !important;
}

/* ---- Select2 / multiselect / selectize dropdowns (dark) ----
   The open results list had a white background with (now) white text =
   invisible options. Dark surfaces + white text; highlighted = theme color.
   These popups render on <body>, so target them at body.dark level. */
body.dark .select2-dropdown,
body.dark .select2-results,
body.dark .select2-results__options,
body.dark .selectize-dropdown,
body.dark .ms-list,
body.dark .dropdown-menu.inner {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
body.dark .select2-results__option,
body.dark .selectize-dropdown .option,
body.dark .ms-elem-selectable,
body.dark .ms-elem-selection {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}
body.dark .select2-results__option--highlighted,
body.dark .select2-results__option[aria-selected="true"],
body.dark .selectize-dropdown .option.active,
body.dark .ms-elem-selectable.ms-hover {
    background-color: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}
/* Selected control surfaces + chips */
body.dark .select2-container--default .select2-selection--single,
body.dark .select2-container--default .select2-selection--multiple,
body.dark .selectize-input {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
body.dark .select2-selection__rendered,
body.dark .select2-selection__placeholder,
body.dark .select2-search__field {
    color: #ffffff !important;
}
body.dark .select2-search--dropdown .select2-search__field {
    background-color: #141414 !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
body.dark .select2-selection__choice,
body.dark .selectize-input .item {
    background-color: #1e1e1e !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* ---- Chat right panel: header/body were white (bg-white on #rightChat) ----
   Use the id for enough specificity to beat Bootstrap's .bg-white !important. */
body.dark #rightChat,
body.dark #rightChat.bg-white,
body.dark #rightChat .conversation-head,
body.dark #rightChat #chatHistory,
body.dark #rightChat .chat-box,
body.dark #rightChat .chat-box-wrapper,
body.dark #leftChat,
body.dark .messages-box {
    background-color: #0a0a0a !important;
}
body.dark #rightChat .conversation-head,
body.dark #rightChat .card,
body.dark .conversation-head {
    border-color: #2a2a2a !important;
}
body.dark #rightChat .alOrderDetails,
body.dark #rightChat .alVendorDetails,
body.dark #rightChat .alAmountDetails,
body.dark #rightChat .alUserName,
body.dark #rightChat .alPhoneNumber,
body.dark #rightChat .conversation-head p,
body.dark #rightChat .conversation-head span {
    color: #e5e5e5 !important;
}
body.dark #rightChat .alOrderDetails span,
body.dark #rightChat .alVendorDetails span,
body.dark #rightChat .alAmountDetails span {
    color: var(--dashboard_color, #FED801) !important;
}

/* ---- Catalog modals (Category add/edit, Variant, Brand, Tag, Add-on, Attribute) ----
   These share two light patterns: multilingual panels with inline
   background:#FAFAFA, and borderless option <table>s (no thead) that stayed
   white. Re-skin both for dark mode. */
body.dark [style*="#FAFAFA"],
body.dark [style*="#fafafa"],
body.dark [style*="#FAFAFA;"] {
    background: #111111 !important;
    border-color: #2a2a2a !important;
}
body.dark [style*="#FAFAFA"] .control-label,
body.dark [style*="#FAFAFA"] label,
body.dark [style*="#FAFAFA"] .nav-link,
body.dark [style*="#FAFAFA"] h5,
body.dark [style*="#FAFAFA"] span {
    color: #ffffff !important;
}
/* Option / repeater tables inside modals (Variant Options, Addon Options, Tag) */
body.dark .modal .table,
body.dark .modal .table tr,
body.dark .modal .table th,
body.dark .modal .table td,
body.dark .modal-content .table,
body.dark .modal-content .table tr,
body.dark .modal-content .table th,
body.dark .modal-content .table td,
body.dark .optionTableAddVarient,
body.dark .optionTableAddVarient tr,
body.dark .optionTableAddVarient th,
body.dark .optionTableAddVarient td {
    background-color: #0a0a0a !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}
/* Modal headings/labels/tabs generally */
body.dark .modal .control-label,
body.dark .modal h5,
body.dark .modal .nav-tabs .nav-link {
    color: #ffffff !important;
}

/* ---- Native <select> dropdown options: theme the blue highlight ----
   Recolour the option list (dark in dark mode) and force the selected
   option to the Dashboard Theme Color instead of the browser blue.
   accent-color tints the control across the panel (both themes). */
select,
body.dark select {
    accent-color: var(--dashboard_color, #FED801);
}
body.dark select option,
body.dark .custom-select option {
    background-color: #0d0d0d;
    color: #ffffff;
}
select option:checked,
select option:hover,
body.dark select option:checked {
    background: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}

/* ---- Language name badges / tab pills inside catalog modals ----
   The English/Arabic language labels were rendering as faint light pills.
   Make them the Dashboard Theme Color with black text so they're clear. */
body.dark [style*="#FAFAFA"] .badge,
body.dark [style*="#FAFAFA"] .badge-dark,
body.dark [style*="#FAFAFA"] .badge-light,
body.dark [style*="#FAFAFA"] .badge-secondary,
body.dark .modal .nav-pills .nav-link.active,
body.dark .modal .nav-tabs .nav-link.active {
    background-color: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}
/* Inactive language tab pills -> dark, readable */
body.dark .modal .nav-pills .nav-link,
body.dark .modal .nav-tabs .nav-link {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}
/* "Primary"/helper text next to the language badge */
body.dark [style*="#FAFAFA"] small,
body.dark [style*="#FAFAFA"] .text-muted {
    color: #cfcfcf !important;
}

/* ---- Long pages: keep content clear of the absolute footer ----
   The footer is position:absolute; bottom:0 inside .content-page, so on long
   pages (e.g. Payment Options) it overlaps the last cards. Add bottom padding
   so the content clears it. */
body.dark .content-page .content {
    padding-bottom: 100px !important;
}

/* ---- Switchery toggles: ON state follows the Dashboard Theme Color ----
   Switchery fills the track with an inline box-shadow (from data-color).
   Override the checked state so every toggle turns theme-colored instead of
   the per-toggle green/blue. Off state keeps its default grey. */
body.dark input:checked + .switchery,
body.dark input:checked ~ .switchery {
    box-shadow: var(--dashboard_color, #FED801) 0px 0px 0px 16px inset !important;
    border-color: var(--dashboard_color, #FED801) !important;
    background-color: var(--dashboard_color, #FED801) !important;
}

/* ---- Google Places autocomplete dropdown (address search) ----
   The .pac-container renders with a white background; theme-white text made
   the suggestions invisible. Dark surface + readable text. It attaches to
   <body>, so target it at body.dark level. */
body.dark .pac-container {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    box-shadow: none !important;
}
body.dark .pac-item {
    color: #e5e5e5 !important;
    border-top-color: #2a2a2a !important;
}
body.dark .pac-item:hover,
body.dark .pac-item-selected {
    background-color: #1a1a1a !important;
}
body.dark .pac-item-query,
body.dark .pac-item span {
    color: #ffffff !important;
}
body.dark .pac-matched {
    color: var(--dashboard_color, #FED801) !important;
}

/* ---- Modal body: force black (structural rule only covered .modal-content) ---- */
body.dark .modal-body,
body.dark .modal-dialog .modal-body,
body.dark .modal .modal-body {
    background-color: #000 !important;
}

/* ---- Browser autofill: keep inputs dark (Chrome forces white/yellow) ---- */
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark input:-webkit-autofill:active,
body.dark textarea:-webkit-autofill,
body.dark select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #141414 inset !important;
    box-shadow: 0 0 0 1000px #141414 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
}

/* ---- SweetAlert (swal2 + legacy): dark popup + visible text ----
   custom.css may force `.dark .swal2-modal .swal2-title { color: black }`
   (0,3,0), so match/beat it (0,3,1) to keep text white. */
body.dark .swal2-popup,
body.dark .swal2-modal,
body.dark div.swal2-popup {
    background-color: #0d0d0d !important;
    border: 1px solid #2e2e2e !important;
}
body.dark .swal2-popup .swal2-title,
body.dark .swal2-modal .swal2-title,
body.dark .swal2-popup .swal2-html-container,
body.dark .swal2-modal .swal2-html-container,
body.dark .swal2-popup .swal2-content,
body.dark .swal2-modal .swal2-content,
body.dark .swal2-popup #swal2-content,
body.dark .swal2-modal #swal2-content,
body.dark .swal2-popup .swal2-label,
body.dark .swal2-popup .swal2-footer {
    color: #ffffff !important;
}
body.dark .swal2-input,
body.dark .swal2-textarea,
body.dark .swal2-select {
    background-color: #141414 !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}
body.dark .al_add_user,
body.dark form#save_banner_form {
    background-color: transparent !important;
}
body.dark .swal2-input,
body.dark .swal2-textarea,
body.dark .swal2-select {
    background-color: #141414 !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}
body.dark .sweet-alert {
    background-color: #0d0d0d !important;
}
body.dark .sweet-alert h2,
body.dark .sweet-alert p {
    color: #ffffff !important;
}

/* ---- Task status tabs (Pending Assignment / Active / History / Failed) ----
   Radio-labels (.custom-lable-background) had black text on a translucent
   gold bg; the dark-theme label{color:#fff} rule made them invisible.
   Inactive -> dark chip + white text; active (checked) -> gold + black. */
body.dark .custom-lable-background {
    background-color: #161616 !important;
    color: #ffffff !important;
    border: 1px solid #2e2e2e !important;
}
body.dark .custom-lable-background .showspan {
    color: inherit !important;
}
body.dark input:checked + .custom-lable-background {
    background-color: var(--dashboard_color, #FED801) !important;
    border-color: var(--dashboard_color, #FED801) !important;
    color: #000000 !important;
}
body.dark input:checked + .custom-lable-background .showspan {
    color: #000000 !important;
}

/* ---- intl-tel-input country dropdown (phone number) ----
   The country list renders white; theme-white country names were invisible.
   Covers both old (.country-list/.country) and new (.iti__*) class names. */
body.dark .iti__country-list,
body.dark .country-list,
body.dark .iti__dropdown-content {
    background-color: #0d0d0d !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}
body.dark .iti__country,
body.dark .country-list .country,
body.dark .iti__country-name,
body.dark .country-list .country-name {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}
body.dark .iti__country.iti__highlight,
body.dark .iti__country:hover,
body.dark .country-list .country.highlight,
body.dark .country-list .country:hover {
    background-color: #1a1a1a !important;
}
body.dark .iti__dial-code,
body.dark .country-list .dial-code {
    color: #b5b5b5 !important;
}
body.dark .iti__divider,
body.dark .country-list .divider {
    border-color: #2a2a2a !important;
}
body.dark .iti__search-input {
    background-color: #141414 !important;
    color: #ffffff !important;
    border-color: #2a2a2a !important;
}

/* ---- Keep badges on their brand colours (do NOT blacken) ---- */