/* ====================================================================
   TABAYYUN — Final cleanup patch (Feb 2026, v15.12)
   --------------------------------------------------------------------
   Targets 3 residual issues spotted in operator screenshots:
   1. White backgrounds in filter modals / date-picker fields / form
      cards (the "Identity Info" and "Add Image" boxes on the Add
      Deliveryman page were rendering as pure white).
   2. Green/teal accent text (the "Identity Info", "Add Image",
      collapse-toggle "K" icon).
   3. Green-tinted search input in the sidebar — should be red-tinted
      to match Tabayyun identity.
   ==================================================================== */

/* ════════════ 1. SIDEBAR SEARCH — green → red ════════════
   6amMart's left sidebar search defines the green tint on these EXACT
   selectors in /assets/admin/css/style.css. We mirror them so our
   override wins on specificity (same selector, !important). */
.sidebar--search-form {
    background-color: rgba(139, 26, 26, 0.10) !important;
    background: rgba(139, 26, 26, 0.10) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.20) !important;
}
.sidebar--search-form .form--control,
.sidebar--search-form input[type="text"],
.sidebar--search-form input[type="search"] {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
    padding-inline-start: 40px !important;
}
.sidebar--search-form .form--control:focus {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: var(--tby-red, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.sidebar--search-form .search--form-group .btn,
.sidebar--search-form .search--form-group .btn i {
    color: #FFFFFF !important;
    background: transparent !important;
}
.sidebar--search-form .form--control::placeholder,
.sidebar--search-form .form--control::-moz-placeholder,
.sidebar--search-form .form--control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* 6amMart re-styles .form--control globally with green tint — kill it */
.form--control {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
}
.form--control:focus {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: var(--tby-red, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.form--control::placeholder,
.form--control::-moz-placeholder,
.form--control::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* The sidebar content wrapper itself */
.navbar-vertical-content,
.navbar-vertical-content.bg--005555,
.bg--005555,
.bg--005555.navbar-vertical-content {
    background: linear-gradient(180deg, #0A0E14 0%, #0F1419 100%) !important;
    background-color: #0A0E14 !important;
}

/* Also keep the older broad-targeted defs as a safety net */
.left-sidebar .search-form,
.left-sidebar .input-group,
.left-sidebar input[type="search"],
.left-sidebar input[type="text"],
.left-sidebar .form-control,
.sidebar .search-form,
.sidebar input[type="search"],
.sidebar .form-control,
.navbar-vertical-aside .search-form,
.navbar-vertical-aside input[type="search"],
.navbar-vertical-aside input[type="text"],
.navbar-vertical-aside .form-control,
aside .search-form,
aside .form-control[type="text"],
aside input[type="search"],
[class*="sidebar"] input[type="search"],
[class*="sidebar"] .form-control[placeholder*="بحث"],
[class*="sidebar"] .form-control[placeholder*="Search"] {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.left-sidebar input::placeholder,
.sidebar input::placeholder,
.navbar-vertical-aside input::placeholder,
aside input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}
.left-sidebar .input-group-text,
.sidebar .input-group-text,
.navbar-vertical-aside .input-group-text,
aside .input-group-text {
    background: rgba(139, 26, 26, 0.10) !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
}
.left-sidebar .form-control:focus,
.sidebar .form-control:focus,
.navbar-vertical-aside .form-control:focus,
aside .form-control:focus {
    background: rgba(139, 26, 26, 0.18) !important;
    border-color: var(--tby-red, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20) !important;
}

/* ════════════ 2. WHITE PANELS / MODALS / DATE-PICKERS ════════════
   The "Identity Info" sub-card and the date-range filter modal were
   rendering as solid #fff because they're inserted by JS plugins after
   the global theme loads. We nuke any white panel inside the admin
   shell. */
.page-content,
.main-content,
.content-wrapper,
.dashboard-content,
.admin-content {
    background: transparent !important;
}

/* Bootstrap card / 6amMart custom card variations */
.card,
.card.shadow-card,
.card.card-shadow,
.card.bg-white,
.card.bg-light,
.card-body.bg-white,
.card-body.bg-light,
.box,
.box-body,
.box-white,
.section-bg,
.bg-white,
.bg-light,
.white-bg,
.box-shadow,
.shadow-box,
.tile,
.tile-body,
.widget,
.widget-body,
.module-widget,
.profile-card,
.deliveryman-card,
.vendor-card,
.add-form,
.form-card,
.identity-card,
.image-upload-card,
.image-uploader,
.upload-card,
.upload-box,
.dropzone {
    background: linear-gradient(180deg, rgba(28, 28, 32, 0.85) 0%, rgba(22, 22, 26, 0.85) 100%) !important;
    background-color: #16161a !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
}
.card .card-header,
.box .box-header {
    background: rgba(22, 22, 26, 0.95) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.18) !important;
    color: #FFFFFF !important;
}

/* Date-range picker modal (the white pop-out from the screenshot) */
.daterangepicker,
.daterangepicker .calendar-table,
.daterangepicker .drp-buttons,
.daterangepicker.ltr,
.flatpickr-calendar,
.flatpickr-innerContainer,
.flatpickr-days,
.flatpickr-rContainer,
.pika-single,
.bootstrap-datetimepicker-widget,
.bootstrap-datepicker,
.datepicker.dropdown-menu,
.datepicker-dropdown,
.ui-datepicker,
.ui-datepicker-calendar {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(220, 38, 38, 0.10) inset !important;
}
.daterangepicker td.in-range,
.daterangepicker td.available:hover,
.flatpickr-day:hover,
.ui-datepicker td a:hover {
    background: rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.flatpickr-day.selected,
.ui-datepicker td.ui-datepicker-current-day a {
    background: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}
.daterangepicker .calendar-table th,
.daterangepicker .drp-calendar,
.flatpickr-current-month,
.flatpickr-weekday {
    color: #FFFFFF !important;
    background: transparent !important;
}
.daterangepicker .ranges li.active,
.daterangepicker .applyBtn,
.flatpickr-day.today {
    background: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
    border-color: var(--tby-red, #dc2626) !important;
}
.daterangepicker .cancelBtn,
.daterangepicker .ranges li {
    background: rgba(22, 22, 26, 0.95) !important;
    color: #E6E6E6 !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}
.daterangepicker input[type="text"],
.daterangepicker .input-mini {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
    border-color: rgba(220, 38, 38, 0.30) !important;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #FFFFFF !important;
}

/* Modal generic */
.modal-content,
.modal-body,
.modal-header,
.modal-footer {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}
.modal-title { color: #FFFFFF !important; }

/* Image upload tiles (the "Add Image" boxes) */
.upload-thumb,
.image-upload-box,
.profile-image-upload,
.image-uploader-box,
.uploader-box,
.dropzone-box,
.dropzone .dz-message,
.dropzone.dz-clickable,
.preview-image-box,
.upload-placeholder {
    background: #1a1a1e !important;
    border: 2px dashed rgba(220, 38, 38, 0.35) !important;
    color: #E6E6E6 !important;
}
.upload-thumb:hover,
.dropzone:hover {
    border-color: var(--tby-red, #dc2626) !important;
    background: #1f1f24 !important;
}

/* ════════════ 3. GREEN/TEAL ACCENT TEXT → WHITE ════════════
   The "Identity Info" / "Add Image" labels in the Add Deliveryman page
   are emitted with text-info / text-success / text--00d97e classes.
   We force them to white so they read clearly on the dark cards. */
.text-info,
.text--info,
.text-success,
.text--success,
.text-primary,
.text--primary,
.text--00d97e,
.text--00cc99,
.text--107f5e,
.text--005555,
.text--00b29b,
.text--028a8a,
.text-teal,
.text-cyan,
.text-aqua,
.text--aqua,
.tab--text-info,
[class*="text--green"],
[class*="text--success"],
[class*="text-success"] {
    color: #FFFFFF !important;
}

/* "Add Image" specific (often inside .image-upload .add-image-text) */
.add-image-text,
.add-photo-text,
.upload-text,
.upload-label,
.dz-message span,
.image-upload-label,
.upload-icon-text {
    color: #FFFFFF !important;
}

/* Section sub-titles ("Identity Info", "Vehicle Identity Info", etc.) */
.section-title,
.section-subtitle,
.sub-title,
.sub-heading,
.subhead,
.info-title,
.identity-title,
h6.text-info,
.card-title.text-info,
.box-title.text-info {
    color: #FFFFFF !important;
}

/* Mini-toggle K icon (sidebar collapse arrow) */
.menu-toggle,
.menu-toggle i,
.sidebar-toggle,
.sidebar-toggle i,
.navbar-vertical-aside-toggle-invoker,
.navbar-vertical-aside-toggle-invoker i,
.collapse-arrow,
.collapse-arrow i,
.aside-toggle,
.aside-toggle i {
    color: #FFFFFF !important;
}
.menu-toggle:hover,
.menu-toggle:hover i,
.sidebar-toggle:hover,
.sidebar-toggle:hover i {
    color: var(--tby-red-light, #ef4444) !important;
}

/* Filter pills / chip text */
.filter-chip,
.filter-chip-text,
.filter-pill {
    color: #FFFFFF !important;
    background: rgba(139, 26, 26, 0.18) !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
}

/* "Filter" button on date range modals */
.btn-filter,
.apply-filter-btn,
.applyBtn,
button[name="apply"],
button.apply-btn {
    background: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
    border-color: var(--tby-red, #dc2626) !important;
}

/* "Reset" / "Cancel" filter button */
.btn-reset-filter,
.cancelBtn,
button[name="cancel"],
button.cancel-btn,
button.reset-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
}

/* ════════════ ADD DELIVERYMAN PAGE — wrap with dark theme ════════════
   The Identity Info + Add Image sections live inside a .form-section
   container that defaults to white in 6amMart. */
.form-section,
.form-section-body,
.form-section-content,
.add-form-section,
.business-form,
.deliveryman-form,
.vendor-form,
.driver-form {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    border-radius: 12px !important;
}

/* Sub-cards inside form sections (Identity, Vehicle, General settings) */
.form-section .card,
.form-section .box,
.form-section .sub-card {
    background: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.12) !important;
}

/* Stat / counter blocks with white background */
.counter-card,
.stat-card,
.kpi-card,
.numbers-card {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
}
.counter-card .label,
.counter-card .title,
.stat-card .label,
.stat-card .title,
.kpi-card .label {
    color: #B8C0CC !important;
}
.counter-card .value,
.counter-card .number,
.stat-card .value,
.stat-card .number,
.kpi-card .value {
    color: #FFFFFF !important;
}

/* Force ANY remaining .bg-white descendants (catch-all)
   IMPORTANT: Exclude Google Maps / Leaflet / canvas / iframe so map
   tiles don't get color-overridden into invisibility. */
[class*="bg-white"] *:not(.gm-style *):not(.leaflet-container *):not(iframe *):not(canvas):not(svg):not(path),
.bg-white *:not(button):not(.btn):not(svg):not(path):not(canvas):not(iframe):not(.gm-style):not(.gm-style *):not(.leaflet-container):not(.leaflet-container *) {
    color: inherit !important;
}

/* ════════════ TOPBAR + MODAL OVERLAY FINAL FIX ════════════ */
/* Top header pill backgrounds (Ctrl+K search + Demo Module chip) */
.bg--secondary,
.bg-E7E6E8,
button.bg--secondary,
button.bg-E7E6E8 {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
    color: #FFFFFF !important;
}
.title-color {
    color: #FFFFFF !important;
}

/* Modal backdrop should be very dark, NOT teal */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade {
    background: rgba(0, 0, 0, 0.80) !important;
    backdrop-filter: blur(4px) !important;
}

/* SVG strokes/fills with teal #006161 / #005555 / #00aa96 inside the
   admin shell — coerce to red. */
svg path[stroke="#006161"],
svg path[stroke="#005555"],
svg path[stroke="#00aa96"],
svg path[fill="#006161"],
svg path[fill="#005555"],
svg path[fill="#00aa96"] {
    stroke: #dc2626 !important;
    fill: currentColor !important;
}

/* Some 6amMart pills use rgb(0, 97, 97) directly */
[style*="background-color: rgb(0, 97, 97)"],
[style*="background-color:#006161"],
[style*="background-color: #006161"],
[style*="background:#006161"],
[style*="background: #006161"],
[style*="background-color: rgb(0, 85, 85)"],
[style*="background-color:#005555"],
[style*="background-color: #005555"] {
    background: var(--tby-red, #dc2626) !important;
    background-color: var(--tby-red, #dc2626) !important;
}

/* ════════════ SEARCH OFFCANVAS / DROPDOWN PANELS ════════════ */
/* When user clicks the search button in the topbar, an offcanvas slides
   in. 6amMart paints it green by default. */
.offcanvas,
.offcanvas-body,
.offcanvas-header,
.search-results-panel,
.search-offcanvas {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}

/* ════════════ Override the global .form--control on the topbar ════════ */
/* Just an extra-specific rule to override style.css ordering */
.navbar-vertical-aside .sidebar--search-form .form--control,
aside .sidebar--search-form .form--control,
.navbar-vertical-content .sidebar--search-form .form--control,
html .sidebar--search-form .form--control {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
}

/* ════════════ TOPBAR __nav-link FINAL OVERRIDE ════════════
   The top header tabs (Users / Settings / Transactions & Reports /
   Send Management) use the .__nav-link class with color #006161
   (teal) in /assets/admin/css/style.css:7537. Override to white. */
.__nav-item .__nav-link,
.__nav-item .__nav-link span,
.__nav-link span,
.__nav-link {
    color: #FFFFFF !important;
}
.__nav-item .__nav-link:hover,
.__nav-item .__nav-link:hover span,
.__nav-link:hover,
.__nav-link:hover span,
.__nav-item .__nav-link.active,
.__nav-item .__nav-link.active span,
.__nav-link.active,
.__nav-link.active span {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
/* Active tab bottom indicator — red instead of teal */
.__nav-item .__nav-link.active::before,
.__nav-item .__nav-link::before {
    background: var(--tby-red, #dc2626) !important;
    background-color: var(--tby-red, #dc2626) !important;
}

/* SVG icons inside topbar tabs — coerce to white */
.__nav-item .__nav-link img,
.__nav-item .__nav-link svg,
.__nav-item .__nav-link svg path {
    filter: brightness(0) invert(1) !important;
}
.__nav-item .__nav-link.active img,
.__nav-item .__nav-link.active svg,
.__nav-item .__nav-link:hover img,
.__nav-item .__nav-link:hover svg {
    filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(220, 38, 38, 0.6)) !important;
}

/* The module-nav-icon (Demo Module pill) keeps red */
.__nav-item .__nav-link.module--nav-icon {
    background: linear-gradient(135deg, var(--tby-red, #dc2626) 0%, #8B1A1A 100%) !important;
}

/* ════════════ SIDEBAR nav-link hover (left side) ════════════
   On the left aside menu, hovering an item turns text teal by
   default. Coerce hover text to white and the background tint to red. */
.navbar-vertical-aside .nav-link:hover,
.navbar-vertical-aside .nav-link:hover span,
.navbar-vertical-aside .nav-link:hover i,
.navbar-vertical-aside .nav-link:focus,
.navbar-vertical-aside .nav-link:focus span,
.navbar-vertical-aside .nav-link:focus i {
    color: #FFFFFF !important;
    background: rgba(220, 38, 38, 0.12) !important;
}
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside .nav-link.active span,
.navbar-vertical-aside .nav-link.active i,
.navbar-vertical-aside .show > .nav-link,
.navbar-vertical-aside .show > .nav-link span {
    color: #FFFFFF !important;
    background: rgba(220, 38, 38, 0.20) !important;
    box-shadow: inset 3px 0 0 0 var(--tby-red, #dc2626) !important;
}

/* The .nav-indicator-icon (chevron expanding submenus) */
.navbar-vertical-aside .nav-indicator-icon,
.navbar-vertical-aside .nav-indicator-icon i {
    color: #FFFFFF !important;
}
.navbar-vertical-aside .nav-link:hover .nav-indicator-icon,
.navbar-vertical-aside .show > .nav-link .nav-indicator-icon {
    color: var(--tby-red-light, #ef4444) !important;
}

/* ════════════ KILL TEAL PRIMARY CLR EVERYWHERE ════════════
   6amMart sets --primary-clr: #107980 globally. Override in :root
   so every color: var(--primary-clr) becomes Tabayyun red. */
:root {
    --primary-clr: #dc2626 !important;
    --primary-clr-rgb: 220, 38, 38 !important;
}

/* Bootstrap text-primary uses var(--primary-clr) */
.text-primary,
[class*="text-primary"] {
    color: var(--tby-red, #dc2626) !important;
}

/* But on topbar specifically, the nav text should be white not red */
.__nav-item .__nav-link.text-primary,
.__nav-item .__nav-link span.text-primary {
    color: #FFFFFF !important;
}

/* ════════════ COMPREHENSIVE WHITE-BG NUKE (Feb 6, v15.13) ════════════
   The forms / settings cards / image uploaders / textareas / hint
   bubbles / "Create Tax" empty state were all still rendering as
   white because they use selectors NOT yet covered. Wide sweep. */

/* ───── Universal: any #fff / white background → dark ───── */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background:rgb(255,255,255)"],
[style*="background-color:rgb(255,255,255)"] {
    background: #16161a !important;
    background-color: #16161a !important;
    color: #E6E6E6 !important;
}

/* ───── 6amMart specific white classes ───── */
.bg-white,
.bg-white *,
.bg-white-n,
.bg-light,
.bg-light2,
.bg-section,
.section-bg,
.bg-section-light,
.bg-section-2,
.bg-card,
.bg-page,
.bg-pasel,
.email-format-wrapper .bg-section,
.email-format-wrapper .bg-section-2 {
    background: #16161a !important;
    background-color: #16161a !important;
    color: #E6E6E6 !important;
}

/* But text-color should reset on direct text children */
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.bg-section h1, .bg-section h2, .bg-section h3, .bg-section h4, .bg-section h5, .bg-section h6 {
    color: #FFFFFF !important;
}

/* ───── Specific known hex backgrounds in 6amMart ───── */
[class*="bg--E7E6E8"],
[class*="bg-E7E6E8"],
[class*="bg--F4F4F5"],
[class*="bg--FFF7E7"],
[class*="bg-FFF7E7"],
[class*="bg--E8EBF7"],
[class*="bg-E8EBF7"],
[class*="bg--EDEEFF"],
[class*="bg-EDEEFF"],
[class*="bg--FFE4E4"],
[class*="bg-FFE4E4"] {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
}

/* ───── Form controls (inputs/select/textarea) ───── */
.form-control,
.form-select,
.custom-select,
textarea,
textarea.form-control,
select.form-control,
input.form-control,
div.form-control,
.input--group .form-control,
.page-header-select-wrapper .select-item .form-control {
    background: rgba(0, 0, 0, 0.40) !important;
    background-color: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.form-control:focus,
textarea:focus,
select:focus,
input:focus {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: var(--tby-red, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.form-control[readonly],
.form-control[readonly].bg-white,
input[readonly] {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #B8C0CC !important;
}
.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: rgba(255, 255, 255, 0.40) !important;
}

/* ───── Image upload tiles ───── */
.image-uploader,
.image-upload,
.profile-image-upload,
.image-upload-box,
.upload-thumb,
.upload-box,
.upload-card,
.upload-section,
.dropzone,
.dropzone.dz-clickable,
.dz-default,
.dz-message,
.preview-image-box,
.preview-image,
.image-preview,
.logo-upload-box,
.cover-upload-box,
.icon-upload,
.banner-upload,
.thumb-upload,
.uploader-card,
[class*="upload"][class*="box"],
[class*="upload"][class*="card"],
[class*="image"][class*="upload"] {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    border: 2px dashed rgba(220, 38, 38, 0.35) !important;
    color: #E6E6E6 !important;
}
.dropzone:hover,
.image-uploader:hover,
.upload-thumb:hover {
    border-color: var(--tby-red, #dc2626) !important;
    background: #1f1f24 !important;
}

/* Browse/choose file buttons inside upload tiles */
.dropzone .dz-message span,
.image-uploader .upload-text,
.image-uploader-text,
.upload-instructions,
.image-upload-text,
.image-uploader span,
.image-uploader p {
    color: #FFFFFF !important;
}

/* ───── Empty states (Create Tax, "no records") ───── */
.no-record-found,
.no-data,
.empty-state,
.no-data-area,
.text--no-data,
.empty-state-container,
[class*="empty"],
[class*="no-data"],
[class*="no-record"] {
    background: transparent !important;
    color: #B8C0CC !important;
}

/* Container around empty-state often white */
.main-content,
.content-wrapper,
.page-content,
.content,
main.main,
.dashboard-content {
    background: transparent !important;
}

/* ───── Page-content row backgrounds (the Create Tax page main area) ───── */
.row > .col,
.row > [class*="col-"],
.content-area,
.module-area,
.tab-content,
.tab-pane {
    background: transparent !important;
}

/* Inner card on Create Tax / Empty pages */
.no-record-card,
.no-records,
.empty-container,
.empty-page {
    background: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    color: #E6E6E6 !important;
}
.no-record-card h1,
.no-record-card h2,
.no-record-card h3,
.no-records h1,
.no-records h2 {
    color: #FFFFFF !important;
}

/* ───── Hint bubble (blue/cream lightbulb tooltip) ───── */
.alert,
.alert-info,
.alert-warning,
.alert-light,
.alert-primary,
.alert--info,
.alert-success,
.hint-box,
.info-hint,
.tip-box,
.notice-box,
.warning-box,
.note-box,
[class*="hint"],
[class*="tip-"] {
    background: rgba(220, 38, 38, 0.06) !important;
    background-color: rgba(220, 38, 38, 0.06) !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    border-left: 3px solid var(--tby-red, #dc2626) !important;
    color: #E6E6E6 !important;
}
.alert-info, [class*="alert-info"] {
    border-left-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.06) !important;
}
.alert-warning, [class*="alert-warning"] {
    border-left-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.06) !important;
}
.alert-success, [class*="alert-success"] {
    border-left-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.06) !important;
}

/* Cream/yellow tooltip pill (the orange one) */
[style*="background:#fff7e7"],
[style*="background: #fff7e7"],
[style*="background-color:#fff7e7"],
[style*="background-color: #fff7e7"],
[class*="bg-FFF7E7"],
[class*="bg--FFF7E7"] {
    background: rgba(245, 158, 11, 0.08) !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-left: 3px solid #f59e0b !important;
    color: #fde68a !important;
}

/* Light-blue tooltip pill */
[style*="background:#E8EBF7"],
[style*="background: #E8EBF7"],
[style*="background-color:#E8EBF7"],
[style*="background-color: #E8EBF7"],
[class*="bg-EDEEFF"],
[class*="bg--EDEEFF"] {
    background: rgba(59, 130, 246, 0.08) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-left: 3px solid #3b82f6 !important;
    color: #93c5fd !important;
}

/* ───── Bottom breadcrumb footer ───── */
.footer-bar,
.bottom-bar,
.page-footer,
.admin-footer,
.footer.bg-white,
footer.bg-white,
.breadcrumb-footer,
.bottom-breadcrumb {
    background: #0A0E14 !important;
    background-color: #0A0E14 !important;
    color: #B8C0CC !important;
    border-top: 1px solid rgba(220, 38, 38, 0.15) !important;
}
.footer-bar a,
.footer-bar span,
.footer-bar li {
    color: #B8C0CC !important;
}
.footer-bar a:hover {
    color: var(--tby-red-light, #ef4444) !important;
}

/* ───── Side-by-side card sections in business settings ───── */
.business-form-wrapper,
.business-settings-form,
.settings-section,
.config-section,
.config-card,
.module-card,
.module-settings,
.business-card,
.form-wrapper,
.form-card,
.settings-card,
.tab-section {
    background: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    color: #E6E6E6 !important;
}

/* Inner sub-card backgrounds (e.g., commission/subscription tile, time format toggle) */
.inner-card,
.sub-card,
.tile,
.config-tile,
.option-tile,
.format-tile,
.toggle-tile,
.business-model-tile,
.timezone-tile,
.currency-tile {
    background: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.10) !important;
    color: #E6E6E6 !important;
}

/* ───── Modal "main-page-wrap" sometimes white ───── */
.main-page-wrap,
.app-content,
.app-main,
.admin-wrapper {
    background: #0A0E14 !important;
}

/* ───── Catch-all: ANY descendant whose computed background is white,
   inside an admin shell, gets neutralised via attribute selector ───── */
.app-main [class*="bg-white"]:not(.btn):not(button):not(svg):not(img),
.main-content [class*="bg-white"]:not(.btn):not(button),
body.admin [class*="bg-white"]:not(.btn):not(button) {
    background: #16161a !important;
    background-color: #16161a !important;
    color: #E6E6E6 !important;
}

/* ════════════ ACTIVE SIDEBAR ITEM — Green text/icons → White ════════════
   style.css:1211 → color: var(--base-clr-2) (mint #5affba) on active item text
   style.css:1217 → color: #5affba on active item icon
   style.css:207  → border-inline-start-color: #5affba on active item border
   Override these EXACT selectors with higher specificity. */
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link .text-truncate,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link .text-truncate,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link span,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link span,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link .nav-link-text,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link .nav-link-text {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Active item icon (was mint #5affba) */
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link i,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link i,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link .nav-icon,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link .nav-icon,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link svg,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Active border-left (was mint #5affba) → red */
.navbar-vertical .navbar-nav.nav-tabs .active .nav-link,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link {
    border-inline-start-color: var(--tby-red, #dc2626) !important;
}

/* Override base-clr-2 mint variable (used by 6amMart globally) */
:root {
    --base-clr-2: #FFFFFF !important;
}

/* Catch sub-link active state */
.navbar-vertical .show > .nav-link,
.navbar-vertical .show > .nav-link span,
.navbar-vertical .show > .nav-link i,
.navbar-vertical .show > .nav-link .text-truncate {
    color: #FFFFFF !important;
}
.navbar-vertical .show > .nav-link i {
    fill: #FFFFFF !important;
}

/* Bullet dots before sub-menu items (the • dot next to "وسائل التواصل") */
.navbar-vertical .nav-sub .nav-link::before,
.navbar-vertical .nav-sub-item .nav-link::before {
    background: var(--tby-red, #dc2626) !important;
    color: var(--tby-red, #dc2626) !important;
}

/* ════════════ GOOGLE MAPS — RESTORE VISIBILITY ════════════
   The blanket .bg-white catch-all + the `background: transparent` rules
   on .row > .col were forcing the Google Maps gm-style container's
   internal background to dark, which broke tile rendering. Re-allow
   Google Maps to use its own colors but force the container border to
   be Tabayyun red. */
.gm-style,
.gm-style *,
.leaflet-container,
.leaflet-container *,
.maplibregl-canvas-container,
.maplibregl-canvas-container *,
.mapboxgl-canvas-container,
.mapboxgl-canvas-container * {
    /* Restore default Google Maps styling — DO NOT override their bg/color */
    background-color: unset !important;
    color: unset !important;
    filter: none !important;
}

/* The map wrapper iframe / canvas itself */
iframe[src*="google.com/maps"],
iframe[src*="maps.google"],
.map-container iframe,
#map iframe,
.gm-style > div,
.gm-style div[style*="background"] {
    background: unset !important;
    background-color: unset !important;
    opacity: 1 !important;
    filter: none !important;
}

/* The outer map wrapper (the one with the address bar etc.) should be
   dark, but inner Google Maps tiles should NOT be touched. */
.map-wrap,
.map-container,
#map-container,
#map,
[id*="map"] {
    background: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    border-radius: 8px !important;
}
.map-wrap iframe,
.map-container iframe,
#map iframe {
    border: 0 !important;
    background: transparent !important;
}

/* The address-bar above the map (rounded pill) should be dark */
.map-address-bar,
.address-search-bar,
.map-search-input {
    background: rgba(0, 0, 0, 0.50) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
}

/* ════════════ FINAL ROUND — Hidden white BG classes (Feb 6, v15.14) ═════ */

/* 1. .__bg-F8F9FC-card — used in landing-index.blade.php for the radio
   group cards. style.css:9963 sets background: #f8f9fc (cream). */
.__bg-F8F9FC-card,
[class*="__bg-F8F9FC-card"] {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    color: #E6E6E6 !important;
}

/* 2. resturant-type-group with inline .bg-white class */
.resturant-type-group,
.resturant-type-group.bg-white,
.resturant-type-group.border.bg-white,
.restaurant-type-group,
.restaurant-type-group.bg-white,
.restaurant-type-group.border.bg-white {
    background: rgba(0, 0, 0, 0.30) !important;
    background-color: rgba(0, 0, 0, 0.30) !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}
.resturant-type-group label,
.resturant-type-group .form-check-label,
.restaurant-type-group label,
.restaurant-type-group .form-check-label {
    color: #FFFFFF !important;
}

/* 3. Radio buttons (.form--check) — the teal "ثبت" was the checked
   radio bg #00868f. Replace with Tabayyun red. */
.form--check .form-check-input[type="radio"] {
    background-color: rgba(0, 0, 0, 0.50) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.50), 0 0 0 3px rgba(220, 38, 38, 0.35) !important;
    border-color: rgba(220, 38, 38, 0.40) !important;
}
.form--check .form-check-input[type="radio"]:checked {
    background-color: var(--tby-red, #dc2626) !important;
    border-color: var(--tby-red, #dc2626) !important;
    box-shadow: 0 0 0 3px #0A0E14, 0 0 0 4px var(--tby-red, #dc2626) !important;
}
.form--check .form-check-input[type="checkbox"] {
    background-color: rgba(0, 0, 0, 0.50) !important;
    border-color: rgba(220, 38, 38, 0.40) !important;
}
.form--check .form-check-input[type="checkbox"]:checked {
    background-color: var(--tby-red, #dc2626) !important;
    border-color: var(--tby-red, #dc2626) !important;
}
.form--check .form-check-label,
.form--check span {
    color: #FFFFFF !important;
}

/* 4. .nav--tabs .nav-link.active — the active tab bottom border was
   var(--primary-clr) (already overridden). Add hover state explicitly. */
.nav--tabs .nav-link,
.nav--tabs.nav--pills .nav-link {
    color: #B8C0CC !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
}
.nav--tabs .nav-link:hover,
.nav--tabs.nav--pills .nav-link:hover {
    color: #FFFFFF !important;
    border-bottom-color: rgba(220, 38, 38, 0.40) !important;
    background: transparent !important;
}
.nav--tabs .nav-link.active,
.nav--tabs.nav--pills .nav-link.active {
    color: #FFFFFF !important;
    background: transparent !important;
    border-bottom: 2px solid var(--tby-red, #dc2626) !important;
}

/* 5. .card.card-body — the white wrappers around section titles */
.card,
.card.card-body,
.card-body,
.card.card-body.mb-3 {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.12) !important;
    color: #E6E6E6 !important;
}
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #FFFFFF !important;
}
.card-body p, .card p {
    color: #B8C0CC !important;
}

/* 6. .empty--data — center "No data" / illustration containers */
.empty--data,
.empty--data h5,
.empty--data p {
    background: transparent !important;
    color: #B8C0CC !important;
}
.empty--data h5 {
    color: #FFFFFF !important;
}

/* 7. .content (main content wrapper) — make sure it's transparent so the
   body dark BG shows through */
.content,
.container-fluid {
    background: transparent !important;
}

/* 8. fs-12 / fs-14 text-color reset */
.fs-12, .fs-14 {
    color: inherit !important;
}

/* 9. Page header H1 should be white */
.page-header h1,
.page-header h2,
.page-header h3 {
    color: #FFFFFF !important;
}

/* 10. .border utility class (Bootstrap border with default light color) */
.border {
    border-color: rgba(220, 38, 38, 0.15) !important;
}

/* 11. Active sidebar item hover NEEDS WHITE TEXT (don't let global hover override) */
.navbar-vertical-aside .nav-link.active:hover,
.navbar-vertical-aside .nav-link.active:hover span,
.navbar-vertical-aside .nav-link.active:hover .text-truncate,
.navbar-vertical-aside .nav-link.active:hover i,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link:hover,
.navbar-vertical .navbar-nav.nav-tabs .active.nav-link:hover,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link:hover .text-truncate,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link:hover span,
.navbar-vertical .navbar-nav.nav-tabs .active > .nav-link:hover i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    background: rgba(220, 38, 38, 0.30) !important;
}

/* ════════════ ZONE / VIEW DEMO BUTTONS (Feb 6, v15.15) ════════════ */

/* The "View Demo" + "Add New Zone" buttons use .bg-opacity-primary-10
   which now maps to rgba(220,38,38,0.1) since we override --primary-clr.
   But the text was .theme-clr-dark which made the label invisible. */
.bg-opacity-primary-10 {
    background: rgba(220, 38, 38, 0.10) !important;
    background-color: rgba(220, 38, 38, 0.10) !important;
}
.theme-clr-dark,
.text-dark,
.text-body,
.text-secondary {
    color: #FFFFFF !important;
}
/* Specific override for buttons that combine both classes */
.bg-opacity-primary-10.theme-clr-dark,
.bg-opacity-primary-10 .theme-clr-dark,
.border-primary.bg-opacity-primary-10 {
    color: #FFFFFF !important;
    border-color: var(--tby-red, #dc2626) !important;
}
.border-primary {
    border-color: var(--tby-red, #dc2626) !important;
}

/* "Connect Module" hint banner — restore as Tabayyun red accent */
.alert.bg-light,
.alert.alert-info,
.alert.alert-warning,
[class*="alert"][class*="bg-light"] {
    background: rgba(220, 38, 38, 0.06) !important;
    border-left: 3px solid var(--tby-red, #dc2626) !important;
    color: #E6E6E6 !important;
}

/* Bootstrap utility .text-* color reset for body/secondary/muted that
   defaults to dark on light backgrounds */
.text-muted {
    color: #B8C0CC !important;
}

/* Section sub-title h4 + h3 inside .card */
h3, h4, h5 {
    color: #FFFFFF !important;
}

/* Light hover backgrounds on table rows */
.table tbody tr:hover,
.table-hover tbody tr:hover,
tr:hover {
    background: rgba(220, 38, 38, 0.06) !important;
}

/* Table backgrounds */
.table,
.table tbody,
.table thead,
.table tr,
.table td,
.table th {
    background: transparent !important;
    color: #E6E6E6 !important;
    border-color: rgba(220, 38, 38, 0.12) !important;
}
.table thead th {
    background: rgba(0, 0, 0, 0.40) !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid rgba(220, 38, 38, 0.30) !important;
}

/* Make sure dropdown / pagination / form-select dropdowns are dark */
.dropdown-menu,
.dropdown-menu-light,
.pagination .page-link,
select option {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    color: #E6E6E6 !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
}
.dropdown-item:hover,
.pagination .page-link:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    color: #FFFFFF !important;
}
.pagination .page-item.active .page-link {
    background: var(--tby-red, #dc2626) !important;
    border-color: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* Toggle switch (Default Status column) */
.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--tby-red, #dc2626) !important;
    border-color: var(--tby-red, #dc2626) !important;
}

/* "Default zone" / "Make default" pill labels */
.badge,
.badge.bg-primary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-secondary {
    background: rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(220, 38, 38, 0.40) !important;
}
.badge.bg-danger,
.badge.bg-warning {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fde68a !important;
    border: 1px solid rgba(245, 158, 11, 0.50) !important;
}

/* ════════════ FINAL: shadow--card + shadow--card-2 white BGs ════════════
   style.css:413 → .shadow--card { background: #ffffff }
   style.css:10784 → .shadow--card-2 { background: #ffffff }
   These wrap most form containers in 6amMart (Zone Setup, Settings,
   Add Forms). Coerce to dark with red glow. */
.shadow--card,
.shadow--card-2,
form.shadow--card,
form.shadow--card-2,
div.shadow--card,
div.shadow--card-2 {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40),
                0 0 0 1px rgba(220, 38, 38, 0.08) inset !important;
    color: #E6E6E6 !important;
}
.shadow--card *:not(.btn):not(button):not(svg):not(path):not(img):not(canvas):not(iframe):not(.gm-style):not(.gm-style *),
.shadow--card-2 *:not(.btn):not(button):not(svg):not(path):not(img):not(canvas):not(iframe):not(.gm-style):not(.gm-style *) {
    color: inherit;
}
.shadow--card h1, .shadow--card h2, .shadow--card h3, .shadow--card h4, .shadow--card h5, .shadow--card h6,
.shadow--card-2 h1, .shadow--card-2 h2, .shadow--card-2 h3, .shadow--card-2 h4, .shadow--card-2 h5, .shadow--card-2 h6 {
    color: #FFFFFF !important;
}

/* The .bg-light inner panel inside Zone Setup */
.bg-light.rounded.p-20,
.bg-light.rounded,
div.bg-light {
    background: rgba(0, 0, 0, 0.20) !important;
    background-color: rgba(0, 0, 0, 0.20) !important;
    border: 1px solid rgba(220, 38, 38, 0.10) !important;
    color: #E6E6E6 !important;
}

/* ════════════ KPI / STAT CARDS (Feb 6, v15.16) ════════════
   style.css:8618 → .__customer-statistics-card { background: #ffffff }
   This is the card used on Dispatch Overview + Users Overview + most
   module dashboards. Coerce to dark with red glow. */
.__customer-statistics-card,
.__customer-statistics-card.h-100,
.__customer-statistics-card-wrap,
.__customer-statistics-card-wrap-2 .__customer-statistics-card,
[class*="__customer-statistics-card"] {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(220, 38, 38, 0.08) inset !important;
    color: #E6E6E6 !important;
}
.__customer-statistics-card:hover {
    border-color: rgba(220, 38, 38, 0.35) !important;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.18),
                0 0 0 1px rgba(220, 38, 38, 0.15) inset !important;
}
.__customer-statistics-card .title,
.__customer-statistics-card .title h4 {
    color: #FFFFFF !important;
}
.__customer-statistics-card .subtitle {
    color: #B8C0CC !important;
}

/* Override the 6amMart per-card --clr variable (was greens, oranges,
   teal-blues). Map known --clr values to Tabayyun-compatible accents. */
.__customer-statistics-card[style*="--clr:#008958"],
.__customer-statistics-card[style*="--clr: #008958"] {
    --clr: #ef4444 !important;  /* mint-green → red */
}
.__customer-statistics-card[style*="--clr:#FF5A54"],
.__customer-statistics-card[style*="--clr: #FF5A54"] {
    --clr: #dc2626 !important;  /* coral → red */
}
.__customer-statistics-card[style*="--clr:#0E73B9"],
.__customer-statistics-card[style*="--clr: #0E73B9"] {
    --clr: #3b82f6 !important;  /* keep blue but lighten */
}
.__customer-statistics-card[style*="--clr:#FF9900"],
.__customer-statistics-card[style*="--clr: #FF9900"] {
    --clr: #f59e0b !important;
}

/* ════════════ MAP CANVAS DEFAULT COORDS ════════════
   On Dispatch Overview the #map-canvas defaults to (0, 0) which lands
   in the Pacific Ocean. We can't change JS init from CSS, but we CAN
   make the empty water look intentional with a Tabayyun-themed overlay
   until the JS finds the user's location. */
#map-canvas,
.map-wrapper-2 #map-canvas,
.map-pop-deliveryman ~ .map-warper #map-canvas {
    background: #16161a !important;
    min-height: 400px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    position: relative !important;
}
/* Until map tiles paint, show a subtle Tabayyun watermark */
#map-canvas:empty::after {
    content: 'TABAYYUN LOGISTICS';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(220, 38, 38, 0.30);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 2px;
    pointer-events: none;
}

/* ════════════ MAP POP DELIVERYMAN — was light blue gradient ════════════
   The search box at the top of the dispatch map has a light-blue
   gradient bar above it. Force to dark. */
.map-pop-deliveryman,
.map-pop-deliveryman-inner,
.map-pop-deliveryman-inner label,
.map-warper,
.map-wrapper-2 {
    background: #16161a !important;
    color: #E6E6E6 !important;
    border: 1px solid rgba(220, 38, 38, 0.15) !important;
}
.map-pop-deliveryman .form-control {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #FFFFFF !important;
}
.map-pop-deliveryman .link,
.map-pop-deliveryman a.link {
    color: var(--tby-red-light, #ef4444) !important;
}

/* Dispatch Overview banner ("This_section_only_contains_Order_Data") */
.alert.bg--10,
.alert[class*="bg--10"] {
    background: rgba(220, 38, 38, 0.10) !important;
    border-left: 3px solid var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* "Currently Active Delivery Men" + "View All Delivery Men" link */
label,
.font-semibold {
    color: #FFFFFF !important;
}

/* The .alert generic — make sure all alerts have dark theme */
.alert {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #E6E6E6 !important;
    border-radius: 8px !important;
}

/* page-header H1 + page-header-text */
.page-header-title,
.page-header-text {
    color: #FFFFFF !important;
}
.page-header-text.text-dark {
    color: #B8C0CC !important;
}

/* "All Zones" filter pill at top of Users Overview */
.page-header-select-wrapper .select-item,
.page-header-select-wrapper .form-control,
.page-header-select-wrapper {
    background: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    color: #FFFFFF !important;
}

/* ════════════ FINAL DECISIVE FIX — exact 6amMart class overrides ═════
   Discovered via runtime DOM inspection (v15.17, Feb 6).
   These are the EXACT class names used by the Users / Dispatch
   dashboards that we missed in earlier passes. */

/* 1. .__user-dashboard-card (style.css:8424) — the 3 big white KPI
      cards at the top of Users Overview */
.__user-dashboard-card,
.__user-dashboard-card.h-100,
div.__user-dashboard-card,
[class*="__user-dashboard-card"]:not([class*="thumbs"]) {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(220, 38, 38, 0.08) inset !important;
    color: #E6E6E6 !important;
}
.__user-dashboard-card:hover {
    border-color: rgba(220, 38, 38, 0.40) !important;
    box-shadow: 0 12px 30px rgba(220, 38, 38, 0.20),
                0 0 0 1px rgba(220, 38, 38, 0.20) inset !important;
}
.__user-dashboard-card .title,
.__user-dashboard-card .title h4,
.__user-dashboard-card h4,
.__user-dashboard-card h3 {
    color: #FFFFFF !important;
}
.__user-dashboard-card .subtitle,
.__user-dashboard-card p {
    color: #B8C0CC !important;
}
.__user-dashboard-card {
    --theme-clr: #dc2626 !important;
}

/* Thumb avatar border (was white) */
.__user-dashboard-card .__user-dashboard-card-thumbs img {
    border: 1px solid #1a1a1e !important;
}

/* 2. .__customer-satisfaction (style.css:8514) — "رضا العملاء" card */
.__customer-satisfaction,
div.__customer-satisfaction {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: #E6E6E6 !important;
}
.__customer-satisfaction .subtitle,
.__customer-satisfaction .review-count,
.__customer-satisfaction .review-received,
.__customer-satisfaction h4,
.__customer-satisfaction h5,
.__customer-satisfaction h6 {
    color: #FFFFFF !important;
}
.__customer-satisfaction p,
.__customer-satisfaction .label {
    color: #B8C0CC !important;
}

/* 3. .__customer-satisfaction list rows (إيجابي/جيد/حيادي/سلبي) — were
      rgb(248, 249, 251) light gray */
.__customer-satisfaction li,
.__customer-satisfaction ul li,
.__customer-satisfaction .satisfaction-row,
.__customer-satisfaction .review-row {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(220, 38, 38, 0.10) !important;
    color: #E6E6E6 !important;
}
.__customer-satisfaction li:hover,
.__customer-satisfaction ul li:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* 4. .toggle-tour (style.css:9107) — small tour widget bottom-right */
.toggle-tour,
.toggle-tour.active {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #E6E6E6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}
.toggle-tour .tour-guide_btn,
.toggle-tour .tour-guide_btn span,
.toggle-tour span,
.toggle-tour p,
.toggle-tour a {
    color: #FFFFFF !important;
    background: transparent !important;
}

/* 5. .__customer-review + .__gross-amount + .__top-delivery / "أعلى رجل توصيل" */
.__customer-review,
.__gross-amount,
.__top-delivery,
.__top-delivery-card,
[class*="__customer-review"],
[class*="__gross-amount"],
[class*="__top-delivery"] {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    color: #E6E6E6 !important;
}
.__customer-review h4, .__gross-amount h4, .__top-delivery h4,
.__customer-review h5, .__gross-amount h5, .__top-delivery h5,
.__customer-review h6, .__gross-amount h6, .__top-delivery h6 {
    color: #FFFFFF !important;
}

/* 6. Generic light-gray row catch (rgb 248,249,251 / rgb 247,248,250 /
      #f8f9fb / #f7f8fa) — these are the inner satisfaction row tints
      and table row hovers that slipped through earlier rules */
[style*="background: rgb(248, 249"],
[style*="background-color: rgb(248, 249"],
[style*="background: rgb(247, 248"],
[style*="background-color: rgb(247, 248"],
[style*="background: #f8f9"],
[style*="background-color: #f8f9"],
[style*="background: #F8F9"],
[style*="background-color: #F8F9"],
[style*="background: #f7f8"],
[style*="background-color: #f7f8"] {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    color: #E6E6E6 !important;
}

/* 7. Any list-item or div that defaults to rgb(248,249,251) via CSS
      class — common 6amMart .bg-section variants */
.bg-F8F9FA,
.bg-f8f9fa,
.bg-F8F9FB,
.bg-f8f9fb,
.bg-F7F8FA,
.bg-f7f8fa,
.bg-F4F4F5,
.bg-f4f4f5,
.bg--F8F9FA,
.bg--F8F9FB,
.bg--F7F8FA {
    background: rgba(255, 255, 255, 0.03) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #E6E6E6 !important;
}

/* 8. Final NUKE — any direct child of body/main with bg #fff that
      slipped through */
.main-content > div > .card,
.content > .card,
.content > div > .card,
.content-area > .card,
main > .card,
main > div > .card {
    background: #16161a !important;
    color: #E6E6E6 !important;
}

/* ════════════ FINAL FIX — Dropdown + Reset Button + Empty State (v15.18) */

/* ─── 1. Settings dropdown panel (.__nav-module) ─────────────────────────
   style.css:7594 → .__nav-module { background: #fff }
   style.css:7622 → .__nav-module-header .inner { background: rgba(0,97,97,0.8) }
   style.css:7650 → .__nav-module-body { background: white }
   We want the WHOLE panel dark (the part below the header was bright). */
.__nav-module,
div.__nav-module {
    background: #0F0F12 !important;
    background-color: #0F0F12 !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.70),
                0 0 0 1px rgba(220, 38, 38, 0.10) inset,
                0 0 20px rgba(220, 38, 38, 0.15) !important;
}

/* Replace the green inner header → DARKER red (per user request: "أغمق من الأحمر الفاتح") */
.__nav-module-header .inner {
    background: linear-gradient(135deg, #6B0F0F 0%, #4A0808 100%) !important;
    background-color: #6B0F0F !important;
    color: #FFFFFF !important;
}
.__nav-module-header .inner h4,
.__nav-module-header .inner p {
    color: #FFFFFF !important;
}

/* Body (the area below the header that was light/red-tinted) */
.__nav-module-body {
    background: #16161a !important;
    background-color: #16161a !important;
    border: 1px solid rgba(220, 38, 38, 0.20) !important;
    border-top: none !important;
    color: #E6E6E6 !important;
}
.__nav-module-body ul li a,
.__nav-module-body ul li a span {
    color: #FFFFFF !important;
    background: transparent !important;
}
.__nav-module-body ul li a:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #FFFFFF !important;
}
.__nav-module-body ul li a:hover span {
    color: #FFFFFF !important;
}
.__nav-module-body ul li img {
    filter: brightness(0) invert(1) !important;
}
.__nav-module-body a:has(span:contains("View All")),
.__nav-module-body .view-all,
.__nav-module-body .view--all {
    color: var(--tby-red-light, #ef4444) !important;
}

/* ─── 2. .btn--reset (style.css:459 → background: #E8EAED) ───────────────
   The "إعادة ضبط" button. Coerce to dark per user request. */
.btn--reset,
button.btn--reset,
.btn.btn--reset {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
}
.btn--reset:hover,
button.btn--reset:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* ─── 3. ALL light/white buttons site-wide ───────────────────────────────
   Per user request: "اجعل كل الأزرار بدون اللون الأبيض كخلفية للوضع المظلم" */
.btn-light,
.btn-white,
.btn.bg-white,
.btn[class*="bg-white"],
.btn-outline-light,
.btn-outline-secondary,
button.bg-white,
button.bg-light {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.30) !important;
    color: #FFFFFF !important;
}
.btn-light:hover,
.btn-white:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* Cancel buttons (typically white in modals) */
.btn-cancel,
.btn--cancel,
button[type="reset"],
.cancel-btn {
    background: #1a1a1e !important;
    background-color: #1a1a1e !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #FFFFFF !important;
}
.btn-cancel:hover,
button[type="reset"]:hover {
    background: rgba(220, 38, 38, 0.18) !important;
    border-color: var(--tby-red, #dc2626) !important;
}

/* Bootstrap default .btn without explicit color (often appears light gray) */
.btn:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="bg-primary"]):not([class*="primary--btn"]):not([class*="btn--primary"]):not([class*="btn-floating"]) {
    color: #FFFFFF;
}
/* Filter pill / outline button defaults */
.btn-outline-primary {
    background: rgba(220, 38, 38, 0.10) !important;
    border: 1px solid var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}
.btn-outline-primary:hover {
    background: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* ─── 4. Empty-state illustration ("لاتوجد بيانات") ─────────────────────
   The illustration's bg cloud is white in the SVG (good for visibility on
   dark BG - per user request: "غير اللون في الخلفية لهذا الأوبجكت للون
   الأبيض"). The user wants the *background around it* to stay dark and
   the illustration intact. We make sure the empty-data wrapper doesn't
   add any tint. */
.empty-data,
.empty-data-img,
.no-data-img,
.no-record-found,
.empty-state {
    background: transparent !important;
}
.empty-data img,
.no-data-img img,
.empty-state img {
    background: transparent !important;
    /* Keep illustration as-is so the cream/white bubble around the
       character stays visible — this is what the user wants */
    opacity: 1 !important;
    filter: none !important;
}

/* ─── 5. React frontend cookie banner "موافق" button (azuro) ────────────
   Make sure the cookie acceptance button matches Tabayyun red, not the
   teal default. Bonus catch-all for any teal/azure button on React FE. */
button[style*="background-color: rgb(15, 220, 220)"],
button[style*="background-color: rgb(0, 188, 212)"],
button[style*="background-color: rgb(33, 150, 243)"],
button[style*="background-color: #0fdcdc"],
button[style*="background-color: #00bcd4"],
button[style*="background-color: #2196f3"] {
    background: var(--tby-red, #dc2626) !important;
    background-color: var(--tby-red, #dc2626) !important;
    color: #FFFFFF !important;
}

/* ════════════ HIDE GOOGLE MAPS ATTRIBUTION BAR (Feb 6, v15.19) ═══════════
   Hides the white "Map data ©2026 GeoBasis-DE/BKG ... Terms" bar that
   appears at the bottom of every embedded Google Map. Per user request:
   "احذف هذه من الخرايط كلها" (delete this from all maps). */
.gm-style-cc,
.gm-style > div > .gm-style-cc,
.gm-style a[href^="https://maps.google.com/maps"],
.gm-style a[href^="https://www.google.com/maps"],
.gm-style a[title^="Click to see this area"],
.gm-style-mtc,
.gmnoprint.gm-style-cc,
button[aria-label*="Keyboard shortcuts"],
button[title*="Keyboard shortcuts"],
.gm-style div[style*="font-family: Roboto, Arial"] > a,
.gm-style div[style*="font-family: Roboto, Arial"] > div {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
}
/* The Google logo (bottom-left) — keep hidden too */
.gm-style > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(4) {
    display: none !important;
}
/* Catch any white bottom strip leftover from the attribution row */
.gm-style > div > div > div:last-child:has(a[href*="google.com"]) {
    display: none !important;
}