/* Stat-card icon boxes (.icon-shape) across the dashboards: the vendor CSS
   nudges the icon glyph down 11px (`.icon-shape i { top: 11px; position:
   relative; }`), calibrated for its old Nucleo icon font (.ni), whose glyphs
   sit high in their box. Material Symbols glyphs are already vertically
   centered on their own, so that offset just pushes them off-center/low.
   Cancel it for Material Symbols icons specifically. */
.icon-shape i.material-symbols-rounded {
    top: 0;
}

/* Mobile navbar + sidenav */

.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #67748e;
    transition: background-color 0.15s ease-in-out;
}

.navbar-icon-btn:hover,
.navbar-icon-btn:focus {
    background-color: rgba(0, 0, 0, 0.06);
    color: #344767;
}

/* The generic Bootstrap .badge rules (em-based padding/font-size sized for
   inline text) make #notif-badge grow wide enough for "9+" that, absolutely
   positioned over a 40px icon button, it ends up sitting on top of and
   hiding the bell glyph instead of sitting in its corner. Pin it to a small
   fixed-size dot/pill instead so the bell stays visible underneath it. */
#notif-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 4px !important;
    font-size: 10px !important;
    line-height: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -3px !important;
    right: -3px !important;
    box-shadow: 0 0 0 2px #fff;
}

.dark-version #notif-badge {
    box-shadow: 0 0 0 2px var(--dm-surface, #242838);
}

/* A brief pop when the unread count actually changes, so a newly-arrived
   notification is visibly noticeable rather than the badge just silently
   updating its number in place. */
@keyframes notifBadgePop {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}

#notif-badge.notif-badge-pop {
    animation: notifBadgePop 0.4s ease-out;
}

/* Dims the page behind the off-canvas sidenav on mobile/tablet and lets a tap
   close it, since the sidenav has no other backdrop-close affordance. */
.sidenav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    cursor: pointer;
}

@media (max-width: 1199.98px) {
    body.g-sidenav-pinned .sidenav-backdrop {
        display: block;
    }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
    .sidenav {
        max-width: 17.5rem;
    }
}

/* ==========================================================================
   Dark mode — soft navy-slate palette
   ==========================================================================
   The vendor .dark-version theme was built for its own demo "configurator"
   (separate Light/Dark/Transparent sidenav pickers, near-black surfaces).
   Our sidebar is hardcoded to .bg-white, which the vendor CSS force-keeps
   white even under .dark-version (`.dark-version .sidenav.bg-white { background: #fff }`)
   — that's why the sidebar stayed white and, combined with lightened text,
   produced invisible white-on-white menu items. Rather than fight the demo
   CSS piecemeal, this defines one consistent palette and re-points every
   surface/text/border at it, loaded after material-dashboard.css so it wins
   on equal specificity. */

.dark-version {
    --dm-bg: #1b1e2b;
    --dm-surface: #242838;
    --dm-surface-alt: #2c3145;
    --dm-border: #383d54;
    --dm-text: #eef0f7;
    --dm-text-muted: #a3a8c3;
}

.dark-version,
.dark-version .main-content {
    background-color: var(--dm-bg) !important;
}

/* Surfaces: cards, dropdowns, toasts, sidebar, modals all share one tone
   instead of the vendor's mismatched near-black per component. */
.dark-version .card,
.dark-version .dropdown .dropdown-menu,
.dark-version .toast,
.dark-version .modal-content,
.dark-version .sidenav,
.dark-version .sidenav.bg-white,
.dark-version .sidenav.bg-transparent {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .card {
    border: 1px solid var(--dm-border);
}

.dark-version .modal-header,
.dark-version .modal-footer {
    border-color: var(--dm-border) !important;
}

/* Sidebar nav links: inactive items use .text-dark (already lightened
   below); active items already force text-white + bg-gradient-dark in the
   blade markup, which the vendor CSS recolors to a navy gradient that fits
   this palette, so they need no extra work here. */
.dark-version .sidenav .nav-link.text-dark,
.dark-version .sidenav .nav-link .nav-link-text {
    color: var(--dm-text-muted) !important;
}

.dark-version .sidenav .nav-link:hover:not(.active) {
    background-color: var(--dm-surface-alt);
    border-radius: 0.5rem;
}

/* Sidebar nav icons in dark mode. Two vendor rules fight us here:
   1) `.dark-version .sidenav.bg-white .collapse .nav-item .nav-link:not(.active) i`
      forces icons to #262626 (near-black) !important — built for the demo's
      "white sidebar kept white even in dark mode" option. Our sidebar keeps
      the literal `.bg-white` class (only its painted background is
      repointed to the dark surface color via the rule above), so this
      selector still matches and wins on specificity over a plainer
      override, leaving icons almost-black on our now-dark surface.
   2) The `opacity-5` (50%) utility class on every icon in the markup,
      stacked on top of an already-muted color, would still be too faint
      even once the color above is fixed.
   Matching the vendor selector's exact path plus an extra class beats it
   on specificity regardless of stylesheet order. */
.dark-version .sidenav.bg-white .collapse .nav-item .nav-link:not(.active) i.material-symbols-rounded {
    color: var(--dm-text-muted) !important;
    opacity: 0.9 !important;
}

.dark-version .sidenav.bg-white .collapse .nav-item .nav-link.active i.material-symbols-rounded {
    color: #fff !important;
    opacity: 1 !important;
}

.dark-version .sidenav-header .navbar-brand span,
.dark-version .sidenav-header i {
    color: var(--dm-text) !important;
}

.dark-version hr.horizontal.dark {
    border-color: var(--dm-border);
    opacity: 1;
}

/* Text utilities — used all over the app for body copy, table cells,
   labels, breadcrumb; the vendor theme never touches these. */
.dark-version .text-dark {
    color: var(--dm-text) !important;
}

.dark-version .text-secondary {
    color: var(--dm-text-muted) !important;
}

.dark-version .card p,
.dark-version .dropdown .dropdown-menu p,
.dark-version .toast p {
    color: var(--dm-text) !important;
    opacity: 0.75;
}

/* Alerts (.alert-info/success/warning/danger): Bootstrap 5.3 recolors these
   via CSS variables under a `[data-bs-theme=dark]` attribute selector, but
   this app's dark mode toggles a `.dark-version` class instead — that
   attribute is never set, so alerts always keep their light-mode pastel
   colors. That's legible on its own, but reads as washed-out/inconsistent
   floating on our dark surfaces, so give them an explicit dark treatment
   that matches the rest of the theme. */
.dark-version .alert-info {
    background-color: rgba(23, 193, 232, 0.12) !important;
    border-color: rgba(23, 193, 232, 0.35) !important;
    color: var(--dm-text) !important;
}

.dark-version .alert-success {
    background-color: rgba(45, 206, 137, 0.12) !important;
    border-color: rgba(45, 206, 137, 0.35) !important;
    color: var(--dm-text) !important;
}

.dark-version .alert-warning {
    background-color: rgba(251, 140, 0, 0.12) !important;
    border-color: rgba(251, 140, 0, 0.35) !important;
    color: var(--dm-text) !important;
}

.dark-version .alert-danger {
    background-color: rgba(245, 54, 92, 0.12) !important;
    border-color: rgba(245, 54, 92, 0.35) !important;
    color: var(--dm-text) !important;
}

/* Plain .dropdown-item links (profile/logout/sign-in menu) use Bootstrap's
   default dark link color — the vendor dark theme only recolors the icon
   inside them, not the text itself. */
.dark-version .dropdown-item {
    color: var(--dm-text) !important;
}

.dark-version .dropdown-item:hover,
.dark-version .dropdown-item:focus {
    color: var(--dm-text) !important;
}

/* Tables: vendor handles header/border/cell text reasonably, but not row
   hover or the surrounding card, which is covered above. */
.dark-version .table thead tr th {
    color: var(--dm-text) !important;
}

.dark-version .table tbody tr:hover {
    background-color: var(--dm-surface-alt);
}

.dark-version .table > :not(caption) > * > * {
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

/* Buttons: solid/gradient buttons already carry their own color and need
   nothing extra; outline variants use dark text/borders that vanish here. */
.dark-version .btn-outline-dark,
.dark-version .btn-outline-secondary {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .btn-outline-dark:hover,
.dark-version .btn-outline-secondary:hover {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-text) !important;
}

/* Form controls outside the .input-group-outline pattern (plain selects,
   textareas, checkboxes used across the admin CRUD forms). */
.dark-version .form-control,
.dark-version .form-select {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .form-control::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 0.7;
}

.dark-version .input-group.input-group-outline .form-control {
    border-color: var(--dm-border) !important;
}

.dark-version .input-group.input-group-outline .form-label {
    color: var(--dm-text-muted) !important;
}

/* Overrides the light-mode-only floating-label color below (which forces
   #495057 regardless of theme) once a field is focused or filled. */
.dark-version .input-group.input-group-outline.is-focused .form-label,
.dark-version .input-group.input-group-outline.is-filled .form-label {
    color: var(--dm-text-muted) !important;
}

/* This app's own nav components (mobile hamburger/backdrop, icon buttons,
   notification dropdown) added on top of the vendor theme. */
.dark-version .navbar-icon-btn {
    color: var(--dm-text-muted);
}

.dark-version .navbar-icon-btn:hover,
.dark-version .navbar-icon-btn:focus {
    background-color: var(--dm-surface-alt);
    color: var(--dm-text);
}

.dark-version .sidenav-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.dark-version .navbar.navbar-main {
    background-color: var(--dm-surface) !important;
}

.dark-version .breadcrumb-item.text-sm a.opacity-5 {
    color: var(--dm-text-muted) !important;
}

.dark-version .page-link {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark-version .page-item.active .page-link {
    background-color: var(--dm-surface-alt) !important;
}

.dark-version .page-item.disabled .page-link {
    color: var(--dm-text-muted) !important;
}

/* Notifications dropdown */

.notif-dropdown {
    width: 320px;
    max-width: calc(100vw - 1.5rem);
}

.notif-dropdown .notif-item {
    white-space: normal;
}

.notif-dropdown .notif-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Override Material Dashboard's pink (#e91e63) filled/focused input color */

.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+.form-control {
    border-color: #d2d6da !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #d2d6da, inset -1px 0 #d2d6da, inset 0 -1px #d2d6da !important;
}

.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
    color: #495057 !important;
}
.input-group.input-group-outline.is-focused .form-label::before,
.input-group.input-group-outline.is-focused .form-label::after,
.input-group.input-group-outline.is-filled .form-label::before,
.input-group.input-group-outline.is-filled .form-label::after {
    border-color: #d2d6da !important;
}

.input-group.input-group-outline.is-focused legend,
.input-group.input-group-outline.is-filled legend {
    color: #d2d6da !important;
}
.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
    background-color: transparent !important;
}

.input-group.input-group-outline.is-focused legend,
.input-group.input-group-outline.is-filled legend {
    background-color: transparent !important;
    border-color: #d2d6da !important;
    color: transparent !important;
}
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
    border-top-color: #d2d6da !important;
    box-shadow: inset 0 1px #d2d6da !important;
}

/* Override Material Dashboard's pink (#e91e63) pagination accent — swap it
   for the app's own navy brand color (already used for bg-gradient-dark
   buttons and active tab pills) so pagination reads as part of this theme
   instead of the vendor demo's pink. */
.pagination {
    --bs-pagination-color: #344767;
    --bs-pagination-hover-color: #344767;
    --bs-pagination-hover-bg: #eef0f4;
    --bs-pagination-focus-color: #344767;
    --bs-pagination-focus-bg: #eef0f4;
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(52, 71, 103, 0.25);
    --bs-pagination-active-bg: #344767;
    --bs-pagination-active-border-color: #344767;
}

/* ==========================================================================
   Dark mode — light-only surfaces left over from page-level styles
   ==========================================================================
   Many pages ship their own <style> blocks (filter inputs, upload boxes,
   product cards, the delivery-assign screen, etc.) and a few utility
   classes (.bg-gray-100, .bg-light, .bg-white, .list-group-item,
   .nav-pills) that hardcode light-mode colors. The vendor .dark-version
   theme never touches them, so they rendered as bright white panels with
   light text inside. Page styles load after this file, hence !important. */

/* Light background utilities → dark surface */
.dark-version .main-content .bg-gray-100,
.dark-version .main-content .bg-gray-200,
.dark-version .main-content .bg-light,
.dark-version .list-group-item {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-text) !important;
}

.dark-version .list-group-item.border-0:not(.bg-gray-100) {
    background-color: transparent !important;
}

.dark-version .main-content .border {
    border-color: var(--dm-border) !important;
}

/* Headings, labels and body text used without utility classes */
.dark-version .main-content h1,
.dark-version .main-content h2,
.dark-version .main-content h3,
.dark-version .main-content h4,
.dark-version .main-content h5,
.dark-version .main-content h6,
.dark-version .main-content label,
.dark-version .main-content .form-check-label,
.dark-version .main-content .text-body,
.dark-version .modal-content h5,
.dark-version .modal-content h6,
.dark-version .modal-content label {
    color: var(--dm-text);
}

.dark-version .text-muted {
    color: var(--dm-text-muted) !important;
}

.dark-version .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Nav pills (dashboard Paid/Pending tabs and other tab groups) */
.dark-version .nav.nav-pills {
    background: var(--dm-surface-alt) !important;
}

.dark-version .nav.nav-pills .nav-link {
    color: var(--dm-text-muted) !important;
}

.dark-version .nav.nav-pills .nav-link.active {
    background-color: #4a5a85 !important;
    color: #fff !important;
}

.dark-version .nav-tabs {
    border-color: var(--dm-border);
}

.dark-version .nav-tabs .nav-link {
    color: var(--dm-text-muted);
}

.dark-version .nav-tabs .nav-link.active {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* White badges with .text-dark: .text-dark is lightened in dark mode, which
   made the count invisible on its white pill. Keep the text dark here. */
.dark-version .badge.bg-white.text-dark,
.dark-version .badge.bg-light.text-dark {
    background-color: #fff !important;
    color: #344767 !important;
}

/* Light buttons */
.dark-version .btn-light,
.dark-version .btn-white {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* Form bits not covered above */
.dark-version .form-control,
.dark-version .form-select,
.dark-version textarea,
.dark-version select {
    background-color: transparent;
}

.dark-version .form-control:disabled,
.dark-version .form-control[readonly],
.dark-version .form-select:disabled {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-text-muted) !important;
}

.dark-version select option,
.dark-version select optgroup {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

.dark-version .input-group-text {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

.dark-version .form-check-input:not(:checked) {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
}

.dark-version input[type="date"]::-webkit-calendar-picker-indicator,
.dark-version input[type="time"]::-webkit-calendar-picker-indicator,
.dark-version input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Filter bars on the Orders / Customers / Drivers / Products / Driver
   history listing pages */
.dark-version input.filter-input,
.dark-version select.filter-select-pill,
.dark-version .dh-filter-input {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark-version input.filter-input:focus,
.dark-version select.filter-select-pill:focus,
.dark-version .dh-filter-input:focus {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-text-muted) !important;
}

.dark-version input.filter-input::placeholder,
.dark-version .dh-filter-input::placeholder {
    color: var(--dm-text-muted) !important;
}

.dark-version .filter-label,
.dark-version .dh-filter-label,
.dark-version .filter-input-icon,
.dark-version .dh-filter-icon {
    color: var(--dm-text-muted) !important;
}

/* Page-level `.table tbody tr:hover { background: #f8f9fa }` rules */
.dark-version .main-content .table tbody tr:hover {
    background-color: var(--dm-surface-alt) !important;
}

/* Inline order-status dropdown on the Orders page (keeps its colored
   text/border per status, only the white fill changes) */
.dark-version .status-pill {
    background-color: var(--dm-surface-alt) !important;
}

.dark-version .status-pill:not(.status-pending):not(.status-paid):not(.status-fulfilled):not(.status-cancelled) {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* File upload boxes (products, drivers, restaurant settings) */
.dark-version .file-upload-box {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark-version .file-upload-box:hover {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-text-muted) !important;
}

/* Product picker cards (customer + admin order create) */
.dark-version .product-card {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .product-card.in-cart,
.dark-version .product-card-selected {
    border-color: var(--dm-text-muted) !important;
}

.dark-version .product-image-wrapper {
    background-color: var(--dm-surface-alt) !important;
}

.dark-version .product-image-placeholder {
    background-color: var(--dm-border) !important;
}

.dark-version .product-image-placeholder .material-symbols-rounded {
    color: var(--dm-text-muted) !important;
}

.dark-version .qty-btn {
    background-color: var(--dm-surface-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* Driver report-issue textarea */
.dark-version .issue-reason-textarea {
    background-color: transparent;
    border-color: var(--dm-border) !important;
    color: var(--dm-text);
}

/* Delivery assign screen (admin/deliveries/edit, .dm-* classes) */
.dark-version .dm-card {
    background: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .dm-title,
.dark-version .dm-driver-name,
.dark-version .dm-back:hover {
    color: var(--dm-text) !important;
}

.dark-version .dm-back,
.dark-version .dm-label,
.dark-version .dm-eyebrow,
.dark-version .dm-subtitle,
.dark-version .dm-driver-sub,
.dark-version .dm-fee-symbol {
    color: var(--dm-text-muted) !important;
}

.dark-version .dm-subtitle a {
    color: #8ea6ff !important;
}

.dark-version .dm-driver-list,
.dark-version .dm-driver-row {
    border-color: var(--dm-border) !important;
}

.dark-version .dm-driver-row:hover {
    background-color: var(--dm-surface-alt) !important;
}

.dark-version .dm-driver-row.is-selected {
    background-color: rgba(74, 110, 224, 0.2) !important;
}

.dark-version .dm-driver-row.is-disabled:hover {
    background-color: transparent !important;
}

.dark-version .dm-avatar {
    background: var(--dm-surface-alt) !important;
    color: var(--dm-text) !important;
}

.dark-version .dm-status-pill.offline {
    background: var(--dm-surface-alt) !important;
    color: var(--dm-text-muted) !important;
}

.dark-version .dm-status-pill.available {
    background: rgba(45, 206, 137, 0.15) !important;
    color: #5fe0a8 !important;
}

.dark-version .dm-status-pill.on_delivery {
    background: rgba(74, 144, 226, 0.18) !important;
    color: #8ec0f5 !important;
}

.dark-version .dm-textarea,
.dark-version .dm-input {
    background-color: transparent !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark-version .dm-btn-cancel {
    background: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

.dark-version .dm-btn-cancel:hover {
    background: var(--dm-border) !important;
}

.dark-version .dm-btn-primary {
    background: #4a5a85 !important;
}

.dark-version .dm-btn-primary:hover:not(:disabled) {
    background: #56689a !important;
}

.dark-version .dm-map-wrap {
    background: var(--dm-surface-alt) !important;
}

.dark-version .dm-map-caption {
    background: rgba(36, 40, 56, 0.92) !important;
    color: var(--dm-text) !important;
}

/* Hardcoded inline styles in markup: light panel fills (restaurant logo /
   banner previews, tracking stepper track) and navy icons that disappear
   on the dark surface. */
.dark-version .main-content [style*="background-color: #f8f9fa"],
.dark-version .main-content [style*="background: #f8f9fa"],
.dark-version .main-content [style*="background: #e9ecef"] {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
}

.dark-version .main-content i[style*="color: #344767"] {
    color: var(--dm-text) !important;
}

/* Tracking stepper: pending step circles */
.dark-version .step-circle.bg-light {
    background-color: var(--dm-surface-alt) !important;
    border-color: var(--dm-border) !important;
}

/* Dashboard tab links (admin/dashboard page styles force #67748e) */
.dark-version .dashboard-orders-tabs .nav-link:not(.active) {
    color: var(--dm-text-muted) !important;
}

/* Dark-mode pagination accent to match the navy palette */
.dark-version .pagination {
    --bs-pagination-color: var(--dm-text);
    --bs-pagination-hover-color: var(--dm-text);
    --bs-pagination-hover-bg: var(--dm-surface-alt);
    --bs-pagination-focus-color: var(--dm-text);
    --bs-pagination-focus-bg: var(--dm-surface-alt);
    --bs-pagination-active-bg: #4a5a85;
    --bs-pagination-active-border-color: #4a5a85;
}

/* Unread notification rows (.bg-light) — subtle accent instead */
.dark-version .main-content tr.bg-light,
.dark-version .main-content .border-bottom.bg-light {
    background-color: rgba(74, 110, 224, 0.12) !important;
}

.dark-version .border-bottom,
.dark-version .border-top {
    border-color: var(--dm-border) !important;
}