/*
 * ============================================================
 *  D360 Admin — Dark Black & Gold Theme Override
 *  Author  : Abhishek / LYFAUX
 *  Product : D360 Admin Panel
 *
 *
 *  Load order: injected AFTER style.css in every master layout.
 * ============================================================
 */

/* ─── D360 Palette tokens ──────────────────────────────────── */
:root {
    --d360-gold:            #FFD700;
    --d360-gold-dark:       #C9960C;
    --d360-gold-pressed:    #8A6400;
    --d360-gold-glow:       rgba(255, 215, 0, 0.15);
    --d360-gold-glow-md:    rgba(255, 215, 0, 0.25);
    --d360-black:           #0A0A0A;
    --d360-dark-card:       #141414;
    --d360-dark-surface:    #1C1C1C;
    --d360-dark-elevated:   #242424;
    --d360-divider:         #2A2A2A;
    --d360-text-primary:    #F5F5F5;
    --d360-text-secondary:  #9E9E9E;
    --d360-gold-tint10:     rgba(255, 215, 0, 0.10);
    --d360-gold-tint20:     rgba(255, 215, 0, 0.20);
}

/* ─── Override Bootstrap / template CSS variables ───────────── */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* Primary → Gold */
    --bs-primary:               var(--d360-gold-dark);
    --bs-primary-dark:          var(--d360-gold-pressed);
    --bs-primary-light:         var(--d360-gold-tint20);
    --bs-primary-rgb:           201, 150, 12;
    --bs-primary-light-bg:      var(--d360-gold-tint10);

    /* Backgrounds → Black family */
    --bs-body-bg:               var(--d360-black);
    --bs-white:                 var(--d360-dark-card);
    --bs-white-rgb:             20, 20, 20;
    --bs-light:                 var(--d360-dark-surface);
    --bs-light-rgb:             28, 28, 28;
    --bg-color:                 var(--d360-dark-card);
    --bg-color2:                var(--d360-dark-surface);
    --bg-color3:                var(--d360-dark-elevated);
    --bg-color4:                var(--d360-dark-elevated);

    /* Text */
    --bs-dark:                  var(--d360-text-primary);
    --bs-dark-rgb:              245, 245, 245;
    --bs-body-color:            var(--d360-text-secondary);
    --text-light-color:         #6B6B6B;

    /* Borders / dividers */
    --bs-border-color:          var(--d360-divider);
    --border-color:             var(--d360-divider);
    --input-border-color:       var(--d360-divider);
    --input-border-color-active: var(--d360-gold-tint20);

    /* Cards & dropdowns */
    --dropdown-menu-color:      var(--d360-dark-card);

    /* Secondary buttons */
    --secondary-btn-color:      var(--d360-dark-surface);
    --secondary-btn-hover-color: var(--d360-dark-elevated);

    /* Shadows */
    --shadow-color:             var(--d360-gold-glow);
    --shadow-color-rgb:         255, 215, 0;

    /* Inside elements */
    --inside-gray:              var(--d360-divider);
    --timeline-color:           var(--d360-divider);
    --mobile-search-bg:         var(--d360-dark-surface);

    /* Misc */
    --absolute-dark:            var(--d360-text-primary);
    --absolute-white:           var(--d360-dark-card);

    /* Info/link: reuse gold tones */
    --bs-info:                  var(--d360-gold-dark);
    --bs-info-light:            var(--d360-gold-tint20);
    --bs-info-dark:             var(--d360-gold-pressed);

    /* Font — Poppins */
    --bs-font-sans-serif:       "Poppins", sans-serif;
}

/* ─── Base canvas ─────────────────────────────────────────── */
html, body {
    background-color: var(--d360-black) !important;
    color: var(--d360-text-primary) !important;
    font-family: "Poppins", sans-serif !important;
}

/* ─── Sidebar / Aside ─────────────────────────────────────── */
.navbar-vertical,
.navbar-vertical.navbar-expand-xl,
.sidebar,
#layoutSidenav_nav,
aside,
.aside,
.left-sidebar,
[class*="sidebar"] {
    background-color: var(--d360-dark-card) !important;
    border-right: 1px solid var(--d360-divider) !important;
}

/* ── Nav item base layout ── */
.aside-body .nav li {
    padding: 0 !important;
    margin: 1px 8px !important;
    border-radius: 10px !important;
    overflow: visible !important;
}

/* ── All anchor links ── */
.aside-body .nav li > a,
.navbar-vertical .nav-link,
.sidebar .nav-link,
.aside .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    color: var(--d360-text-secondary) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Icon inside link */
.aside-body .nav li > a .material-icons,
.aside-body .nav li > a .material-symbols-outlined {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    opacity: 0.7;
    transition: opacity 0.18s ease, color 0.18s ease !important;
}

/* ── Hover state ── */
.aside-body .nav li > a:hover,
.navbar-vertical .nav-link:hover,
.sidebar .nav-link:hover {
    color: var(--d360-gold) !important;
    background-color: rgba(255, 215, 0, 0.07) !important;
    border-left-color: rgba(255, 215, 0, 0.4) !important;
    padding-left: 15px !important;
}
.aside-body .nav li > a:hover .material-icons,
.aside-body .nav li > a:hover .material-symbols-outlined {
    opacity: 1 !important;
    color: var(--d360-gold) !important;
}

/* ── Active / current page ── */
.aside-body .nav li > a.active-menu,
.active-menu,
.navbar-vertical .nav-link.active,
.nav-item .nav-link.active {
    color: var(--d360-gold) !important;
    background: linear-gradient(90deg, rgba(255,215,0,0.13) 0%, rgba(255,215,0,0.04) 100%) !important;
    border-left: 3px solid var(--d360-gold) !important;
    font-weight: 600 !important;
    padding-left: 15px !important;
}
.aside-body .nav li > a.active-menu .material-icons,
.aside-body .nav li > a.active-menu .material-symbols-outlined {
    opacity: 1 !important;
    color: var(--d360-gold) !important;
}

/* ── nav-category section headings ── */
.aside-body .nav li.nav-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--d360-text-secondary) !important;
    opacity: 0.55 !important;
    padding: 18px 12px 4px !important;
    margin: 0 8px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--d360-divider) !important;
    margin-bottom: 4px !important;
}

/* ── Sub-menu ── */
.aside-body .nav ul.sub-menu {
    padding: 2px 0 4px 0 !important;
    margin-left: 8px !important;
    border-left: 1px dashed rgba(255,215,0,0.2) !important;
}
.aside-body .nav ul li {
    padding: 0 !important;
    margin: 1px 0 1px 8px !important;
    border-radius: 8px !important;
}
.aside-body .nav ul li > a {
    font-size: 0.775rem !important;
    padding: 7px 10px 7px 14px !important;
    color: var(--d360-text-secondary) !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
}
.aside-body .nav ul li > a:hover {
    color: var(--d360-gold) !important;
    background-color: rgba(255, 215, 0, 0.06) !important;
    border-left-color: var(--d360-gold-dark) !important;
    padding-left: 18px !important;
}
.aside-body .nav ul li > a.active-menu {
    color: var(--d360-gold) !important;
    background-color: rgba(255, 215, 0, 0.09) !important;
    border-left-color: var(--d360-gold) !important;
    font-weight: 600 !important;
    padding-left: 18px !important;
}

/* ── has-sub-item chevron ── */
.aside-body .nav li.has-sub-item::after {
    font-family: "Material Icons" !important;
    content: "chevron_right" !important;
    color: var(--d360-text-secondary) !important;
    opacity: 0.5 !important;
    top: 10px !important;
    right: 10px !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    font-size: 1rem !important;
    z-index: 1 !important;
}
.aside-body .nav li.sub-menu-opened::after {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
    color: var(--d360-gold) !important;
}

/* ── count pill on sub-menu items ── */
.aside-body .nav li .link-title .count {
    background-color: var(--d360-gold-dark) !important;
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    line-height: 1.5 !important;
}

/* ── User profile block in sidebar ── */
.aside-body .user-profile {
    padding: 8px 12px 12px !important;
    border-bottom: 1px solid var(--d360-divider) !important;
    margin-bottom: 8px !important;
}
.aside-body .user-profile .card-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--d360-text-primary) !important;
    margin-bottom: 2px !important;
}
.aside-body .user-profile .card-text {
    font-size: 0.7rem !important;
    color: var(--d360-gold-dark) !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
}

/* Sidebar brand logo area */
.navbar-brand-logo-wrapper,
.navbar-brand,
.aside-header,
.sidebar-logo {
    background-color: var(--d360-black) !important;
    border-bottom: 1px solid var(--d360-divider) !important;
    padding: 12px 16px !important;
}

/* ─── Topbar / Header ─────────────────────────────────────── */
.header {
    background-color: var(--d360-dark-card) !important;
    border-bottom: 1px solid var(--d360-divider) !important;
    box-shadow: 0 1px 0 var(--d360-divider), 0 4px 24px rgba(0,0,0,0.35) !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

/* ── Search button ── */
#modalOpener,
.title-color.bg--secondary {
    background-color: var(--d360-dark-surface) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: border-color 0.15s, background-color 0.15s !important;
}
#modalOpener:hover {
    border-color: var(--d360-gold-dark) !important;
    color: var(--d360-gold) !important;
    background-color: rgba(255,215,0,0.06) !important;
}
#modalOpener .material-symbols-outlined,
#modalOpener .material-icons {
    font-size: 16px !important;
    opacity: 0.7;
}
/* Ctrl+K kbd hint */
.ctrlplusk {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    background-color: var(--d360-dark-elevated) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
    border-radius: 4px !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

/* ── Language selector ── */
.topbar-link,
.lagn-drop-btn {
    color: var(--d360-text-secondary) !important;
    font-size: 13px !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    transition: all 0.15s !important;
    text-decoration: none !important;
    background: transparent !important;
}
.topbar-link:hover,
.lagn-drop-btn:hover {
    color: var(--d360-gold) !important;
    border-color: var(--d360-divider) !important;
    background-color: var(--d360-dark-surface) !important;
}
.topbar-link .material-icons,
.lagn-drop-btn .material-icons {
    font-size: 16px !important;
    opacity: 0.8;
}

/* ── SMS / chat icon button ── */
.count-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: var(--d360-dark-surface) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
    transition: all 0.15s !important;
    text-decoration: none !important;
}
.count-btn:hover {
    border-color: var(--d360-gold-dark) !important;
    color: var(--d360-gold) !important;
    background-color: rgba(255,215,0,0.08) !important;
}
.count-btn .material-icons,
.count-btn .material-symbols-outlined {
    font-size: 18px !important;
}
/* Notification count badge */
.count-btn .count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--d360-gold) 0%, var(--d360-gold-dark) 100%) !important;
    color: #000 !important;
    border: 1.5px solid var(--d360-dark-card) !important;
}

/* ── Profile avatar button ── */
.header-icon.user-icon {
    display: inline-flex !important;
    align-items: center !important;
}
.header-icon.user-icon img,
.header-icon > img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 2px solid var(--d360-divider) !important;
    object-fit: cover !important;
    transition: border-color 0.15s !important;
}
.header-icon.user-icon:hover img {
    border-color: var(--d360-gold-dark) !important;
}

/* ── Header toggle/hamburger button ── */
.toggle-menu-button,
.aside-toggle {
    color: var(--d360-text-secondary) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
}
.toggle-menu-button:hover,
.aside-toggle:hover {
    background-color: var(--d360-dark-surface) !important;
    color: var(--d360-gold) !important;
}

/* ── Profile dropdown ── */
.header .dropdown-menu {
    min-width: 210px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
}
.header .dropdown-item-text {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--d360-divider) !important;
    text-decoration: none !important;
}
.header .dropdown-item-text .card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--d360-text-primary) !important;
    margin: 0 !important;
}
.header .dropdown-item-text .card-text {
    font-size: 11px !important;
    color: var(--d360-text-secondary) !important;
}
.header .dropdown-item {
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    margin: 1px 0 !important;
}

/* ── Search modal ── */
.modal-content__search {
    background-color: var(--d360-dark-card) !important;
    border-radius: 14px !important;
    border: 1px solid var(--d360-divider) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    overflow: hidden !important;
}
.modal-content__search .bg-card {
    background-color: var(--d360-dark-surface) !important;
    border: 1px solid var(--d360-divider) !important;
    border-radius: 10px !important;
}
.modal-content__search .search-input {
    background: transparent !important;
    color: var(--d360-text-primary) !important;
    font-size: 15px !important;
    border: none !important;
    box-shadow: none !important;
}
.modal-content__search .search-input::placeholder {
    color: var(--d360-text-secondary) !important;
}
.modal-content__search .material-symbols-outlined {
    color: var(--d360-text-secondary) !important;
    font-size: 18px !important;
}
/* Esc button */
.modal-content__search button[data-bs-dismiss="modal"] {
    background-color: var(--d360-dark-elevated) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
}
/* Search loader overlay */
.search-loader-overlay {
    background-color: rgba(10,10,10,0.75) !important;
    backdrop-filter: blur(4px) !important;
}
.loader-spinner {
    border-color: var(--d360-divider) !important;
    border-top-color: var(--d360-gold) !important;
}

/* ─── Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    box-shadow: 0 4px 16px var(--d360-gold-glow) !important;
}
.card-header,
.card-footer {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary,
.btn--primary {
    background: linear-gradient(135deg, #FFE57A 0%, #FFD700 55%, #C9960C 100%) !important;
    border-color: var(--d360-gold-dark) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px var(--d360-gold-glow) !important;
}
.btn-primary:hover,
.btn--primary:hover,
.btn-primary:focus,
.btn--primary:focus {
    background: linear-gradient(135deg, #FFD700 0%, #C9960C 100%) !important;
    border-color: var(--d360-gold-pressed) !important;
    color: #000 !important;
    box-shadow: 0 4px 18px var(--d360-gold-glow-md) !important;
}
.btn-outline-primary {
    color: var(--d360-gold-dark) !important;
    border-color: var(--d360-gold-dark) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
}
.btn-dark {
    background-color: var(--d360-dark-elevated) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
.btn-dark:hover {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-gold-dark) !important;
}
.btn-light {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}

/* ─── Forms & Inputs ─────────────────────────────────────── */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--d360-gold-dark) !important;
    box-shadow: 0 0 0 0.2rem var(--d360-gold-tint10) !important;
    background-color: var(--d360-dark-surface) !important;
}
.form-control::placeholder { color: #555 !important; }
.form-label { color: var(--d360-text-secondary) !important; }

/* ─── Tables ──────────────────────────────────────────────── */
/* style.css hardcodes .table td { background-color: var(--bs-white) }
   and Bootstrap only sets --bs-table-color to white under [data-bs-theme=dark].
   Override unconditionally so td text/bg are always correct. */
.table {
    color: var(--d360-text-primary) !important;
    --bs-table-color: var(--d360-text-primary) !important;
    --bs-table-bg: transparent !important;
    border-color: var(--d360-divider) !important;
}
.table td,
.table th {
    background-color: transparent !important;
    color: var(--d360-text-primary) !important;
    --bs-table-color: var(--d360-text-primary) !important;
    --bs-table-bg: transparent !important;
}
.table thead th,
.table > thead > tr > th {
    background-color: var(--d360-dark-surface) !important;
    color: var(--d360-gold-dark) !important;
    border-color: var(--d360-divider) !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
}
.table tbody td { border-color: var(--d360-divider) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 215, 0, 0.03) !important;
    --bs-table-bg-type: transparent !important;
}
.table-hover tbody tr:hover,
.table--hover tbody tr:hover {
    background-color: var(--d360-gold-tint10) !important;
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-type: transparent !important;
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-text-primary) !important;
}

/* ─── Dropdowns ───────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
.dropdown-item {
    color: var(--d360-text-primary) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
}
.dropdown-divider { border-color: var(--d360-divider) !important; }

/* ─── Modals ──────────────────────────────────────────────── */
.modal-content {
    background-color: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
}
.modal-header {
    border-bottom-color: var(--d360-divider) !important;
    background-color: var(--d360-dark-surface) !important;
}
.modal-footer { border-top-color: var(--d360-divider) !important; }

/* ─── Badges ──────────────────────────────────────────────── */
.badge.bg-primary,
.badge-primary { background-color: var(--d360-gold-dark) !important; color: #000 !important; }

/* ─── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { background: transparent !important; }
.breadcrumb-item.active { color: var(--d360-gold-dark) !important; }
.breadcrumb-item a { color: var(--d360-text-secondary) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--d360-divider) !important; }

/* ─── Nav tabs ────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--d360-divider) !important;
}
.nav-tabs .nav-link {
    color: var(--d360-text-secondary) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--d360-gold) !important;
    background-color: var(--d360-dark-card) !important;
    border-color: var(--d360-divider) var(--d360-divider) var(--d360-dark-card) !important;
}

/* ─── Progress bars ───────────────────────────────────────── */
.progress { background-color: var(--d360-dark-surface) !important; }
.progress-bar { background-color: var(--d360-gold-dark) !important; }

/* ─── Pagination ──────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--d360-gold-dark) !important;
    border-color: var(--d360-gold-dark) !important;
    color: #000 !important;
}
.page-link {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
.page-link:hover {
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
}

/* ─── Alerts ──────────────────────────────────────────────── */
.alert-primary {
    background-color: var(--d360-gold-tint10) !important;
    border-color: var(--d360-gold-dark) !important;
    color: var(--d360-gold) !important;
}
.alert-info {
    background-color: rgba(201,150,12,0.12) !important;
    border-color: var(--d360-gold-dark) !important;
    color: var(--d360-gold) !important;
}

/* ─── Info / warning notice boxes ──────────────────────────
   Blade templates use .pick-map, .bg-warning.bg-opacity-10, and
   .bg-primary.bg-opacity-10 as tinted info banners. Their child
   <p> and <span> elements inherit --bs-body-color (#9E9E9E) which
   is near-invisible against the amber/orange tint. Force legible
   bright text throughout these boxes. */
.pick-map,
.bg-warning.bg-opacity-10,
.bg-primary.bg-opacity-10 {
    color: var(--d360-text-primary) !important;
}
.pick-map p,  .pick-map span,  .pick-map a,  .pick-map li,
.bg-warning.bg-opacity-10 p,  .bg-warning.bg-opacity-10 span,
.bg-warning.bg-opacity-10 a,  .bg-warning.bg-opacity-10 li,
.bg-primary.bg-opacity-10 p,  .bg-primary.bg-opacity-10 span,
.bg-primary.bg-opacity-10 a,  .bg-primary.bg-opacity-10 li {
    color: var(--d360-text-primary) !important;
}
/* Bold/strong text inside these boxes pops with gold */
.pick-map strong, .pick-map .fw-medium, .pick-map .text-dark,
.bg-warning.bg-opacity-10 strong, .bg-warning.bg-opacity-10 .fw-medium,
.bg-warning.bg-opacity-10 .text-dark,
.bg-primary.bg-opacity-10 strong, .bg-primary.bg-opacity-10 .fw-medium,
.bg-primary.bg-opacity-10 .text-dark {
    color: var(--d360-gold) !important;
}

/* ─── List groups ────────────────────────────────────────── */
.list-group-item {
    background-color: var(--d360-dark-card) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
.list-group-item.active {
    background-color: var(--d360-gold-dark) !important;
    border-color: var(--d360-gold-dark) !important;
    color: #000 !important;
}

/* ─── Login page ─────────────────────────────────────────── */
.authentication-bg,
.auth-page,
body.auth-body-bg {
    background: radial-gradient(ellipse at 70% 30%, rgba(201,150,12,0.18) 0%, transparent 60%),
                var(--d360-black) !important;
}
.auth-card,
.login-card {
    background-color: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 40px var(--d360-gold-glow) !important;
}

/* ─── Page header / hero section ────────────────────────── */
.page-header { border-bottom: 1px solid var(--d360-divider) !important; }
.page-header-title,
.page-title { color: var(--d360-text-primary) !important; }

/* ─── Stat / summary cards ────────────────────────────────── */
.stat-card,
.report-card,
.summary-card,
.analytics-card,
.dashboard-card {
    background: linear-gradient(135deg, var(--d360-dark-card) 0%, var(--d360-dark-surface) 100%) !important;
    border: 1px solid var(--d360-divider) !important;
    box-shadow: 0 4px 16px var(--d360-gold-glow) !important;
}
.stat-card .stat-icon,
.report-card .icon-box {
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
}

/* ─── Charts (ApexCharts) ─────────────────────────────────── */
.apexcharts-toolbar svg,
.apexcharts-menu-item { color: var(--d360-text-secondary) !important; }
.apexcharts-tooltip {
    background: var(--d360-dark-card) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}

/* ─── Select2 ─────────────────────────────────────────────── */
/* Trigger box */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
/* Rendered text inside trigger */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--d360-text-primary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--d360-text-secondary) !important;
}
/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--d360-text-secondary) transparent transparent transparent !important;
}
/* Dropdown panel */
.select2-dropdown {
    background-color: var(--d360-dark-card) !important;
    border-color: var(--d360-divider) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
/* Search input inside dropdown */
.select2-search--dropdown { background-color: var(--d360-dark-card) !important; }
.select2-search__field {
    background-color: var(--d360-dark-surface) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
    outline: none !important;
}
/* Every option — default state */
.select2-container--default .select2-results__option {
    background-color: var(--d360-dark-card) !important;
    color: var(--d360-text-primary) !important;
}
/* Hover / keyboard-focused option */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
}
/* Already-selected option */
.select2-container--default .select2-results__option--selected {
    background-color: rgba(255,215,0,0.12) !important;
    color: var(--d360-gold-dark) !important;
}
/* Disabled option */
.select2-container--default .select2-results__option--disabled {
    color: var(--d360-text-secondary) !important;
    opacity: 0.5 !important;
}
/* Multi-select tags/chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--d360-dark-elevated) !important;
    border-color: var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--d360-text-secondary) !important;
    border-right-color: var(--d360-divider) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--d360-gold) !important;
    background-color: transparent !important;
}

/* ─── Payment gateway mode/status pills ──────────────────────
   Bootstrap bg-primary + bg-opacity-10 renders as 10% gold on dark
   surface — nearly invisible. Override with legible dark-theme pills. */
.payment-test {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    line-height: 1.6 !important;
}
/* mode pill: test / live */
.payment-test.bg-primary {
    background-color: rgba(255, 215, 0, 0.15) !important;
    color: var(--d360-gold) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
}
/* not-configured pill */
.payment-test.bg-danger {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;
}
/* gateway card wrapper */
.payment-test__wrap {
    background-color: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    border-radius: 12px !important;
}
.payment-test__wrap h5.text-dark {
    color: var(--d360-text-primary) !important;
}


/* Default Bootstrap tooltip is black-bg/white-text which looks
   fine but can clash. Theme it to match the card surface. */
.tooltip .tooltip-inner {
    background-color: var(--d360-dark-elevated) !important;
    color: var(--d360-text-primary) !important;
    border: 1px solid var(--d360-divider) !important;
    font-size: 12px !important;
    max-width: 260px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
/* Arrow tint to match */
.tooltip.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    var(--d360-divider) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--d360-divider) !important; }
.tooltip.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   var(--d360-divider) !important; }
.tooltip.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  var(--d360-divider) !important; }
/* auto-placement aliases */
.tooltip.bs-tooltip-auto[data-popper-placement^=top]    .tooltip-arrow::before { border-top-color:    var(--d360-divider) !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: var(--d360-divider) !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=left]   .tooltip-arrow::before { border-left-color:   var(--d360-divider) !important; }
.tooltip.bs-tooltip-auto[data-popper-placement^=right]  .tooltip-arrow::before { border-right-color:  var(--d360-divider) !important; }

/* ─── Toastr overrides ────────────────────────────────────── */
#toast-container > .toast-info { background-color: #1a1206 !important; border-left: 4px solid var(--d360-gold-dark) !important; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--d360-dark-card); }
::-webkit-scrollbar-thumb { background: var(--d360-divider); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--d360-gold-dark); }

/* ─── HR / Dividers ───────────────────────────────────────── */
hr { border-color: var(--d360-divider) !important; opacity: 1 !important; }

/* ─── Links ───────────────────────────────────────────────── */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.breadcrumb-item a) {
    color: var(--d360-gold-dark);
}
a:not(.btn):hover { color: var(--d360-gold); }

/* ─── Text utility overrides ─────────────────────────────── */
.text-primary  { color: var(--d360-gold-dark) !important; }
.text-info     { color: var(--d360-gold-dark) !important; }
.bg-primary    { background-color: var(--d360-gold-dark) !important; }
.bg-info       { background-color: var(--d360-gold-dark) !important; }
.border-primary { border-color: var(--d360-gold-dark) !important; }
.bg-soft-primary,
.bg-primary-light { background-color: var(--d360-gold-tint10) !important; }

/* ─── Dark-theme overrides for hardcoded Bootstrap light utilities ───
   Many blade templates use text-dark / bg-light / text-body on <th> and
   other elements. Bootstrap's !important utilities win without these. */
.text-dark   { color: var(--d360-text-primary)   !important; }
.text-body   { color: var(--d360-text-primary)   !important; }
.text-muted  { color: var(--d360-text-secondary) !important; }
.bg-light    { background-color: var(--d360-dark-surface)  !important; }
.bg-white    { background-color: var(--d360-dark-card)     !important; }
.border-light { border-color: var(--d360-divider)          !important; }
/* Table headers that use bg-light + text-dark become themed automatically */
.table thead th.bg-light,
.table > thead > tr > th.bg-light {
    background-color: var(--d360-dark-surface) !important;
    color: var(--d360-gold-dark)               !important;
}

/* ─── Patch hardcoded hex values from style.css ───────────── */
[style*="color: #4153B3"],
[style*="color:#4153B3"]  { color: var(--d360-gold-dark) !important; }
[style*="background: #4153B3"],
[style*="background-color: #4153B3"],
[style*="background:#4153B3"] { background-color: var(--d360-gold-dark) !important; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
    background-color: var(--d360-dark-card) !important;
    border-top: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
}
.footer a { color: var(--d360-gold-dark) !important; }
.footer strong { color: var(--d360-gold) !important; }

/* ─── Installation / Update screens ─────────────────────── */
.bg-light { background-color: var(--d360-dark-surface) !important; }
.bg-white  { background-color: var(--d360-dark-card) !important; }

/* ─── Upload / image boxes ────────────────────────────────── */
.custom-file-upload,
[class*="upload"],
.img-upload {
    background-color: var(--d360-dark-surface) !important;
    border: 2px dashed var(--d360-divider) !important;
    color: var(--d360-text-secondary) !important;
}
.custom-file-upload:hover,
[class*="upload"]:hover {
    border-color: var(--d360-gold-dark) !important;
}

/* ─── Toggle / Switch ────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--d360-gold-dark) !important;
    border-color: var(--d360-gold-dark) !important;
}

/* ─── Gold glow accent on focus rings ────────────────────── */
*:focus-visible { outline: 2px solid var(--d360-gold-dark) !important; outline-offset: 2px !important; }


/* ══════════════════════════════════════════════════════════════
   D360 FONT — Poppins replaces Public Sans everywhere
══════════════════════════════════════════════════════════════ */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, a, td, th, label {
    font-family: "Poppins", sans-serif !important;
}

/* Keep icon fonts intact — exempt them from the Poppins override above */
.material-icons,
span.material-icons,
.material-symbols-outlined,
span.material-symbols-outlined,
.material-icons.matarial-symbols-outlined {
    font-family: "Material Icons" !important;
}
.material-symbols-outlined,
span.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
}


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — KPI Stat Cards
══════════════════════════════════════════════════════════════ */
.d360-kpi-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 22px 20px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--d360-divider);
    background: var(--d360-dark-card);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.d360-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(255,215,0,0.12) !important;
}
.d360-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}
.d360-kpi-body { flex: 1; min-width: 0; }
.d360-kpi-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--d360-text-secondary);
    margin: 0 0 6px;
}
.d360-kpi-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--d360-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d360-kpi-glow {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.12;
}
.d360-kpi-gold .d360-kpi-icon  { background: rgba(255,215,0,0.12); color: #FFD700; }
.d360-kpi-gold .d360-kpi-glow  { background: #FFD700; }
.d360-kpi-gold                  { border-color: rgba(255,215,0,0.20) !important; box-shadow: 0 4px 18px rgba(255,215,0,0.08) !important; }
.d360-kpi-silver .d360-kpi-icon { background: rgba(200,200,220,0.10); color: #C8C8DC; }
.d360-kpi-silver .d360-kpi-glow { background: #C8C8DC; }
.d360-kpi-amber .d360-kpi-icon  { background: rgba(201,150,12,0.12); color: #C9960C; }
.d360-kpi-amber .d360-kpi-glow  { background: #C9960C; }
.d360-kpi-dim .d360-kpi-icon    { background: rgba(158,158,158,0.10); color: #9E9E9E; }
.d360-kpi-dim .d360-kpi-glow    { background: #9E9E9E; }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Universal Panel
══════════════════════════════════════════════════════════════ */
.d360-dashboard .d360-panel {
    background: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: none !important;
}
.d360-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--d360-divider);
    background: var(--d360-dark-surface);
}
.d360-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--d360-text-primary);
}
.d360-panel-title .material-icons { font-size: 18px; color: var(--d360-gold-dark); }
.d360-panel-title h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--d360-text-primary); }
.d360-panel-meta { font-size: 12px; color: var(--d360-text-secondary); display: flex; align-items: center; gap: 4px; }
.d360-view-all {
    font-size: 12px;
    font-weight: 500;
    color: var(--d360-gold-dark) !important;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: color 0.15s;
}
.d360-view-all:hover { color: var(--d360-gold) !important; }
.d360-panel-body { padding: 20px; }
.d360-panel-body.p-0 { padding: 0 !important; }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Year select dropdown
══════════════════════════════════════════════════════════════ */
.d360-year-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--d360-dark-surface) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
    border-radius: 8px;
    padding: 5px 28px 5px 10px;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    outline: none;
}
.d360-year-select:focus { border-color: var(--d360-gold-dark) !important; }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Custom Table
══════════════════════════════════════════════════════════════ */
.d360-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.d360-table thead tr { background: var(--d360-dark-surface); }
.d360-table thead th {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--d360-gold-dark) !important;
    border-bottom: 1px solid var(--d360-divider);
    white-space: nowrap;
}
.d360-table tbody td {
    padding: 12px 16px;
    color: var(--d360-text-primary);
    border-bottom: 1px solid rgba(42,42,42,0.6);
    vertical-align: middle;
}
.d360-table tbody tr:last-child td { border-bottom: none; }
.d360-table tbody tr { transition: background 0.12s; }
.d360-table tbody tr:hover { background: var(--d360-gold-tint10) !important; cursor: pointer; }
.text-gold { color: var(--d360-gold-dark) !important; }

.d360-booking-id { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.d360-repeat-badge {
    display: inline-block;
    font-size: 11px;
    background: rgba(255,215,0,0.12);
    color: var(--d360-gold-dark);
    border-radius: 4px;
    padding: 1px 5px;
}
.d360-service-cell { display: flex; align-items: center; gap: 10px; }
.d360-service-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--d360-divider);
}

/* Status pills */
.d360-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    background: rgba(255,215,0,0.10);
    color: var(--d360-gold);
    border: 1px solid rgba(255,215,0,0.18);
}
.d360-status-pending    { background: rgba(255,187,56,0.12); color: #FFBB38; border-color: rgba(255,187,56,0.20); }
.d360-status-completed  { background: rgba(4,187,123,0.10);  color: #04BB7B; border-color: rgba(4,187,123,0.18); }
.d360-status-cancelled,
.d360-status-canceled   { background: rgba(255,64,64,0.10);  color: #FF4040; border-color: rgba(255,64,64,0.18); }
.d360-status-ongoing    { background: rgba(60,118,241,0.10); color: #3C76F1; border-color: rgba(60,118,241,0.18); }
.d360-status-accepted   { background: rgba(255,215,0,0.10);  color: #FFD700; border-color: rgba(255,215,0,0.18); }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Zone Booking Stats
══════════════════════════════════════════════════════════════ */
.d360-zone-list { display: flex; flex-direction: column; gap: 16px; }
.d360-zone-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.d360-zone-name  { font-size: 13px; color: var(--d360-text-primary); font-weight: 500; }
.d360-zone-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--d360-gold-dark);
    background: var(--d360-gold-tint10);
    border-radius: 10px;
    padding: 1px 8px;
}
.d360-progress { height: 5px; background: var(--d360-dark-surface); border-radius: 10px; overflow: hidden; }
.d360-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #FFE57A, #C9960C);
    border-radius: 10px;
    transition: width 0.6s ease;
    min-width: 4px;
}


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Top Providers List
══════════════════════════════════════════════════════════════ */
.d360-provider-list { list-style: none; margin: 0; padding: 0; }
.d360-provider-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(42,42,42,0.5);
    cursor: pointer;
    transition: background 0.12s;
}
.d360-provider-item:last-child { border-bottom: none; }
.d360-provider-item:hover { background: var(--d360-gold-tint10); }
.d360-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d360-gold-tint10);
    color: var(--d360-gold-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.d360-provider-item:first-child .d360-rank { background: rgba(255,215,0,0.22); color: #FFD700; }
.d360-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--d360-divider);
}
.d360-avatar img { width: 100%; height: 100%; object-fit: cover; }
.d360-provider-info { flex: 1; min-width: 0; }
.d360-provider-name {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d360-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d360-provider-rating { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--d360-gold-dark); }
.d360-provider-rating .material-icons { font-size: 13px; }
.d360-provider-chevron { font-size: 16px; color: var(--d360-divider); flex-shrink: 0; }
.d360-provider-item:hover .d360-provider-chevron { color: var(--d360-gold-dark); }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Transaction table badges
══════════════════════════════════════════════════════════════ */
.d360-trx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.d360-trx-badge .material-icons { font-size: 13px; }
.d360-trx-debit  { background: rgba(255,64,64,0.10);  color: #FF4040; }
.d360-trx-credit { background: rgba(4,187,123,0.10);  color: #04BB7B; }
.d360-trx-amount { font-weight: 600; font-size: 13px; color: var(--d360-text-primary); }


/* ══════════════════════════════════════════════════════════════
   D360 DASHBOARD — Empty State
══════════════════════════════════════════════════════════════ */
.d360-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--d360-text-secondary);
    gap: 10px;
}
.d360-empty-state .material-icons { font-size: 40px; opacity: 0.3; color: var(--d360-gold-dark); }
.d360-empty-state p { margin: 0; font-size: 13px; opacity: 0.6; }


/* ══════════════════════════════════════════════════════════════
   Override legacy .business-summary / .statistics-card
   (used on non-dashboard pages — analytics, reports, etc.)
══════════════════════════════════════════════════════════════ */
.business-summary,
.statistics-card {
    background: var(--d360-dark-card) !important;
    border: 1px solid var(--d360-divider) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(255,215,0,0.06) !important;
}
.business-summary h2,
.statistics-card h2 { color: var(--d360-text-primary) !important; }
.business-summary h3,
.statistics-card h3 { color: var(--d360-text-secondary) !important; }
.business-summary::after,
.statistics-card::after { display: none !important; }
.business-summary-customers,
.business-summary-earning,
.business-summary-providers,
.business-summary-services {
    background: var(--d360-dark-card) !important;
    border-left: 3px solid var(--d360-gold-dark) !important;
}


/* ══════════════════════════════════════════════════════════════
   D360 LIST-PAGE POLISH
   Button consistency, status badges, table rhythm, empty rows
══════════════════════════════════════════════════════════════ */

/* ── Secondary / utility buttons (Download, Filter, Clear) ──
   These fell back to the template's orange. Make them outlined gold. */
.btn--secondary,
.btn-secondary,
.filter-btn,
.btn.filter-btn {
    background: var(--d360-dark-elevated) !important;
    border: 1px solid var(--d360-divider) !important;
    color: var(--d360-text-primary) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.btn--secondary:hover,
.btn-secondary:hover,
.filter-btn:hover {
    background: var(--d360-gold-tint10) !important;
    border-color: var(--d360-gold-dark) !important;
    color: var(--d360-gold) !important;
}

/* Danger button — keep red but theme-consistent */
.btn--danger,
.btn-danger {
    background: #b3261e !important;
    border-color: #b3261e !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.btn--danger:hover,
.btn-danger:hover { background: #8c1d18 !important; border-color: #8c1d18 !important; }

/* Action icon buttons in table rows (view / delete) — equal size, subtle */
.action-btn,
td .btn-sm,
.table .btn-action {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px !important;
}

/* The "Filter N" / "Download" count chip */
.filter-btn .count,
.btn .count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    margin-left: 6px;
    font-size: 11px; font-weight: 600; line-height: 1;
    background: var(--d360-gold-dark); color: #000;
    border-radius: 9px;
}

/* ── Search highlight <mark> ──
   The AJAX search wraps matched terms in <mark>. Default browser style is
   bright-yellow/black, which looks broken on the dark theme. Theme it. */
mark,
.search-result mark,
#searchResults mark {
    background: rgba(255, 215, 0, 0.22) !important;
    color: var(--d360-gold) !important;
    padding: 0 2px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
}

/* ── Global search dropdown polish ── */
.search-result .nav-title,
.search-result h6 { color: var(--d360-text-secondary) !important; }
.search-result a,
.search-result .search-result-item {
    color: var(--d360-text-primary) !important;
}
.search-result a small,
.search-result .text-muted { color: var(--d360-text-secondary) !important; }

/* ── Status badge: "Not Booked Yet" etc. ──
   Was a loud solid-gold pill. Make it a soft outlined chip. */
.badge-pill.badge-primary {
    display: inline-block !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px;
    border-radius: 999px !important;
    background: var(--d360-gold-tint10) !important;
    color: var(--d360-gold) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    white-space: nowrap;
}

/* ── Table rhythm: breathing room + zebra + clearer rows ── */
.multi-select-table.table tbody td,
.table.align-middle tbody td {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    vertical-align: middle !important;
}
.multi-select-table.table tbody tr,
.table.align-middle tbody tr {
    border-bottom: 1px solid var(--d360-divider) !important;
    transition: background-color .15s ease;
}
.multi-select-table.table tbody tr:hover,
.table.align-middle tbody tr:hover {
    background-color: var(--d360-gold-tint10) !important;
}
/* De-emphasize secondary cell text (phone, dates) but keep readable */
.table .fs-12,
.table a.fs-12 { color: var(--d360-text-secondary) !important; }
.table .customer-name { color: var(--d360-text-primary) !important; }

/* ── Kill the barren void: when a list card has few rows,
   give the table a comfortable min-height instead of a huge gap. ── */
.select-table-wrap { min-height: auto !important; }

/* Empty-table state inside a list card */
.table tbody tr.no-data td,
.table tbody td.text-center:only-child {
    padding: 48px 16px !important;
    color: var(--d360-text-secondary) !important;
}