/* ==========================================================================
   Wappi Admin — Design System Override
   Strategie : CSS-only, zero risque sur la logique Vue/PHP
   Applique a toutes les pages automatiquement via app.blade.php
   Phase : Premium SaaS — Inter font, Bento grid, full responsive
   ========================================================================== */

/* WAPPI DESIGN SYSTEM — Syne + DM Sans + Geist Mono */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Geist+Mono:wght@300;400;500&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* Gradients de marque */
    --primary-gradient: linear-gradient(135deg, #cc3826 0%, #e05a45 100%);
    --secondary-gradient: linear-gradient(135deg, #2b32b2 0%, #1488cc 100%);

    /* Tokens d'ombre */
    --shadow-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
    --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg:  0 8px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
    --shadow-hover: 0 12px 36px rgba(0,0,0,.13);

    /* Rayons */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;

    /* Transitions */
    --transition-fast: all .15s ease;
    --transition-base: all .2s ease;
    --transition-slow: all .3s ease;

    /* Velzon compat */
    --vz-primary: #cc3826;
    --vz-primary-rgb: 204, 56, 38;

    /* Wappi teal + fonts */
    --wappi-teal:       #00C896;
    --wappi-teal-dim:   rgba(0,200,150,0.10);
    --wappi-accent-dim: rgba(204,56,38,0.10);
    --font-display:     'Syne', system-ui, sans-serif;
    --font-body:        'DM Sans', system-ui, sans-serif;
    --font-mono:        'Geist Mono', 'JetBrains Mono', monospace;

    /* KPI Card gradients */
    --grad-brand:   linear-gradient(135deg, #cc3826 0%, #e05a45 100%);
    --grad-blue:    linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --grad-teal:    linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    --grad-violet:  linear-gradient(135deg, #5b21b6 0%, #8b5cf6 100%);
    --grad-amber:   linear-gradient(135deg, #92400e 0%, #f59e0b 100%);
    --grad-emerald: linear-gradient(135deg, #065f46 0%, #10b981 100%);
    --grad-rose:    linear-gradient(135deg, #9f1239 0%, #f43f5e 100%);
}

/* ──────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHIE — hierachie claire et lisible
   ────────────────────────────────────────────────────────────────────────── */
body {
    font-size: 0.875rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.text-muted {
    color: #6b7280 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. CARTES — le composant le plus utilise dans tout l'admin
   ────────────────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid rgba(0,0,0,.07);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 1rem 1.25rem 0.75rem;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,.06);
    padding: 0.75rem 1.25rem;
}

/* Card animate — version améliorée sans layout shift */
.card-animate {
    transition: box-shadow .2s ease !important;
    transform: none !important;
}

.card-animate:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. TABLEAUX — propres, lisibles, avec feedback hover
   ────────────────────────────────────────────────────────────────────────── */
.table {
    font-size: 0.84rem;
    vertical-align: middle;
}

.table thead th,
.table thead td {
    font-family: 'Geist Mono', 'JetBrains Mono', monospace !important;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9CA3AF;
    background: #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.table tbody tr {
    transition: background .12s ease;
    cursor: default;
}

.table-hover tbody tr:hover {
    background: rgba(var(--vz-primary-rgb, 204,56,38), .04);
}

.table tbody td {
    padding: 0.85rem 1rem;
    border-color: rgba(0,0,0,.05);
    color: #374151;
}

.table-responsive {
    border-radius: var(--radius-md);
}

/* Table active header */
.table-active {
    background: #f8fafc !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. BOUTONS — cursor + transitions + feedback visuel
   ────────────────────────────────────────────────────────────────────────── */
.btn {
    cursor: pointer !important;
    border-radius: var(--radius-sm);
    font-size: 0.83rem;
    font-weight: 500;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm);
}

.btn-label {
    display: inline-flex;
    align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. CHAMPS DE FORMULAIRE — border propre, focus clair
   ────────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    border-color: #d1d5db;
    padding: 0.5rem 0.85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    color: #1f2937;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vz-primary, #cc3826);
    box-shadow: 0 0 0 3px rgba(204,56,38,.12);
    outline: none;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.35rem;
}

.input-group-text {
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    border-color: #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
}

/* ──────────────────────────────────────────────────────────────────────────
   7. BADGES — plus lisibles et plus propres
   ────────────────────────────────────────────────────────────────────────── */
.badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3em 0.65em;
    border-radius: 5px;
    letter-spacing: .01em;
}

/* Badges subtils — meilleur contraste */
.bg-success-subtle { background: #dcfce7 !important; }
.text-success       { color: #16a34a !important; }

.bg-danger-subtle   { background: #fee2e2 !important; }
.text-danger        { color: #dc2626 !important; }

.bg-warning-subtle  { background: #fef9c3 !important; }
.text-warning       { color: #ca8a04 !important; }

.bg-info-subtle     { background: #e0f2fe !important; }
.text-info          { color: #0369a1 !important; }

.bg-primary-subtle  { background: #fee2dc !important; }
.text-primary       { color: var(--vz-primary, #cc3826) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   8. BREADCRUMB & PAGE HEADER — navigation claire
   ────────────────────────────────────────────────────────────────────────── */
.page-title-box {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 1.5rem;
}

.page-title-box h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.breadcrumb {
    font-size: 0.78rem;
    margin: 0;
    padding: 0;
    background: transparent;
}

.breadcrumb-item a {
    color: #6b7280;
    text-decoration: none;
    transition: color .15s ease;
    cursor: pointer;
}

.breadcrumb-item a:hover {
    color: var(--vz-primary, #cc3826);
}

.breadcrumb-item.active {
    color: #374151;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #d1d5db;
    content: "›";
    font-size: 1rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. BARRE DE NAVIGATION (TOPBAR)
   ────────────────────────────────────────────────────────────────────────── */
#page-topbar {
    transition: box-shadow .2s ease;
}

.topbar-shadow {
    box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
}

.navbar-header {
    background: #fff;
}

.header-item {
    transition: var(--transition-fast);
}

.header-item:hover {
    background: rgba(0,0,0,.04);
    border-radius: var(--radius-sm);
}

/* Logo cliquable — feedback visuel */
.logo img {
    transition: opacity .15s ease;
}

.logo:hover img {
    opacity: 0.8;
}

/* Guard against an uploaded logo whose aspect ratio doesn't match the
   theme's default - the height="" HTML attribute alone doesn't cap the
   rendered box when the source image is unusually tall/wide, letting it
   overflow the topbar. Only logo-lg (the expanded, full-width logo) is
   constrained here, capped at the same 50px used across every other
   layout's logo-lg (nav-bar.vue, hotel-nav-bar.vue, ...) - logo-sm is the
   compact/collapsed icon and already uses its own intentional height that
   must stay untouched. */
.navbar-brand-box .logo-lg img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}

/* Barre de notification — meilleure apparence des dropdowns */
.dropdown-menu {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    min-width: 220px;
    animation: dropIn .15s ease;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
    transition: var(--transition-fast);
    cursor: pointer;
    color: #374151;
}

.dropdown-item:hover {
    background: rgba(var(--vz-primary-rgb, 204,56,38), .07);
    color: var(--vz-primary, #cc3826);
}

.dropdown-item i {
    width: 18px;
    display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────────────
   10. SIDEBAR / MENU LATERAL
   ────────────────────────────────────────────────────────────────────────── */
/* Item actif */
#sidebar-menu ul li a.active,
.nav-link.active,
.side-nav-link-ref.active {
    background: rgba(var(--vz-primary-rgb, 204,56,38), .10) !important;
    color: var(--vz-primary, #cc3826) !important;
    border-radius: var(--radius-sm);
    font-weight: 500;
    border-right: 2px solid var(--vz-primary, #cc3826);
}

/* Hover sur items */
#sidebar-menu ul li a:hover,
.side-nav-link-ref:hover {
    color: var(--vz-primary, #cc3826) !important;
    background: rgba(0,0,0,.04) !important;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

/* Items du menu */
#sidebar-menu ul li a {
    font-size: 0.84rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    padding: 0.55rem 1rem;
    cursor: pointer;
}

/* Sous-menus */
#sidebar-menu ul ul a {
    padding-left: 3rem;
    font-size: 0.82rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   11. NAVBAR HORIZONTALE (nav-bar.vue)
   ────────────────────────────────────────────────────────────────────────── */
.nav-menu {
    cursor: pointer;
    border-radius: var(--radius-sm) !important;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem !important;
    transition: var(--transition-fast);
}

.nav-menu:hover {
    background: rgba(0,0,0,.05);
}

.nav-menu.active {
    color: var(--vz-primary, #cc3826) !important;
    background: rgba(var(--vz-primary-rgb, 204,56,38), .08);
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   12. FOOTER — sobre et propre
   ────────────────────────────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
    padding: 1rem 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* ──────────────────────────────────────────────────────────────────────────
   13. AVATARS — tailles consistantes
   ────────────────────────────────────────────────────────────────────────── */
.avatar-sm {
    width: 36px;
    height: 36px;
}

.avatar-sm .avatar-title {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.avatar-title.rounded-circle {
    border-radius: 50% !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   14. MODALE & ALERTES
   ────────────────────────────────────────────────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: 1.1rem 1.5rem;
}

.modal-footer {
    border-top: 1px solid rgba(0,0,0,.07);
    padding: 0.85rem 1.5rem;
}

.alert {
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    border: none;
    padding: 0.85rem 1.1rem;
}

.alert-danger  { background: #fee2e2; color: #991b1b; border-left: 4px solid #dc2626; }
.alert-success { background: #dcfce7; color: #166534; border-left: 4px solid #16a34a; }
.alert-warning { background: #fef9c3; color: #854d0e; border-left: 4px solid #ca8a04; }
.alert-info    { background: #e0f2fe; color: #075985; border-left: 4px solid #0369a1; }

/* ──────────────────────────────────────────────────────────────────────────
   15. PAGINATION — plus grande et plus cliquable
   ────────────────────────────────────────────────────────────────────────── */
.pagination {
    gap: 4px;
}

.page-link {
    border-radius: var(--radius-sm) !important;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.83rem;
    padding: 0.4rem 0.75rem;
    transition: var(--transition-fast);
    cursor: pointer;
}

.page-link:hover {
    background: rgba(var(--vz-primary-rgb, 204,56,38), .08);
    border-color: var(--vz-primary, #cc3826);
    color: var(--vz-primary, #cc3826);
}

.page-item.active .page-link {
    background: var(--vz-primary, #cc3826);
    border-color: var(--vz-primary, #cc3826);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(204,56,38,.35);
}

/* ──────────────────────────────────────────────────────────────────────────
   16. SELECTEUR MULTISELECT & SELECT2
   ────────────────────────────────────────────────────────────────────────── */
.multiselect {
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.select2-container--default .select2-selection--single {
    border-radius: var(--radius-sm);
    border-color: #d1d5db;
    height: 38px;
    display: flex;
    align-items: center;
}

.select2-dropdown {
    border-radius: var(--radius-md);
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   17. BARRE DE PROGRESSION
   ────────────────────────────────────────────────────────────────────────── */
.progress {
    border-radius: 20px;
    overflow: hidden;
}

.progress-bar {
    border-radius: 20px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ──────────────────────────────────────────────────────────────────────────
   18. TOOLTIPS & POPOVERS
   ────────────────────────────────────────────────────────────────────────── */
.tooltip-inner {
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   19. ANIMATIONS GLOBALES
   ────────────────────────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10,179,156,.4); }
    50%       { box-shadow: 0 0 0 5px rgba(10,179,156,0); }
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}

/* Point Live pulsant */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ab39c;
    animation: pulse-dot 1.5s infinite;
    vertical-align: middle;
}

/* Apparition au chargement */
.card, .page-title-box {
    animation: fadeIn .25s ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   20. DARK MODE — contrastes corrects
   ────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card {
    background: #1e2235;
    border-color: rgba(255,255,255,.06);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    border-color: rgba(255,255,255,.06);
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table thead td {
    background: rgba(255,255,255,.03);
    color: #9ca3af;
}

[data-bs-theme="dark"] .table tbody td {
    color: #d1d5db;
    border-color: rgba(255,255,255,.05);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #1e2235;
    border-color: rgba(255,255,255,.10);
    color: #f3f4f6;
}

[data-bs-theme="dark"] .dropdown-menu {
    background: #1e2235;
    border-color: rgba(255,255,255,.08);
}

[data-bs-theme="dark"] .dropdown-item {
    color: #d1d5db;
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

[data-bs-theme="dark"] .page-title-box {
    border-color: rgba(255,255,255,.06);
}

[data-bs-theme="dark"] .page-title-box h4 {
    color: #f9fafb;
}

[data-bs-theme="dark"] .footer {
    background: #131722;
    border-color: rgba(255,255,255,.06);
}

[data-bs-theme="dark"] .modal-content {
    background: #1e2235;
}

/* ──────────────────────────────────────────────────────────────────────────
   21. RESPONSIVE — mobile (pages d'admin affichees sur tablette)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .card-body { padding: 1rem; }
    .card-header { padding: 0.85rem 1rem 0.6rem; }
    .table thead th { font-size: 0.68rem; padding: 0.65rem 0.75rem; }
    .table tbody td { padding: 0.65rem 0.75rem; }
    .btn { font-size: 0.8rem; }
    .page-title-box h4 { font-size: 1rem; }

    /* Eviter le scroll horizontal sur mobile */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 576px) {
    /* Headings de la landing page */
    .heading-52-medium,
    .heading-52-bold,
    .heading-52 { font-size: 28px !important; line-height: 1.3 !important; }

    .heading-44-medium,
    .heading-44-bold,
    .heading-44 { font-size: 24px !important; line-height: 1.3 !important; }

    .heading-32-medium { font-size: 20px !important; line-height: 1.3 !important; }

    .section { padding-top: 40px !important; padding-bottom: 40px !important; }

    .box-banner-info {
        position: relative !important;
        top: auto !important;
        padding: 0 15px;
        background: rgba(0,0,0,.4);
        border-radius: 8px;
    }

    .box-cover-image { min-height: 300px !important; height: auto !important; }
    .swiper-button-next, .swiper-button-prev { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   22. UTILITAIRES GLOBAUX
   ────────────────────────────────────────────────────────────────────────── */
/* Tous les elements cliquables ont un cursor pointer */
a, button, [role="button"],
.btn, .nav-link, .dropdown-item,
.page-link, .breadcrumb-item a,
label[for], .cursor-pointer {
    cursor: pointer;
}

/* Transitions fluides sur les liens */
a { transition: color .15s ease; }

/* Scroll fluide */
html { scroll-behavior: smooth; }

/* Swiper pagination */
.swiper-pagination-bullet-active { background: var(--vz-primary, #cc3826) !important; }
.swiper-pagination-bullet { opacity: 0.6; }

/* Glassmorphism (utilité conservee) */
.glass-effect {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: var(--shadow-md);
}

/* Hover lift conserve mais adouci (sans layout shift) */
.hover-lift {
    transition: box-shadow .2s ease, transform .2s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* ==========================================================================
   PHASE 2 — Composants specifiques aux pages de liste
   ========================================================================== */

/* A. ONGLETS DE NAVIGATION */
.nav-tabs-custom { gap: 4px; border: none !important; flex-wrap: wrap; }
.nav-tabs-custom .nav-item { margin: 0; }
.nav-tabs-custom .nav-link {
    border: 1px solid #e5e7eb !important;
    border-radius: 7px !important;
    padding: .35rem .9rem;
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.nav-tabs-custom .nav-link:hover { background: #f3f4f6; color: #374151; border-color: #d1d5db !important; }
.nav-tabs-custom .nav-link.active {
    background: var(--vz-primary, #cc3826) !important;
    color: #fff !important;
    border-color: var(--vz-primary, #cc3826) !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.3);
}

/* B. ETAT VIDE */
.table tbody tr td[colspan] { padding: 2.5rem 1rem; text-align: center; }
.table tbody tr td[colspan] img { display: block; margin: 0 auto .75rem; opacity: .6; }
.table tbody tr td[colspan] h5 { color: #9ca3af; font-size: .9rem; font-weight: 500; margin: 0; }

/* C. OFFCANVAS FILTRES */
.offcanvas { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.offcanvas-header { background: #f8fafc !important; border-bottom: 1px solid rgba(0,0,0,.07); padding: 1rem 1.25rem; }
.offcanvas-header .offcanvas-title { font-size: .95rem; font-weight: 600; color: #111827; }
.offcanvas-body { padding: 1.25rem !important; overflow-y: auto; }
.offcanvas-footer { border-top: 1px solid rgba(0,0,0,.07); background: #f8fafc; padding: .85rem 1.25rem !important; }
.offcanvas-body .form-label {
    font-size: .72rem !important; font-weight: 600 !important;
    letter-spacing: .06em; color: #6b7280 !important; text-transform: uppercase; margin-bottom: .5rem !important;
}
.form-check-input { cursor: pointer; border-color: #d1d5db; transition: border-color .15s ease, background .15s ease; }
.form-check-input:checked { background-color: var(--vz-primary, #cc3826); border-color: var(--vz-primary, #cc3826); }
.form-check-label { cursor: pointer; font-size: .84rem; color: #374151; }

/* D. CARTES GRILLE */
.project-card .card { transition: box-shadow .2s ease, transform .2s ease; }
.project-card .card:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); }
.project-card .card-body { padding: 1.1rem; }
.project-card .border.border-dark.border-dashed.rounded {
    border-color: #e5e7eb !important; border-radius: 5px !important;
    padding: .2rem .5rem; font-size: .78rem; color: #374151; background: #f9fafb;
}
.bx-star, .bxs-star, .bxs-star-half { font-size: .85rem; }

/* E. TOGGLE SWITCH */
.form-switch .form-check-input { width: 2.2em; height: 1.2em; cursor: pointer; border-radius: 20px; transition: background-color .2s ease, border-color .2s ease; }
.form-switch .form-check-input:checked { background-color: #16a34a; border-color: #16a34a; }

/* F. BOUTON COPIER */
.btn.btn-light.btn-sm { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; border-radius: 5px; padding: .2rem .5rem; }
.btn.btn-light.btn-sm:hover { background: #e5e7eb; box-shadow: none; transform: none; }

/* G. COULEURS SEMANTIQUES DES ICONES D'ACTION */
/* !important nécessaire pour écraser Bootstrap .text-muted sur les icônes */
.dropdown-item .bx-show-alt, .dropdown-item .bx-show { color: #6b7280 !important; }
.dropdown-item .bxs-edit-alt, .dropdown-item .bx-edit { color: #3b82f6 !important; }
.dropdown-item .bx-trash, .dropdown-item .bxs-trash, .dropdown-item .bxs-trash-alt { color: #ef4444 !important; }
.dropdown-item .bx-key { color: #f59e0b !important; }
.dropdown-item .bx-user, .dropdown-item .bxs-user { color: #6366f1 !important; }
.dropdown-item .bx-x-circle { color: #ef4444 !important; }
.dropdown-item .bx-user-check { color: #16a34a !important; }
.dropdown-item .bx-download { color: #0369a1 !important; }
.dropdown-item .bx-check-circle { color: #16a34a !important; }
.dropdown-item .bx-block { color: #ef4444 !important; }
.dropdown-item .bxs-low-vision { color: #6b7280 !important; }
.dropdown-item .bx-radio-circle-marked { color: #16a34a !important; }
.dropdown-item .bx-task { color: #f97316 !important; }
.dropdown-item .bxs-check-circle { color: #16a34a !important; }
.dropdown-item .bxs-file-image { color: #0369a1 !important; }
.dropdown-item .bx-upload { color: #7c3aed !important; }

/* H. ALERTES TOAST */
.custom-alert {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    min-width: 300px; max-width: 420px;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    animation: fadeIn .2s ease; padding: .85rem 1rem;
    display: flex; align-items: center; gap: .5rem; font-size: .84rem;
}
.custom-alert .btn-close { margin-left: auto; opacity: .7; }
.custom-alert.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; }
.custom-alert.alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-left: 4px solid #dc2626; }

/* I. DARK MODE phase 2 */
[data-bs-theme="dark"] .nav-tabs-custom .nav-link { background: #1e2235; border-color: rgba(255,255,255,.08) !important; color: #9ca3af; }
[data-bs-theme="dark"] .nav-tabs-custom .nav-link:hover { background: rgba(255,255,255,.05); color: #f3f4f6; }
[data-bs-theme="dark"] .offcanvas { background: #1e2235; }
[data-bs-theme="dark"] .offcanvas-header { background: #131722 !important; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .offcanvas-footer { background: #131722; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .project-card .border.border-dark.border-dashed.rounded { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04); color: #d1d5db; }
[data-bs-theme="dark"] .form-check-label { color: #d1d5db; }
[data-bs-theme="dark"] .custom-alert.alert-success { background: #052e16; color: #bbf7d0; border-color: #166534; }
[data-bs-theme="dark"] .custom-alert.alert-danger  { background: #2d0a0a; color: #fca5a5; border-color: #991b1b; }
}

/* ============================================================
   PHASE 4 — LOGIN, EMPTY STATES, PAGINATION, BADGES, STATUS
   ============================================================ */

/* J. PAGE LOGIN — glassmorphism card */
#bodyContainer .card {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35) !important;
}
#bodyContainer .card-body { padding: 2rem 2.2rem !important; }
#bodyContainer .form-control {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-radius: 10px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#bodyContainer .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
#bodyContainer .form-control:focus {
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.18) !important;
}
#bodyContainer .btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    box-shadow: 0 4px 16px rgba(22,163,74,0.4) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
#bodyContainer .btn-success:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 22px rgba(22,163,74,0.5) !important;
}
#bodyContainer .form_field {
    margin: clamp(40px, 10vh, 120px) 20px 0 clamp(20px, 5vw, 80px);
}
@media (max-width: 988px) {
    #bodyContainer { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important; }
}
/* Lien "Forgot password" sur fond sombre */
#bodyContainer a { color: rgba(255,255,255,0.85) !important; text-decoration: none; }
#bodyContainer a:hover { color: #fff !important; text-decoration: underline; }
/* OTP inputs */
.otp-container .otp-input {
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* K. EMPTY STATE (no data found) */
td .no-data-found,
tbody tr td[colspan] h5 {
    font-size: .9rem; color: #9ca3af; font-weight: 500; margin-top: .5rem;
}
tbody tr td[colspan] img { opacity: .65; filter: grayscale(20%); }
tbody tr td[colspan] { padding: 2.5rem 1rem; }

/* L. PAGINATION */
.pagination { gap: .15rem; }
.page-link {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    font-size: .8rem !important;
    min-width: 32px;
    text-align: center;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.page-link:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }
.page-item.active .page-link {
    background: var(--vz-primary, #cc3826) !important;
    border-color: var(--vz-primary, #cc3826) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.35);
}
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* M. BADGES DE STATUT UNIFORMES */
.badge {
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    padding: .32em .65em !important;
    border-radius: 6px !important;
}
/* Statuts courants — couleurs sémantiques cohérentes */
.badge.bg-success-subtle   { background: #dcfce7 !important; color: #15803d !important; }
.badge.bg-danger-subtle    { background: #fee2e2 !important; color: #dc2626 !important; }
.badge.bg-warning-subtle   { background: #fef9c3 !important; color: #a16207 !important; }
.badge.bg-info-subtle      { background: #e0f2fe !important; color: #0369a1 !important; }
.badge.bg-primary-subtle   { background: #ede9fe !important; color: #6d28d9 !important; }
.badge.bg-secondary-subtle { background: #f3f4f6 !important; color: #4b5563 !important; }
.text-bg-success { background: #16a34a !important; color: #fff !important; }
.text-bg-danger  { background: #dc2626 !important; color: #fff !important; }
.text-bg-warning { background: #d97706 !important; color: #fff !important; }

/* N. TABLEAUX — améliorations de lisibilité */
.table > :not(caption) > * > * { vertical-align: middle; }
.table td { font-size: .84rem; }
.table th { font-size: .75rem; }
/* Colonne actions toujours visible */
.table td:last-child, .table th:last-child { white-space: nowrap; }

/* O. CARDS DE KPI (statistiques) */
.card .card-body h4,
.card .card-body .fs-22,
.card .card-body .fs-28 {
    font-weight: 700 !important;
    letter-spacing: -.3px;
}
.card .card-body .text-muted { font-size: .8rem; }

/* P. OFFCANVAS FILTRES — uniformisation */
.offcanvas-header { border-bottom: 1px solid #e5e7eb; padding: 1rem 1.25rem; }
.offcanvas-header .offcanvas-title { font-size: .95rem; font-weight: 600; color: #1f2937; }
.offcanvas-body .form-label { font-size: .72rem !important; letter-spacing: .5px; }
.offcanvas-footer .btn { border-radius: 8px; font-size: .84rem; font-weight: 500; }

/* Q. DARK MODE — Phase 4 */
[data-bs-theme="dark"] .page-link { background: #1e2235 !important; border-color: rgba(255,255,255,.1) !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .page-link:hover { background: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle { background: #052e16 !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle  { background: #2d0a0a !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { background: #3b2000 !important; color: #fde68a !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle    { background: #082f49 !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .offcanvas-header { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .offcanvas-header .offcanvas-title { color: #f3f4f6; }

/* ============================================================
   PHASE 5 — MODALS, CARD HEADERS, RECHERCHE, MULTISELECT, PROFIL
   ============================================================ */

/* R. MODALS — apparence moderne */
.modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid #f1f3f4 !important;
    padding: 1.1rem 1.4rem !important;
    background: #fafbfc;
}
.modal-header .modal-title { font-size: .95rem !important; font-weight: 600 !important; color: #1f2937 !important; }
.modal-header .btn-close { opacity: .5; transition: opacity .15s ease; }
.modal-header .btn-close:hover { opacity: 1; }
.modal-body { padding: 1.4rem !important; }
.modal-footer {
    border-top: 1px solid #f1f3f4 !important;
    padding: .85rem 1.4rem !important;
    background: #fafbfc;
    gap: .5rem;
}
.modal-footer .btn { border-radius: 8px; font-size: .84rem; font-weight: 500; min-width: 80px; }

/* S. CARD HEADER (search + filter bar) */
.card-header { border-bottom: 1px solid #f1f3f4 !important; background: #fff !important; padding: .9rem 1.1rem !important; }
.card-header .card-title { font-size: .92rem !important; font-weight: 600 !important; margin: 0; color: #1f2937; }

/* T. BARRE DE RECHERCHE */
.search-box .form-control,
input[type="search"].form-control {
    border-radius: 10px !important;
    font-size: .84rem !important;
    padding-left: 2.4rem !important;
}
.search-box { position: relative; }
.search-box i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: .9rem; pointer-events: none; z-index: 2; }

/* U. BOUTONS FILTRE / EXPORT */
.btn-soft-primary, .btn-soft-success, .btn-soft-danger, .btn-soft-warning, .btn-soft-info {
    border-radius: 8px !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    transition: filter .15s ease, transform .1s ease !important;
}
.btn-soft-primary:hover, .btn-soft-success:hover, .btn-soft-danger:hover { filter: brightness(0.93); transform: translateY(-1px); }

/* V. MULTISELECT (vue-vueform) */
.multiselect { border-radius: 8px !important; border-color: #e5e7eb !important; font-size: .84rem !important; }
.multiselect.is-active { border-color: var(--vz-primary, #cc3826) !important; box-shadow: 0 0 0 3px rgba(204,56,38,.15) !important; }
.multiselect-dropdown { border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; border-color: #e5e7eb !important; }
.multiselect-option.is-selected { background: var(--vz-primary, #cc3826) !important; }

/* W. FLAT-PICKR */
.flatpickr-calendar { border-radius: 12px !important; box-shadow: 0 8px 30px rgba(0,0,0,.15) !important; border: none !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--vz-primary, #cc3826) !important; border-color: var(--vz-primary, #cc3826) !important; }
.flatpickr-day.inRange { background: rgba(204,56,38,.12) !important; border-color: transparent !important; }

/* X. PROFILE / DETAIL VIEW */
.profile-foreground { border-radius: 0 0 20px 20px; min-height: 160px; }
.avatar-lg { border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.avatar-title { border-radius: 14px !important; font-size: 1.4rem !important; }

/* Y. SWEETALERT2 */
.swal2-popup { border-radius: 16px !important; padding: 2rem !important; font-size: .88rem !important; }
.swal2-confirm { border-radius: 8px !important; font-weight: 600 !important; }
.swal2-cancel  { border-radius: 8px !important; font-weight: 500 !important; }
.swal2-icon { margin-bottom: 1rem !important; }

/* Z. DARK MODE — Phase 5 */
[data-bs-theme="dark"] .modal-content { background: #1e2235 !important; }
[data-bs-theme="dark"] .modal-header { background: #131722 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .modal-header .modal-title { color: #f3f4f6 !important; }
[data-bs-theme="dark"] .modal-footer { background: #131722 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .card-header { background: #1e2235 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .card-header .card-title { color: #f3f4f6; }
[data-bs-theme="dark"] .multiselect { background: #1e2235 !important; border-color: rgba(255,255,255,.1) !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .multiselect-dropdown { background: #1e2235 !important; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .swal2-popup { background: #1e2235 !important; color: #d1d5db !important; }

/* ============================================================
   PHASE 6 — ACCESSIBILITÉ, IMPRESSION, RESPONSIVE, ANIMATIONS
   ============================================================ */

/* AA. FOCUS STATES — accessibilité clavier WCAG AA */
:focus-visible {
    outline: 2px solid var(--vz-primary, #cc3826) !important;
    outline-offset: 2px !important;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: 0 0 0 3px rgba(204,56,38,.25) !important;
}
.dropdown-item:focus-visible {
    background: rgba(204,56,38,.08) !important;
    outline: none !important;
    color: var(--vz-primary, #cc3826) !important;
}

/* AB. PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .card:hover, .btn:hover { transform: none !important; }
}

/* AC. RESPONSIVE TABLE — overflow horizontal sur mobile */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md, 10px);
}
@media (max-width: 768px) {
    .card-body .table-responsive { border-radius: 0; margin: 0 -1px; }
    .table td, .table th { font-size: .78rem !important; padding: .45rem .5rem !important; }
    .dropdown-menu { font-size: .82rem; }
    /* Masquer les colonnes moins importantes sur mobile */
    .d-mobile-none { display: none !important; }
    .page-content { padding: 0 10px !important; }
}

/* AD. STYLES IMPRESSION — pages factures */
@media print {
    .navbar, .sidebar, .vertical-menu, .footer,
    .page-topbar, .btn, .breadcrumb-item,
    .dropdown, .rightbar-overlay { display: none !important; }

    body, .main-content { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .card { box-shadow: none !important; border: 1px solid #e5e7eb !important; border-radius: 0 !important; page-break-inside: avoid; }
    .card-body { padding: 1rem !important; }
    .table th { background: #f9fafb !important; color: #1f2937 !important; }
    .badge { border: 1px solid currentColor !important; }
    h4, h5, h6 { color: #1f2937 !important; }
    a { color: #1f2937 !important; text-decoration: none !important; }
    @page { margin: 1.5cm; }
}

/* AE. SCROLLBAR PERSONNALISÉE — webkit */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* AF. TEXTE SÉLECTIONNÉ */
::selection { background: rgba(204,56,38,.18); color: #991b1b; }
[data-bs-theme="dark"] ::selection { background: rgba(204,56,38,.35); color: #fecaca; }

/* AG. BOUTONS D'AJOUT / ACTIONS PRINCIPALES */
.btn-add-primary {
    background: linear-gradient(135deg, var(--vz-primary, #cc3826), #b03020) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: .84rem !important;
    padding: .5rem 1.1rem !important;
    box-shadow: 0 3px 12px rgba(204,56,38,.35) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.btn-add-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 5px 18px rgba(204,56,38,.45) !important; }

/* AH. TABLE — COLONNE STATUT STANDARDISÉE */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22em .65em;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2px;
}
.status-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }

/* AI. DARK MODE — Phase 6 */
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-bs-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.7); }

/* ============================================================
   PHASE 7 — FORMULAIRES, PROGRESS BARS, SKELETON, TYPOGRAPHIE
   ============================================================ */

/* AJ. SELECT NATIF — amélioré */
.form-select {
    border-radius: 8px !important;
    border-color: #e5e7eb !important;
    font-size: .84rem !important;
    color: #374151 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    cursor: pointer !important;
}
.form-select:focus {
    border-color: var(--vz-primary, #cc3826) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.12) !important;
    outline: none !important;
}

/* AK. INPUT GROUP */
.input-group .input-group-text {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
    font-size: .84rem !important;
}
.input-group .form-control:not(:first-child) { border-left: none !important; }
.input-group .form-control:not(:last-child) { border-right: none !important; }

/* AL. PROGRESS BARS */
.progress {
    border-radius: 99px !important;
    background: #f1f5f9 !important;
    overflow: visible;
}
.progress-bar {
    border-radius: 99px !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    transition: width .6s cubic-bezier(.4,0,.2,1) !important;
}

/* AM. SKELETON LOADING STATES */
.skeleton-text {
    display: block;
    height: .85em;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: .4em;
}
.skeleton-box {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}
[data-bs-theme="dark"] .skeleton-text,
[data-bs-theme="dark"] .skeleton-box {
    background: linear-gradient(90deg, #1e2235 25%, #252a3d 50%, #1e2235 75%);
    background-size: 200% 100%;
}

/* AN. RADIO GROUP VISUEL (filtre tri) */
.form-check-inline .form-check-input[type="radio"] {
    width: 1em; height: 1em;
    border-radius: 50% !important;
    border: 2px solid #d1d5db !important;
    transition: border-color .15s ease, background .15s ease;
}
.form-check-inline .form-check-input[type="radio"]:checked {
    border-color: var(--vz-primary, #cc3826) !important;
    background-color: var(--vz-primary, #cc3826) !important;
}
.form-check-inline .form-check-label { font-size: .82rem; color: #374151; cursor: pointer; }

/* AO. TOOLTIP BOOTSTRAP */
.tooltip-inner {
    border-radius: 6px !important;
    font-size: .75rem !important;
    padding: .3rem .65rem !important;
    background: #1f2937 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: #1f2937 !important; }
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { border-bottom-color: #1f2937 !important; }

/* AP. TYPOGRAPHIE GLOBALE */
body { font-size: .875rem; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.15px; }
.text-truncate { max-width: 180px; }
p { line-height: 1.65; margin-bottom: .75rem; }

/* AQ. ALERT COMPONENT (non-toast) */
.alert {
    border-radius: 10px !important;
    font-size: .84rem !important;
    border-width: 1px !important;
}
.alert-success { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; border-left: 4px solid #16a34a !important; }
.alert-danger  { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; border-left: 4px solid #dc2626 !important; }
.alert-warning { background: #fffbeb !important; color: #d97706 !important; border-color: #fde68a !important; border-left: 4px solid #f59e0b !important; }
.alert-info    { background: #eff6ff !important; color: #2563eb !important; border-color: #bfdbfe !important; border-left: 4px solid #3b82f6 !important; }

/* AR. ALERT BORDER-LEFT — variante admin (class existante) */
.alert.alert-border-left { border-radius: 10px !important; padding: .85rem 1rem !important; }

/* AS. LIST GROUP */
.list-group-item {
    border-color: #f1f3f4 !important;
    font-size: .84rem !important;
    transition: background .15s ease;
}
.list-group-item:hover { background: #f9fafb !important; }
.list-group-item.active { background: var(--vz-primary, #cc3826) !important; border-color: var(--vz-primary, #cc3826) !important; }

/* AT. DARK MODE — Phase 7 */
[data-bs-theme="dark"] .form-select { background-color: #1e2235 !important; border-color: rgba(255,255,255,.1) !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .input-group .input-group-text { background: #131722 !important; border-color: rgba(255,255,255,.1) !important; color: #9ca3af !important; }
[data-bs-theme="dark"] .progress { background: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .alert-success { background: #052e16 !important; color: #86efac !important; border-color: #166534 !important; }
[data-bs-theme="dark"] .alert-danger  { background: #2d0a0a !important; color: #fca5a5 !important; border-color: #991b1b !important; }
[data-bs-theme="dark"] .alert-warning { background: #3b2000 !important; color: #fde68a !important; border-color: #d97706 !important; }
[data-bs-theme="dark"] .alert-info    { background: #082f49 !important; color: #7dd3fc !important; border-color: #0369a1 !important; }
[data-bs-theme="dark"] .list-group-item { background: transparent !important; border-color: rgba(255,255,255,.06) !important; color: #d1d5db !important; }
[data-bs-theme="dark"] .list-group-item:hover { background: rgba(255,255,255,.04) !important; }
[data-bs-theme="dark"] .form-check-inline .form-check-label { color: #d1d5db; }

/* ──────────────────────────────────────────────────────────────────────────
   AU. COMPLAINT / SUPPORT PAGES — status badges & timeline
   ────────────────────────────────────────────────────────────────────────── */
.badge-pending  { background: #fff3cd !important; color: #856404 !important; border: 1px solid #ffc107 !important; }
.badge-taken    { background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fb923c !important; }
.badge-solved   { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #22c55e !important; }
.badge-approved { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #22c55e !important; }
.badge-declined { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #ef4444 !important; }

/* AV. DROPDOWN MENU polish */
.dropdown-menu {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    padding: .35rem .35rem !important;
    min-width: 160px;
}
.dropdown-item {
    border-radius: 6px !important;
    padding: .45rem .85rem !important;
    font-size: .83rem !important;
    transition: background .13s ease, color .13s ease;
    display: flex !important;
    align-items: center !important;
    gap: .1rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: #f5f7ff !important;
    color: #1e293b !important;
}
.dropdown-item i { font-size: 1rem !important; flex-shrink: 0; }

/* AW. TABLE ACTIONS column alignment */
td:last-child .dropdown, td:last-child .btn-group {
    display: flex;
    justify-content: flex-end;
}

/* AX. OFFCANVAS filter sidebar */
.offcanvas-end { border-left: none !important; box-shadow: -4px 0 24px rgba(0,0,0,.10) !important; }
.offcanvas-header { border-bottom: 1px solid #f1f3f4 !important; padding: 1rem 1.25rem !important; }
.offcanvas-title { font-weight: 600 !important; font-size: .95rem !important; }
.offcanvas-body { padding: 1.25rem !important; }

/* AY. STAT / KPI card micro-improvements */
.card-body .fs-22, .card-body .fs-24 { font-weight: 700 !important; letter-spacing: -.3px; }
.card-body .text-muted.fs-13 { font-size: .78rem !important; text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }

/* AZ. DARK MODE — Phase 8 */
[data-bs-theme="dark"] .dropdown-menu {
    background: #1e2235 !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: #d1d5db !important; }
[data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus {
    background: rgba(255,255,255,.06) !important;
    color: #f9fafb !important;
}
[data-bs-theme="dark"] .offcanvas { background: #181d2e !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .offcanvas-header { border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .badge-pending  { background: #3b2d00 !important; color: #fde68a !important; border-color: #f59e0b !important; }
[data-bs-theme="dark"] .badge-taken    { background: #3b1a00 !important; color: #fdba74 !important; border-color: #f97316 !important; }
[data-bs-theme="dark"] .badge-solved   { background: #052e16 !important; color: #86efac !important; border-color: #22c55e !important; }
[data-bs-theme="dark"] .badge-approved { background: #052e16 !important; color: #86efac !important; border-color: #22c55e !important; }
[data-bs-theme="dark"] .badge-declined { background: #2d0a0a !important; color: #fca5a5 !important; border-color: #ef4444 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   BA. AVATAR & PROFILE IMAGE
   ────────────────────────────────────────────────────────────────────────── */
.avatar-sm  { width: 2rem;   height: 2rem;   border-radius: 50%; object-fit: cover; }
.avatar-md  { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.avatar-lg  { width: 4rem;   height: 4rem;   border-radius: 50%; object-fit: cover; }
.avatar-xl  { width: 6rem;   height: 6rem;   border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 2px 12px rgba(0,0,0,.15); }
[data-bs-theme="dark"] .avatar-xl { box-shadow: 0 0 0 4px #1e2235, 0 2px 12px rgba(0,0,0,.4); }

/* BB. NAV PILLS (settings/profile tabs) */
.nav-pills .nav-link {
    border-radius: 8px !important;
    font-size: .83rem !important;
    font-weight: 500 !important;
    padding: .45rem 1rem !important;
    color: #6b7280 !important;
    transition: all .15s ease;
}
.nav-pills .nav-link.active {
    background: var(--vz-primary, #cc3826) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.3) !important;
}
.nav-pills .nav-link:hover:not(.active) { background: #f5f7ff !important; color: #1e293b !important; }
[data-bs-theme="dark"] .nav-pills .nav-link { color: #9ca3af !important; }
[data-bs-theme="dark"] .nav-pills .nav-link:hover:not(.active) { background: rgba(255,255,255,.05) !important; color: #f3f4f6 !important; }

/* BC. BUTTON GROUP polish */
.btn-group .btn { border-radius: 0 !important; transition: all .15s ease; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.btn-group .btn:only-child  { border-radius: var(--radius-sm) !important; }

/* BD. TABLE — sticky first column on mobile */
@media (max-width: 768px) {
    .table-responsive thead th:first-child,
    .table-responsive tbody td:first-child {
        position: sticky;
        left: 0;
        background: var(--bs-body-bg, #fff);
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0,0,0,.06);
    }
    [data-bs-theme="dark"] .table-responsive thead th:first-child,
    [data-bs-theme="dark"] .table-responsive tbody td:first-child {
        background: #131722;
    }
}

/* BE. MODAL — centered header, action footer */
.modal-header { padding: 1rem 1.25rem !important; }
.modal-footer { padding: .75rem 1.25rem !important; gap: .5rem; }
.modal-title  { font-weight: 600 !important; font-size: .95rem !important; }

/* BF. CARD with TAB inside (nav-tabs-custom on card) */
.card > .card-header .nav-tabs-custom { margin-bottom: -1px; border-bottom: none; }
.card > .card-header { background: transparent !important; border-bottom: 1px solid #f1f3f4 !important; }
[data-bs-theme="dark"] .card > .card-header { border-color: rgba(255,255,255,.07) !important; }

/* BG. SOFT COLOR BADGES (system uses badge classes without bg-*) */
.badge.bg-success-subtle, .badge.text-success { background: #dcfce7 !important; color: #166534 !important; }
.badge.bg-danger-subtle,  .badge.text-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.badge.bg-warning-subtle, .badge.text-warning { background: #fff3cd !important; color: #856404 !important; }
.badge.bg-info-subtle,    .badge.text-info    { background: #eff6ff !important; color: #1d4ed8 !important; }
.badge.bg-primary-subtle, .badge.text-primary { background: #fef2f1 !important; color: #cc3826 !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle { background: #052e16 !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle  { background: #2d0a0a !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { background: #3b2d00 !important; color: #fde68a !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle    { background: #082f49 !important; color: #7dd3fc !important; }

/* BH. SEARCH input with icon inside */
.search-box .form-control {
    padding-left: 2.5rem !important;
    border-radius: var(--radius-md) !important;
}
.search-box .search-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
}

/* BI. DARK MODE — Phase 9 */
[data-bs-theme="dark"] .nav-pills .nav-link.active { box-shadow: 0 2px 8px rgba(204,56,38,.5) !important; }
[data-bs-theme="dark"] .modal-content { background: #1e2235 !important; border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .modal-header { border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .modal-footer { border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] .search-box .search-icon { color: #6b7280; }

/* ──────────────────────────────────────────────────────────────────────────
   BJ. EMPTY STATE — consistent sizing & typography
   ────────────────────────────────────────────────────────────────────────── */
/* Target search-file.gif empty state images consistently */
img[src*="search-file"] {
    width: 90px !important;
    opacity: .85;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
td.text-center > img[src*="search-file"],
td.text-center > img + h5 { color: #9ca3af; font-size: .875rem; font-weight: 500; margin-top: .5rem; }
[data-bs-theme="dark"] img[src*="search-file"] { opacity: .6; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)) brightness(0.9); }

/* BK. STAR RATING display */
.stars-display { display: flex; align-items: center; gap: 1px; }
.stars-display .star-filled { color: #f59e0b !important; }
.stars-display .star-empty  { color: #d1d5db !important; }
.rating-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
    padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.rating-badge .bxs-star { color: #f59e0b; font-size: .8rem; }
[data-bs-theme="dark"] .rating-badge { background: #3b2d00; color: #fde68a; border-color: #d97706; }
[data-bs-theme="dark"] .stars-display .star-empty { color: #4b5563 !important; }

/* BL. DRIVER DOCUMENT status chips */
.doc-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 10px; font-size: .75rem; font-weight: 600; }
.doc-status.approved  { background: #dcfce7; color: #166534; }
.doc-status.pending   { background: #fffbeb; color: #92400e; }
.doc-status.rejected  { background: #fee2e2; color: #991b1b; }
.doc-status.expired   { background: #fef3c7; color: #d97706; }
[data-bs-theme="dark"] .doc-status.approved { background: #052e16; color: #86efac; }
[data-bs-theme="dark"] .doc-status.pending  { background: #3b2d00; color: #fde68a; }
[data-bs-theme="dark"] .doc-status.rejected { background: #2d0a0a; color: #fca5a5; }

/* BM. RIDE / TRIP STATUS chips (used heavily in rides pages) */
.ride-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.ride-status.completed  { background: #dcfce7 !important; color: #166534 !important; }
.ride-status.cancelled  { background: #fee2e2 !important; color: #991b1b !important; }
.ride-status.ongoing    { background: #eff6ff !important; color: #1d4ed8 !important; }
.ride-status.scheduled  { background: #fff7ed !important; color: #c2410c !important; }
.ride-status.pending    { background: #fffbeb !important; color: #92400e !important; }
[data-bs-theme="dark"] .ride-status.completed { background: #052e16 !important; color: #86efac !important; }
[data-bs-theme="dark"] .ride-status.cancelled { background: #2d0a0a !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .ride-status.ongoing   { background: #082f49 !important; color: #7dd3fc !important; }
[data-bs-theme="dark"] .ride-status.scheduled { background: #3b1a00 !important; color: #fdba74 !important; }

/* BN. MAP CONTAINER */
.map-container, #map { border-radius: var(--radius-md) !important; overflow: hidden !important; }
.leaflet-container { border-radius: var(--radius-md) !important; }

/* BO. VEHICLE / DRIVER CARD (used in dispatch and driver pages) */
.driver-mini-card {
    border: 1px solid #f1f3f4;
    border-radius: var(--radius-md);
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.driver-mini-card:hover { box-shadow: var(--shadow-sm); border-color: #e2e8f0; }
[data-bs-theme="dark"] .driver-mini-card { border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .driver-mini-card:hover { border-color: rgba(255,255,255,.15); }

/* BP. TIMELINE (for ride history/tracking pages) */
.timeline-step { position: relative; padding-left: 2rem; }
.timeline-step::before {
    content: '';
    position: absolute;
    left: .45rem;
    top: 1.2rem;
    bottom: 0;
    width: 2px;
    background: #f1f3f4;
}
.timeline-step:last-child::before { display: none; }
.timeline-dot {
    position: absolute;
    left: 0;
    top: .25rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    background: var(--vz-primary, #cc3826);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--vz-primary, #cc3826);
}
[data-bs-theme="dark"] .timeline-step::before { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .timeline-dot { border-color: #1e2235; }

/* BQ. DARK MODE — Phase 10 */
[data-bs-theme="dark"] .rating-badge .bxs-star { color: #f59e0b; }
[data-bs-theme="dark"] .doc-status.expired { background: #3b2d00; color: #fde68a; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 11 — PREMIUM SAAS UI — Responsive All Platforms
   ══════════════════════════════════════════════════════════════════════════ */

/* WAPPI — Body: DM Sans */
body, .card, .table, .form-control, .btn, .modal-content,
.offcanvas, .dropdown-menu, .nav, .navbar, .sidebar {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* WAPPI — Display/Headings: Syne */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title, .fs-18, .fs-20, .fs-22, .fs-24,
.kpi-card .value, .metric-value {
    font-family: 'Syne', system-ui, sans-serif !important;
    letter-spacing: -0.02em;
}

/* WAPPI — Data/Mono: Geist Mono */
.table th, .table thead th,
.font-mono, .text-mono, code, pre,
.badge-mono, td.mono {
    font-family: 'Geist Mono', 'JetBrains Mono', monospace !important;
}

/* ff-secondary = Syne (utilisé sur les chiffres métriques KPI) */
.ff-secondary { font-family: 'Syne', system-ui, sans-serif !important; letter-spacing: -0.02em; }

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — KPI Cards alignment (cible les patterns réels des pages)
   ────────────────────────────────────────────────────────────────────────── */

/* Labels KPI : uppercase + lettre-spacing → Geist Mono */
.card-body p.text-muted.fw-medium,
.card-body .text-muted[style*="text-transform: uppercase"],
.card-body .text-muted[style*="text-transform:uppercase"] {
    font-family: 'Geist Mono', monospace !important;
    letter-spacing: 0.07em;
}

/* Valeurs métriques h3/h4/h5 avec ff-secondary dans les cards */
.card-body h3.ff-secondary,
.card-body h4.ff-secondary,
.card-body h5.ff-secondary {
    font-family: 'Syne', system-ui, sans-serif !important;
    letter-spacing: -0.03em;
    font-weight: 700 !important;
}

/* Deltas positifs dans les cards → teal Wappi */
.card-body .text-success.fw-medium,
.card-body span.text-success.fw-medium {
    color: #00C896 !important;
}

/* Accent coloré en haut des KPI cards (via border-top) */
.dashboard-stable .g-3 .card.h-100.border-0 {
    border-top: 3px solid transparent !important;
    overflow: hidden;
}
.dashboard-stable .g-3 [class*="bg-primary-subtle"] ~ * .card.h-100.border-0,
.dashboard-stable .g-3:first-child .col:nth-child(1) .card.h-100.border-0 { border-top-color: var(--vz-primary) !important; }

/* KPI card hover lift */
.dashboard-stable .g-3 .card.h-100.border-0:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09) !important;
}

/* BS. BENTO GRID — KPI & widget cards */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.bento-grid .bento-col-2 { grid-column: span 2; }
.bento-grid .bento-col-3 { grid-column: span 3; }
.bento-grid .bento-col-4 { grid-column: span 4; }
.bento-grid .bento-row-2 { grid-row: span 2; }

@media (max-width: 1200px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-grid .bento-col-3 { grid-column: span 2; }
}
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-grid .bento-col-2,
    .bento-grid .bento-col-3,
    .bento-grid .bento-col-4,
    .bento-grid .bento-row-2 { grid-column: span 1; grid-row: span 1; }
}

/* BT. RESPONSIVE SIDEBAR — shrink to icon-only on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .app-menu { width: 64px !important; overflow: hidden; }
    .app-menu .menu-title,
    .app-menu .nav-link span:not(.badge),
    .app-menu .menu-text { display: none !important; }
    .app-menu .navbar-nav .nav-link { justify-content: center !important; padding: .75rem !important; }
    .app-main { margin-left: 64px !important; }
}

/* BU. RESPONSIVE CARDS — stack on mobile */
@media (max-width: 576px) {
    .card { border-radius: 12px !important; }
    .card-body { padding: 1rem !important; }
    .page-content { padding: calc(70px + 1rem) 0.75rem 1rem !important; }

    /* Compact stat cards on mobile */
    .card-body .fs-22, .card-body .fs-24 { font-size: 1.4rem !important; }

    /* Reduce table font size on mobile */
    .table { font-size: .78rem !important; }

    /* Full-width buttons on mobile */
    .btn-group.d-mobile-block { display: block !important; }
    .btn-group.d-mobile-block .btn { width: 100%; border-radius: var(--radius-sm) !important; margin-bottom: .25rem; }

    /* Hide non-essential table columns */
    .table .d-none-mobile { display: none !important; }
}

/* BV. RESPONSIVE TABLE — card-style on mobile */
@media (max-width: 480px) {
    .table-card-mobile thead { display: none; }
    .table-card-mobile tbody tr {
        display: block;
        border: 1px solid #f1f3f4;
        border-radius: 10px;
        margin-bottom: .75rem;
        padding: .75rem;
        box-shadow: var(--shadow-xs);
    }
    .table-card-mobile tbody td {
        display: flex;
        justify-content: space-between;
        border: none !important;
        padding: .25rem 0 !important;
        font-size: .8rem;
    }
    .table-card-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
        margin-right: .5rem;
    }
    [data-bs-theme="dark"] .table-card-mobile tbody tr {
        border-color: rgba(255,255,255,.08);
        background: rgba(255,255,255,.02);
    }
}

/* BW. PREMIUM CARD HOVER — lift effect on interactive cards */
.card-interactive {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,.12) !important;
}
[data-bs-theme="dark"] .card-interactive:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,.4) !important;
}

/* BX. PREMIUM KPI CARD — metric-focused */
.kpi-card {
    border: none !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
    transition: box-shadow .2s ease;
    overflow: hidden;
    position: relative;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary-gradient);
}
.kpi-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10) !important; }
.kpi-card .kpi-value { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -.04em; line-height: 1; }
.kpi-card .kpi-label { font-size: .7rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin-top: .35rem; }
.kpi-card .kpi-trend-up   { color: #16a34a; font-size: .78rem; font-weight: 600; }
.kpi-card .kpi-trend-down { color: #dc2626; font-size: .78rem; font-weight: 600; }
[data-bs-theme="dark"] .kpi-card { background: #1e2235 !important; }
[data-bs-theme="dark"] .kpi-card .kpi-label { color: #6b7280; }

/* BY. PREMIUM TABLE — professional data-dense look */
.table-premium {
    font-size: .8125rem !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.table-premium thead th {
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 700 !important;
    font-size: .68rem !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #64748b !important;
    padding: .75rem 1rem !important;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.table-premium tbody tr:hover { background: #f8fafc !important; }
.table-premium tbody td { padding: .65rem 1rem !important; vertical-align: middle !important; border-bottom: 1px solid #f1f5f9 !important; }
[data-bs-theme="dark"] .table-premium thead th { background: #131722 !important; border-color: rgba(255,255,255,.06) !important; color: #6b7280 !important; }
[data-bs-theme="dark"] .table-premium tbody tr:hover { background: rgba(255,255,255,.03) !important; }
[data-bs-theme="dark"] .table-premium tbody td { border-color: rgba(255,255,255,.04) !important; }

/* BZ. GRADIENT ICONS — KPI icon backgrounds */
.icon-box {
    width: 3rem; height: 3rem;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.icon-box-primary   { background: linear-gradient(135deg, #fef2f1, #fcd5cf); color: #cc3826; }
.icon-box-success   { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); color: #16a34a; }
.icon-box-warning   { background: linear-gradient(135deg, #fffbeb, #fde68a); color: #d97706; }
.icon-box-info      { background: linear-gradient(135deg, #eff6ff, #bfdbfe); color: #2563eb; }
.icon-box-purple    { background: linear-gradient(135deg, #faf5ff, #e9d5ff); color: #7c3aed; }
[data-bs-theme="dark"] .icon-box-primary { background: rgba(204,56,38,.15); color: #f97060; }
[data-bs-theme="dark"] .icon-box-success { background: rgba(22,163,74,.15); color: #4ade80; }
[data-bs-theme="dark"] .icon-box-warning { background: rgba(217,119,6,.15); color: #fbbf24; }
[data-bs-theme="dark"] .icon-box-info    { background: rgba(37,99,235,.15); color: #60a5fa; }
[data-bs-theme="dark"] .icon-box-purple  { background: rgba(124,58,237,.15); color: #a78bfa; }

/* CA. RESPONSIVE BREAKPOINTS — tablet portrait */
@media (max-width: 992px) {
    /* Collapse row to 2-column on tablet */
    .row-cols-lg-4 > * { flex: 0 0 50%; max-width: 50%; }

    /* Stack KPI cards 2×2 */
    .kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
    .kpi-row .col { flex: none; max-width: 100%; width: 100%; padding: 0; }

    /* Filter sidebar full-width on tablet */
    .offcanvas-end { width: min(400px, 100vw) !important; }
}

/* CB. DARK MODE — Phase 11 */
[data-bs-theme="dark"] body {
    background-color: #0e1322 !important;
}
[data-bs-theme="dark"] .page-content {
    background: #0e1322;
}
[data-bs-theme="dark"] .table-premium thead th {
    background: #131722 !important;
}
[data-bs-theme="dark"] .icon-box-primary { background: rgba(204,56,38,.15); }

/* CC. STICKY TABLE HEADER — for long tables */
.table-sticky-header { max-height: 70vh; overflow-y: auto; }
.table-sticky-header thead th { position: sticky; top: 0; z-index: 3; }

/* CD. BOTTOM NAVBAR — mobile only */
@media (max-width: 576px) {
    .mobile-bottom-nav {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
        display: flex; justify-content: space-around; align-items: center;
        background: #fff; border-top: 1px solid #f1f3f4;
        padding: .5rem 0; height: 56px;
        box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    }
    [data-bs-theme="dark"] .mobile-bottom-nav {
        background: #1e2235; border-color: rgba(255,255,255,.07);
    }
    /* Ensure page content doesn't hide behind bottom nav */
    .page-content { padding-bottom: calc(56px + 1rem) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 12 — SOFT UI EVOLUTION + MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════════════════════ */

/* CE. SIDEBAR — glassmorphism active link + gradient icon */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > .nav-link {
    background: linear-gradient(90deg, rgba(204,56,38,.12) 0%, rgba(204,56,38,.04) 100%) !important;
    border-left: 3px solid var(--vz-primary, #cc3826) !important;
    color: var(--vz-primary, #cc3826) !important;
    font-weight: 600 !important;
    border-radius: 0 8px 8px 0 !important;
}
.navbar-nav .nav-link.active i,
.navbar-nav .nav-item.active > .nav-link i {
    color: var(--vz-primary, #cc3826) !important;
}
[data-bs-theme="dark"] .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-item.active > .nav-link {
    background: linear-gradient(90deg, rgba(204,56,38,.2) 0%, rgba(204,56,38,.06) 100%) !important;
}

/* CF. NAVBAR TOP — glass effect */
#page-topbar {
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    background: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 1px 16px rgba(0,0,0,.06) !important;
}
[data-bs-theme="dark"] #page-topbar {
    background: rgba(19,23,34,0.92) !important;
    border-color: rgba(255,255,255,.06) !important;
    box-shadow: 0 1px 16px rgba(0,0,0,.3) !important;
}

/* CG. MICRO-INTERACTIONS — button press */
.btn:not(:disabled):active {
    transform: scale(.97) translateY(1px);
    transition: transform .08s ease;
}

/* CH. FORM CONTROLS — soft focus glow */
.form-control:focus,
.form-select:focus,
.multiselect.is-active {
    border-color: var(--vz-primary, #cc3826) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.12) !important;
    background-color: #fff !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1e2235 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.2) !important;
}

/* CI. PAGE TRANSITION HINT — subtle fade-in on page load */
.page-content {
    animation: pageFadeIn .25s ease-out both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .page-content { animation: none; }
}

/* CJ. GRADIENT BACKGROUND — light mode subtle */
body:not([data-bs-theme="dark"]) {
    background: linear-gradient(135deg, #fafbfc 0%, #f4f6f9 100%) !important;
}

/* CK. CARD — elevated on focus-within (form cards) */
.card:focus-within {
    box-shadow: 0 0 0 2px rgba(204,56,38,.15), var(--shadow-md) !important;
    transition: box-shadow .2s ease;
}

/* CL. BREADCRUMB — modern style */
.page-title-box .breadcrumb { background: none; padding: 0; margin: 0; }
.page-title-box .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: #9ca3af;
    font-weight: 300;
}
.page-title-box .breadcrumb-item.active { color: var(--vz-primary, #cc3826); font-weight: 500; }

/* CM. STAT ICON — animated pulse for SOS/alert */
.pulse-icon {
    animation: pulseRing 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulseRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204,56,38,.4); }
    50%       { box-shadow: 0 0 0 10px rgba(204,56,38,0); }
}
@media (prefers-reduced-motion: reduce) {
    .pulse-icon { animation: none; }
}

/* CN. CHIP / TAG input style */
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #f1f5f9; color: #475569;
    border: 1px solid #e2e8f0; border-radius: 999px;
    padding: 3px 10px; font-size: .75rem; font-weight: 500;
    transition: background .15s;
}
.chip:hover { background: #e2e8f0; }
.chip .chip-close {
    cursor: pointer; color: #94a3b8;
    font-size: .9rem; line-height: 1;
    transition: color .15s;
}
.chip .chip-close:hover { color: #ef4444; }
[data-bs-theme="dark"] .chip { background: rgba(255,255,255,.08); color: #d1d5db; border-color: rgba(255,255,255,.1); }

/* CO. SOFT CARD VARIANT */
.card-soft {
    background: rgba(248,250,252,0.8) !important;
    border: 1px solid #f1f5f9 !important;
    backdrop-filter: blur(4px);
}
[data-bs-theme="dark"] .card-soft {
    background: rgba(30,34,53,0.8) !important;
    border-color: rgba(255,255,255,.05) !important;
}

/* CP. DATA TABLE SCROLL INDICATOR */
.table-responsive::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(to left, rgba(255,255,255,.8), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.table-responsive:not(.overflow-visible) { position: relative; }
[data-bs-theme="dark"] .table-responsive::after {
    background: linear-gradient(to left, rgba(14,19,34,.8), transparent);
}

/* CQ. PAGINATION — improved active state */
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    min-width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 500;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    transition: all .15s ease;
}
.pagination .page-link:hover { background: #f5f7ff !important; border-color: var(--vz-primary, #cc3826) !important; color: var(--vz-primary, #cc3826) !important; }
.pagination .page-item.active .page-link {
    background: var(--primary-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.3);
}
.pagination .page-item.disabled .page-link { opacity: .4; }
[data-bs-theme="dark"] .pagination .page-link { background: #1e2235 !important; border-color: rgba(255,255,255,.08) !important; color: #9ca3af !important; }
[data-bs-theme="dark"] .pagination .page-link:hover { background: rgba(255,255,255,.06) !important; color: #f3f4f6 !important; }

/* CR. DARK MODE — Phase 12 */
[data-bs-theme="dark"] .card-soft { backdrop-filter: blur(4px); }
[data-bs-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(204,56,38,.25) !important; }
[data-bs-theme="dark"] body { background: linear-gradient(135deg, #0b0f1c 0%, #0e1322 100%) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 13 — ACCESSIBILITE, LANDING PAGES & COMPOSANTS FINAUX
   ══════════════════════════════════════════════════════════════════════════ */

/* CS. IMAGES RESPONSIVES — max-width safe pour toutes les pages */
.card img:not(.avatar-sm):not(.avatar-md):not(.avatar-lg):not(.avatar-xl):not([src*="flag"]) {
    max-width: 100%;
    height: auto;
}

/* CT. LANDING SITE — hero section improvements */
.landing-hero { min-height: 80vh; display: flex; align-items: center; }
.landing-hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.landing-hero p  { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; }

/* CU. LANDING CARDS — feature/service cards */
.feature-card {
    border: none !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12) !important; }
.feature-card .feature-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}

/* CV. VTC-SPECIFIC — map view controls */
.map-controls-overlay {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 1000;
    display: flex; flex-direction: column; gap: 4px;
}
.map-control-btn {
    width: 36px; height: 36px;
    border-radius: 8px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    transition: all .15s ease;
    font-size: .9rem;
    color: #374151;
}
.map-control-btn:hover { background: var(--vz-primary, #cc3826) !important; color: #fff !important; }
[data-bs-theme="dark"] .map-control-btn { background: #1e2235 !important; border-color: rgba(255,255,255,.1) !important; color: #d1d5db; }

/* CW. DRIVER CARD — profile detail card */
.driver-profile-header {
    background: var(--primary-gradient);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 2rem 1.5rem 3rem;
    position: relative;
    overflow: hidden;
}
.driver-profile-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.driver-profile-body {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    margin-top: -1.5rem;
    padding: 2rem 1.5rem 1.5rem;
    background: #fff;
    position: relative;
    z-index: 1;
}
[data-bs-theme="dark"] .driver-profile-body { background: #1e2235; }

/* CX. INLINE STATUS INDICATOR — real-time dot */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.status-dot.online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.status-dot.offline { background: #9ca3af; }
.status-dot.busy    { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.status-dot.alert   { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.2); animation: pulseRing 1.5s infinite; }

/* CY. SUMMARY ROW — action bar above tables */
.table-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 0;
    flex-wrap: wrap;
}
.table-action-bar .action-left,
.table-action-bar .action-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 576px) {
    .table-action-bar { flex-direction: column; align-items: stretch; }
    .table-action-bar .action-left,
    .table-action-bar .action-right { justify-content: space-between; }
}

/* CZ. PRINT — hide action buttons */
@media print {
    .btn, .dropdown, .offcanvas, #page-topbar,
    .table-action-bar, .pagination { display: none !important; }
    .page-content { padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}

/* DA. DARK MODE — Phase 13 */
[data-bs-theme="dark"] .feature-card { background: #1e2235 !important; box-shadow: 0 4px 24px rgba(0,0,0,.25) !important; }
[data-bs-theme="dark"] .feature-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.45) !important; }
[data-bs-theme="dark"] .map-controls-overlay .map-control-btn { background: #1e2235 !important; }
[data-bs-theme="dark"] .driver-profile-body { background: #1e2235 !important; }

/* ============================================================
   PHASE 14 — PREMIUM POLISH: APEXCHARTS + DISPATCH CARD + LOADER
   Sections DB → DG
   ============================================================ */

/* DB. APEXCHARTS — Brand color tokens & polish */
.apexcharts-canvas { font-family: 'Inter', sans-serif !important; }
.apexcharts-title-text,
.apexcharts-subtitle-text { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
.apexcharts-legend-text { font-family: 'Inter', sans-serif !important; font-size: 0.8125rem !important; }
.apexcharts-xaxis-label,
.apexcharts-yaxis-label { font-family: 'Inter', sans-serif !important; font-size: 0.75rem !important; fill: #6c757d !important; }
.apexcharts-tooltip {
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    font-family: 'Inter', sans-serif !important;
}
.apexcharts-tooltip-title {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 6px 12px !important;
}
.apexcharts-tooltip-series-group { padding: 4px 12px !important; }
.apexcharts-tooltip-text-y-value { font-weight: 600 !important; }
.apexcharts-datalabel { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
/* Brand palette injection for ApexCharts via CSS variables */
:root {
    --apex-color-1: #CC3826;
    --apex-color-2: #3b82f6;
    --apex-color-3: #22c55e;
    --apex-color-4: #f97316;
    --apex-color-5: #a855f7;
    --apex-color-6: #06b6d4;
}
/* Dark mode ApexCharts */
[data-bs-theme="dark"] .apexcharts-canvas svg { background: transparent !important; }
[data-bs-theme="dark"] .apexcharts-xaxis-label,
[data-bs-theme="dark"] .apexcharts-yaxis-label { fill: #9ca3af !important; }
[data-bs-theme="dark"] .apexcharts-gridlines-horizontal line,
[data-bs-theme="dark"] .apexcharts-gridlines-vertical line { stroke: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .apexcharts-tooltip {
    background: #1e2235 !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip-title {
    background: #252a3d !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .apexcharts-legend-text { color: #9ca3af !important; }

/* DC. DISPATCH BOOKING CARD — premium redesign */
.dispatch-booking-card {
    border-radius: 16px !important;
    border: 1px solid rgba(204,56,38,.12) !important;
    background: linear-gradient(135deg, #fff 0%, #fff8f7 100%) !important;
    transition: box-shadow .2s ease, transform .15s ease !important;
    overflow: hidden !important;
    position: relative !important;
}
.dispatch-booking-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #CC3826, #B32F1F) !important;
    border-radius: 16px 16px 0 0;
}
.dispatch-booking-card:hover {
    box-shadow: 0 8px 32px rgba(204,56,38,.15) !important;
    transform: translateY(-2px) !important;
}
.dispatch-booking-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(204,56,38,.08) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
}
.dispatch-booking-card .card-body { padding: 1.25rem !important; }
/* Dark mode dispatch */
[data-bs-theme="dark"] .dispatch-booking-card {
    background: linear-gradient(135deg, #1e2235 0%, #1a1d2e 100%) !important;
    border-color: rgba(204,56,38,.2) !important;
}
[data-bs-theme="dark"] .dispatch-booking-card .card-header {
    border-color: rgba(204,56,38,.12) !important;
}

/* DD. GLOBAL PAGE LOADER — slim top progress bar */
#page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}
#page-loader::after {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #CC3826, #f97316, #CC3826);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    animation: pageLoaderBar 2.5s ease-in-out infinite;
}
@keyframes pageLoaderBar {
    0%   { width: 0;   background-position: 0% 50%; }
    50%  { width: 70%; background-position: 100% 50%; }
    80%  { width: 90%; }
    100% { width: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #page-loader::after { animation: none; } }

/* DE. STATS ROW — responsive KPI grid for overview pages */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1199px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .stats-row { grid-template-columns: 1fr; } }
.stats-row .stat-card {
    border-radius: 14px !important;
    padding: 1.25rem !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    display: flex; align-items: center; gap: 1rem;
    transition: box-shadow .2s ease, transform .15s ease !important;
}
.stats-row .stat-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.09) !important;
    transform: translateY(-2px) !important;
}
.stats-row .stat-card .stat-icon {
    width: 48px; height: 48px; min-width: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.stats-row .stat-card .stat-value { font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.2; }
.stats-row .stat-card .stat-label { font-size: 0.75rem !important; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }
[data-bs-theme="dark"] .stats-row .stat-card {
    background: #1e2235 !important;
    border-color: rgba(255,255,255,.06) !important;
}

/* DF. NOTIFICATION BADGE — pulse for unread count */
.notif-badge {
    position: absolute;
    top: 6px; right: 6px;
    min-width: 18px; height: 18px;
    border-radius: 99px;
    background: #CC3826;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(204,56,38,.5);
    animation: notifPulse 2s infinite;
}
@keyframes notifPulse {
    0%   { box-shadow: 0 0 0 0   rgba(204,56,38,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(204,56,38,0);  }
    100% { box-shadow: 0 0 0 0   rgba(204,56,38,0);  }
}
@media (prefers-reduced-motion: reduce) { .notif-badge { animation: none; } }
[data-bs-theme="dark"] .notif-badge { border-color: #1e2235; }

/* DG. DARK MODE — Phase 14 (ApexCharts background, dispatch card) */
[data-bs-theme="dark"] .stats-row .stat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35) !important; }
[data-bs-theme="dark"] .apexcharts-canvas { background: transparent !important; }

/* ============================================================
   PHASE 15 — PRECISION POLISH: FORMS + EXPORT + SIDEBAR + AVATARS
   Sections DH → DN
   ============================================================ */

/* DH. FORM VALIDATION STATES — semantic borders + icons */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important;
    background-image: none !important;
    padding-right: inherit !important;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    background-image: none !important;
    padding-right: inherit !important;
}
.valid-feedback   { color: #16a34a !important; font-size: 0.75rem !important; font-weight: 500 !important; }
.invalid-feedback { color: #dc2626 !important; font-size: 0.75rem !important; font-weight: 500 !important; }
/* Dark mode */
[data-bs-theme="dark"] .form-control.is-valid  { border-color: #4ade80 !important; }
[data-bs-theme="dark"] .form-control.is-invalid { border-color: #f87171 !important; }

/* DI. EXPORT BUTTON GROUP — CSV/PDF/Print/Excel polish */
.export-btn-group { display: flex; flex-wrap: wrap; gap: .375rem; }
.export-btn-group .btn {
    border-radius: 8px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: .375rem .875rem !important;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: background .15s, box-shadow .15s, transform .12s !important;
}
.export-btn-group .btn:active { transform: scale(.96) !important; }
.export-btn-group .btn i { font-size: 1rem; }
/* Color shorthands for common export actions */
.btn-export-csv   { background: #16a34a !important; color: #fff !important; border: none !important; }
.btn-export-csv:hover   { background: #15803d !important; box-shadow: 0 4px 12px rgba(22,163,74,.3) !important; }
.btn-export-pdf   { background: #dc2626 !important; color: #fff !important; border: none !important; }
.btn-export-pdf:hover   { background: #b91c1c !important; box-shadow: 0 4px 12px rgba(220,38,38,.3) !important; }
.btn-export-excel { background: #1d6f42 !important; color: #fff !important; border: none !important; }
.btn-export-excel:hover { background: #155e35 !important; box-shadow: 0 4px 12px rgba(29,111,66,.3) !important; }
.btn-export-print { background: #6c757d !important; color: #fff !important; border: none !important; }
.btn-export-print:hover { background: #5c636a !important; }

/* DJ. FILTER ACTIVE CHIP — visual pill when filter applied */
.filter-chip-active {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(204,56,38,.1) !important;
    color: #CC3826 !important;
    border: 1px solid rgba(204,56,38,.3) !important;
    border-radius: 99px !important;
    padding: .2rem .65rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: default;
}
.filter-chip-active .bx-x {
    cursor: pointer;
    font-size: .9rem;
    opacity: .7;
    transition: opacity .15s;
}
.filter-chip-active .bx-x:hover { opacity: 1; }
[data-bs-theme="dark"] .filter-chip-active {
    background: rgba(204,56,38,.2) !important;
    border-color: rgba(204,56,38,.4) !important;
    color: #ff6b5a !important;
}

/* DK. SIDEBAR SCROLLBAR — ultra-thin custom scrollbar */
#sidebar-menu,
.vertical-menu,
.simplebar-content-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(204,56,38,.3) transparent !important;
}
#sidebar-menu::-webkit-scrollbar,
.vertical-menu::-webkit-scrollbar { width: 4px !important; }
#sidebar-menu::-webkit-scrollbar-thumb,
.vertical-menu::-webkit-scrollbar-thumb {
    background: rgba(204,56,38,.35) !important;
    border-radius: 99px !important;
}
#sidebar-menu::-webkit-scrollbar-track,
.vertical-menu::-webkit-scrollbar-track { background: transparent !important; }

/* DL. AVATAR GROUP — overlapping stacked avatars */
.avatar-group { display: flex; align-items: center; }
.avatar-group .avatar-group-item {
    width: 32px; height: 32px;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    margin-left: -8px;
    overflow: hidden;
    position: relative;
    transition: transform .15s ease, z-index 0s;
    z-index: 1;
}
.avatar-group .avatar-group-item:first-child { margin-left: 0; }
.avatar-group .avatar-group-item:hover { transform: scale(1.15); z-index: 10; }
.avatar-group .avatar-group-item img { width: 100%; height: 100%; object-fit: cover; }
.avatar-group .avatar-group-count {
    width: 32px; height: 32px;
    border-radius: 50% !important;
    background: #CC3826 !important;
    color: #fff !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff !important;
    margin-left: -8px;
}
[data-bs-theme="dark"] .avatar-group .avatar-group-item { border-color: #1e2235 !important; }
[data-bs-theme="dark"] .avatar-group .avatar-group-count { border-color: #1e2235 !important; }

/* DM. ICON SEMANTIC — revert/undo action = cyan */
.dropdown-item .bx-undo { color: #0891b2 !important; }
/* show/view icon = indigo */
.dropdown-item .bx-show { color: #4f46e5 !important; }

/* DN. DARK MODE — Phase 15 global */
[data-bs-theme="dark"] .export-btn-group .btn { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
[data-bs-theme="dark"] .filter-chip-active { background: rgba(204,56,38,.18) !important; }

/* ============================================================
   PHASE 16 — VTC-SPECIFIC COMPONENTS
   Sections DO → DX
   Design system: Data-Dense + Swiss Modernism — brand red #CC3826
   ============================================================ */

/* DO. TRIP PROGRESS STEPPER — ride status flow */
.trip-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
    padding: .5rem 0;
}
.trip-stepper .trip-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.trip-stepper .trip-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 0;
    transition: background .3s ease;
}
.trip-stepper .trip-step.done::after  { background: #22c55e; }
.trip-stepper .trip-step.active::after { background: linear-gradient(90deg, #22c55e 0%, #dee2e6 100%); }
.trip-stepper .step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: #6c757d;
    transition: all .25s ease;
    position: relative; z-index: 2;
}
.trip-stepper .trip-step.done   .step-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.trip-stepper .trip-step.active .step-dot { background: #CC3826; border-color: #CC3826; color: #fff; box-shadow: 0 0 0 4px rgba(204,56,38,.2); }
.trip-stepper .step-label {
    font-size: .6875rem; font-weight: 500;
    color: #6c757d; margin-top: .35rem;
    text-align: center; line-height: 1.2;
}
.trip-stepper .trip-step.active .step-label { color: #CC3826; font-weight: 700; }
.trip-stepper .trip-step.done   .step-label { color: #16a34a; }
/* Responsive stepper on mobile */
@media (max-width: 480px) {
    .trip-stepper { flex-direction: column; gap: 1rem; }
    .trip-stepper .trip-step { flex-direction: row; gap: .75rem; align-items: center; }
    .trip-stepper .trip-step::after { display: none; }
    .trip-stepper .step-label { margin-top: 0; text-align: left; }
}

/* DP. REVENUE SUMMARY CARD — gradient metrics card */
.revenue-card {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #CC3826 0%, #8B1A10 100%) !important;
    color: #fff !important;
    padding: 1.75rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(204,56,38,.35) !important;
}
.revenue-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.revenue-card::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 30px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.revenue-card .rev-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.revenue-card .rev-amount { font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin: .25rem 0; }
.revenue-card .rev-change { font-size: .8125rem; font-weight: 500; opacity: .9; }
.revenue-card .rev-change.up   { color: #bbf7d0; }
.revenue-card .rev-change.down { color: #fecaca; }

/* DQ. DRIVER AVAILABILITY BADGE — online/offline/busy */
.driver-avail {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 99px;
    padding: .2rem .65rem;
    font-size: .75rem; font-weight: 600;
}
.driver-avail .avail-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.driver-avail.online  { background: rgba(34,197,94,.12); color: #16a34a; }
.driver-avail.online  .avail-dot { background: #22c55e; animation: availPulse 2s infinite; }
.driver-avail.busy    { background: rgba(249,115,22,.12); color: #c2410c; }
.driver-avail.busy    .avail-dot { background: #f97316; }
.driver-avail.offline { background: rgba(107,114,128,.1); color: #6b7280; }
.driver-avail.offline .avail-dot { background: #9ca3af; }
@keyframes availPulse {
    0%,100% { box-shadow: 0 0 0 0   rgba(34,197,94,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0);  }
}
@media (prefers-reduced-motion: reduce) { .driver-avail.online .avail-dot { animation: none; } }

/* DR. LIVE RIDE FEED — new-ride indicator */
.live-feed-header {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .875rem;
}
.live-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #CC3826; color: #fff;
    border-radius: 99px; padding: .15rem .55rem;
    font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.live-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    animation: liveDot 1s infinite;
}
@keyframes liveDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live-badge::before { animation: none; } }

.feed-item {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: background .15s;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: rgba(204,56,38,.03); border-radius: 8px; padding-left: .5rem; }
.feed-item .feed-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.feed-item .feed-meta { font-size: .6875rem; color: #6c757d; margin-top: .125rem; }
.feed-item.feed-new { animation: feedSlideIn .3s ease-out; }
@keyframes feedSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* DS. SURGE PRICING BADGE — flame + multiplier */
.surge-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    background: linear-gradient(135deg, #f97316, #CC3826);
    color: #fff;
    border-radius: 8px;
    padding: .2rem .55rem;
    font-size: .75rem; font-weight: 800;
    box-shadow: 0 3px 10px rgba(204,56,38,.4);
}
.surge-badge i { font-size: .875rem; }

/* DT. ZONE CHIP — colored geofence identifier */
.zone-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 6px;
    padding: .25rem .65rem;
    font-size: .75rem; font-weight: 600;
    border-left: 3px solid currentColor;
}
.zone-chip.zone-primary  { background: rgba(204,56,38,.1); color: #CC3826; }
.zone-chip.zone-success  { background: rgba(34,197,94,.1);  color: #16a34a; }
.zone-chip.zone-warning  { background: rgba(245,158,11,.1); color: #b45309; }
.zone-chip.zone-info     { background: rgba(6,182,212,.1);  color: #0e7490; }
.zone-chip.zone-purple   { background: rgba(168,85,247,.1); color: #7c3aed; }

/* DU. TRIP DISTANCE + DURATION ROW */
.trip-meta-row {
    display: flex; flex-wrap: wrap; gap: 1rem;
    padding: .875rem 1rem;
    background: #fafbfc;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.06);
}
.trip-meta-row .trip-meta-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8125rem; color: #374151;
}
.trip-meta-row .trip-meta-item i { font-size: 1rem; color: #CC3826; }
.trip-meta-row .trip-meta-item strong { font-weight: 700; color: #111827; }
[data-bs-theme="dark"] .trip-meta-row {
    background: #1e2235 !important;
    border-color: rgba(255,255,255,.06) !important;
}
[data-bs-theme="dark"] .trip-meta-row .trip-meta-item { color: #9ca3af; }
[data-bs-theme="dark"] .trip-meta-row .trip-meta-item strong { color: #f1f5f9; }

/* DV. EARNINGS BREAKDOWN TABLE — condensed layout */
.earnings-table { border-radius: 12px; overflow: hidden; }
.earnings-table thead th {
    background: #CC3826 !important;
    color: #fff !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: .625rem 1rem !important;
    border: none !important;
}
.earnings-table tbody tr:hover td { background: rgba(204,56,38,.04) !important; }
.earnings-table tfoot td {
    font-weight: 700 !important;
    border-top: 2px solid rgba(204,56,38,.2) !important;
    background: rgba(204,56,38,.05) !important;
    font-size: .875rem !important;
}

/* DW. MOBILE BOTTOM SHEET — drag-handle style */
.bottom-sheet-handle {
    width: 40px; height: 4px;
    border-radius: 99px;
    background: #dee2e6;
    margin: .75rem auto .25rem;
}
.offcanvas-bottom .offcanvas-header { padding-top: 0; }
.offcanvas-bottom .offcanvas-header::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    border-radius: 99px;
    background: #dee2e6;
    margin: 0 auto .75rem;
    flex: none;
    align-self: center;
}
[data-bs-theme="dark"] .offcanvas-bottom .offcanvas-header::before { background: #3f4560; }

/* DX. DARK MODE — Phase 16 */
[data-bs-theme="dark"] .trip-stepper .trip-step::after { background: #2d3352; }
[data-bs-theme="dark"] .trip-stepper .step-dot { background: #1e2235; border-color: #2d3352; color: #9ca3af; }
[data-bs-theme="dark"] .feed-item { border-bottom-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .feed-item:hover { background: rgba(204,56,38,.06); }
[data-bs-theme="dark"] .driver-avail.online  { background: rgba(34,197,94,.15); }
[data-bs-theme="dark"] .driver-avail.busy    { background: rgba(249,115,22,.15); }
[data-bs-theme="dark"] .driver-avail.offline { background: rgba(107,114,128,.15); }
[data-bs-theme="dark"] .zone-chip.zone-primary { background: rgba(204,56,38,.2); }
[data-bs-theme="dark"] .zone-chip.zone-success { background: rgba(34,197,94,.15); }
[data-bs-theme="dark"] .zone-chip.zone-warning { background: rgba(245,158,11,.15); }
[data-bs-theme="dark"] .zone-chip.zone-info    { background: rgba(6,182,212,.15); }
[data-bs-theme="dark"] .zone-chip.zone-purple  { background: rgba(168,85,247,.15); }
[data-bs-theme="dark"] .earnings-table thead th { background: #991b1b !important; }
[data-bs-theme="dark"] .earnings-table tfoot td { background: rgba(204,56,38,.1) !important; border-color: rgba(204,56,38,.3) !important; }

/* ============================================================
   PHASE 17 — SAAS PREMIUM: PRICING + PAYMENT + DOCS + ALERTS
   Sections DY → EG  |  Dimensional Layering + Conversion-Optimized
   ============================================================ */

/* DY. SUBSCRIPTION / PRICING CARD — featured highlight */
.pricing-card {
    border-radius: 20px !important;
    border: 2px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    padding: 2rem !important;
    position: relative;
    transition: box-shadow .25s ease, transform .2s ease, border-color .2s !important;
    overflow: hidden;
}
.pricing-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
    transform: translateY(-4px) !important;
}
/* Featured / recommended plan */
.pricing-card.pricing-featured {
    border-color: #CC3826 !important;
    box-shadow: 0 12px 40px rgba(204,56,38,.18) !important;
}
.pricing-card.pricing-featured::before {
    content: attr(data-label);
    position: absolute;
    top: 1.25rem; right: -2.5rem;
    background: #CC3826;
    color: #fff;
    font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    padding: .25rem 3rem;
    transform: rotate(45deg);
}
.pricing-card .plan-name  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #CC3826; }
.pricing-card .plan-price { font-size: 2.75rem; font-weight: 800; line-height: 1; color: #111827; margin: .5rem 0; }
.pricing-card .plan-price sup { font-size: 1.125rem; font-weight: 600; vertical-align: super; }
.pricing-card .plan-price sub { font-size: .875rem; font-weight: 400; color: #6c757d; }
.pricing-card .plan-desc  { font-size: .8125rem; color: #6c757d; margin-bottom: 1.5rem; }
.pricing-card .plan-features { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.pricing-card .plan-features li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem; padding: .35rem 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.pricing-card .plan-features li:last-child { border-bottom: none; }
.pricing-card .plan-features li i { font-size: 1rem; flex-shrink: 0; }
.pricing-card .plan-features li i.bx-check { color: #22c55e; }
.pricing-card .plan-features li i.bx-x     { color: #d1d5db; }
/* Pricing grid responsive */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 991px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pricing-grid { grid-template-columns: 1fr; } }
/* Dark mode */
[data-bs-theme="dark"] .pricing-card { background: #1e2235 !important; border-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .pricing-card.pricing-featured { border-color: #CC3826 !important; }
[data-bs-theme="dark"] .pricing-card .plan-price { color: #f1f5f9; }
[data-bs-theme="dark"] .pricing-card .plan-features li { border-color: rgba(255,255,255,.05); }

/* DZ. PAYMENT METHOD CARD — wallet / credit card display */
.payment-method-card {
    border-radius: 16px !important;
    border: 1.5px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    padding: 1rem 1.25rem !important;
    display: flex; align-items: center; gap: 1rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .15s !important;
}
.payment-method-card:hover,
.payment-method-card.selected {
    border-color: #CC3826 !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.12) !important;
    background: rgba(204,56,38,.02) !important;
}
.payment-method-card .pm-logo {
    width: 48px; height: 32px; object-fit: contain;
    border-radius: 4px; border: 1px solid rgba(0,0,0,.07);
    flex-shrink: 0;
}
.payment-method-card .pm-info { flex: 1; min-width: 0; }
.payment-method-card .pm-name { font-weight: 600; font-size: .875rem; }
.payment-method-card .pm-number { font-size: .75rem; color: #6c757d; letter-spacing: .05em; }
.payment-method-card .pm-check {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #dee2e6; flex-shrink: 0;
    transition: all .2s;
}
.payment-method-card.selected .pm-check {
    background: #CC3826; border-color: #CC3826;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
[data-bs-theme="dark"] .payment-method-card { background: #1e2235 !important; border-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .payment-method-card:hover,
[data-bs-theme="dark"] .payment-method-card.selected { background: rgba(204,56,38,.08) !important; }

/* EA. DOCUMENT UPLOAD CARD — driver document with status */
.doc-upload-card {
    border-radius: 14px !important;
    border: 1.5px dashed #dee2e6 !important;
    background: #fafbfc !important;
    padding: 1.25rem !important;
    display: flex; align-items: center; gap: 1rem;
    transition: border-color .2s, background .2s !important;
    cursor: pointer;
}
.doc-upload-card:hover { border-color: #CC3826 !important; background: rgba(204,56,38,.03) !important; }
.doc-upload-card.doc-uploaded { border-style: solid !important; border-color: #22c55e !important; background: rgba(34,197,94,.04) !important; cursor: default; }
.doc-upload-card.doc-rejected { border-style: solid !important; border-color: #ef4444 !important; background: rgba(239,68,68,.04) !important; }
.doc-upload-card .doc-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.doc-upload-card .doc-icon.pending  { background: rgba(204,56,38,.1); color: #CC3826; }
.doc-upload-card .doc-icon.uploaded { background: rgba(34,197,94,.12); color: #16a34a; }
.doc-upload-card .doc-icon.rejected { background: rgba(239,68,68,.12); color: #dc2626; }
.doc-upload-card .doc-name { font-weight: 600; font-size: .875rem; }
.doc-upload-card .doc-hint { font-size: .75rem; color: #6c757d; margin-top: .125rem; }
[data-bs-theme="dark"] .doc-upload-card { background: #1a1d2e !important; border-color: #2d3352 !important; }
[data-bs-theme="dark"] .doc-upload-card:hover { background: rgba(204,56,38,.06) !important; }

/* EB. SYSTEM ALERT BANNER — full-width top notice */
.system-alert-banner {
    width: 100%; padding: .75rem 1.5rem;
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    font-size: .8125rem; font-weight: 500;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.system-alert-banner i { font-size: 1.1rem; flex-shrink: 0; }
.system-alert-banner .banner-close {
    position: absolute; right: 1rem;
    background: none; border: none; cursor: pointer;
    opacity: .6; font-size: 1.125rem; line-height: 1;
    transition: opacity .15s;
}
.system-alert-banner .banner-close:hover { opacity: 1; }
.system-alert-banner.banner-info    { background: rgba(6,182,212,.1); color: #0e7490; }
.system-alert-banner.banner-warning { background: rgba(245,158,11,.1); color: #92400e; }
.system-alert-banner.banner-danger  { background: rgba(239,68,68,.1);  color: #991b1b; }
.system-alert-banner.banner-success { background: rgba(34,197,94,.1);  color: #14532d; }
[data-bs-theme="dark"] .system-alert-banner.banner-info    { background: rgba(6,182,212,.15); color: #67e8f9; }
[data-bs-theme="dark"] .system-alert-banner.banner-warning { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-bs-theme="dark"] .system-alert-banner.banner-danger  { background: rgba(239,68,68,.15); color: #fca5a5; }
[data-bs-theme="dark"] .system-alert-banner.banner-success { background: rgba(34,197,94,.15); color: #86efac; }

/* EC. ONBOARDING PROGRESS CARD */
.onboarding-card {
    border-radius: 16px !important;
    padding: 1.5rem !important;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%) !important;
    border: 1px solid rgba(204,56,38,.12) !important;
}
.onboarding-step-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.onboarding-step-list li {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 0;
    font-size: .875rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.onboarding-step-list li:last-child { border-bottom: none; }
.onboarding-step-list .step-num {
    width: 26px; height: 26px; min-width: 26px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .6875rem; font-weight: 700;
}
.onboarding-step-list li.ob-done   .step-num { background: #22c55e; color: #fff; }
.onboarding-step-list li.ob-active .step-num { background: #CC3826; color: #fff; box-shadow: 0 0 0 3px rgba(204,56,38,.2); }
.onboarding-step-list li.ob-pending .step-num { background: #e9ecef; color: #6c757d; }
.onboarding-step-list li.ob-done .step-label   { text-decoration: line-through; color: #9ca3af; }
.onboarding-step-list li.ob-active .step-label { font-weight: 600; color: #CC3826; }
[data-bs-theme="dark"] .onboarding-card { background: linear-gradient(135deg, #1e2235 0%, #1c1520 100%) !important; }
[data-bs-theme="dark"] .onboarding-step-list li { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .onboarding-step-list li.ob-pending .step-num { background: #2d3352; color: #9ca3af; }

/* ED. MAP LEGEND — color key overlay for zones/status */
.map-legend {
    background: rgba(255,255,255,.95) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    padding: .75rem 1rem !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    min-width: 160px;
}
.map-legend .legend-title { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin-bottom: .5rem; }
.map-legend .legend-item { display: flex; align-items: center; gap: .5rem; font-size: .75rem; padding: .2rem 0; }
.map-legend .legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.map-legend .legend-line { width: 20px; height: 3px; border-radius: 99px; flex-shrink: 0; }
[data-bs-theme="dark"] .map-legend {
    background: rgba(30,34,53,.95) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* EE. FEATURE COMPARISON TABLE — plan vs plan grid */
.feature-compare-table th { text-align: center; padding: .875rem !important; }
.feature-compare-table td { text-align: center; padding: .75rem !important; vertical-align: middle !important; }
.feature-compare-table td:first-child { text-align: left !important; font-size: .8125rem !important; }
.feature-compare-table .col-featured { background: rgba(204,56,38,.04) !important; }
.feature-compare-table th.col-featured { background: #CC3826 !important; color: #fff !important; border-radius: 8px 8px 0 0 !important; }
.feature-compare-table .fc-yes { color: #16a34a; font-size: 1.2rem; }
.feature-compare-table .fc-no  { color: #d1d5db; font-size: 1.2rem; }
.feature-compare-table .fc-partial { color: #f59e0b; font-size: .75rem; font-weight: 600; }
[data-bs-theme="dark"] .feature-compare-table .col-featured { background: rgba(204,56,38,.1) !important; }
[data-bs-theme="dark"] .feature-compare-table .fc-no { color: #374151; }

/* EF. EMPTY STATE WITH CTA — premium version */
.empty-cta-state {
    text-align: center;
    padding: 3rem 1.5rem;
}
.empty-cta-state .empty-icon-wrap {
    width: 80px; height: 80px;
    border-radius: 24px;
    background: rgba(204,56,38,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #CC3826;
    margin: 0 auto 1.25rem;
}
.empty-cta-state .empty-title { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: .5rem; }
.empty-cta-state .empty-desc  { font-size: .875rem; color: #6c757d; max-width: 340px; margin: 0 auto 1.5rem; line-height: 1.6; }
[data-bs-theme="dark"] .empty-cta-state .empty-icon-wrap { background: rgba(204,56,38,.15); }
[data-bs-theme="dark"] .empty-cta-state .empty-title { color: #f1f5f9; }

/* EG. ELEVATION SCALE — dimensional layering tokens */
:root {
    --elev-1: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --elev-2: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --elev-3: 0 12px 24px rgba(0,0,0,.1),  0 4px 8px rgba(0,0,0,.04);
    --elev-4: 0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.06);
}
.elev-1 { box-shadow: var(--elev-1) !important; }
.elev-2 { box-shadow: var(--elev-2) !important; }
.elev-3 { box-shadow: var(--elev-3) !important; }
.elev-4 { box-shadow: var(--elev-4) !important; }

/* ============================================================
   PHASE 18 — OPERATIONAL ADMIN: NOTIF + FAB + SETTINGS + SOS
   Sections EH → EP  |  Micro-interactions + Data-Dense
   ============================================================ */

/* EH. NOTIFICATION CENTER ITEM */
.notif-item {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: background .15s ease;
    cursor: pointer;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(204,56,38,.03); }
.notif-item.unread { background: rgba(204,56,38,.04); }
.notif-item.unread::before {
    content: '';
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 4px 4px 0;
    background: #CC3826;
}
.notif-item .notif-avatar {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; flex-shrink: 0;
}
.notif-item .notif-body  { flex: 1; min-width: 0; }
.notif-item .notif-title { font-size: .8125rem; font-weight: 600; color: #111827; line-height: 1.3; }
.notif-item.unread .notif-title { color: #CC3826; }
.notif-item .notif-text  { font-size: .75rem; color: #6c757d; margin-top: .125rem; line-height: 1.45; }
.notif-item .notif-time  { font-size: .6875rem; color: #9ca3af; margin-top: .25rem; white-space: nowrap; }
.notif-item .notif-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #CC3826; flex-shrink: 0; margin-top: .3rem;
}
/* Mark all read button */
.notif-mark-all {
    font-size: .75rem; font-weight: 600; color: #CC3826;
    cursor: pointer; border: none; background: none; padding: 0;
    transition: opacity .15s;
}
.notif-mark-all:hover { opacity: .7; }
[data-bs-theme="dark"] .notif-item { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .notif-item:hover { background: rgba(204,56,38,.06); }
[data-bs-theme="dark"] .notif-item.unread { background: rgba(204,56,38,.08); }
[data-bs-theme="dark"] .notif-item .notif-title { color: #f1f5f9; }

/* EI. FLOATING ACTION BUTTON — mobile quick-add */
.fab {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    width: 56px; height: 56px;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #CC3826, #B32F1F) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(204,56,38,.45) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1050;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease !important;
}
.fab:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 32px rgba(204,56,38,.55) !important;
}
.fab:active { transform: scale(.95) !important; }
/* FAB on desktop only hidden by default */
@media (min-width: 992px) { .fab-mobile-only { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fab { transition: none !important; } }
[data-bs-theme="dark"] .fab { box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }

/* EJ. SETTINGS SECTION CARD — grouped settings with dividers */
.settings-section {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.settings-section-header {
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-weight: 700; font-size: .8125rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: #CC3826;
    background: rgba(204,56,38,.02);
}
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
    gap: 1rem;
    transition: background .15s;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: rgba(0,0,0,.015); }
.settings-row .sr-label { font-size: .875rem; font-weight: 500; color: #111827; }
.settings-row .sr-desc  { font-size: .75rem; color: #6c757d; margin-top: .1rem; }
.settings-row .sr-control { flex-shrink: 0; }
[data-bs-theme="dark"] .settings-section { background: #1e2235 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .settings-section-header { background: rgba(204,56,38,.06); border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .settings-row { border-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .settings-row:hover { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .settings-row .sr-label { color: #f1f5f9; }

/* EK. NAV-TAB WITH COUNTER BADGE */
.nav-tabs-counter .nav-link { position: relative; padding-right: 2rem !important; }
.nav-tabs-counter .nav-link .tab-count {
    position: absolute; top: .3rem; right: .4rem;
    min-width: 18px; height: 18px; border-radius: 99px;
    background: #e9ecef; color: #6c757d;
    font-size: .6rem; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px;
    transition: background .2s, color .2s;
}
.nav-tabs-counter .nav-link.active .tab-count {
    background: #CC3826; color: #fff;
}
[data-bs-theme="dark"] .nav-tabs-counter .nav-link .tab-count { background: #2d3352; color: #9ca3af; }

/* EL. SOS / EMERGENCY CARD — urgent alert with pulse */
.sos-card {
    border-radius: 16px !important;
    border: 2px solid #ef4444 !important;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%) !important;
    padding: 1.25rem !important;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 20px rgba(239,68,68,.2) !important;
    animation: sosPulse 2.5s infinite;
}
@keyframes sosPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(239,68,68,.2); }
    50%      { box-shadow: 0 4px 32px rgba(239,68,68,.45); }
}
@media (prefers-reduced-motion: reduce) { .sos-card { animation: none; } }
.sos-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #ef4444, #dc2626);
}
.sos-card .sos-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #ef4444; color: #fff;
    border-radius: 6px; padding: .2rem .6rem;
    font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .75rem;
}
.sos-card .sos-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: liveDot 1s infinite;
}
.sos-card .sos-driver   { font-weight: 700; font-size: .9375rem; }
.sos-card .sos-location { font-size: .8125rem; color: #6c757d; display: flex; align-items: center; gap: .3rem; }
.sos-card .sos-time     { font-size: .6875rem; color: #9ca3af; margin-top: .25rem; }
[data-bs-theme="dark"] .sos-card {
    background: linear-gradient(135deg, #2d1515 0%, #1e2235 100%) !important;
}

/* EM. AUDIT LOG ROW — timestamped admin events */
.audit-log { border-radius: 12px; overflow: hidden; }
.audit-row {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: background .15s;
    font-size: .8125rem;
}
.audit-row:last-child { border-bottom: none; }
.audit-row:hover { background: rgba(0,0,0,.02); }
.audit-row .audit-icon {
    width: 32px; height: 32px; min-width: 32px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-size: .875rem; flex-shrink: 0;
}
.audit-row .audit-actor { font-weight: 600; color: #111827; }
.audit-row .audit-action { color: #374151; }
.audit-row .audit-target { font-weight: 600; color: #CC3826; }
.audit-row .audit-time   { font-size: .6875rem; color: #9ca3af; margin-top: .125rem; white-space: nowrap; }
.audit-row .audit-meta   { flex: 1; min-width: 0; }
/* Semantic audit types */
.audit-row.audit-create .audit-icon { background: rgba(34,197,94,.1); color: #16a34a; }
.audit-row.audit-update .audit-icon { background: rgba(59,130,246,.1); color: #2563eb; }
.audit-row.audit-delete .audit-icon { background: rgba(239,68,68,.1); color: #dc2626; }
.audit-row.audit-login  .audit-icon { background: rgba(168,85,247,.1); color: #7c3aed; }
[data-bs-theme="dark"] .audit-row { border-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .audit-row:hover { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .audit-row .audit-actor { color: #f1f5f9; }
[data-bs-theme="dark"] .audit-row .audit-action { color: #9ca3af; }

/* EN. COMMISSION RATE CARD */
.commission-card {
    border-radius: 14px !important;
    padding: 1.25rem !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    transition: box-shadow .2s, transform .15s !important;
}
.commission-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
    transform: translateY(-2px) !important;
}
.commission-card .comm-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; }
.commission-card .comm-value { font-size: 2rem; font-weight: 800; color: #CC3826; line-height: 1; }
.commission-card .comm-type  { font-size: .75rem; color: #9ca3af; }
.commission-card .comm-icon  {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(204,56,38,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #CC3826; flex-shrink: 0;
}
[data-bs-theme="dark"] .commission-card { background: #1e2235 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .commission-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; }

/* EP. DARK MODE — Phase 18 global overrides */
[data-bs-theme="dark"] .notif-item .notif-text { color: #6b7280; }
[data-bs-theme="dark"] .notif-item .notif-time  { color: #4b5563; }
[data-bs-theme="dark"] .commission-card .comm-icon { background: rgba(204,56,38,.15); }

/* ============================================================
   PHASE 19 — UX AVANCÉE: CHAT + WIZARD + SEARCH + INVOICE
   Sections EQ → EY
   ============================================================ */

/* EQ. CHAT MESSAGE BUBBLES — admin/user conversation */
.chat-messages {
    display: flex; flex-direction: column; gap: .625rem;
    padding: 1rem; overflow-y: auto;
}
.chat-msg {
    display: flex; align-items: flex-end; gap: .5rem;
    max-width: 75%;
    animation: chatFadeIn .2s ease-out;
}
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; } }
.chat-msg.msg-in  { align-self: flex-start; }
.chat-msg.msg-out { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .msg-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.chat-msg .msg-bubble {
    border-radius: 16px; padding: .625rem .875rem;
    font-size: .8125rem; line-height: 1.5;
    position: relative; max-width: 100%;
    word-break: break-word;
}
.chat-msg.msg-in  .msg-bubble {
    background: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 4px;
}
.chat-msg.msg-out .msg-bubble {
    background: #CC3826;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg .msg-time { font-size: .625rem; color: #9ca3af; margin-top: .2rem; text-align: right; }
.chat-msg.msg-out .msg-time { text-align: left; }
/* Chat input bar */
.chat-input-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid rgba(0,0,0,.07);
    background: #fff;
}
.chat-input-bar .form-control {
    border-radius: 99px !important;
    background: #f3f4f6 !important;
    border-color: transparent !important;
    padding: .5rem 1rem !important;
    font-size: .875rem !important;
}
.chat-input-bar .btn-send {
    width: 38px; height: 38px; border-radius: 50% !important;
    background: #CC3826 !important; color: #fff !important;
    border: none !important; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform .15s, box-shadow .15s !important;
}
.chat-input-bar .btn-send:hover { transform: scale(1.08) !important; box-shadow: 0 4px 12px rgba(204,56,38,.35) !important; }
[data-bs-theme="dark"] .chat-msg.msg-in .msg-bubble { background: #2d3352; color: #e2e8f0; }
[data-bs-theme="dark"] .chat-input-bar { background: #1e2235; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .chat-input-bar .form-control { background: #252a3d !important; color: #e2e8f0 !important; }

/* ER. MULTI-STEP WIZARD — horizontal progress stepper */
.wizard-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 2rem; padding: 0 1rem;
}
.wizard-step {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; position: relative; z-index: 1;
}
.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute; top: 18px; left: 50%; width: 100%; height: 2px;
    background: #dee2e6; z-index: 0; transition: background .4s ease;
}
.wizard-step.wz-done::after { background: #CC3826; }
.wizard-num {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 700;
    border: 2px solid #dee2e6; background: #fff; color: #6c757d;
    position: relative; z-index: 2;
    transition: all .25s ease;
}
.wizard-step.wz-done   .wizard-num { background: #CC3826; border-color: #CC3826; color: #fff; }
.wizard-step.wz-active .wizard-num {
    background: #fff; border-color: #CC3826; color: #CC3826;
    box-shadow: 0 0 0 4px rgba(204,56,38,.15);
}
.wizard-label {
    font-size: .6875rem; margin-top: .4rem; font-weight: 500; color: #6c757d;
    white-space: nowrap; text-align: center;
}
.wizard-step.wz-active .wizard-label { color: #CC3826; font-weight: 700; }
.wizard-step.wz-done   .wizard-label { color: #16a34a; }
@media (max-width: 480px) {
    .wizard-label { display: none; }
    .wizard-steps { padding: 0; }
}
[data-bs-theme="dark"] .wizard-num { background: #1e2235; border-color: #2d3352; }
[data-bs-theme="dark"] .wizard-step::after { background: #2d3352; }
[data-bs-theme="dark"] .wizard-step.wz-active .wizard-num { background: #1e2235; }

/* ES. SEARCH DROPDOWN — autocomplete suggestions */
.search-dropdown-wrap { position: relative; }
.search-suggestions {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: 1060;
    overflow: hidden;
    animation: suggestDrop .15s ease-out;
}
@keyframes suggestDrop { from { opacity: 0; transform: translateY(-4px); } }
.search-suggestion-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 1rem;
    cursor: pointer; font-size: .875rem;
    transition: background .1s;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item:hover { background: rgba(204,56,38,.05); }
.search-suggestion-item .sug-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; flex-shrink: 0;
    background: rgba(204,56,38,.08); color: #CC3826;
}
.search-suggestion-item .sug-label { font-weight: 500; }
.search-suggestion-item .sug-sub   { font-size: .75rem; color: #9ca3af; }
.search-suggestion-item mark { background: rgba(204,56,38,.15); color: #CC3826; border-radius: 2px; padding: 0 2px; }
.search-no-results {
    padding: 1.5rem; text-align: center;
    font-size: .875rem; color: #6c757d;
}
.search-no-results i { font-size: 1.75rem; display: block; margin-bottom: .5rem; opacity: .4; }
[data-bs-theme="dark"] .search-suggestions { background: #1e2235; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .search-suggestion-item:hover { background: rgba(204,56,38,.1); }
[data-bs-theme="dark"] .search-suggestion-item { border-color: rgba(255,255,255,.04); }

/* ET. QUICK FILTER CHIP ROW — horizontal scroll on mobile */
.filter-chip-row {
    display: flex; flex-wrap: wrap; gap: .375rem;
    align-items: center; padding: .25rem 0;
}
@media (max-width: 576px) {
    .filter-chip-row {
        flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .filter-chip-row::-webkit-scrollbar { display: none; }
}
.fchip {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 99px; padding: .3rem .75rem;
    font-size: .75rem; font-weight: 600; white-space: nowrap;
    border: 1.5px solid #dee2e6; background: #fff; color: #374151;
    cursor: pointer; transition: all .15s ease;
}
.fchip:hover   { border-color: #CC3826; color: #CC3826; background: rgba(204,56,38,.04); }
.fchip.fchip-active { border-color: #CC3826; color: #fff; background: #CC3826; }
.fchip.fchip-active .bx-x { opacity: .8; }
[data-bs-theme="dark"] .fchip { background: #1e2235; border-color: #2d3352; color: #9ca3af; }
[data-bs-theme="dark"] .fchip:hover { border-color: #CC3826; color: #ff6b5a; }
[data-bs-theme="dark"] .fchip.fchip-active { color: #fff; }

/* EU. IMAGE CARD GRID — driver photos / vehicle gallery */
.img-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}
.img-card {
    border-radius: 12px; overflow: hidden; position: relative;
    aspect-ratio: 4/3; cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s, transform .15s, box-shadow .2s !important;
}
.img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-card:hover { border-color: #CC3826; transform: scale(1.02); box-shadow: 0 6px 20px rgba(204,56,38,.2) !important; }
.img-card.img-selected { border-color: #CC3826 !important; }
.img-card.img-selected::after {
    content: '✓';
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #CC3826; color: #fff;
    font-size: .75rem; display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.img-card .img-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, transparent 100%);
    color: #fff; font-size: .6875rem; padding: .4rem .5rem;
    font-weight: 500;
}
@media (max-width: 400px) { .img-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* EV. INVOICE RECEIPT — premium print-ready layout */
.invoice-wrap {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    padding: 2.5rem;
    max-width: 820px;
    margin: 0 auto;
}
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.invoice-brand .inv-logo { font-size: 1.5rem; font-weight: 800; color: #CC3826; }
.invoice-brand .inv-sub  { font-size: .75rem; color: #6c757d; margin-top: .25rem; }
.invoice-meta { text-align: right; }
.invoice-meta .inv-num   { font-size: 1rem; font-weight: 700; color: #111827; }
.invoice-meta .inv-date  { font-size: .75rem; color: #6c757d; }
.invoice-status-bar {
    background: rgba(204,56,38,.06);
    border-left: 4px solid #CC3826;
    border-radius: 0 8px 8px 0;
    padding: .625rem 1rem;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.75rem;
    font-size: .875rem;
}
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.75rem; }
.invoice-party .party-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #CC3826; margin-bottom: .4rem; }
.invoice-party .party-name  { font-weight: 700; font-size: .9375rem; }
.invoice-party .party-info  { font-size: .8125rem; color: #6c757d; line-height: 1.6; }
.invoice-totals { border-top: 2px solid rgba(204,56,38,.15); padding-top: 1rem; margin-top: 1rem; }
.invoice-total-row { display: flex; justify-content: space-between; font-size: .875rem; padding: .25rem 0; }
.invoice-total-row.grand-total { font-size: 1.125rem; font-weight: 800; color: #CC3826; border-top: 1px dashed rgba(204,56,38,.3); padding-top: .5rem; margin-top: .25rem; }
@media print {
    .invoice-wrap { border: none; padding: 1.5rem; border-radius: 0; max-width: 100%; }
    .invoice-header, .invoice-parties { page-break-inside: avoid; }
}
@media (max-width: 575px) {
    .invoice-wrap { padding: 1.25rem; }
    .invoice-header { flex-direction: column; gap: .75rem; }
    .invoice-meta { text-align: left; }
    .invoice-parties { grid-template-columns: 1fr; }
}
[data-bs-theme="dark"] .invoice-wrap { background: #1e2235; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .invoice-party .party-name { color: #f1f5f9; }
[data-bs-theme="dark"] .invoice-status-bar { background: rgba(204,56,38,.1); }

/* EW. DARK MODE TOGGLE — styled switch button */
.theme-toggle {
    width: 44px; height: 24px; border-radius: 99px;
    background: #dee2e6; border: none; cursor: pointer; padding: 0;
    position: relative; transition: background .25s ease;
    flex-shrink: 0;
}
.theme-toggle::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.theme-toggle.active { background: #CC3826; }
.theme-toggle.active::after { transform: translateX(20px); }

/* EX. TOPBAR QUICK STATS — mini numbers in topbar */
.topbar-stats {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0 .75rem;
    border-left: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
}
.topbar-stat { text-align: center; }
.topbar-stat .ts-value { font-size: .8125rem; font-weight: 800; color: #CC3826; line-height: 1; }
.topbar-stat .ts-label { font-size: .5625rem; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
@media (max-width: 991px) { .topbar-stats { display: none; } }
[data-bs-theme="dark"] .topbar-stats { border-color: rgba(255,255,255,.06); }

/* EY. DARK MODE — Phase 19 */
[data-bs-theme="dark"] .chat-msg.msg-out .msg-bubble { background: #9a1f12; }
[data-bs-theme="dark"] .theme-toggle { background: #2d3352; }
[data-bs-theme="dark"] .fchip { background: #252a3d; }
[data-bs-theme="dark"] .img-card { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .img-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4) !important; }

/* ============================================================
   PHASE 20 — SOFT UI EVOLUTION: UPLOAD + EDIT + TAGS + QR + UTILS
   Sections EZ → FI  |  WCAG AA+ | Soft UI Evolution
   ============================================================ */

/* EZ. DRAG & DROP FILE UPLOAD ZONE */
.dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 16px;
    background: #fafbfc;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease !important;
    position: relative;
}
.dropzone:hover,
.dropzone.dz-hover {
    border-color: #CC3826 !important;
    background: rgba(204,56,38,.03) !important;
}
.dropzone.dz-dragover {
    border-color: #CC3826 !important;
    background: rgba(204,56,38,.06) !important;
    box-shadow: 0 0 0 4px rgba(204,56,38,.1) !important;
}
.dropzone .dz-icon {
    font-size: 2.5rem; color: #9ca3af;
    margin-bottom: .75rem; display: block;
    transition: color .2s, transform .2s;
}
.dropzone:hover .dz-icon,
.dropzone.dz-hover .dz-icon  { color: #CC3826; transform: translateY(-3px); }
.dropzone .dz-label { font-weight: 600; font-size: .9375rem; color: #374151; }
.dropzone .dz-hint  { font-size: .75rem; color: #9ca3af; margin-top: .3rem; }
.dropzone .dz-link  { color: #CC3826; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* Uploaded file list */
.dz-file-list { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-direction: column; gap: .375rem; }
.dz-file-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .75rem;
    background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.2);
    border-radius: 8px; font-size: .8125rem;
}
.dz-file-item i { color: #16a34a; font-size: 1rem; }
.dz-file-item .dz-filename { flex: 1; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.dz-file-item .dz-remove { cursor: pointer; color: #9ca3af; font-size: 1rem; transition: color .15s; }
.dz-file-item .dz-remove:hover { color: #ef4444; }
[data-bs-theme="dark"] .dropzone { background: #1a1d2e; border-color: #2d3352; }
[data-bs-theme="dark"] .dropzone .dz-label { color: #e2e8f0; }
[data-bs-theme="dark"] .dz-file-item { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); }

/* FA. INLINE EDITABLE FIELD — click to edit */
.editable-field {
    display: inline-flex; align-items: center; gap: .35rem;
    cursor: pointer; border-radius: 6px;
    padding: .15rem .4rem;
    transition: background .15s;
}
.editable-field:hover { background: rgba(204,56,38,.07); }
.editable-field .ef-value { font-weight: 600; }
.editable-field .ef-icon { font-size: .875rem; color: #9ca3af; opacity: 0; transition: opacity .15s; }
.editable-field:hover .ef-icon { opacity: 1; color: #CC3826; }
/* When editing */
.editable-field.editing { background: transparent; cursor: default; }
.editable-field.editing input {
    border: none; outline: none;
    border-bottom: 2px solid #CC3826;
    background: transparent; font-weight: 600;
    font-family: inherit; font-size: inherit;
    color: inherit; padding: 0; width: auto; min-width: 60px;
}
[data-bs-theme="dark"] .editable-field:hover { background: rgba(204,56,38,.12); }

/* FB. TAG / CHIP INPUT */
.tag-input-wrap {
    display: flex; flex-wrap: wrap; gap: .375rem; align-items: center;
    padding: .5rem .75rem;
    border: 1.5px solid #dee2e6; border-radius: 10px;
    background: #fff; cursor: text;
    transition: border-color .2s, box-shadow .2s;
    min-height: 44px;
}
.tag-input-wrap:focus-within {
    border-color: #CC3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.12) !important;
}
.tag-input-wrap .tag-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(204,56,38,.1); color: #CC3826;
    border-radius: 99px; padding: .15rem .55rem;
    font-size: .75rem; font-weight: 600;
}
.tag-input-wrap .tag-pill .tag-x {
    cursor: pointer; opacity: .7; font-size: .875rem; line-height: 1;
    transition: opacity .15s;
}
.tag-input-wrap .tag-pill .tag-x:hover { opacity: 1; }
.tag-input-wrap input {
    border: none; outline: none; background: transparent;
    font-size: .875rem; min-width: 80px; flex: 1;
    font-family: inherit; color: inherit;
}
[data-bs-theme="dark"] .tag-input-wrap { background: #1e2235; border-color: #2d3352; }
[data-bs-theme="dark"] .tag-input-wrap input { color: #e2e8f0; }

/* FC. CURRENCY & NUMBER DISPLAY HELPERS */
.num-positive { color: #16a34a !important; font-weight: 700; }
.num-negative { color: #dc2626 !important; font-weight: 700; }
.num-neutral  { color: #6c757d !important; }
.num-large    { font-size: 1.75rem !important; font-weight: 800 !important; line-height: 1; }
.num-xlarge   { font-size: 2.25rem !important; font-weight: 800 !important; line-height: 1; }
.currency-sym { font-size: .7em; vertical-align: super; font-weight: 600; }
.trend-up   { color: #16a34a; display: inline-flex; align-items: center; gap: .2rem; font-size: .8125rem; font-weight: 600; }
.trend-down { color: #dc2626; display: inline-flex; align-items: center; gap: .2rem; font-size: .8125rem; font-weight: 600; }
.trend-up::before   { content: '▲'; font-size: .65em; }
.trend-down::before { content: '▼'; font-size: .65em; }

/* FD. QR CODE CARD — app download promotion */
.qr-card {
    border-radius: 20px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: linear-gradient(135deg, #fff 0%, #fef9f9 100%) !important;
    padding: 1.75rem !important;
    text-align: center;
    position: relative; overflow: hidden;
}
.qr-card::before {
    content: '';
    position: absolute; bottom: -30px; right: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(204,56,38,.06);
}
.qr-card .qr-img {
    width: 140px; height: 140px;
    border-radius: 12px;
    border: 3px solid rgba(204,56,38,.15);
    margin: 0 auto .875rem; display: block;
    padding: 8px; background: #fff;
}
.qr-card .qr-title { font-weight: 700; font-size: .9375rem; margin-bottom: .25rem; }
.qr-card .qr-desc  { font-size: .75rem; color: #6c757d; line-height: 1.5; }
.qr-card .qr-stores { display: flex; gap: .5rem; justify-content: center; margin-top: .875rem; flex-wrap: wrap; }
.qr-card .qr-store-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1.5px solid rgba(0,0,0,.12); border-radius: 8px;
    padding: .375rem .75rem; font-size: .75rem; font-weight: 600;
    color: #111827; background: #fff; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.qr-card .qr-store-btn:hover { border-color: #CC3826; box-shadow: 0 2px 8px rgba(204,56,38,.15); }
.qr-card .qr-store-btn i { font-size: 1rem; }
[data-bs-theme="dark"] .qr-card { background: linear-gradient(135deg, #1e2235 0%, #1c1a2e 100%) !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .qr-card .qr-store-btn { background: #252a3d; border-color: rgba(255,255,255,.1); color: #e2e8f0; }

/* FE. EXPORT PROGRESS — loading state for data export */
.export-progress-wrap { position: relative; }
.export-progress-wrap .btn[data-exporting="true"] {
    pointer-events: none; opacity: .8;
}
.export-progress-wrap .btn[data-exporting="true"]::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    height: 3px; border-radius: 0 0 8px 8px;
    background: rgba(255,255,255,.6);
    animation: exportProgress 2s ease-in-out infinite;
}
@keyframes exportProgress {
    0%   { width: 0; }
    50%  { width: 70%; }
    80%  { width: 90%; }
    100% { width: 0; opacity: 0; }
}
/* Inline export status text */
.export-status {
    font-size: .75rem; color: #6c757d;
    display: flex; align-items: center; gap: .35rem;
    margin-top: .375rem;
}
.export-status.exporting { color: #CC3826; }
.export-status.done      { color: #16a34a; }
.export-status i { font-size: .875rem; }

/* FF. SIDEBAR NAV GROUP — collapsible section */
.sidebar-nav-group > .nav-group-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1.5rem; cursor: pointer;
    user-select: none;
}
.sidebar-nav-group > .nav-group-toggle .nav-group-arrow {
    font-size: .75rem; color: #9ca3af;
    transition: transform .2s ease;
}
.sidebar-nav-group.open > .nav-group-toggle .nav-group-arrow { transform: rotate(180deg); }
.sidebar-nav-group > .nav-group-items {
    overflow: hidden; max-height: 0;
    transition: max-height .3s ease;
}
.sidebar-nav-group.open > .nav-group-items { max-height: 500px; }
@media (prefers-reduced-motion: reduce) {
    .sidebar-nav-group > .nav-group-items { transition: none; }
}

/* FG. MOBILE TABLE SWIPE HINT */
.table-swipe-hint {
    display: none;
    align-items: center; gap: .375rem;
    font-size: .6875rem; color: #9ca3af;
    padding: .25rem 0 .375rem;
    justify-content: center;
    animation: swipeHint 2.5s ease-in-out infinite;
}
@keyframes swipeHint {
    0%,100% { opacity: .5; transform: translateX(0); }
    50%      { opacity: 1;  transform: translateX(4px); }
}
@media (max-width: 767px) { .table-swipe-hint { display: flex; } }
@media (prefers-reduced-motion: reduce) { .table-swipe-hint { animation: none; opacity: .6; } }

/* FH. SOFT UI EVOLUTION — elevated button variant */
.btn-soft-elev {
    background: #fff !important;
    border: 1.5px solid rgba(204,56,38,.2) !important;
    color: #CC3826 !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.1), inset 0 1px 0 rgba(255,255,255,.8) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: box-shadow .2s, transform .15s, border-color .15s !important;
}
.btn-soft-elev:hover {
    box-shadow: 0 6px 20px rgba(204,56,38,.2), inset 0 1px 0 rgba(255,255,255,.9) !important;
    border-color: rgba(204,56,38,.4) !important;
    transform: translateY(-1px) !important;
    color: #CC3826 !important;
}
.btn-soft-elev:active { transform: translateY(0) !important; box-shadow: 0 1px 4px rgba(204,56,38,.15) !important; }
[data-bs-theme="dark"] .btn-soft-elev {
    background: #1e2235 !important;
    border-color: rgba(204,56,38,.3) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

/* FI. DARK MODE — Phase 20 */
[data-bs-theme="dark"] .dropzone.dz-hover    { background: rgba(204,56,38,.08) !important; }
[data-bs-theme="dark"] .dropzone.dz-dragover { background: rgba(204,56,38,.12) !important; }
[data-bs-theme="dark"] .tag-input-wrap .tag-pill { background: rgba(204,56,38,.2); }
[data-bs-theme="dark"] .num-positive { color: #4ade80 !important; }
[data-bs-theme="dark"] .num-negative { color: #f87171 !important; }
[data-bs-theme="dark"] .trend-up   { color: #4ade80; }
[data-bs-theme="dark"] .trend-down { color: #f87171; }

/* ============================================================
   PHASE 21 — VTC HAUTE-VALEUR: RATING + TIMELINE + PROGRESS + FLEET
   Sections FJ → FR  |  Bento Grid + Data-Dense
   ============================================================ */

/* FJ. STAR RATING DISPLAY — driver/user ratings */
.star-rating {
    display: inline-flex; align-items: center; gap: .125rem;
    font-size: 1rem; line-height: 1;
}
.star-rating .star { color: #d1d5db; position: relative; display: inline-block; }
.star-rating .star.full  { color: #f59e0b; }
.star-rating .star.half::after {
    content: '★';
    position: absolute; left: 0; top: 0;
    width: 50%; overflow: hidden;
    color: #f59e0b;
}
.star-rating-score {
    font-weight: 800; font-size: .9375rem; color: #111827;
    margin-left: .375rem;
}
.star-rating-count { font-size: .75rem; color: #9ca3af; margin-left: .25rem; }
/* Rating bar breakdown */
.rating-bars { display: flex; flex-direction: column; gap: .3rem; }
.rating-bar-row { display: flex; align-items: center; gap: .625rem; font-size: .75rem; }
.rating-bar-row .rb-label { width: 14px; text-align: right; color: #6c757d; font-weight: 600; }
.rating-bar-row .rb-track {
    flex: 1; height: 6px; border-radius: 99px;
    background: #e9ecef; overflow: hidden;
}
.rating-bar-row .rb-fill {
    height: 100%; border-radius: 99px;
    background: #f59e0b;
    transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.rating-bar-row .rb-count { width: 28px; color: #6c757d; font-size: .6875rem; }
[data-bs-theme="dark"] .star-rating-score { color: #f1f5f9; }
[data-bs-theme="dark"] .rating-bar-row .rb-track { background: #2d3352; }

/* FK. RIDE HISTORY TIMELINE — vertical connected events */
.ride-timeline { position: relative; padding-left: 2rem; }
.ride-timeline::before {
    content: '';
    position: absolute; left: .625rem; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(180deg, #CC3826 0%, #dee2e6 100%);
}
.timeline-event {
    position: relative; padding-bottom: 1.25rem;
    animation: tEventIn .3s ease-out both;
}
@keyframes tEventIn { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .timeline-event { animation: none; } }
.timeline-event:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute; left: -1.625rem; top: .125rem;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .5rem; z-index: 1;
}
.timeline-dot.dot-current { background: #CC3826; box-shadow: 0 0 0 4px rgba(204,56,38,.2); }
.timeline-dot.dot-done     { background: #22c55e; }
.timeline-dot.dot-pending  { background: #dee2e6; }
.timeline-dot.dot-cancel   { background: #ef4444; }
.timeline-event .te-time   { font-size: .6875rem; color: #9ca3af; font-weight: 500; }
.timeline-event .te-title  { font-weight: 600; font-size: .875rem; color: #111827; margin: .1rem 0; }
.timeline-event .te-desc   { font-size: .8125rem; color: #6c757d; line-height: 1.5; }
[data-bs-theme="dark"] .timeline-dot { border-color: #1e2235; }
[data-bs-theme="dark"] .timeline-event .te-title { color: #f1f5f9; }
[data-bs-theme="dark"] .ride-timeline::before { background: linear-gradient(180deg, #CC3826 0%, #2d3352 100%); }

/* FL. CIRCULAR PROGRESS — donut completion indicator */
.progress-ring-wrap {
    display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
}
.progress-ring {
    position: relative; width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
}
.progress-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.34,1.56,.64,1); }
.progress-ring .ring-track  { stroke: #e9ecef; }
.progress-ring .ring-fill   { stroke: #CC3826; }
.progress-ring.ring-success .ring-fill { stroke: #22c55e; }
.progress-ring.ring-warning .ring-fill { stroke: #f59e0b; }
.progress-ring .ring-value  { font-size: .9375rem; font-weight: 800; color: #111827; z-index: 1; }
.progress-ring .ring-unit   { font-size: .625rem; color: #6c757d; }
.progress-ring-label { font-size: .75rem; font-weight: 500; color: #6c757d; text-align: center; }
[data-bs-theme="dark"] .progress-ring .ring-track { stroke: #2d3352; }
[data-bs-theme="dark"] .progress-ring .ring-value { color: #f1f5f9; }

/* FM. FLEET VEHICLE CARD — car status display */
.fleet-card {
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    padding: 1.25rem !important;
    transition: box-shadow .2s, transform .15s !important;
    cursor: pointer;
    position: relative; overflow: hidden;
}
.fleet-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
    transform: translateY(-2px) !important;
}
.fleet-card .fleet-plate {
    font-size: .6875rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: #CC3826;
    background: rgba(204,56,38,.08); border-radius: 6px;
    padding: .2rem .55rem; display: inline-block; margin-bottom: .625rem;
}
.fleet-card .fleet-model  { font-weight: 700; font-size: .9375rem; color: #111827; }
.fleet-card .fleet-type   { font-size: .75rem; color: #6c757d; }
.fleet-card .fleet-status { margin-top: .875rem; display: flex; align-items: center; justify-content: space-between; }
.fleet-card .fleet-img {
    width: 100%; height: 100px; object-fit: contain;
    margin: .625rem 0;
}
/* Fleet status colors */
.fleet-card.fleet-active  { border-top: 3px solid #22c55e !important; }
.fleet-card.fleet-idle    { border-top: 3px solid #f59e0b !important; }
.fleet-card.fleet-offline { border-top: 3px solid #9ca3af !important; }
.fleet-card.fleet-maintenance { border-top: 3px solid #ef4444 !important; }
/* Fleet grid */
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
[data-bs-theme="dark"] .fleet-card { background: #1e2235 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .fleet-card .fleet-model { color: #f1f5f9; }
[data-bs-theme="dark"] .fleet-card .fleet-plate { background: rgba(204,56,38,.15); }

/* FN. PRICE FARE CARD — trip cost breakdown */
.fare-card {
    border-radius: 14px !important;
    background: linear-gradient(135deg, #fff 0%, #fef9f9 100%) !important;
    border: 1px solid rgba(204,56,38,.1) !important;
    padding: 1.25rem !important;
}
.fare-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .4rem 0; font-size: .875rem;
    border-bottom: 1px dashed rgba(0,0,0,.06);
}
.fare-row:last-of-type { border-bottom: none; }
.fare-row .fare-label { color: #6c757d; }
.fare-row .fare-amount { font-weight: 600; color: #111827; }
.fare-total {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 2px solid rgba(204,56,38,.2); margin-top: .625rem; padding-top: .75rem;
    font-weight: 800; font-size: 1.0625rem;
}
.fare-total .fare-total-amount { color: #CC3826; font-size: 1.25rem; }
[data-bs-theme="dark"] .fare-card { background: linear-gradient(135deg, #1e2235 0%, #1c1a2e 100%) !important; border-color: rgba(204,56,38,.2) !important; }
[data-bs-theme="dark"] .fare-row { border-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fare-row .fare-amount { color: #f1f5f9; }

/* FO. PERMISSION MATRIX — role × action grid */
.perm-matrix { border-radius: 12px; overflow: hidden; }
.perm-matrix th { font-size: .6875rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; padding: .625rem .875rem !important; }
.perm-matrix td { text-align: center !important; padding: .5rem .875rem !important; vertical-align: middle !important; }
.perm-matrix td:first-child { text-align: left !important; font-weight: 600 !important; font-size: .8125rem !important; }
.perm-matrix .perm-check { font-size: 1.1rem; }
.perm-matrix .perm-yes   { color: #16a34a; }
.perm-matrix .perm-no    { color: #d1d5db; }
.perm-matrix .perm-edit  { color: #CC3826; cursor: pointer; transition: transform .15s; }
.perm-matrix .perm-edit:hover { transform: scale(1.2); }
/* Stripe rows */
.perm-matrix tbody tr:nth-child(even) td { background: rgba(0,0,0,.02); }
[data-bs-theme="dark"] .perm-matrix tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
[data-bs-theme="dark"] .perm-matrix .perm-no { color: #374151; }

/* FP. SKELETON SCREEN — VTC-specific placeholders */
@keyframes skelShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skel {
    background: linear-gradient(90deg, #f3f4f6 25%, #e9ecef 50%, #f3f4f6 75%);
    background-size: 800px 100%;
    animation: skelShimmer 1.4s infinite linear;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; background: #e9ecef; } }
.skel-text  { height: 14px; border-radius: 4px; }
.skel-title { height: 20px; border-radius: 4px; }
.skel-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skel-avatar-lg { width: 64px; height: 64px; border-radius: 50%; }
.skel-img   { width: 100%; height: 160px; border-radius: 10px; }
.skel-btn   { height: 36px; width: 100px; border-radius: 8px; }
.skel-kpi   { height: 80px; border-radius: 14px; }
/* Skeleton card template */
.skel-card  { background: #fff; border-radius: 14px; padding: 1.25rem; border: 1px solid rgba(0,0,0,.06); }
.skel-card .skel + .skel { margin-top: .625rem; }
[data-bs-theme="dark"] .skel { background: linear-gradient(90deg, #1e2235 25%, #252a3d 50%, #1e2235 75%); background-size: 800px 100%; }
[data-bs-theme="dark"] .skel-card { background: #1e2235; border-color: rgba(255,255,255,.04); }

/* FQ. COUNTDOWN TIMER — promo / surge */
.countdown-timer {
    display: inline-flex; align-items: center; gap: .25rem;
    font-variant-numeric: tabular-nums; font-weight: 800;
    font-size: 1.25rem; color: #CC3826;
    background: rgba(204,56,38,.08);
    padding: .4rem .875rem; border-radius: 10px;
    border: 1.5px solid rgba(204,56,38,.2);
    letter-spacing: .05em;
}
.countdown-timer .ct-sep { opacity: .5; animation: colonBlink 1s step-end infinite; }
@keyframes colonBlink { 0%,100% { opacity: .5; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .countdown-timer .ct-sep { animation: none; } }
.countdown-timer.ct-urgent { color: #dc2626; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
[data-bs-theme="dark"] .countdown-timer { background: rgba(204,56,38,.15); border-color: rgba(204,56,38,.35); }

/* FR. DARK MODE — Phase 21 */
[data-bs-theme="dark"] .fare-row .fare-label { color: #6b7280; }
[data-bs-theme="dark"] .fleet-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.4) !important; }
[data-bs-theme="dark"] .rating-bar-row .rb-label { color: #9ca3af; }
[data-bs-theme="dark"] .countdown-timer { background: rgba(204,56,38,.18); }

/* ============================================================
   PHASE 22 — TYPOGRAPHIE FLUIDE + ACCORDÉONS + FORMULAIRES AVANCÉS
   Sections FS → GA  |  WCAG AAA + font-display swap
   ============================================================ */

/* FS. FLUID TYPOGRAPHY — clamp-based responsive scale */
:root {
    --fs-xs:   clamp(.6875rem,  1vw,  .75rem);
    --fs-sm:   clamp(.75rem,    1.2vw, .875rem);
    --fs-base: clamp(.875rem,   1.5vw, 1rem);
    --fs-md:   clamp(1rem,      2vw,   1.125rem);
    --fs-lg:   clamp(1.125rem,  2.5vw, 1.375rem);
    --fs-xl:   clamp(1.375rem,  3vw,   1.75rem);
    --fs-2xl:  clamp(1.75rem,   4vw,   2.25rem);
    --fs-3xl:  clamp(2rem,      5vw,   3rem);
}
.fs-fluid-xs   { font-size: var(--fs-xs)   !important; }
.fs-fluid-sm   { font-size: var(--fs-sm)   !important; }
.fs-fluid-base { font-size: var(--fs-base) !important; }
.fs-fluid-lg   { font-size: var(--fs-lg)   !important; }
.fs-fluid-xl   { font-size: var(--fs-xl)   !important; }
.fs-fluid-2xl  { font-size: var(--fs-2xl)  !important; }
.fs-fluid-3xl  { font-size: var(--fs-3xl)  !important; }
/* Font-display swap fallback metrics (prevents CLS) */
@font-face {
    font-family: 'Inter';
    src: local('Arial'), local('Helvetica');
    font-display: swap;
    font-weight: 100 900;
    size-adjust: 94%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* FT. CARD WITH ACTIONS TOOLBAR — top-right icon group */
.card-with-actions { position: relative; }
.card-actions-bar {
    position: absolute; top: .875rem; right: .875rem;
    display: flex; align-items: center; gap: .25rem;
    opacity: 0; transition: opacity .2s ease;
}
.card-with-actions:hover .card-actions-bar { opacity: 1; }
.card-action-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .875rem; color: #6c757d;
    transition: background .15s, color .15s, box-shadow .15s;
    backdrop-filter: blur(4px);
}
.card-action-btn:hover { background: #fff; color: #CC3826; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
[data-bs-theme="dark"] .card-action-btn { background: rgba(30,34,53,.9); border-color: rgba(255,255,255,.08); color: #9ca3af; }
[data-bs-theme="dark"] .card-action-btn:hover { background: #252a3d; color: #ff6b5a; }

/* FU. PREMIUM ACCORDION — polished Bootstrap accordion override */
.accordion-premium .accordion-item {
    border: 1px solid rgba(0,0,0,.07) !important;
    border-radius: 12px !important;
    margin-bottom: .5rem !important;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.accordion-premium .accordion-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.07) !important;
}
.accordion-premium .accordion-button {
    font-weight: 600 !important;
    font-size: .9375rem !important;
    padding: 1rem 1.25rem !important;
    background: #fff !important;
    color: #111827 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.accordion-premium .accordion-button:not(.collapsed) {
    color: #CC3826 !important;
    background: rgba(204,56,38,.03) !important;
    border-bottom: 1px solid rgba(204,56,38,.1) !important;
    border-radius: 12px 12px 0 0 !important;
}
.accordion-premium .accordion-button::after {
    width: 20px; height: 20px;
    background-size: 20px;
    transition: transform .25s ease !important;
    filter: none;
}
.accordion-premium .accordion-button:not(.collapsed)::after {
    filter: hue-rotate(200deg) saturate(5) brightness(.8);
}
.accordion-premium .accordion-body {
    padding: 1rem 1.25rem !important;
    font-size: .875rem !important;
    line-height: 1.65 !important;
    color: #374151 !important;
}
.accordion-premium .accordion-collapse { border-radius: 0 0 12px 12px; }
[data-bs-theme="dark"] .accordion-premium .accordion-item { border-color: rgba(255,255,255,.06) !important; background: #1e2235; }
[data-bs-theme="dark"] .accordion-premium .accordion-button { background: #1e2235 !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .accordion-premium .accordion-button:not(.collapsed) { background: rgba(204,56,38,.08) !important; border-color: rgba(204,56,38,.2) !important; }
[data-bs-theme="dark"] .accordion-premium .accordion-body { color: #9ca3af !important; }

/* FV. MULTI-COLUMN FORM — responsive 2/3-col layout */
.form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.25rem; }
.form-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem 1.25rem; }
.form-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 1.25rem; }
@media (max-width: 767px) {
    .form-grid-2, .form-grid-3, .form-grid-2-1, .form-grid-1-2 {
        grid-template-columns: 1fr !important;
    }
}
.form-col-full { grid-column: 1 / -1; }
/* Floating label variant (always-up label) */
.form-floating-premium { position: relative; }
.form-floating-premium label {
    position: absolute; top: 0; left: .75rem;
    transform: translateY(.75rem); transform-origin: left top;
    font-size: .875rem; color: #9ca3af; pointer-events: none;
    transition: transform .18s ease, color .18s ease, font-size .18s ease;
    background: transparent; padding: 0 .25rem;
}
.form-floating-premium .form-control:focus ~ label,
.form-floating-premium .form-control:not(:placeholder-shown) ~ label {
    transform: translateY(-.55rem) scale(.78);
    color: #CC3826;
    background: #fff;
}
[data-bs-theme="dark"] .form-floating-premium .form-control:focus ~ label,
[data-bs-theme="dark"] .form-floating-premium .form-control:not(:placeholder-shown) ~ label {
    background: #1e2235;
}

/* FW. HORIZONTAL PROGRESS WITH % LABEL — multi-step */
.hprogress-wrap { margin-bottom: 1.75rem; }
.hprogress-track {
    height: 8px; border-radius: 99px;
    background: #e9ecef; position: relative; overflow: visible;
}
.hprogress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #CC3826, #f97316);
    position: relative; transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.hprogress-fill::after {
    content: attr(data-pct)'%';
    position: absolute; right: 0; top: -24px;
    transform: translateX(50%);
    background: #CC3826; color: #fff;
    font-size: .625rem; font-weight: 800;
    padding: .15rem .4rem; border-radius: 99px;
    white-space: nowrap;
}
.hprogress-steps {
    display: flex; justify-content: space-between;
    margin-top: .5rem; font-size: .6875rem; color: #9ca3af;
}
.hprogress-steps .hp-step.done   { color: #16a34a; font-weight: 600; }
.hprogress-steps .hp-step.active { color: #CC3826; font-weight: 700; }
[data-bs-theme="dark"] .hprogress-track { background: #2d3352; }

/* FX. ENHANCED BREADCRUMB — icon path + chevron */
.breadcrumb-enhanced {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    padding: .5rem 0; font-size: .8125rem;
}
.breadcrumb-enhanced .bc-item {
    display: flex; align-items: center; gap: .3rem; color: #6c757d;
}
.breadcrumb-enhanced .bc-item a {
    color: #6c757d; text-decoration: none;
    display: flex; align-items: center; gap: .25rem;
    transition: color .15s;
}
.breadcrumb-enhanced .bc-item a:hover { color: #CC3826; }
.breadcrumb-enhanced .bc-item.bc-active { color: #CC3826; font-weight: 600; }
.breadcrumb-enhanced .bc-sep {
    margin: 0 .375rem; color: #dee2e6; font-size: .75rem;
}
.breadcrumb-enhanced .bc-item i { font-size: .9375rem; }
[data-bs-theme="dark"] .breadcrumb-enhanced .bc-item a { color: #6b7280; }
[data-bs-theme="dark"] .breadcrumb-enhanced .bc-sep { color: #374151; }

/* FY. SIDE-BY-SIDE COMPARISON CARD */
.compare-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
}
.compare-panel { padding: 1.5rem; }
.compare-panel:first-child { border-right: 1px solid rgba(0,0,0,.08); }
.compare-panel .cp-label {
    font-size: .6875rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: .75rem;
    display: flex; align-items: center; gap: .35rem;
}
.compare-panel.cp-before .cp-label { color: #6c757d; }
.compare-panel.cp-after  .cp-label { color: #CC3826; }
.compare-panel.cp-after  { background: rgba(204,56,38,.02); }
@media (max-width: 575px) {
    .compare-wrap { grid-template-columns: 1fr; }
    .compare-panel:first-child { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
}
[data-bs-theme="dark"] .compare-wrap { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .compare-panel:first-child { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .compare-panel.cp-after { background: rgba(204,56,38,.06); }

/* FZ. CUSTOM TOOLTIP — premium popover-style */
.tooltip-premium { position: relative; display: inline-flex; cursor: help; }
.tooltip-premium .tt-content {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #111827; color: #f9fafb;
    font-size: .75rem; font-weight: 500; line-height: 1.4;
    padding: .5rem .75rem; border-radius: 8px;
    white-space: nowrap; max-width: 220px; white-space: normal;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    pointer-events: none;
    opacity: 0; transform: translateX(-50%) translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1100;
}
.tooltip-premium .tt-content::after {
    content: '';
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #111827;
}
.tooltip-premium:hover .tt-content {
    opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) { .tooltip-premium .tt-content { transition: none; } }
[data-bs-theme="dark"] .tooltip-premium .tt-content { background: #e2e8f0; color: #111827; }
[data-bs-theme="dark"] .tooltip-premium .tt-content::after { border-top-color: #e2e8f0; }

/* GA. DARK MODE — Phase 22 */
[data-bs-theme="dark"] .form-floating-premium label { color: #6b7280; }
[data-bs-theme="dark"] .hprogress-steps .hp-step { color: #6b7280; }
[data-bs-theme="dark"] .accordion-premium .accordion-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; }

/* ============================================================
   PHASE 23 — TABLES AVANCÉES + PAGINATION + ACTIONS RAPIDES
   Sections GB → GI  |  Keyboard nav + overflow + smooth scroll
   ============================================================ */

/* Global smooth scroll */
html { scroll-behavior: smooth; }

/* GB. TABLE COMPACT + STICKY FIRST COLUMN */
.table-compact th,
.table-compact td { padding: .375rem .75rem !important; font-size: .8125rem !important; }
.table-compact th { font-size: .6875rem !important; }

.table-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.table-scroll-x::-webkit-scrollbar { height: 4px; }
.table-scroll-x::-webkit-scrollbar-thumb { background: rgba(204,56,38,.3); border-radius: 99px; }
.table-scroll-x::-webkit-scrollbar-track { background: transparent; }

/* Sticky first column */
.table-sticky-col th:first-child,
.table-sticky-col td:first-child {
    position: sticky !important; left: 0; z-index: 2;
    background: inherit;
    box-shadow: 2px 0 6px rgba(0,0,0,.06);
}
.table-sticky-col thead th:first-child { z-index: 3; }

/* Row selection highlight */
.table > tbody > tr.row-selected > td {
    background: rgba(204,56,38,.06) !important;
    border-color: rgba(204,56,38,.15) !important;
}
.table > tbody > tr.row-selected > td:first-child {
    border-left: 3px solid #CC3826 !important;
}

/* Sortable column header */
.th-sortable {
    cursor: pointer; user-select: none;
    white-space: nowrap;
    transition: color .15s;
}
.th-sortable:hover { color: #CC3826; }
.th-sortable .sort-icon { font-size: .75rem; margin-left: .25rem; opacity: .4; }
.th-sortable.sort-asc  .sort-icon,
.th-sortable.sort-desc .sort-icon { opacity: 1; color: #CC3826; }

[data-bs-theme="dark"] .table-sticky-col th:first-child,
[data-bs-theme="dark"] .table-sticky-col td:first-child { box-shadow: 2px 0 6px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .table > tbody > tr.row-selected > td { background: rgba(204,56,38,.1) !important; }

/* GC. PAGINATION PREMIUM */
.pagination-premium {
    display: flex; align-items: center; gap: .25rem;
    flex-wrap: wrap;
}
.pagination-premium .page-link {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px !important;
    border: 1.5px solid #e9ecef !important;
    font-size: .8125rem; font-weight: 600; color: #374151;
    background: #fff;
    transition: all .15s ease !important;
    cursor: pointer;
}
.pagination-premium .page-link:hover {
    border-color: #CC3826 !important;
    color: #CC3826 !important;
    background: rgba(204,56,38,.05) !important;
}
.pagination-premium .page-item.active .page-link {
    background: #CC3826 !important;
    border-color: #CC3826 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(204,56,38,.35) !important;
}
.pagination-premium .page-item.disabled .page-link {
    opacity: .4; cursor: not-allowed; pointer-events: none;
}
/* Page size selector */
.page-size-select {
    border: 1.5px solid #e9ecef !important; border-radius: 10px !important;
    padding: .375rem .625rem !important; font-size: .8125rem !important;
    font-weight: 600 !important; color: #374151 !important;
    background: #fff !important; cursor: pointer;
    transition: border-color .15s !important;
}
.page-size-select:focus { border-color: #CC3826 !important; outline: none !important; }
[data-bs-theme="dark"] .pagination-premium .page-link { background: #1e2235; border-color: #2d3352 !important; color: #9ca3af; }
[data-bs-theme="dark"] .pagination-premium .page-link:hover { border-color: #CC3826 !important; color: #ff6b5a !important; background: rgba(204,56,38,.1) !important; }
[data-bs-theme="dark"] .page-size-select { background: #1e2235 !important; border-color: #2d3352 !important; color: #9ca3af !important; }

/* GD. GLOBAL SEARCH BAR — topbar premium search */
.global-search-bar {
    position: relative; max-width: 320px; width: 100%;
}
.global-search-bar .form-control {
    border-radius: 12px !important;
    border: 1.5px solid rgba(0,0,0,.08) !important;
    background: rgba(0,0,0,.03) !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    font-size: .875rem !important;
    transition: border-color .2s, box-shadow .2s, width .3s !important;
}
.global-search-bar .form-control:focus {
    border-color: #CC3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.12) !important;
    background: #fff !important;
}
.global-search-bar .search-icon {
    position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 1rem; pointer-events: none;
    transition: color .2s;
}
.global-search-bar .form-control:focus ~ .search-icon { color: #CC3826; }
.global-search-bar .search-clear {
    position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; cursor: pointer; font-size: 1rem;
    transition: color .15s;
}
.global-search-bar .search-clear:hover { color: #CC3826; }
/* Keyboard shortcut hint */
.global-search-bar .search-kbd {
    position: absolute; right: .625rem; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.06); border-radius: 4px;
    padding: .1rem .35rem; font-size: .625rem; font-weight: 700;
    color: #9ca3af; letter-spacing: .02em; pointer-events: none;
}
[data-bs-theme="dark"] .global-search-bar .form-control { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .global-search-bar .form-control:focus { background: #1e2235 !important; }
[data-bs-theme="dark"] .global-search-bar .search-kbd { background: rgba(255,255,255,.08); }

/* GE. QUICK ACTION RIBBON — page-level action bar */
.action-ribbon {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 1.25rem;
}
.action-ribbon .ribbon-title {
    font-weight: 700; font-size: 1.0625rem; color: #111827;
    margin-right: auto;
}
.action-ribbon .ribbon-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 10px !important;
    font-size: .8125rem !important; font-weight: 600 !important;
    padding: .5rem 1rem !important;
}
.action-ribbon .ribbon-count {
    display: inline-flex; align-items: center;
    background: rgba(204,56,38,.08); color: #CC3826;
    border-radius: 99px; padding: .15rem .55rem;
    font-size: .6875rem; font-weight: 700;
}
@media (max-width: 575px) {
    .action-ribbon { flex-direction: column; align-items: stretch; }
    .action-ribbon .ribbon-title { margin-right: 0; }
    .action-ribbon .ribbon-btn { width: 100%; justify-content: center; }
}
[data-bs-theme="dark"] .action-ribbon { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .action-ribbon .ribbon-title { color: #f1f5f9; }

/* GF. CONTEXT MENU — floating right-click style popup */
.context-menu {
    position: absolute; z-index: 1200;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
    padding: .375rem 0;
    min-width: 170px;
    animation: ctxMenuIn .12s ease-out;
}
@keyframes ctxMenuIn { from { opacity: 0; transform: scale(.95); } }
.context-menu-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem 1rem; font-size: .8125rem; cursor: pointer;
    color: #374151; transition: background .1s;
}
.context-menu-item:hover { background: rgba(204,56,38,.05); color: #CC3826; }
.context-menu-item i { font-size: .9375rem; width: 18px; text-align: center; }
.context-menu-sep { height: 1px; background: rgba(0,0,0,.06); margin: .25rem 0; }
.context-menu-item.ctx-danger { color: #dc2626; }
.context-menu-item.ctx-danger:hover { background: rgba(239,68,68,.06); color: #dc2626; }
[data-bs-theme="dark"] .context-menu { background: #1e2235; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .context-menu-item { color: #9ca3af; }
[data-bs-theme="dark"] .context-menu-item:hover { background: rgba(204,56,38,.1); color: #ff6b5a; }
[data-bs-theme="dark"] .context-menu-sep { background: rgba(255,255,255,.06); }

/* GG. PULL-TO-REFRESH HINT — mobile indicator */
.ptr-hint {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .625rem; font-size: .75rem; color: #9ca3af;
    transition: opacity .3s ease; opacity: 0;
}
.ptr-hint.ptr-visible { opacity: 1; }
.ptr-hint .ptr-icon { font-size: 1rem; animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr-hint .ptr-icon { animation: none; } }
@media (min-width: 992px) { .ptr-hint { display: none; } }

/* GH. PRINT ENHANCEMENTS — professional invoice/report print */
@media print {
    /* Hide non-essential elements */
    .sidebar, #sidebar-menu, #page-topbar, .page-title-box,
    .btn, .dropdown, .offcanvas, .modal, .fab,
    .table-action-bar, .pagination-premium, .action-ribbon,
    .filter-chip-row, .system-alert-banner,
    nav[aria-label="breadcrumb"] { display: none !important; }

    /* Full-width content */
    #page-content-wrapper,
    .main-content,
    .page-content { margin: 0 !important; padding: 0 !important; width: 100% !important; }

    /* Clean cards */
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; break-inside: avoid; }

    /* Force black text */
    body, .card, .table, p, h1, h2, h3, h4, h5, h6 { color: #000 !important; background: #fff !important; }
    a { color: #000 !important; text-decoration: none !important; }

    /* Table borders */
    .table th, .table td { border-color: #dee2e6 !important; }

    /* Show print-only elements */
    .print-only { display: block !important; }
    .no-print   { display: none !important; }

    /* Page margins */
    @page { margin: 1.5cm; }
}
.print-only { display: none; }

/* GI. DARK MODE — Phase 23 */
[data-bs-theme="dark"] .action-ribbon .ribbon-count { background: rgba(204,56,38,.2); }
[data-bs-theme="dark"] .global-search-bar .search-icon { color: #6b7280; }
[data-bs-theme="dark"] .ptr-hint { color: #6b7280; }
[data-bs-theme="dark"] .table-sticky-col thead th { background: #252a3d; }

/* ============================================================
   PHASE 24 — UTILITAIRES HAUTE FRÉQUENCE: IMAGE + LOCALE + API + ERREUR
   Sections GJ → GR  |  Performance + Accessibilité + i18n
   ============================================================ */

/* GJ. ASPECT-RATIO IMAGE CONTAINERS — lazy load placeholder */
.img-ratio { position: relative; overflow: hidden; display: block; }
.img-ratio img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity .3s ease, transform .4s ease;
}
.img-ratio img[loading="lazy"] { opacity: 0; }
.img-ratio img.loaded          { opacity: 1; }
.img-ratio:hover img           { transform: scale(1.04); }
/* Ratio helpers */
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
/* Blur-up placeholder */
.img-ratio .img-placeholder {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #f3f4f6 0%, #e9ecef 100%);
    display: flex; align-items: center; justify-content: center;
    color: #d1d5db; font-size: 2rem;
    transition: opacity .3s ease;
}
.img-ratio.loaded .img-placeholder { opacity: 0; pointer-events: none; }
[data-bs-theme="dark"] .img-ratio .img-placeholder { background: linear-gradient(135deg, #1e2235 0%, #252a3d 100%); color: #374151; }

/* GK. LANGUAGE / LOCALE SWITCHER */
.locale-switcher {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1.5px solid rgba(0,0,0,.08); border-radius: 10px;
    padding: .375rem .75rem; background: #fff; cursor: pointer;
    font-size: .8125rem; font-weight: 600; color: #374151;
    transition: border-color .15s, box-shadow .15s;
}
.locale-switcher:hover { border-color: #CC3826; box-shadow: 0 2px 8px rgba(204,56,38,.12); }
.locale-switcher .locale-flag { font-size: 1.125rem; line-height: 1; }
.locale-switcher .locale-code { text-transform: uppercase; letter-spacing: .04em; }
.locale-switcher .locale-arrow { font-size: .75rem; color: #9ca3af; transition: transform .2s; }
.locale-switcher.open .locale-arrow { transform: rotate(180deg); }
/* Locale dropdown */
.locale-dropdown {
    background: #fff; border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: .375rem 0; min-width: 160px;
    animation: ctxMenuIn .12s ease-out;
}
.locale-option {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem 1rem; font-size: .8125rem; cursor: pointer;
    color: #374151; transition: background .1s;
}
.locale-option:hover   { background: rgba(204,56,38,.05); color: #CC3826; }
.locale-option.active  { background: rgba(204,56,38,.08); color: #CC3826; font-weight: 600; }
.locale-option .loc-flag { font-size: 1.125rem; }
[data-bs-theme="dark"] .locale-switcher { background: #1e2235; border-color: rgba(255,255,255,.08); color: #9ca3af; }
[data-bs-theme="dark"] .locale-dropdown { background: #1e2235; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .locale-option   { color: #9ca3af; }
[data-bs-theme="dark"] .locale-option:hover { background: rgba(204,56,38,.1); color: #ff6b5a; }

/* GL. API KEY / SECRET DISPLAY — masked with copy */
.api-key-wrap {
    display: flex; align-items: center; gap: .5rem;
    background: #f8f9fa; border: 1.5px solid #dee2e6;
    border-radius: 10px; padding: .5rem .875rem;
}
.api-key-wrap .api-key-value {
    font-family: 'Courier New', monospace; font-size: .8125rem;
    flex: 1; color: #374151; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-key-wrap .api-key-value.masked { filter: blur(4px); user-select: none; }
.api-key-btn {
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 1rem; padding: .125rem;
    transition: color .15s;
    flex-shrink: 0;
}
.api-key-btn:hover { color: #CC3826; }
.api-key-btn.copied { color: #16a34a !important; }
/* Copy feedback */
.api-key-btn.copied::after {
    content: '✓'; font-size: .75rem; margin-left: .2rem; color: #16a34a;
}
[data-bs-theme="dark"] .api-key-wrap { background: #1e2235; border-color: #2d3352; }
[data-bs-theme="dark"] .api-key-wrap .api-key-value { color: #9ca3af; }

/* GM. ERROR PAGE — 404 / 500 layout */
.error-page {
    min-height: 70vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
}
.error-page .error-code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 900; line-height: 1;
    color: transparent;
    background: linear-gradient(135deg, #CC3826 0%, #f97316 50%, #CC3826 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .error-page .error-code { animation: none; color: #CC3826; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #CC3826; } }
.error-page .error-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: .75rem 0 .5rem; }
.error-page .error-desc  { font-size: .9375rem; color: #6c757d; max-width: 380px; line-height: 1.6; margin-bottom: 2rem; }
.error-page .error-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
[data-bs-theme="dark"] .error-page .error-title { color: #f1f5f9; }

/* GN. SESSION TIMEOUT BANNER */
.session-timeout-banner {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 1070;
    background: #1e293b; color: #f1f5f9;
    border-radius: 14px; padding: .875rem 1.25rem;
    display: flex; align-items: center; gap: .875rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    min-width: 320px; max-width: 480px;
    animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.session-timeout-banner .stb-icon { font-size: 1.375rem; color: #f59e0b; flex-shrink: 0; }
.session-timeout-banner .stb-text  { flex: 1; font-size: .875rem; line-height: 1.4; }
.session-timeout-banner .stb-time  { font-weight: 800; color: #f59e0b; }
.session-timeout-banner .stb-btn   {
    background: #CC3826; color: #fff; border: none;
    border-radius: 8px; padding: .375rem .875rem;
    font-size: .8125rem; font-weight: 700; cursor: pointer;
    flex-shrink: 0; transition: background .15s;
}
.session-timeout-banner .stb-btn:hover { background: #B32F1F; }
@media (max-width: 480px) {
    .session-timeout-banner { min-width: calc(100vw - 2rem); border-radius: 10px; }
}

/* GO. MULTI-SELECT DROPDOWN STYLING — Bootstrap multiselect override */
.form-select[multiple] {
    border-radius: 10px !important;
    border: 1.5px solid #dee2e6 !important;
    padding: .375rem !important;
    min-height: 120px;
    font-size: .875rem !important;
}
.form-select[multiple]:focus {
    border-color: #CC3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.12) !important;
}
.form-select[multiple] option {
    border-radius: 6px; padding: .35rem .625rem;
    margin: .125rem 0;
}
.form-select[multiple] option:checked {
    background: linear-gradient(0deg, #CC3826, #CC3826) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .form-select[multiple] { background: #1e2235 !important; border-color: #2d3352 !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .form-select[multiple] option { background: #1e2235 !important; }

/* GP. MAP PIN / MARKER — custom styled markers */
.map-marker {
    width: 32px; height: 32px; position: relative; cursor: pointer;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.map-marker:hover { transform: scale(1.2) translateY(-4px); }
.map-marker .marker-dot {
    width: 28px; height: 28px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #CC3826;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(204,56,38,.45);
    display: flex; align-items: center; justify-content: center;
}
.map-marker .marker-dot i { transform: rotate(45deg); color: #fff; font-size: .8125rem; }
.map-marker.marker-driver .marker-dot { background: #22c55e; box-shadow: 0 4px 12px rgba(34,197,94,.45); }
.map-marker.marker-pickup .marker-dot { background: #3b82f6; box-shadow: 0 4px 12px rgba(59,130,246,.45); }
.map-marker.marker-dropoff .marker-dot { background: #f59e0b; box-shadow: 0 4px 12px rgba(245,158,11,.45); }
.map-marker.marker-sos .marker-dot { background: #ef4444; box-shadow: 0 4px 12px rgba(239,68,68,.45); animation: sosPulse 1.5s infinite; }
/* Marker label */
.map-marker .marker-label {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color: #fff;
    font-size: .625rem; font-weight: 700; border-radius: 4px;
    padding: .15rem .4rem; white-space: nowrap; margin-top: .2rem;
    pointer-events: none;
}

/* GQ. COLOR SWATCH — palette display */
.color-swatch-group { display: flex; gap: .375rem; flex-wrap: wrap; align-items: center; }
.color-swatch {
    width: 28px; height: 28px; border-radius: 8px;
    border: 2px solid rgba(0,0,0,.1);
    cursor: pointer; position: relative;
    transition: transform .15s, box-shadow .15s;
    display: inline-block;
}
.color-swatch:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.color-swatch.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px currentColor;
}
.color-swatch-lg { width: 40px; height: 40px; border-radius: 10px; }
/* Color value tooltip */
.color-swatch::after {
    content: attr(data-color);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: #111827; color: #fff;
    font-size: .625rem; font-weight: 700; border-radius: 4px;
    padding: .15rem .4rem; white-space: nowrap;
    opacity: 0; transition: opacity .15s; pointer-events: none;
    font-family: monospace;
}
.color-swatch:hover::after { opacity: 1; }

/* GR. DARK MODE — Phase 24 */
[data-bs-theme="dark"] .locale-switcher .locale-arrow { color: #6b7280; }
[data-bs-theme="dark"] .error-page .error-desc { color: #6b7280; }
[data-bs-theme="dark"] .session-timeout-banner { background: #0f172a; }
[data-bs-theme="dark"] .color-swatch { border-color: rgba(255,255,255,.15); }
[data-bs-theme="dark"] .map-marker .marker-label { background: rgba(15,23,42,.9); }

/* ============================================================
   PHASE 25 — TOASTS + BULK ACTIONS + MASONRY + PAGE HERO
   Sections GS → HA  |  UX Feedback + Data Entry best practices
   ============================================================ */

/* GS. TOAST NOTIFICATION STACK — auto-dismiss bottom-right */
.toast-stack {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 1080;
    display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none;
}
.toast-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    padding: .875rem 1rem;
    display: flex; align-items: flex-start; gap: .75rem;
    min-width: 300px; max-width: 380px;
    pointer-events: all;
    animation: toastSlideIn .3s cubic-bezier(.34,1.56,.64,1);
    position: relative; overflow: hidden;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-item.toast-exit {
    animation: toastSlideOut .25s ease-in forwards;
}
@keyframes toastSlideOut {
    to { opacity: 0; transform: translateX(60px); max-height: 0; margin: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .toast-item, .toast-item.toast-exit { animation: none; }
}
/* Progress bar auto-dismiss */
.toast-item::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    height: 3px; border-radius: 0 0 14px 14px;
    background: currentColor; opacity: .3;
    animation: toastProgress var(--toast-duration, 4s) linear forwards;
}
@keyframes toastProgress { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .toast-item::after { animation: none; width: 0; } }
.toast-item .toast-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.toast-item .toast-body  { flex: 1; min-width: 0; }
.toast-item .toast-title { font-weight: 700; font-size: .875rem; color: #111827; }
.toast-item .toast-text  { font-size: .8125rem; color: #6c757d; margin-top: .125rem; line-height: 1.4; }
.toast-item .toast-close {
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 1rem; padding: 0; line-height: 1;
    flex-shrink: 0; transition: color .15s;
}
.toast-item .toast-close:hover { color: #374151; }
/* Semantic variants */
.toast-success { color: #16a34a; border-left: 4px solid #22c55e; }
.toast-error   { color: #dc2626; border-left: 4px solid #ef4444; }
.toast-warning { color: #b45309; border-left: 4px solid #f59e0b; }
.toast-info    { color: #0e7490; border-left: 4px solid #06b6d4; }
.toast-success .toast-icon { color: #22c55e; }
.toast-error   .toast-icon { color: #ef4444; }
.toast-warning .toast-icon { color: #f59e0b; }
.toast-info    .toast-icon { color: #06b6d4; }
@media (max-width: 480px) {
    .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; }
    .toast-item  { min-width: unset; max-width: 100%; }
}
[data-bs-theme="dark"] .toast-item { background: #1e2235; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .toast-item .toast-title { color: #f1f5f9; }
[data-bs-theme="dark"] .toast-item .toast-close { color: #6b7280; }
[data-bs-theme="dark"] .toast-item .toast-close:hover { color: #9ca3af; }

/* GT. BULK ACTION BAR — appears when table rows selected */
.bulk-action-bar {
    position: sticky; top: 70px; z-index: 100;
    background: #CC3826;
    border-radius: 12px;
    padding: .75rem 1.25rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 8px 24px rgba(204,56,38,.35);
    animation: bulkBarIn .25s cubic-bezier(.34,1.56,.64,1);
    margin-bottom: .75rem;
}
@keyframes bulkBarIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .bulk-action-bar { animation: none; } }
.bulk-action-bar .bulk-count {
    background: rgba(255,255,255,.2); border-radius: 99px;
    padding: .2rem .65rem; font-size: .75rem; font-weight: 800;
    letter-spacing: .04em;
}
.bulk-action-bar .bulk-label { font-size: .875rem; font-weight: 600; margin-right: auto; }
.bulk-action-bar .bulk-btn {
    background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 8px !important; padding: .375rem .875rem !important;
    font-size: .8125rem !important; font-weight: 600 !important;
    cursor: pointer; transition: background .15s, border-color .15s !important;
    display: inline-flex; align-items: center; gap: .35rem;
}
.bulk-action-bar .bulk-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }
.bulk-action-bar .bulk-btn.bulk-danger { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5); }
.bulk-action-bar .bulk-clear {
    background: none; border: none; color: rgba(255,255,255,.7);
    cursor: pointer; font-size: 1rem; padding: 0; line-height: 1;
    transition: color .15s;
}
.bulk-action-bar .bulk-clear:hover { color: #fff; }
@media (max-width: 575px) {
    .bulk-action-bar { flex-direction: column; align-items: stretch; }
    .bulk-action-bar .bulk-btn { justify-content: center; }
}

/* GU. MASONRY GRID — CSS columns for photo/card galleries */
.masonry-grid {
    columns: 4; column-gap: 1rem;
}
.masonry-grid .masonry-item {
    break-inside: avoid; margin-bottom: 1rem; display: block;
}
.masonry-grid .masonry-item img {
    width: 100%; border-radius: 12px; display: block;
    transition: transform .2s ease, box-shadow .2s ease;
}
.masonry-grid .masonry-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
@media (max-width: 1199px) { .masonry-grid { columns: 3; } }
@media (max-width: 767px)  { .masonry-grid { columns: 2; } }
@media (max-width: 400px)  { .masonry-grid { columns: 1; } }

/* GV. PAGE HERO HEADER — dashboard section intro */
.page-hero {
    border-radius: 20px !important;
    background: linear-gradient(135deg, #CC3826 0%, #8B1A10 60%, #5c1109 100%) !important;
    padding: 2rem 2.5rem !important;
    color: #fff !important;
    position: relative; overflow: hidden;
    margin-bottom: 1.5rem;
}
.page-hero::before {
    content: '';
    position: absolute; top: -60px; right: -60px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.page-hero::after {
    content: '';
    position: absolute; bottom: -80px; left: 20%;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.page-hero .hero-greeting {
    font-size: var(--fs-sm); opacity: .85; font-weight: 500;
    text-transform: uppercase; letter-spacing: .08em;
}
.page-hero .hero-title {
    font-size: var(--fs-2xl); font-weight: 800;
    line-height: 1.15; margin: .25rem 0 .5rem;
}
.page-hero .hero-subtitle { font-size: var(--fs-sm); opacity: .8; line-height: 1.5; }
.page-hero .hero-stats {
    display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.page-hero .hero-stat .hs-value {
    font-size: 1.75rem; font-weight: 800; line-height: 1;
}
.page-hero .hero-stat .hs-label {
    font-size: .6875rem; opacity: .7; text-transform: uppercase;
    letter-spacing: .06em; margin-top: .25rem;
}
.page-hero .hero-actions {
    position: absolute; top: 1.5rem; right: 1.5rem;
    display: flex; gap: .5rem; z-index: 1;
}
.page-hero .hero-action-btn {
    background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
    color: #fff; border-radius: 10px !important;
    padding: .4rem .875rem !important; font-size: .8125rem !important; font-weight: 600 !important;
    cursor: pointer; transition: background .15s, border-color .15s !important;
    display: inline-flex; align-items: center; gap: .35rem;
}
.page-hero .hero-action-btn:hover { background: rgba(255,255,255,.25); }
@media (max-width: 575px) {
    .page-hero { padding: 1.5rem !important; }
    .page-hero .hero-actions { position: static; margin-top: 1rem; }
    .page-hero .hero-stats { gap: 1.25rem; }
}

/* GW. KEYBOARD SHORTCUT BADGE */
.kbd-badge {
    display: inline-flex; align-items: center; gap: .2rem;
    font-family: 'Courier New', monospace;
}
.kbd-key {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f4f6; border: 1px solid #d1d5db;
    border-bottom: 2px solid #9ca3af;
    border-radius: 5px; padding: .1rem .375rem;
    font-size: .6875rem; font-weight: 700; color: #374151;
    line-height: 1.4; min-width: 22px;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.kbd-key.kbd-special { font-size: .625rem; padding: .1rem .5rem; }
[data-bs-theme="dark"] .kbd-key { background: #252a3d; border-color: #374151; border-bottom-color: #1f2937; color: #9ca3af; }

/* GX. WALKTHROUGH SPOTLIGHT — tutorial highlight overlay */
.spotlight-overlay {
    position: fixed; inset: 0; z-index: 1090;
    pointer-events: none;
}
.spotlight-overlay .spotlight-hole {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.6);
    transition: all .3s ease;
}
.spotlight-tooltip {
    position: absolute; z-index: 1091;
    background: #fff; border-radius: 14px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.2);
    max-width: 300px;
    animation: spotlightIn .25s ease-out;
    pointer-events: all;
}
@keyframes spotlightIn { from { opacity: 0; transform: scale(.95); } }
.spotlight-tooltip::before {
    content: ''; position: absolute;
    border: 8px solid transparent;
}
.spotlight-tooltip.tip-bottom::before {
    bottom: 100%; left: 1.5rem;
    border-bottom-color: #fff;
}
.spotlight-tooltip.tip-top::before {
    top: 100%; left: 1.5rem;
    border-top-color: #fff;
}
.spotlight-tooltip .spt-step   { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #CC3826; margin-bottom: .375rem; }
.spotlight-tooltip .spt-title  { font-weight: 700; font-size: 1rem; color: #111827; margin-bottom: .375rem; }
.spotlight-tooltip .spt-text   { font-size: .8125rem; color: #6c757d; line-height: 1.5; }
.spotlight-tooltip .spt-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.spotlight-tooltip .spt-dots   { display: flex; gap: .3rem; }
.spotlight-tooltip .spt-dot    { width: 6px; height: 6px; border-radius: 50%; background: #dee2e6; }
.spotlight-tooltip .spt-dot.active { background: #CC3826; width: 18px; border-radius: 99px; }

/* GY. DATE RANGE PICKER DISPLAY */
.date-range-display {
    display: inline-flex; align-items: center; gap: .625rem;
    border: 1.5px solid #dee2e6; border-radius: 10px;
    padding: .5rem 1rem; background: #fff; cursor: pointer;
    font-size: .875rem; color: #374151;
    transition: border-color .2s, box-shadow .2s;
}
.date-range-display:hover { border-color: #CC3826; box-shadow: 0 2px 8px rgba(204,56,38,.1); }
.date-range-display .dr-icon { color: #9ca3af; font-size: 1rem; }
.date-range-display .dr-date { font-weight: 600; }
.date-range-display .dr-sep  { color: #9ca3af; font-size: .75rem; }
.date-range-display .dr-clear {
    color: #9ca3af; cursor: pointer; font-size: .875rem;
    transition: color .15s; margin-left: .25rem;
}
.date-range-display .dr-clear:hover { color: #CC3826; }
/* Preset quick selectors */
.date-range-presets { display: flex; gap: .375rem; flex-wrap: wrap; }
.dr-preset {
    padding: .25rem .65rem; border-radius: 99px;
    font-size: .75rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid #dee2e6; background: #fff; color: #6c757d;
    transition: all .15s;
}
.dr-preset:hover   { border-color: #CC3826; color: #CC3826; }
.dr-preset.active  { background: #CC3826; border-color: #CC3826; color: #fff; }
[data-bs-theme="dark"] .date-range-display { background: #1e2235; border-color: #2d3352; color: #9ca3af; }
[data-bs-theme="dark"] .date-range-display:hover { border-color: #CC3826; }
[data-bs-theme="dark"] .dr-preset { background: #1e2235; border-color: #2d3352; color: #6b7280; }
[data-bs-theme="dark"] .dr-preset.active { background: #CC3826; border-color: #CC3826; color: #fff; }

/* GZ. DARK MODE — Phase 25 */
[data-bs-theme="dark"] .page-hero { box-shadow: 0 16px 48px rgba(0,0,0,.4) !important; }
[data-bs-theme="dark"] .bulk-action-bar { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .spotlight-tooltip { background: #1e2235; }
[data-bs-theme="dark"] .spotlight-tooltip .spt-title { color: #f1f5f9; }
[data-bs-theme="dark"] .spotlight-tooltip.tip-bottom::before { border-bottom-color: #1e2235; }
[data-bs-theme="dark"] .spotlight-tooltip.tip-top::before   { border-top-color:    #1e2235; }
[data-bs-theme="dark"] .masonry-grid .masonry-item:hover img { box-shadow: 0 8px 24px rgba(0,0,0,.5); }

/* HA. FINAL UTILITY TOKENS — spacing, radius, z-index scale */
:root {
    /* Spacing scale */
    --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
    --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
    /* Border radius scale */
    --radius-sm: 6px;   --radius-md: 10px;  --radius-lg: 14px;
    --radius-xl: 20px;  --radius-full: 9999px;
    /* Z-index scale */
    --z-dropdown: 1000; --z-sticky: 1020;   --z-fixed: 1030;
    --z-modal-bg: 1040; --z-modal: 1050;    --z-popover: 1060;
    --z-tooltip: 1070;  --z-toast: 1080;    --z-spotlight: 1090;
    /* Transition presets */
    --t-fast:   100ms ease;
    --t-base:   200ms ease;
    --t-slow:   350ms ease;
    --t-bounce: 300ms cubic-bezier(.34,1.56,.64,1);
    /* Brand gradient */
    --brand-gradient: linear-gradient(135deg, #CC3826 0%, #B32F1F 100%);
    --brand-glow: 0 8px 24px rgba(204,56,38,.35);
}

/* ============================================================
   PHASE 26 — POLISSAGE FINAL: SCROLL + EMBEDS + SPARKLINES + MODALS
   Sections HB → HJ  |  Responsive + Performance
   ============================================================ */

/* HB. BACK-TO-TOP BUTTON */
.back-to-top {
    position: fixed; bottom: 5rem; right: 1.5rem;
    width: 44px; height: 44px; border-radius: 50% !important;
    background: #CC3826 !important; color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.4) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem; cursor: pointer; z-index: 1040;
    opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, box-shadow .2s !important;
}
.back-to-top.visible {
    opacity: 1; pointer-events: all;
    transform: translateY(0);
}
.back-to-top:hover {
    box-shadow: 0 8px 24px rgba(204,56,38,.5) !important;
    transform: translateY(-2px) !important;
}
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .1s !important; } }

/* HC. RESPONSIVE VIDEO / EMBED CONTAINERS */
.embed-responsive {
    position: relative; display: block; width: 100%;
    overflow: hidden; border-radius: 12px;
}
.embed-responsive::before { content: ''; display: block; }
.embed-responsive-21x9::before { padding-top: calc(9/21 * 100%); }
.embed-responsive-16x9::before { padding-top: 56.25%; }
.embed-responsive-4x3::before  { padding-top: 75%; }
.embed-responsive-1x1::before  { padding-top: 100%; }
.embed-responsive iframe,
.embed-responsive video,
.embed-responsive embed,
.embed-responsive object {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: 0;
}
/* Video poster overlay — click to play */
.embed-responsive .play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); cursor: pointer;
    transition: background .2s;
}
.embed-responsive .play-overlay:hover { background: rgba(0,0,0,.5); }
.embed-responsive .play-btn {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.9); color: #CC3826;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.embed-responsive .play-overlay:hover .play-btn { transform: scale(1.1); }

/* HD. INLINE STATUS SWITCHER — table row toggle */
.status-switcher {
    display: inline-flex; border-radius: 99px;
    border: 1.5px solid #dee2e6; overflow: hidden;
    font-size: .6875rem; font-weight: 700;
}
.status-switcher .ss-opt {
    padding: .25rem .625rem; cursor: pointer;
    color: #6c757d; transition: background .15s, color .15s;
    white-space: nowrap;
}
.status-switcher .ss-opt:hover { background: rgba(0,0,0,.04); }
.status-switcher .ss-opt.active-green  { background: #22c55e; color: #fff; border-color: transparent; }
.status-switcher .ss-opt.active-red    { background: #ef4444; color: #fff; }
.status-switcher .ss-opt.active-orange { background: #f97316; color: #fff; }
.status-switcher .ss-opt.active-blue   { background: #3b82f6; color: #fff; }
[data-bs-theme="dark"] .status-switcher { border-color: #2d3352; }
[data-bs-theme="dark"] .status-switcher .ss-opt { color: #6b7280; }
[data-bs-theme="dark"] .status-switcher .ss-opt:hover { background: rgba(255,255,255,.04); }

/* HE. SPLIT BUTTON — primary action + dropdown arrow */
.btn-split {
    display: inline-flex; border-radius: 10px !important;
    overflow: hidden; box-shadow: 0 2px 8px rgba(204,56,38,.2);
}
.btn-split .split-main {
    border-radius: 0 !important; border-right: 1px solid rgba(255,255,255,.25) !important;
    flex: 1;
}
.btn-split .split-arrow {
    border-radius: 0 !important; padding: .375rem .625rem !important;
    border-left: none !important; flex-shrink: 0;
    transition: background .15s !important;
}
.btn-split .split-arrow:hover { background: rgba(0,0,0,.1) !important; }
.btn-split:hover { box-shadow: 0 4px 16px rgba(204,56,38,.35); }

/* HF. METRIC TREND SPARKLINE CARD */
.spark-card {
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    background: #fff !important;
    padding: 1rem 1.25rem !important;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.spark-card .spark-info .spark-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: #9ca3af;
}
.spark-card .spark-info .spark-value {
    font-size: 1.625rem; font-weight: 800; color: #111827;
    line-height: 1.1; margin: .2rem 0;
}
.spark-card .spark-info .spark-change {
    font-size: .75rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .2rem;
}
.spark-card .spark-info .spark-change.up   { color: #16a34a; }
.spark-card .spark-info .spark-change.down { color: #dc2626; }
/* Sparkline SVG area */
.spark-chart {
    width: 80px; height: 40px; flex-shrink: 0;
}
.spark-chart path.spark-line {
    fill: none; stroke: #CC3826; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.spark-chart path.spark-area {
    fill: url(#sparkGrad); opacity: .25;
}
.spark-chart.spark-green path.spark-line  { stroke: #22c55e; }
.spark-chart.spark-blue  path.spark-line  { stroke: #3b82f6; }
/* Spark grid 2-col */
.spark-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (max-width: 575px) { .spark-grid { grid-template-columns: 1fr; } }
[data-bs-theme="dark"] .spark-card { background: #1e2235 !important; border-color: rgba(255,255,255,.06) !important; }
[data-bs-theme="dark"] .spark-card .spark-info .spark-value { color: #f1f5f9; }

/* HG. RESPONSIVE MODAL — fullscreen on mobile */
@media (max-width: 575px) {
    .modal-fullscreen-mobile .modal-dialog {
        margin: 0 !important; max-width: 100% !important; height: 100%;
    }
    .modal-fullscreen-mobile .modal-content {
        border-radius: 0 !important; height: 100%;
        border: none !important;
    }
    .modal-fullscreen-mobile .modal-body {
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .modal-fullscreen-mobile .modal-header {
        position: sticky; top: 0; z-index: 10;
        background: #fff; border-bottom: 1px solid rgba(0,0,0,.08);
    }
    [data-bs-theme="dark"] .modal-fullscreen-mobile .modal-header { background: #1e2235; }
}
/* Modal premium header */
.modal-header-premium {
    background: linear-gradient(135deg, #CC3826 0%, #B32F1F 100%) !important;
    color: #fff !important; border-bottom: none !important;
    border-radius: calc(var(--bs-modal-border-radius) - 1px) calc(var(--bs-modal-border-radius) - 1px) 0 0 !important;
}
.modal-header-premium .modal-title { color: #fff !important; font-weight: 700 !important; }
.modal-header-premium .btn-close   { filter: invert(1) brightness(2) !important; }

/* HH. EXPANDABLE TABLE ROW — accordion in data table */
.table-expandable tr.tr-parent { cursor: pointer; }
.table-expandable tr.tr-parent td:first-child { position: relative; padding-left: 2rem !important; }
.table-expandable tr.tr-parent td:first-child::before {
    content: '▶';
    position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
    font-size: .5625rem; color: #9ca3af;
    transition: transform .2s ease;
}
.table-expandable tr.tr-parent.expanded td:first-child::before { transform: translateY(-50%) rotate(90deg); color: #CC3826; }
.table-expandable tr.tr-expand > td {
    padding: 0 !important; border-top: none !important;
}
.table-expandable tr.tr-expand .expand-content {
    padding: .875rem 1rem .875rem 2rem;
    background: rgba(204,56,38,.03);
    border-bottom: 2px solid rgba(204,56,38,.1);
    overflow: hidden;
    max-height: 0; transition: max-height .3s ease, padding .3s ease;
}
.table-expandable tr.tr-expand.open .expand-content { max-height: 500px; }
@media (prefers-reduced-motion: reduce) { .table-expandable tr.tr-expand .expand-content { transition: none; } }
[data-bs-theme="dark"] .table-expandable tr.tr-expand .expand-content { background: rgba(204,56,38,.06); border-color: rgba(204,56,38,.2); }

/* HI. PINNED SIDEBAR ITEMS */
.sidebar-pinned-section { padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: .25rem; }
.sidebar-pinned-label {
    font-size: .5625rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: #9ca3af; padding: 0 1.5rem;
    margin-bottom: .25rem; display: block;
}
.sidebar-pin-btn {
    opacity: 0; background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: .75rem; padding: .125rem;
    transition: opacity .15s, color .15s;
    position: absolute; right: .75rem;
}
#sidebar-menu li a:hover .sidebar-pin-btn { opacity: 1; }
.sidebar-pin-btn:hover { color: #CC3826; }
.sidebar-pin-btn.pinned { opacity: 1; color: #CC3826; }
[data-bs-theme="dark"] .sidebar-pinned-section { border-color: rgba(255,255,255,.05); }

/* HJ. DARK MODE — Phase 26 */
[data-bs-theme="dark"] .back-to-top { box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; }
[data-bs-theme="dark"] .spark-card .spark-change.up   { color: #4ade80; }
[data-bs-theme="dark"] .spark-card .spark-change.down { color: #f87171; }
[data-bs-theme="dark"] .btn-split { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .embed-responsive .play-btn { background: rgba(30,34,53,.9); color: #ff6b5a; }
[data-bs-theme="dark"] .table-expandable tr.tr-parent.expanded td:first-child::before { color: #ff6b5a; }

/* ============================================================
   PHASE 27 — ACCESSIBILITÉ WCAG 2.2 + RTL + iOS + CONTAINER QUERIES
   Sections HK → HS  |  CRITICAL accessibility compliance
   ============================================================ */

/* HK. SKIP NAVIGATION LINK — keyboard a11y first */
.skip-to-content {
    position: fixed; top: -100%; left: 1rem; z-index: 9999;
    background: #CC3826; color: #fff !important;
    font-weight: 700; font-size: .875rem;
    padding: .75rem 1.25rem; border-radius: 0 0 12px 12px;
    text-decoration: none; transition: top .2s ease;
    box-shadow: 0 4px 16px rgba(204,56,38,.4);
}
.skip-to-content:focus { top: 0; }

/* HL. FOCUS-VISIBLE — WCAG 2.2 enhanced focus rings */
/* Remove old outline-based focus, replace with focus-visible only */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 3px solid #CC3826 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* Exempt elements that have their own focus styles */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.25) !important;
    border-color: #CC3826 !important;
}
/* Button focus */
.btn:focus-visible {
    outline: 3px solid #CC3826 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
/* Nav link focus */
#sidebar-menu a:focus-visible {
    outline: 2px solid rgba(204,56,38,.7) !important;
    outline-offset: -2px !important;
    border-radius: 6px;
}
/* Dark mode focus ring — lighter for visibility */
[data-bs-theme="dark"] :focus-visible { outline-color: #ff6b5a !important; }

/* HM. HIGH CONTRAST MODE — forced-colors (Windows HC) */
@media (forced-colors: active) {
    .btn-primary, .btn-danger { forced-color-adjust: none; background: ButtonText; color: ButtonFace; border-color: ButtonText; }
    .card, .modal-content, .offcanvas { border: 1px solid ButtonText; }
    .status-dot, .driver-avail .avail-dot { border: 2px solid ButtonText; }
    .progress-bar, .hprogress-fill { forced-color-adjust: none; background: Highlight; }
    .badge, .BBadge { border: 1px solid ButtonText; }
    a:focus, button:focus { outline: 3px solid Highlight; }
}

/* HN. ARIA / SEMANTIC HELPERS — visual a11y utilities */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static; width: auto; height: auto;
    overflow: visible; clip: auto; white-space: normal;
}
/* ARIA live region — visually hidden but announced */
[aria-live] { speak: always; }
/* Required field indicator */
.required-star::after {
    content: ' *'; color: #CC3826; font-weight: 700; font-size: .9em;
}
/* Error message association */
.field-error {
    color: #dc2626; font-size: .75rem; font-weight: 500;
    margin-top: .25rem; display: flex; align-items: center; gap: .3rem;
}
.field-error i { font-size: .875rem; flex-shrink: 0; }
.field-success {
    color: #16a34a; font-size: .75rem; font-weight: 500;
    margin-top: .25rem; display: flex; align-items: center; gap: .3rem;
}

/* HO. IOS SAFE AREA — notch/home bar support */
:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-right:  env(safe-area-inset-right,  0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
}
/* Apply to fixed/sticky elements */
#page-topbar       { padding-top: var(--safe-top) !important; }
.fab               { bottom: calc(1.5rem + var(--safe-bottom)) !important; right: calc(1.5rem + var(--safe-right)) !important; }
.back-to-top       { bottom: calc(5rem + var(--safe-bottom)) !important; right: calc(1.5rem + var(--safe-right)) !important; }
.toast-stack       { bottom: calc(1.5rem + var(--safe-bottom)) !important; right: calc(1.5rem + var(--safe-right)) !important; }
.bulk-action-bar   { top: calc(70px + var(--safe-top)) !important; }
/* Sidebar left safe area */
.vertical-menu     { padding-left: var(--safe-left); }
/* Bottom-anchored offcanvas */
.offcanvas-bottom  { padding-bottom: var(--safe-bottom); }

/* HP. RTL SUPPORT — right-to-left languages (Arabic, Hebrew) */
[dir="rtl"] {
    /* Flip logical properties */
    --start: right;
    --end:   left;
}
[dir="rtl"] .sidebar-nav-group > .nav-group-toggle { flex-direction: row-reverse; }
[dir="rtl"] .notif-item.unread::before { left: auto; right: 0; border-radius: 4px 0 0 4px; }
[dir="rtl"] .trip-stepper .trip-step:not(:last-child)::after { left: auto; right: 50%; }
[dir="rtl"] .breadcrumb-enhanced { flex-direction: row-reverse; }
[dir="rtl"] .audit-row  { flex-direction: row-reverse; }
[dir="rtl"] .feed-item  { flex-direction: row-reverse; }
[dir="rtl"] .chat-msg.msg-in  { align-self: flex-end; flex-direction: row-reverse; }
[dir="rtl"] .chat-msg.msg-out { align-self: flex-start; flex-direction: row; }
[dir="rtl"] .chat-msg.msg-in  .msg-bubble { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
[dir="rtl"] .chat-msg.msg-out .msg-bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; }
[dir="rtl"] .toast-stack  { right: auto; left: 1.5rem; }
[dir="rtl"] .fab          { right: auto; left: 1.5rem; }
[dir="rtl"] .back-to-top  { right: auto; left: 1.5rem; }
[dir="rtl"] .settings-row { flex-direction: row-reverse; }
[dir="rtl"] .driver-avail { flex-direction: row-reverse; }
[dir="rtl"] .fare-row     { flex-direction: row-reverse; }
[dir="rtl"] .table-sticky-col th:first-child,
[dir="rtl"] .table-sticky-col td:first-child {
    left: auto; right: 0;
    box-shadow: -2px 0 6px rgba(0,0,0,.06);
}
[dir="rtl"] .bulk-action-bar { flex-direction: row-reverse; }
[dir="rtl"] .bulk-action-bar .bulk-label { margin-right: 0; margin-left: auto; }
[dir="rtl"] .api-key-wrap { flex-direction: row-reverse; }
[dir="rtl"] .star-rating  { flex-direction: row-reverse; }
[dir="rtl"] .form-grid-2-1 { grid-template-columns: 1fr 2fr; }
[dir="rtl"] .form-grid-1-2 { grid-template-columns: 2fr 1fr; }

/* HQ. CONTAINER QUERIES — component-level responsive */
@supports (container-type: inline-size) {
    .cq-wrap { container-type: inline-size; }

    /* KPI card — compact when container < 200px */
    @container (max-width: 200px) {
        .cq-wrap .kpi-card .kpi-value { font-size: 1.25rem !important; }
        .cq-wrap .kpi-card .kpi-label { font-size: .625rem !important; }
    }
    /* Stat card — stack vertically when narrow */
    @container (max-width: 160px) {
        .cq-wrap .stats-row .stat-card { flex-direction: column; text-align: center; gap: .5rem; }
    }
    /* Spark card — hide chart when too narrow */
    @container (max-width: 180px) {
        .cq-wrap .spark-card .spark-chart { display: none; }
    }
    /* Commission card — stack when narrow */
    @container (max-width: 200px) {
        .cq-wrap .commission-card { flex-direction: column; text-align: center; }
        .cq-wrap .commission-card .comm-icon { margin: 0 auto; }
    }
}

/* HR. SCROLL-DRIVEN REVEAL — progressive content appearance */
@supports (animation-timeline: scroll()) {
    .scroll-reveal {
        animation: revealFade linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }
    @keyframes revealFade {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
/* Fallback for non-supporting browsers */
@supports not (animation-timeline: scroll()) {
    .scroll-reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .scroll-reveal { animation: none !important; } }

/* HS. DARK MODE — Phase 27 */
[data-bs-theme="dark"] .skip-to-content { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .field-error   { color: #f87171; }
[data-bs-theme="dark"] .field-success { color: #4ade80; }
[data-bs-theme="dark"] [dir="rtl"] .table-sticky-col th:first-child,
[data-bs-theme="dark"] [dir="rtl"] .table-sticky-col td:first-child { box-shadow: -2px 0 6px rgba(0,0,0,.3); }

/* ============================================================
   PHASE 28 — @LAYER ARCHITECTURE · SYSTEM DARK · PWA · SUBGRID · @PROPERTY
   IA — IJ  (2026-04-07)
   ============================================================ */

/* IA. CSS @LAYER DECLARATION — specificity management architecture */
/*
   Declare layer order once at the top of any new CSS block.
   Lower layers = lower specificity. Utilities always win.
   External libs (Bootstrap) sit below our layers via unlayered specificity.
*/
@layer wappi.reset, wappi.tokens, wappi.base, wappi.layout,
       wappi.components, wappi.patterns, wappi.utilities, wappi.overrides;

/* Assign existing token variables to the tokens layer */
@layer wappi.tokens {
    :root {
        /* Brand anchor — single source of truth */
        --brand-h: 6;          /* hue  6° = Wappi red */
        --brand-s: 72%;
        --brand-l: 45%;
        --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
        --brand-hover: hsl(var(--brand-h) var(--brand-s) 38%);
        --brand-light: hsl(var(--brand-h) var(--brand-s) 94%);
        --brand-dark-bg: hsl(222 30% 12%);   /* sidebar dark */

        /* Semantic surface tokens */
        --surface-1: #ffffff;
        --surface-2: #f8f9fa;
        --surface-3: #f0f4f8;
        --surface-border: rgba(0,0,0,.08);

        /* Semantic text tokens */
        --text-primary:   #1a1f2e;
        --text-secondary: #4b5563;
        --text-muted:     #9ca3af;
        --text-inverse:   #ffffff;

        /* Semantic feedback tokens */
        --clr-success: #16a34a;
        --clr-warning: #d97706;
        --clr-danger:  #dc2626;
        --clr-info:    #0284c7;

        /* Layout tokens */
        --topbar-h:    60px;
        --sidebar-w:   250px;
        --sidebar-collapsed-w: 70px;
    }
}

/* IB. SYSTEM DARK MODE — auto-detect prefers-color-scheme */
/*
   Works alongside the manual [data-bs-theme="dark"] toggle.
   If no manual toggle is set, system preference drives dark mode.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --surface-1: #1e2130;
        --surface-2: #252a3d;
        --surface-3: #2d334a;
        --surface-border: rgba(255,255,255,.08);
        --text-primary:   #e8eaf0;
        --text-secondary: #a0a8bf;
        --text-muted:     #6b7280;
        --text-inverse:   #1a1f2e;
    }
    /* Bootstrap card/modal/table bg sync with system dark */
    :root:not([data-bs-theme="light"]) .card,
    :root:not([data-bs-theme="light"]) .modal-content {
        background-color: var(--surface-2) !important;
        border-color: var(--surface-border) !important;
        color: var(--text-primary) !important;
    }
    :root:not([data-bs-theme="light"]) .table {
        --bs-table-bg: var(--surface-2);
        --bs-table-striped-bg: var(--surface-3);
        color: var(--text-primary);
    }
    :root:not([data-bs-theme="light"]) #sidebar-menu .mm-active > a,
    :root:not([data-bs-theme="light"]) .vertical-menu        { background-color: var(--brand-dark-bg) !important; }
    :root:not([data-bs-theme="light"]) #page-topbar          { background-color: color-mix(in srgb, var(--brand-dark-bg) 80%, transparent) !important; }
}

/* IC. PWA OFFLINE INDICATOR — banner + icon badge */
.pwa-offline-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-fixed, 1040);
    background: #1f2937;
    color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .625rem 1.25rem;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .02em;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    border-top: 2px solid #374151;
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}
.pwa-offline-banner.visible { transform: translateY(0); }
.pwa-offline-banner .offline-dot {
    width: 8px; height: 8px;
    background: #f87171;
    border-radius: 50%;
    animation: offlinePulse 1.5s ease-in-out infinite;
}
@keyframes offlinePulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(.7); }
}
.pwa-offline-banner .offline-retry {
    margin-left: auto;
    background: transparent;
    border: 1px solid #6b7280;
    color: #d1d5db;
    padding: .25rem .75rem;
    border-radius: 4px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.pwa-offline-banner .offline-retry:hover { background: #374151; border-color: #9ca3af; }

/* PWA "Install app" prompt banner */
.pwa-install-banner {
    position: fixed;
    bottom: 1rem; left: 50%; transform: translateX(-50%);
    z-index: var(--z-fixed, 1040);
    background: var(--surface-1, #fff);
    border: 1px solid var(--surface-border, rgba(0,0,0,.1));
    border-radius: 14px;
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    min-width: 280px;
    max-width: 90vw;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.pwa-install-banner.visible { opacity: 1; pointer-events: auto; }
.pwa-install-banner .pwa-icon { width: 40px; height: 40px; border-radius: 10px; }
.pwa-install-banner .pwa-text { flex: 1; }
.pwa-install-banner .pwa-text strong { display: block; font-size: .875rem; color: var(--text-primary, #1a1f2e); }
.pwa-install-banner .pwa-text span   { font-size: .75rem; color: var(--text-secondary, #4b5563); }
.pwa-install-banner .pwa-install-btn {
    background: var(--brand, #CC3826);
    color: #fff;
    border: none;
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.pwa-install-banner .pwa-install-btn:hover { background: var(--brand-hover, #a82f1e); }
.pwa-install-banner .pwa-dismiss { background: none; border: none; color: var(--text-muted,#9ca3af); font-size: 1.125rem; cursor: pointer; padding: .25rem; line-height: 1; }

/* ID. CSS SUBGRID — nested alignment for complex cards */
@supports (grid-template-rows: subgrid) {
    /* KPI card group — align all labels & values across siblings */
    .kpi-subgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    .kpi-subgrid .stat-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4; /* icon / label / value / trend */
    }
    .kpi-subgrid .stat-card .stat-icon  { align-self: start; }
    .kpi-subgrid .stat-card .stat-label { align-self: end; font-size: .75rem; color: var(--text-secondary,#4b5563); }
    .kpi-subgrid .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; }
    .kpi-subgrid .stat-card .stat-trend { align-self: start; font-size: .75rem; }

    /* Feature comparison table — subgrid column alignment */
    .feature-compare-table {
        display: grid;
        grid-template-columns: 1fr repeat(3, 120px);
    }
    .feature-compare-table > * {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }

    /* Bento grid with subgrid row alignment */
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(auto, minmax(60px, auto));
        gap: 1rem;
    }
    .bento-card { border-radius: var(--radius-lg, 16px); overflow: hidden; }
    .bento-card.bento-wide  { grid-column: span 8; }
    .bento-card.bento-tall  { grid-row: span 2; }
    .bento-card.bento-half  { grid-column: span 6; }
    .bento-card.bento-third { grid-column: span 4; }
    @media (max-width: 768px) {
        .bento-grid .bento-card,
        .bento-grid .bento-wide,
        .bento-grid .bento-half,
        .bento-grid .bento-third { grid-column: span 12; }
    }
}

/* IE. @PROPERTY — REGISTERED CUSTOM PROPERTIES for animatable gradients */
@supports (syntax: "<color>") {
    @property --grad-start {
        syntax: "<color>";
        inherits: false;
        initial-value: #CC3826;
    }
    @property --grad-end {
        syntax: "<color>";
        inherits: false;
        initial-value: #e05a47;
    }
    @property --grad-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 135deg;
    }
    /* Animated gradient button using registered properties */
    .btn-animated-grad {
        background: linear-gradient(var(--grad-angle), var(--grad-start), var(--grad-end));
        border: none;
        color: #fff;
        padding: .625rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: --grad-start .4s, --grad-end .4s, --grad-angle .4s, box-shadow .2s;
    }
    .btn-animated-grad:hover {
        --grad-start: #a82f1e;
        --grad-end:   #CC3826;
        --grad-angle: 200deg;
        box-shadow: 0 6px 20px rgba(204,56,38,.4);
    }
    /* Revenue card pulsing gradient via @property */
    .revenue-card {
        transition: --grad-start .5s ease, --grad-end .5s ease;
    }
    .revenue-card:hover {
        --grad-start: #b12f1c;
        --grad-end:   #cc4a38;
    }
}

/* IF. POPOVER PREMIUM — enhanced Bootstrap popovers */
.popover {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    font-size: .8125rem;
}
.popover-header {
    background: var(--brand, #CC3826);
    color: #fff;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    padding: .625rem 1rem;
    border-bottom: none;
}
.popover-body { padding: .875rem 1rem; color: var(--text-primary, #1a1f2e); }
.popover .popover-arrow::after { border-top-color: var(--brand,#CC3826); }
.bs-popover-bottom .popover-arrow::after { border-bottom-color: var(--brand,#CC3826); }
[data-bs-theme="dark"] .popover {
    background: #252a3d;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
[data-bs-theme="dark"] .popover-body { color: #e8eaf0; }

/* IG. DATA-STATE VISUAL HELPERS — attribute-based status coloring */
/* Usage: <span data-status="active">...</span> */
[data-status="active"]    { --st-bg: #dcfce7; --st-clr: #15803d; --st-bdr: #86efac; }
[data-status="inactive"]  { --st-bg: #f3f4f6; --st-clr: #4b5563; --st-bdr: #d1d5db; }
[data-status="pending"]   { --st-bg: #fef3c7; --st-clr: #92400e; --st-bdr: #fde68a; }
[data-status="suspended"] { --st-bg: #fee2e2; --st-clr: #991b1b; --st-bdr: #fca5a5; }
[data-status="verified"]  { --st-bg: #dbeafe; --st-clr: #1d4ed8; --st-bdr: #93c5fd; }
[data-status="rejected"]  { --st-bg: #ffe4e6; --st-clr: #9f1239; --st-bdr: #fda4af; }
[data-status] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    background: var(--st-bg);
    color: var(--st-clr);
    border: 1px solid var(--st-bdr);
}
[data-status]::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
[data-bs-theme="dark"] [data-status="active"]    { --st-bg: rgba(21,128,61,.15); --st-clr: #4ade80; --st-bdr: rgba(74,222,128,.2); }
[data-bs-theme="dark"] [data-status="inactive"]  { --st-bg: rgba(75,85,99,.15);  --st-clr: #9ca3af; --st-bdr: rgba(156,163,175,.2); }
[data-bs-theme="dark"] [data-status="pending"]   { --st-bg: rgba(146,64,14,.15); --st-clr: #fbbf24; --st-bdr: rgba(251,191,36,.2); }
[data-bs-theme="dark"] [data-status="suspended"] { --st-bg: rgba(153,27,27,.15); --st-clr: #f87171; --st-bdr: rgba(248,113,113,.2); }
[data-bs-theme="dark"] [data-status="verified"]  { --st-bg: rgba(29,78,216,.15); --st-clr: #60a5fa; --st-bdr: rgba(96,165,250,.2); }
[data-bs-theme="dark"] [data-status="rejected"]  { --st-bg: rgba(159,18,57,.15); --st-clr: #fb7185; --st-bdr: rgba(251,113,133,.2); }

/* IH. ADVANCED PRINT STYLESHEET — invoice/report quality */
@media print {
    /* Reset print from Phase 23, extend with invoice-quality settings */
    @page {
        size: A4 portrait;
        margin: 15mm 20mm;
    }
    @page :first { margin-top: 20mm; }

    /* Typography for print */
    body { font-family: "Inter", Arial, sans-serif !important; font-size: 10pt !important; color: #000 !important; }
    h1 { font-size: 18pt !important; }
    h2 { font-size: 14pt !important; }
    h3 { font-size: 12pt !important; }

    /* Prevent orphans/widows */
    p, li, td { orphans: 3; widows: 3; }
    h1,h2,h3,h4,th { page-break-after: avoid; }

    /* Invoice print specifics */
    .invoice-wrap { page-break-inside: avoid; }
    .invoice-wrap .invoice-header { border-bottom: 2pt solid #000; margin-bottom: 12pt; padding-bottom: 8pt; }
    .invoice-wrap .invoice-footer { border-top: 1pt solid #ccc; margin-top: 12pt; padding-top: 6pt; font-size: 8pt; color: #555; }
    .invoice-wrap table { border-collapse: collapse; width: 100%; }
    .invoice-wrap table th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .invoice-wrap table th, .invoice-wrap table td { border: 0.5pt solid #ccc; padding: 4pt 6pt; }

    /* Visible URLs for links */
    a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 7pt; color: #666; }
    a[href^="http"].no-print-url:after { content: none; }

    /* QR code on print */
    .qr-card { page-break-inside: avoid; border: 1pt solid #ccc; padding: 8pt; }

    /* Charts degrade to table on print */
    .apexcharts-canvas { display: none !important; }
    .chart-print-table { display: table !important; }
}
/* Hide chart print table on screen */
.chart-print-table { display: none; }

/* II. FLUID COMPONENT SPACING — clamp-based padding scale */
/* Ensure components breathe proportionally across viewport sizes */
.section-fluid     { padding-block: clamp(1.5rem, 4vw, 3rem); }
.container-fluid-p { padding-inline: clamp(1rem, 3vw, 2.5rem); }
.card-fluid        { padding: clamp(.75rem, 2vw, 1.5rem); }
.gap-fluid         { gap: clamp(.5rem, 1.5vw, 1.25rem); }

/* Responsive heading sizes using fluid type */
.h1-fluid { font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 700; }
.h2-fluid { font-size: clamp(1.25rem, 3vw, 2rem);   line-height: 1.2;  font-weight: 700; }
.h3-fluid { font-size: clamp(1.1rem, 2.5vw, 1.5rem);line-height: 1.3;  font-weight: 600; }

/* Page content offset — accounts for fixed topbar + iOS safe area */
.page-content-fluid {
    padding-top: calc(var(--topbar-h, 60px) + var(--safe-top, 0px) + 1.25rem);
    padding-inline: clamp(.75rem, 2vw, 1.5rem);
    padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* IJ. DARK MODE — Phase 28 system tokens */
[data-bs-theme="dark"] {
    --surface-1: #1e2130;
    --surface-2: #252a3d;
    --surface-3: #2d334a;
    --surface-border: rgba(255,255,255,.08);
    --text-primary:   #e8eaf0;
    --text-secondary: #a0a8bf;
    --text-muted:     #6b7280;
}
[data-bs-theme="dark"] .pwa-offline-banner      { background: #111827; border-color: #374151; }
[data-bs-theme="dark"] .pwa-install-banner       { background: var(--surface-2); border-color: var(--surface-border); }
[data-bs-theme="dark"] .pwa-install-banner .pwa-text strong { color: var(--text-primary); }
[data-bs-theme="dark"] .bento-card               { background: var(--surface-2); border: 1px solid var(--surface-border); }
[data-bs-theme="dark"] [data-status]             { filter: brightness(1.1); }
[data-bs-theme="dark"] .section-fluid,
[data-bs-theme="dark"] .card-fluid               { color: var(--text-primary); }

/* ============================================================
   PHASE 29 — MOBILE-FIRST POLISH · MICRO-INTERACTIONS · DATA-DENSE
   IK — IT  (2026-04-07)
   ============================================================ */

/* IK. BOTTOM NAVIGATION BAR — mobile admin quick-nav */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-fixed, 1040);
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.10);
    padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767.98px) { .mobile-bottom-nav { display: flex; } }
.mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .5rem .25rem;
    text-decoration: none;
    color: #9ca3af;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .03em;
    min-height: 56px;
    transition: color .2s;
    position: relative;
    cursor: pointer;
}
.mobile-bottom-nav .mbn-item i { font-size: 1.25rem; line-height: 1; }
.mobile-bottom-nav .mbn-item.active { color: var(--brand, #CC3826); }
.mobile-bottom-nav .mbn-item.active::before {
    content: "";
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: var(--brand, #CC3826);
    border-radius: 0 0 4px 4px;
}
.mobile-bottom-nav .mbn-badge {
    position: absolute;
    top: 6px; right: calc(50% - 18px);
    min-width: 16px; height: 16px;
    background: var(--brand, #CC3826);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 2px solid #fff;
}
[data-bs-theme="dark"] .mobile-bottom-nav {
    background: #1e2130;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] .mobile-bottom-nav .mbn-item { color: #6b7280; }
[data-bs-theme="dark"] .mobile-bottom-nav .mbn-item.active { color: #e05a47; }
[data-bs-theme="dark"] .mobile-bottom-nav .mbn-badge { border-color: #1e2130; }
/* Push page content up when bottom nav visible */
@media (max-width: 767.98px) {
    .page-content { padding-bottom: calc(72px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important; }
}

/* IL. SWIPEABLE DRAWER — mobile offcanvas improvement */
.drawer-handle-bar {
    width: 36px; height: 4px;
    background: #d1d5db;
    border-radius: 999px;
    margin: .5rem auto .75rem;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .drawer-handle-bar { background: #4b5563; }
/* Snap sheet — bottom sheet variant */
.offcanvas-bottom.snap-sheet {
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.offcanvas-bottom.snap-sheet .offcanvas-body { padding: 0 1rem 1.25rem; }
/* Backdrop blur for offcanvas */
.offcanvas-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* IM. MICRO-INTERACTION TOKENS — precise timing for every state */
/* Click ripple effect */
.ripple-host { position: relative; overflow: hidden; }
.ripple-host::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.ripple-host:active::after { opacity: 1; transition: opacity 0s; }

/* Number counter animate on load */
.num-count-up {
    display: inline-block;
    transition: all var(--t-base, .2s) var(--ease-out, ease-out);
}

/* Shimmer loading pulse — extends skeleton from Phase 21 */
@keyframes shimmerSlide {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: 6px;
}
[data-bs-theme="dark"] .shimmer {
    background: linear-gradient(90deg, #2d334a 25%, #3a4060 50%, #2d334a 75%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; background: #f0f0f0; } }

/* Card lift on hover — universal upgrade */
.card-lift {
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    cursor: pointer;
}
.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
[data-bs-theme="dark"] .card-lift:hover { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .card-lift { transition: none; } .card-lift:hover { transform: none; } }

/* Icon spin on hover */
.icon-spin-hover { transition: transform .35s ease; }
.icon-spin-hover:hover { transform: rotate(180deg); }

/* Checkbox custom — brand-colored */
.form-check-input:checked {
    background-color: var(--brand, #CC3826) !important;
    border-color:     var(--brand, #CC3826) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(204,56,38,.2) !important;
    border-color: var(--brand, #CC3826) !important;
}

/* IN. RESPONSIVE DATA TABLES v2 — card-stack on mobile */
@media (max-width: 575.98px) {
    .table-card-stack thead { display: none; }
    .table-card-stack tbody tr {
        display: block;
        margin-bottom: .75rem;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        padding: .75rem;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .table-card-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .35rem 0;
        border: none;
        border-bottom: 1px solid rgba(0,0,0,.05);
        font-size: .8125rem;
    }
    .table-card-stack tbody td:last-child { border-bottom: none; }
    .table-card-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4b5563;
        font-size: .75rem;
        letter-spacing: .03em;
        text-transform: uppercase;
        flex-shrink: 0;
        margin-right: .5rem;
    }
    [data-bs-theme="dark"] .table-card-stack tbody tr {
        background: #252a3d;
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    [data-bs-theme="dark"] .table-card-stack tbody td { border-color: rgba(255,255,255,.06); }
    [data-bs-theme="dark"] .table-card-stack tbody td::before { color: #a0a8bf; }
}

/* IO. ADAPTIVE SIDEBAR — collapse to rail on tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
    body.sidebar-enable .vertical-menu { width: 70px !important; }
    body.sidebar-enable .vertical-menu #sidebar-menu .menu-title,
    body.sidebar-enable .vertical-menu #sidebar-menu .menu-arrow,
    body.sidebar-enable .vertical-menu #sidebar-menu li a span { display: none !important; }
    body.sidebar-enable .vertical-menu #sidebar-menu li a { justify-content: center; padding: .75rem .5rem; }
    body.sidebar-enable .vertical-menu #sidebar-menu li a i { font-size: 1.375rem; margin: 0; }
    body.sidebar-enable .main-content { margin-left: 70px !important; }
    /* Tooltip label on collapsed item hover */
    body.sidebar-enable .vertical-menu #sidebar-menu li { position: relative; }
    body.sidebar-enable .vertical-menu #sidebar-menu li a:hover::after {
        content: attr(data-nav-label);
        position: absolute;
        left: 76px; top: 50%;
        transform: translateY(-50%);
        background: #1a1f2e;
        color: #fff;
        padding: .35rem .75rem;
        border-radius: 6px;
        font-size: .75rem;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
}

/* IP. COMMAND PALETTE — quick-action keyboard shortcut overlay */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.cmd-palette-overlay.open { opacity: 1; pointer-events: auto; }
.cmd-palette {
    background: #fff;
    border-radius: 16px;
    width: min(640px, 94vw);
    box-shadow: 0 24px 64px rgba(0,0,0,.25);
    overflow: hidden;
    transform: translateY(-12px) scale(.97);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.cmd-palette-overlay.open .cmd-palette { transform: translateY(0) scale(1); }
.cmd-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.cmd-palette-input-wrap i { font-size: 1.25rem; color: #9ca3af; flex-shrink: 0; }
.cmd-palette-input {
    flex: 1;
    border: none; outline: none;
    font-size: 1rem;
    background: transparent;
    color: #1a1f2e;
}
.cmd-palette-input::placeholder { color: #9ca3af; }
.cmd-results { max-height: 360px; overflow-y: auto; padding: .5rem; }
.cmd-result-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-size: .875rem;
    color: #374151;
}
.cmd-result-item:hover,
.cmd-result-item.selected { background: rgba(204,56,38,.08); color: var(--brand, #CC3826); }
.cmd-result-item i { font-size: 1.1rem; width: 1.5rem; text-align: center; color: #9ca3af; flex-shrink: 0; }
.cmd-result-item:hover i, .cmd-result-item.selected i { color: var(--brand, #CC3826); }
.cmd-result-group {
    padding: .375rem .875rem .25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-top: .25rem;
}
.cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .625rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,.08);
    font-size: .7rem;
    color: #9ca3af;
}
.cmd-palette-footer .kbd-key { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
[data-bs-theme="dark"] .cmd-palette { background: #1e2130; box-shadow: 0 24px 64px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .cmd-palette-input { color: #e8eaf0; }
[data-bs-theme="dark"] .cmd-palette-input-wrap,
[data-bs-theme="dark"] .cmd-palette-footer { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .cmd-result-item { color: #d1d5db; }
[data-bs-theme="dark"] .cmd-result-item:hover,
[data-bs-theme="dark"] .cmd-result-item.selected { background: rgba(204,56,38,.15); }
[data-bs-theme="dark"] .cmd-palette-footer .kbd-key { background: #252a3d; color: #a0a8bf; border-color: rgba(255,255,255,.1); }

/* IQ. LIVE METRICS TICKER — topbar scrolling stats strip */
.metrics-ticker {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    font-size: .75rem;
    font-weight: 500;
    color: #4b5563;
    white-space: nowrap;
}
.metrics-ticker .ticker-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.metrics-ticker .ticker-item i { font-size: .875rem; }
.metrics-ticker .ticker-val { font-weight: 700; color: #1a1f2e; }
.metrics-ticker .ticker-up   { color: #16a34a; }
.metrics-ticker .ticker-down { color: #dc2626; }
.metrics-ticker .ticker-sep {
    width: 1px; height: 14px;
    background: rgba(0,0,0,.12);
    flex-shrink: 0;
}
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.metrics-ticker-anim {
    display: flex;
    animation: tickerScroll 24s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .metrics-ticker-anim { animation: none; } }
[data-bs-theme="dark"] .metrics-ticker { color: #a0a8bf; }
[data-bs-theme="dark"] .metrics-ticker .ticker-val { color: #e8eaf0; }
[data-bs-theme="dark"] .metrics-ticker .ticker-sep { background: rgba(255,255,255,.12); }

/* IR. NOTIFICATION DRAWER — slide-in side panel */
.notif-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(380px, 100vw);
    z-index: 1055;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.notif-drawer.open { transform: translateX(0); }
.notif-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}
.notif-drawer-header h6 { margin: 0; font-weight: 700; font-size: .9375rem; }
.notif-drawer-header .nd-mark-all { font-size: .75rem; color: var(--brand,#CC3826); cursor: pointer; background: none; border: none; padding: 0; font-weight: 600; }
.notif-drawer-header .nd-close { background: none; border: none; color: #9ca3af; font-size: 1.25rem; cursor: pointer; padding: .25rem; line-height: 1; }
.notif-drawer-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}
.notif-drawer-tabs .nd-tab {
    flex: 1; padding: .625rem; text-align: center;
    font-size: .8rem; font-weight: 500; cursor: pointer;
    color: #6b7280; border: none; background: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.notif-drawer-tabs .nd-tab.active { color: var(--brand,#CC3826); border-bottom-color: var(--brand,#CC3826); }
.notif-drawer-body { flex: 1; overflow-y: auto; padding: .5rem; }
.notif-drawer-item {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    border-radius: 10px;
    margin-bottom: .25rem;
    transition: background .15s;
    cursor: pointer;
    position: relative;
}
.notif-drawer-item:hover { background: #f9fafb; }
.notif-drawer-item.unread { background: rgba(204,56,38,.04); }
.notif-drawer-item.unread::before {
    content: "";
    position: absolute;
    left: .25rem; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px;
    background: var(--brand,#CC3826);
    border-radius: 50%;
}
.notif-drawer-item .nd-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: rgba(204,56,38,.1);
    color: var(--brand,#CC3826);
}
.notif-drawer-item .nd-content { flex: 1; min-width: 0; }
.notif-drawer-item .nd-title { font-size: .8125rem; font-weight: 600; color: #1a1f2e; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-drawer-item .nd-desc  { font-size: .75rem; color: #4b5563; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-drawer-item .nd-time  { font-size: .7rem; color: #9ca3af; margin-top: 4px; }
[data-bs-theme="dark"] .notif-drawer { background: #1e2130; box-shadow: -8px 0 32px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .notif-drawer-header,
[data-bs-theme="dark"] .notif-drawer-tabs,
[data-bs-theme="dark"] .notif-drawer-body .nd-tab { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .notif-drawer-item:hover { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .notif-drawer-item.unread { background: rgba(204,56,38,.08); }
[data-bs-theme="dark"] .notif-drawer-item .nd-title { color: #e8eaf0; }
[data-bs-theme="dark"] .notif-drawer-item .nd-desc  { color: #a0a8bf; }
[data-bs-theme="dark"] .notif-drawer-tabs .nd-tab { color: #6b7280; }
[data-bs-theme="dark"] .notif-drawer-item .nd-icon { background: rgba(204,56,38,.15); }

/* IS. RESPONSIVE MAP WIDGET — fullscreen toggle + legend */
.map-widget {
    position: relative;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: #e5e7eb;
}
.map-widget iframe,
.map-widget .map-embed {
    width: 100%; height: 100%;
    border: none; display: block;
}
.map-widget-sm  { height: 240px; }
.map-widget-md  { height: 360px; }
.map-widget-lg  { height: 480px; }
.map-widget-full { height: 100vh; }
@media (max-width: 767.98px) {
    .map-widget-md  { height: 260px; }
    .map-widget-lg  { height: 320px; }
}
.map-widget .map-fullscreen-btn {
    position: absolute;
    top: .75rem; right: .75rem;
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background .15s;
    color: #374151;
    z-index: 10;
}
.map-widget .map-fullscreen-btn:hover { background: var(--brand-light, #fce8e5); color: var(--brand,#CC3826); }
.map-widget .map-overlay-badge {
    position: absolute;
    bottom: .75rem; left: .75rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.map-overlay-badge .mob {
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .7rem;
    font-weight: 600;
    display: flex; align-items: center; gap: .3rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    color: #1a1f2e;
}
.map-overlay-badge .mob i { font-size: .875rem; }

/* IT. DARK MODE — Phase 29 */
[data-bs-theme="dark"] .map-widget { background: #2d334a; }
[data-bs-theme="dark"] .map-widget .map-fullscreen-btn { background: #252a3d; border-color: rgba(255,255,255,.1); color: #e8eaf0; }
[data-bs-theme="dark"] .map-widget .map-fullscreen-btn:hover { background: rgba(204,56,38,.2); color: #e05a47; }
[data-bs-theme="dark"] .map-overlay-badge .mob { background: rgba(30,33,48,.85); color: #e8eaf0; }
[data-bs-theme="dark"] .form-check-input:checked { background-color: #e05a47 !important; border-color: #e05a47 !important; }
[data-bs-theme="dark"] .cmd-result-group { color: #6b7280; }
[data-bs-theme="dark"] .notif-drawer-tabs .nd-tab.active { color: #e05a47; border-bottom-color: #e05a47; }

/* ============================================================
   PHASE 30 — DASHBOARD EXCELLENCE · CHART POLISH · REALTIME UI
   IU — JC  (2026-04-07)
   ============================================================ */

/* IU. REALTIME DASHBOARD HEADER — live status strip */
.dashboard-live-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .875rem 1.25rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 1.25rem;
}
.dashboard-live-header .dlh-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1a1f2e;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dlh-live-dot {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #16a34a;
    background: #dcfce7;
    padding: .2rem .6rem;
    border-radius: 999px;
}
.dlh-live-dot::before {
    content: "";
    width: 6px; height: 6px;
    background: #16a34a;
    border-radius: 50%;
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.6); }
}
.dashboard-live-header .dlh-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dlh-refresh-btn {
    display: flex; align-items: center; gap: .35rem;
    padding: .375rem .875rem;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 8px;
    background: transparent;
    font-size: .8rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dlh-refresh-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.dlh-refresh-btn i { transition: transform .6s ease; }
.dlh-refresh-btn:hover i { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) { .dlh-refresh-btn i { transition: none; } }
[data-bs-theme="dark"] .dashboard-live-header { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .dashboard-live-header .dlh-title { color: #e8eaf0; }
[data-bs-theme="dark"] .dlh-refresh-btn { color: #a0a8bf; border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .dlh-refresh-btn:hover { background: rgba(255,255,255,.06); }

/* IV. APEX CHART ENHANCEMENTS v2 — treemap + radar + donut label */
/* Treemap */
.apexcharts-treemap-rect { rx: 6; ry: 6; }
/* Radar chart fill opacity */
.apexcharts-radar-series path { fill-opacity: .18 !important; }
/* Donut center label */
.apexcharts-datalabels-group text { font-family: "Inter", sans-serif !important; }
.apexcharts-pie-label { font-size: 11px !important; font-weight: 600 !important; }
/* Heatmap cells rounded */
.apexcharts-heatmap-rect { rx: 4; ry: 4; }
/* Candlestick colors */
.apexcharts-candlestick-area path[fill="#26a69a"] { fill: #16a34a !important; }
.apexcharts-candlestick-area path[fill="#ef5350"] { fill: #dc2626 !important; }
/* Zoom toolbar */
.apexcharts-toolbar { top: 4px !important; right: 8px !important; }
.apexcharts-toolbar svg { fill: #9ca3af; }
.apexcharts-toolbar svg:hover { fill: var(--brand, #CC3826); }
/* Loading state for chart containers */
.chart-loading {
    position: relative;
    min-height: 200px;
}
.chart-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: inherit;
    z-index: 2;
}
[data-bs-theme="dark"] .chart-loading::after {
    background: linear-gradient(90deg, #2d334a 25%, #3a4060 50%, #2d334a 75%);
    background-size: 200% 100%;
}

/* IW. KPI CARD v2 — trend sparkline inline */
.kpi-v2 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.125rem 1.25rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s cubic-bezier(.22,1,.36,1);
    cursor: default;
}
.kpi-v2:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kpi-v2:hover { transform: none; } }
.kpi-v2::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-accent, var(--brand, #CC3826));
    border-radius: 16px 16px 0 0;
}
.kpi-v2 .kpi-v2-header { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi-v2 .kpi-v2-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
    background: color-mix(in srgb, var(--kpi-accent, var(--brand,#CC3826)) 12%, transparent);
    color: var(--kpi-accent, var(--brand, #CC3826));
    flex-shrink: 0;
}
.kpi-v2 .kpi-v2-badge {
    font-size: .7rem; font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 999px;
    letter-spacing: .03em;
}
.kpi-v2 .kpi-v2-badge.up   { background: #dcfce7; color: #15803d; }
.kpi-v2 .kpi-v2-badge.down { background: #fee2e2; color: #991b1b; }
.kpi-v2 .kpi-v2-badge.flat { background: #f3f4f6; color: #4b5563; }
.kpi-v2 .kpi-v2-value {
    font-size: 1.75rem; font-weight: 800;
    color: #1a1f2e; line-height: 1.1;
    letter-spacing: -.03em;
}
.kpi-v2 .kpi-v2-label { font-size: .75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.kpi-v2 .kpi-v2-sub   { font-size: .75rem; color: #9ca3af; margin-top: auto; }
/* Accent variants */
.kpi-v2.kpi-green { --kpi-accent: #16a34a; }
.kpi-v2.kpi-blue  { --kpi-accent: #2563eb; }
.kpi-v2.kpi-amber { --kpi-accent: #d97706; }
.kpi-v2.kpi-purple{ --kpi-accent: #7c3aed; }
[data-bs-theme="dark"] .kpi-v2 { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-value { color: #e8eaf0; }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-label { color: #a0a8bf; }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-sub   { color: #6b7280; }
[data-bs-theme="dark"] .kpi-v2:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-badge.flat { background: rgba(255,255,255,.08); color: #a0a8bf; }

/* IX. VEHICLE / FLEET TRACKER ROW — realtime position update */
.vehicle-tracker-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid rgba(0,0,0,.06);
    margin-bottom: .5rem;
    transition: background .15s;
    cursor: pointer;
}
.vehicle-tracker-row:hover { background: #f3f4f6; }
.vehicle-tracker-row .vtr-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.vehicle-tracker-row .vtr-info { flex: 1; min-width: 0; }
.vehicle-tracker-row .vtr-name {
    font-size: .875rem; font-weight: 600; color: #1a1f2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vehicle-tracker-row .vtr-meta { font-size: .75rem; color: #6b7280; margin-top: 1px; }
.vehicle-tracker-row .vtr-status {
    display: flex; align-items: center; gap: .35rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    padding: .25rem .6rem; border-radius: 999px;
    flex-shrink: 0;
}
.vtr-status.vtr-en-route  { background: #dbeafe; color: #1d4ed8; }
.vtr-status.vtr-pickup    { background: #fef3c7; color: #92400e; }
.vtr-status.vtr-idle      { background: #f3f4f6; color: #4b5563; }
.vtr-status.vtr-offline   { background: #fee2e2; color: #991b1b; }
.vehicle-tracker-row .vtr-eta {
    font-size: .75rem; font-weight: 700;
    color: var(--brand, #CC3826);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .vehicle-tracker-row { flex-wrap: wrap; }
    .vehicle-tracker-row .vtr-eta { margin-left: calc(42px + .875rem); }
}
[data-bs-theme="dark"] .vehicle-tracker-row { background: #2d334a; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .vehicle-tracker-row:hover { background: #353d58; }
[data-bs-theme="dark"] .vehicle-tracker-row .vtr-name { color: #e8eaf0; }
[data-bs-theme="dark"] .vehicle-tracker-row .vtr-meta { color: #a0a8bf; }
[data-bs-theme="dark"] .vehicle-tracker-row .vtr-avatar { border-color: #2d334a; }
[data-bs-theme="dark"] .vtr-status.vtr-idle { background: rgba(255,255,255,.08); color: #a0a8bf; }

/* IY. TRIP ACTIVITY FEED — scrollable live event list */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 420px;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.activity-feed::-webkit-scrollbar { width: 4px; }
.activity-feed::-webkit-scrollbar-track { background: transparent; }
.activity-feed::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
.activity-feed-item {
    display: flex;
    gap: .875rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    position: relative;
    animation: feedSlideIn .3s ease-out both;
}
@keyframes feedSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .activity-feed-item { animation: none; } }
.activity-feed-item:last-child { border-bottom: none; }
.activity-feed-item .afi-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.afi-icon.afi-trip    { background: #dbeafe; color: #2563eb; }
.afi-icon.afi-payment { background: #dcfce7; color: #16a34a; }
.afi-icon.afi-cancel  { background: #fee2e2; color: #dc2626; }
.afi-icon.afi-signup  { background: #f3e8ff; color: #7c3aed; }
.afi-icon.afi-alert   { background: #fef3c7; color: #d97706; }
.activity-feed-item .afi-content { flex: 1; min-width: 0; }
.activity-feed-item .afi-title {
    font-size: .8125rem; font-weight: 600; color: #1a1f2e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-feed-item .afi-desc { font-size: .75rem; color: #4b5563; margin-top: 1px; line-height: 1.4; }
.activity-feed-item .afi-time { font-size: .7rem; color: #9ca3af; flex-shrink: 0; padding-top: 2px; }
[data-bs-theme="dark"] .activity-feed-item { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .activity-feed-item .afi-title { color: #e8eaf0; }
[data-bs-theme="dark"] .activity-feed-item .afi-desc  { color: #a0a8bf; }
[data-bs-theme="dark"] .activity-feed::-webkit-scrollbar-thumb { background: #3a4060; }
[data-bs-theme="dark"] .afi-icon.afi-trip    { background: rgba(37,99,235,.15); }
[data-bs-theme="dark"] .afi-icon.afi-payment { background: rgba(22,163,74,.15); }
[data-bs-theme="dark"] .afi-icon.afi-cancel  { background: rgba(220,38,38,.15); }
[data-bs-theme="dark"] .afi-icon.afi-signup  { background: rgba(124,58,237,.15); }
[data-bs-theme="dark"] .afi-icon.afi-alert   { background: rgba(217,119,6,.15); }

/* IZ. DONUT STATS CARD — mini donut with legend inline */
.donut-stat-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.donut-stat-card .dsc-chart { flex-shrink: 0; width: 80px; height: 80px; }
.donut-stat-card .dsc-legend { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.donut-stat-card .dsc-item {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem;
}
.donut-stat-card .dsc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.donut-stat-card .dsc-lbl { color: #4b5563; flex: 1; }
.donut-stat-card .dsc-val { font-weight: 700; color: #1a1f2e; }
.donut-stat-card .dsc-pct { font-size: .7rem; color: #9ca3af; margin-left: .25rem; }
[data-bs-theme="dark"] .donut-stat-card { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .donut-stat-card .dsc-lbl { color: #a0a8bf; }
[data-bs-theme="dark"] .donut-stat-card .dsc-val { color: #e8eaf0; }

/* JA. RESPONSIVE GRID SHORTHAND HELPERS */
/* Quick layout primitives for dashboard composition */
.grid-auto-fill-sm  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.grid-auto-fill-md  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.grid-auto-fill-lg  { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.grid-2-1           { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.grid-1-2           { display: grid; grid-template-columns: 1fr 2fr; gap: 1.25rem; }
.grid-3-col         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4-col         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 991.98px) {
    .grid-2-1, .grid-1-2        { grid-template-columns: 1fr; }
    .grid-3-col                  { grid-template-columns: repeat(2, 1fr); }
    .grid-4-col                  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .grid-auto-fill-sm,
    .grid-auto-fill-md,
    .grid-auto-fill-lg,
    .grid-3-col,
    .grid-4-col                  { grid-template-columns: 1fr; }
}

/* JB. ONBOARDING TOUR HIGHLIGHT — step pointer overlay */
.tour-highlight {
    position: relative;
    z-index: 1060;
    border-radius: 8px;
    box-shadow: 0 0 0 4px var(--brand,#CC3826), 0 0 0 8px rgba(204,56,38,.25);
    animation: tourPulse 1.8s ease-in-out infinite;
}
@keyframes tourPulse {
    0%,100% { box-shadow: 0 0 0 4px var(--brand,#CC3826), 0 0 0 8px rgba(204,56,38,.25); }
    50%      { box-shadow: 0 0 0 4px var(--brand,#CC3826), 0 0 0 14px rgba(204,56,38,.08); }
}
@media (prefers-reduced-motion: reduce) { .tour-highlight { animation: none; } }
.tour-tooltip {
    position: absolute;
    z-index: 1061;
    background: #1a1f2e;
    color: #f9fafb;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .8125rem;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    line-height: 1.5;
}
.tour-tooltip::before {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}
.tour-tooltip.tip-bottom { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.tour-tooltip.tip-bottom::before { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #1a1f2e; }
.tour-tooltip.tip-top { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.tour-tooltip.tip-top::before { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #1a1f2e; }
.tour-tooltip.tip-right { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.tour-tooltip.tip-right::before { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #1a1f2e; }
.tour-step-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .625rem;
    gap: .5rem;
}
.tour-step-nav .ts-counter { font-size: .7rem; color: #9ca3af; }
.tour-step-nav .ts-btn {
    background: var(--brand,#CC3826); color: #fff;
    border: none; border-radius: 6px;
    padding: .3rem .75rem; font-size: .75rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.tour-step-nav .ts-btn:hover { background: var(--brand-hover,#a82f1e); }
.tour-step-nav .ts-skip { background: none; border: none; color: #9ca3af; font-size: .7rem; cursor: pointer; padding: 0; }
.tour-step-nav .ts-skip:hover { color: #4b5563; }

/* JC. DARK MODE — Phase 30 */
[data-bs-theme="dark"] .dlh-live-dot { background: rgba(22,163,74,.2); }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-badge.up   { background: rgba(21,128,61,.2); color: #4ade80; }
[data-bs-theme="dark"] .kpi-v2 .kpi-v2-badge.down  { background: rgba(153,27,27,.2); color: #f87171; }
[data-bs-theme="dark"] .donut-stat-card .dsc-pct { color: #6b7280; }
[data-bs-theme="dark"] .tour-tooltip { background: #e8eaf0; color: #1a1f2e; }
[data-bs-theme="dark"] .tour-tooltip.tip-bottom::before { border-bottom-color: #e8eaf0; }
[data-bs-theme="dark"] .tour-tooltip.tip-top::before    { border-top-color:    #e8eaf0; }
[data-bs-theme="dark"] .tour-tooltip.tip-right::before  { border-right-color:  #e8eaf0; }

/* ============================================================
   PHASE 31 — FORM UX · EMPTY STATES · FUNNEL · ADVANCED FEEDBACK
   JD — JM  (2026-04-07)
   ============================================================ */

/* JD. SMART FORM — progressive validation + submit states */
/* Input with success/error icon inside */
.input-validated {
    position: relative;
}
.input-validated .form-control {
    padding-right: 2.5rem;
    transition: border-color .2s, box-shadow .2s;
}
.input-validated .iv-icon {
    position: absolute;
    right: .75rem; top: 50%; transform: translateY(-50%);
    font-size: 1.05rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.input-validated.iv-ok .form-control {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15) !important;
}
.input-validated.iv-ok .iv-icon { color: #16a34a; opacity: 1; }
.input-validated.iv-err .form-control {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important;
}
.input-validated.iv-err .iv-icon { color: #dc2626; opacity: 1; }
/* Shake animation on error */
@keyframes inputShake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.input-validated.iv-shake { animation: inputShake .4s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .input-validated.iv-shake { animation: none; } }

/* Submit button states */
.btn-submit-states {
    position: relative;
    min-width: 140px;
    overflow: hidden;
    transition: background .2s, opacity .2s;
}
.btn-submit-states .bss-label,
.btn-submit-states .bss-loading,
.btn-submit-states .bss-success,
.btn-submit-states .bss-error { transition: opacity .2s, transform .2s; }
.btn-submit-states .bss-loading,
.btn-submit-states .bss-success,
.btn-submit-states .bss-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; opacity: 0; pointer-events: none; }
.btn-submit-states.is-loading  .bss-label   { opacity: 0; }
.btn-submit-states.is-loading  .bss-loading { opacity: 1; }
.btn-submit-states.is-success  .bss-label   { opacity: 0; }
.btn-submit-states.is-success  .bss-success { opacity: 1; }
.btn-submit-states.is-error    .bss-label   { opacity: 0; }
.btn-submit-states.is-error    .bss-error   { opacity: 1; }
.btn-submit-states.is-success  { background: #16a34a !important; border-color: #16a34a !important; }
.btn-submit-states.is-error    { background: #dc2626 !important; border-color: #dc2626 !important; }
/* Spinner for loading state */
.bss-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Form step progress — wizard upgrade */
.form-progress-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    counter-reset: step;
}
.form-progress-bar .fpb-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    position: relative;
    counter-increment: step;
}
.form-progress-bar .fpb-step::before {
    content: counter(step);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: .8125rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e5e7eb;
    transition: background .3s, color .3s, border-color .3s;
    position: relative; z-index: 1;
}
.form-progress-bar .fpb-step::after {
    content: "";
    position: absolute;
    top: 15px; left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: #e5e7eb;
    transition: background .3s;
}
.form-progress-bar .fpb-step:last-child::after { display: none; }
.form-progress-bar .fpb-label {
    font-size: .7rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    transition: color .3s;
    white-space: nowrap;
}
/* States */
.form-progress-bar .fpb-step.done::before  { content: "✓"; background: var(--brand,#CC3826); border-color: var(--brand,#CC3826); color: #fff; }
.form-progress-bar .fpb-step.done::after   { background: var(--brand,#CC3826); }
.form-progress-bar .fpb-step.active::before{ background: #fff; border-color: var(--brand,#CC3826); color: var(--brand,#CC3826); box-shadow: 0 0 0 3px rgba(204,56,38,.18); }
.form-progress-bar .fpb-step.active .fpb-label { color: var(--brand,#CC3826); font-weight: 700; }
[data-bs-theme="dark"] .form-progress-bar .fpb-step::before { background: #2d334a; border-color: #3a4060; color: #6b7280; }
[data-bs-theme="dark"] .form-progress-bar .fpb-step::after  { background: #3a4060; }
[data-bs-theme="dark"] .form-progress-bar .fpb-step.active::before { background: #1e2130; }

/* JE. EMPTY STATES v2 — contextual illustrations */
.empty-state-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 1rem;
}
.empty-state-v2 .esv-icon-wrap {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.25rem;
    background: #f3f4f6;
    color: #9ca3af;
    margin-bottom: .25rem;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.empty-state-v2:hover .esv-icon-wrap { transform: scale(1.08) rotate(-5deg); }
@media (prefers-reduced-motion: reduce) { .empty-state-v2:hover .esv-icon-wrap { transform: none; } }
.empty-state-v2 .esv-title {
    font-size: 1.0625rem; font-weight: 700; color: #1a1f2e; margin: 0;
}
.empty-state-v2 .esv-desc {
    font-size: .875rem; color: #6b7280; max-width: 320px; line-height: 1.6; margin: 0;
}
.empty-state-v2 .esv-action {
    display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem;
}
/* Contextual variants */
.empty-state-v2.esv-search .esv-icon-wrap  { background: #eff6ff; color: #2563eb; }
.empty-state-v2.esv-error  .esv-icon-wrap  { background: #fee2e2; color: #dc2626; }
.empty-state-v2.esv-done   .esv-icon-wrap  { background: #dcfce7; color: #16a34a; }
.empty-state-v2.esv-trip   .esv-icon-wrap  { background: #fce7f3; color: #be185d; }
.empty-state-v2.esv-driver .esv-icon-wrap  { background: #fef3c7; color: #d97706; }
[data-bs-theme="dark"] .empty-state-v2 .esv-icon-wrap { background: #2d334a; color: #6b7280; }
[data-bs-theme="dark"] .empty-state-v2 .esv-title { color: #e8eaf0; }
[data-bs-theme="dark"] .empty-state-v2 .esv-desc  { color: #a0a8bf; }
[data-bs-theme="dark"] .empty-state-v2.esv-search .esv-icon-wrap { background: rgba(37,99,235,.15); color: #60a5fa; }
[data-bs-theme="dark"] .empty-state-v2.esv-error  .esv-icon-wrap { background: rgba(220,38,38,.15);  color: #f87171; }
[data-bs-theme="dark"] .empty-state-v2.esv-done   .esv-icon-wrap { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-bs-theme="dark"] .empty-state-v2.esv-trip   .esv-icon-wrap { background: rgba(190,24,93,.15);  color: #f472b6; }
[data-bs-theme="dark"] .empty-state-v2.esv-driver .esv-icon-wrap { background: rgba(217,119,6,.15);  color: #fbbf24; }

/* JF. FUNNEL CONVERSION STEPS — 3-step progress card */
.funnel-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
}
@media (max-width: 575.98px) { .funnel-steps { grid-template-columns: 1fr; } }
.funnel-step {
    padding: 1.25rem 1.125rem;
    background: #fff;
    position: relative;
    border-right: 1px solid rgba(0,0,0,.07);
    transition: background .2s;
}
.funnel-step:last-child { border-right: none; }
.funnel-step::after {
    content: "";
    position: absolute;
    right: -10px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    z-index: 1;
    filter: drop-shadow(1px 0 1px rgba(0,0,0,.07));
}
@media (max-width: 575.98px) { .funnel-step::after { display: none; } }
.funnel-step:last-child::after { display: none; }
.funnel-step .fs-num {
    font-size: .65rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--fs-clr, #9ca3af); margin-bottom: .375rem;
}
.funnel-step .fs-label { font-size: .875rem; font-weight: 700; color: #1a1f2e; margin-bottom: .25rem; }
.funnel-step .fs-val {
    font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em;
    color: var(--fs-clr, #1a1f2e); line-height: 1;
}
.funnel-step .fs-pct { font-size: .75rem; color: #6b7280; margin-top: .375rem; }
.funnel-step .fs-bar {
    height: 3px; border-radius: 999px;
    background: #e5e7eb; margin-top: .625rem; overflow: hidden;
}
.funnel-step .fs-bar-fill {
    height: 100%; border-radius: 999px;
    background: var(--fs-clr, var(--brand,#CC3826));
    transition: width .6s cubic-bezier(.22,1,.36,1);
}
/* Step color themes */
.funnel-step.fs-problem { --fs-clr: #dc2626; }
.funnel-step.fs-process { --fs-clr: #d97706; }
.funnel-step.fs-success { --fs-clr: #16a34a; }
[data-bs-theme="dark"] .funnel-step { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .funnel-step::after { border-left-color: #252a3d; }
[data-bs-theme="dark"] .funnel-step .fs-label { color: #e8eaf0; }
[data-bs-theme="dark"] .funnel-step .fs-pct   { color: #6b7280; }
[data-bs-theme="dark"] .funnel-step .fs-bar   { background: #3a4060; }

/* JG. ALERT SYSTEM v2 — dismissible + action + icon */
.alert-v2 {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    position: relative;
    font-size: .875rem;
    line-height: 1.5;
    animation: alertSlideDown .25s ease-out;
}
@keyframes alertSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .alert-v2 { animation: none; } }
.alert-v2 .av-icon { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; }
.alert-v2 .av-body { flex: 1; min-width: 0; }
.alert-v2 .av-title { font-weight: 700; margin-bottom: 2px; }
.alert-v2 .av-msg   { color: inherit; opacity: .85; }
.alert-v2 .av-action {
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    background: none; border: none; padding: 0;
    color: inherit;
}
.alert-v2 .av-close {
    position: absolute; top: .625rem; right: .625rem;
    background: none; border: none;
    color: inherit; opacity: .5; font-size: 1rem;
    cursor: pointer; padding: .2rem; line-height: 1;
    transition: opacity .15s;
}
.alert-v2 .av-close:hover { opacity: 1; }
/* Variants */
.alert-v2.av-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-v2.av-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-v2.av-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-v2.av-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
[data-bs-theme="dark"] .alert-v2.av-info    { background: rgba(30,64,175,.15);  border-color: rgba(96,165,250,.2);  color: #93c5fd; }
[data-bs-theme="dark"] .alert-v2.av-success { background: rgba(22,101,52,.15);  border-color: rgba(74,222,128,.2);  color: #4ade80; }
[data-bs-theme="dark"] .alert-v2.av-warning { background: rgba(146,64,14,.15);  border-color: rgba(251,191,36,.2);  color: #fbbf24; }
[data-bs-theme="dark"] .alert-v2.av-danger  { background: rgba(153,27,27,.15);  border-color: rgba(248,113,113,.2); color: #f87171; }

/* JH. FLOATING ACTION SPEED DIAL — FAB with sub-actions */
.fab-speed-dial {
    position: fixed;
    bottom: calc(1.25rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
    right: 1.25rem;
    z-index: 1050;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .625rem;
}
.fab-speed-dial .fsd-main {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--brand, #CC3826);
    color: #fff;
    border: none;
    font-size: 1.375rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(204,56,38,.4);
    transition: background .2s, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .2s;
    position: relative; z-index: 1;
}
.fab-speed-dial .fsd-main:hover { background: var(--brand-hover,#a82f1e); box-shadow: 0 6px 22px rgba(204,56,38,.5); }
.fab-speed-dial.open .fsd-main { transform: rotate(45deg); }
.fab-speed-dial .fsd-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .5rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(.92);
    transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.fab-speed-dial.open .fsd-actions { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
.fab-speed-dial .fsd-item {
    display: flex; align-items: center; gap: .625rem;
    background: none; border: none; cursor: pointer;
}
.fab-speed-dial .fsd-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
    color: #374151;
    transition: transform .15s, box-shadow .15s;
}
.fab-speed-dial .fsd-btn:hover { transform: scale(1.1); box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.fab-speed-dial .fsd-lbl {
    background: #1a1f2e;
    color: #f9fafb;
    padding: .25rem .65rem;
    border-radius: 6px;
    font-size: .73rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .fab-speed-dial.open .fsd-main { transform: none; }
    .fab-speed-dial .fsd-actions { transition: none; }
}
/* On mobile hide if bottom nav present */
@media (max-width: 767.98px) {
    .fab-speed-dial { bottom: calc(72px + .75rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); }
}
[data-bs-theme="dark"] .fab-speed-dial .fsd-btn { background: #252a3d; color: #e8eaf0; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .fab-speed-dial .fsd-lbl { background: #e8eaf0; color: #1a1f2e; }

/* JI. SEARCH RESULTS HIGHLIGHT — keyword match styling */
.search-hit { background: rgba(204,56,38,.15); color: var(--brand,#CC3826); border-radius: 2px; font-weight: 600; padding: 0 1px; }
[data-bs-theme="dark"] .search-hit { background: rgba(204,56,38,.25); color: #e05a47; }

/* JJ. USER PRESENCE INDICATORS — avatars with online dot */
.presence-avatar {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.presence-avatar img,
.presence-avatar .pa-initials {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #fff;
    background: var(--brand,#CC3826);
}
.presence-avatar .pa-dot {
    position: absolute;
    bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.presence-avatar .pa-dot.online  { background: #16a34a; }
.presence-avatar .pa-dot.busy    { background: #d97706; }
.presence-avatar .pa-dot.away    { background: #9ca3af; }
.presence-avatar .pa-dot.offline { background: #e5e7eb; }
/* Stacked presence group */
.presence-group { display: flex; align-items: center; }
.presence-group .presence-avatar { margin-right: -10px; transition: margin .2s; }
.presence-group .presence-avatar:hover { margin-right: 0; z-index: 1; }
.presence-group .presence-avatar img,
.presence-group .presence-avatar .pa-initials { border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.presence-group .pg-overflow {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4b5563;
    font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    margin-left: 2px;
}
[data-bs-theme="dark"] .presence-avatar .pa-dot { border-color: #1e2130; }
[data-bs-theme="dark"] .presence-avatar img,
[data-bs-theme="dark"] .presence-avatar .pa-initials { border-color: #252a3d; }
[data-bs-theme="dark"] .presence-group .pg-overflow { background: #2d334a; color: #a0a8bf; border-color: #252a3d; }
[data-bs-theme="dark"] .presence-avatar .pa-dot.offline { background: #4b5563; }

/* JK. RESPONSIVE TYPOGRAPHY SCALE — semantic size classes */
.text-display { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.text-hero    { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.text-section { font-size: clamp(1.125rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.25; }
.text-card    { font-size: clamp(.9375rem, 1.5vw, 1.125rem); font-weight: 600; line-height: 1.35; }
.text-body-lg { font-size: clamp(.9375rem, 1.2vw, 1rem); line-height: 1.7; }
.text-body    { font-size: .875rem; line-height: 1.6; }
.text-caption { font-size: .75rem; color: #9ca3af; line-height: 1.5; }
.text-overline { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand,#CC3826); }
[data-bs-theme="dark"] .text-caption  { color: #6b7280; }

/* JL. REDUCED-MOTION FINAL SWEEP — global override */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* Keep functional transitions (zero not .001) */
    .offcanvas { transition-duration: .001ms !important; }
    .modal.fade .modal-dialog { transition-duration: .001ms !important; }
}

/* JM. DARK MODE — Phase 31 */
[data-bs-theme="dark"] .input-validated.iv-ok .form-control  { border-color: #4ade80 !important; box-shadow: 0 0 0 3px rgba(74,222,128,.15) !important; }
[data-bs-theme="dark"] .input-validated.iv-ok .iv-icon        { color: #4ade80; }
[data-bs-theme="dark"] .input-validated.iv-err .form-control  { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.15) !important; }
[data-bs-theme="dark"] .input-validated.iv-err .iv-icon       { color: #f87171; }
[data-bs-theme="dark"] .funnel-step.fs-problem { --fs-clr: #f87171; }
[data-bs-theme="dark"] .funnel-step.fs-process { --fs-clr: #fbbf24; }
[data-bs-theme="dark"] .funnel-step.fs-success { --fs-clr: #4ade80; }
[data-bs-theme="dark"] .text-overline { color: #e05a47; }

/* ============================================================
   PHASE 32 — GLASSMORPHISM PREMIUM · LIQUID CARDS · SIDEBAR v2
   · TABLE ACTIONS · SCROLL SNAP · MEDIA PLAYER
   JN — JW  (2026-04-07)
   ============================================================ */

/* JN. GLASSMORPHISM CARD SYSTEM — frosted-glass variants */
.glass-card {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-card-dark {
    background: rgba(30,33,48,.6);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-card-brand {
    background: rgba(204,56,38,.12);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(204,56,38,.25);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(204,56,38,.12);
}
/* Topbar glassmorphism upgrade */
.glass-topbar {
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.06) !important;
}
[data-bs-theme="dark"] .glass-topbar {
    background: rgba(20,22,36,.82) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .glass-card {
    background: rgba(37,42,61,.7);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-bs-theme="dark"] .glass-card-brand {
    background: rgba(204,56,38,.15);
    border-color: rgba(204,56,38,.3);
}

/* JO. LIQUID GRADIENT CARDS — animated background mesh */
.liquid-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 1.25rem;
}
.liquid-card::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 180deg at 50% 50%,
        rgba(204,56,38,.35) 0deg,
        rgba(230,100,60,.2) 90deg,
        rgba(204,56,38,.1) 180deg,
        rgba(180,40,20,.3) 270deg,
        rgba(204,56,38,.35) 360deg
    );
    animation: liquidRotate 12s linear infinite;
    border-radius: 50%;
    filter: blur(32px);
}
@keyframes liquidRotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .liquid-card::before { animation: none; } }
.liquid-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.88);
    border-radius: inherit;
}
.liquid-card > * { position: relative; z-index: 1; }
[data-bs-theme="dark"] .liquid-card::after { background: rgba(20,22,36,.88); }

/* Stat card with liquid bg */
.liquid-stat {
    background: linear-gradient(135deg, #CC3826 0%, #e05a47 50%, #f07055 100%);
    border-radius: 18px;
    padding: 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.liquid-stat::before {
    content: "";
    position: absolute;
    width: 120px; height: 120px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    top: -30px; right: -30px;
}
.liquid-stat::after {
    content: "";
    position: absolute;
    width: 80px; height: 80px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
    bottom: -20px; left: 30px;
}
.liquid-stat > * { position: relative; z-index: 1; }
.liquid-stat .ls-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.liquid-stat .ls-value { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .25rem 0; }
.liquid-stat .ls-sub   { font-size: .8rem; opacity: .75; }
.liquid-stat.ls-green  { background: linear-gradient(135deg, #15803d, #22c55e); }
.liquid-stat.ls-blue   { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.liquid-stat.ls-purple { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.liquid-stat.ls-amber  { background: linear-gradient(135deg, #b45309, #f59e0b); }

/* JP. SIDEBAR v2 — hover mega tooltip + section dividers */
/* Section labels upgrade */
.vertical-menu #sidebar-menu li.menu-section-label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 1.25rem 1.25rem .4rem;
    margin-top: .25rem;
    border-top: 1px solid rgba(0,0,0,.06);
}
.vertical-menu #sidebar-menu li.menu-section-label:first-child { border-top: none; margin-top: 0; }
[data-bs-theme="dark"] .vertical-menu #sidebar-menu li.menu-section-label {
    color: #4b5563;
    border-color: rgba(255,255,255,.05);
}
/* Active item left bar */
.vertical-menu #sidebar-menu .mm-active > a {
    position: relative;
}
.vertical-menu #sidebar-menu .mm-active > a::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--brand, #CC3826);
    border-radius: 0 3px 3px 0;
}
/* Sidebar item hover background */
.vertical-menu #sidebar-menu li a:not(.mm-active):hover {
    background: rgba(204,56,38,.06) !important;
    border-radius: 8px;
    margin-inline: .5rem;
    padding-inline: calc(1.1rem - .5rem);
    transition: background .15s;
}
/* Sub-menu item indent upgrade */
.vertical-menu #sidebar-menu ul.sub-menu li a {
    padding-left: 3.25rem;
    font-size: .8125rem;
    color: #6b7280;
}
.vertical-menu #sidebar-menu ul.sub-menu li a:hover { color: var(--brand,#CC3826); }
.vertical-menu #sidebar-menu ul.sub-menu .mm-active a { color: var(--brand,#CC3826); font-weight: 600; }
[data-bs-theme="dark"] .vertical-menu #sidebar-menu ul.sub-menu li a { color: #6b7280; }
[data-bs-theme="dark"] .vertical-menu #sidebar-menu ul.sub-menu li a:hover { color: #e05a47; }
[data-bs-theme="dark"] .vertical-menu #sidebar-menu ul.sub-menu .mm-active a { color: #e05a47; }

/* JQ. TABLE ROW ACTIONS — hover-reveal inline actions */
.table-row-actions {
    position: relative;
}
.table-row-actions tbody tr {
    transition: background .12s;
}
.table-row-actions tbody tr .tra-cell { position: relative; }
.table-row-actions tbody tr .tra-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .18s, transform .18s;
    pointer-events: none;
}
.table-row-actions tbody tr:hover .tra-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.tra-btn {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    color: #6b7280;
}
.tra-btn:hover       { background: #f3f4f6; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.tra-btn.tra-view    { color: #2563eb; }  .tra-btn.tra-view:hover    { background: #eff6ff; border-color: #bfdbfe; }
.tra-btn.tra-edit    { color: #d97706; }  .tra-btn.tra-edit:hover    { background: #fffbeb; border-color: #fde68a; }
.tra-btn.tra-delete  { color: #dc2626; }  .tra-btn.tra-delete:hover  { background: #fee2e2; border-color: #fecaca; }
.tra-btn.tra-approve { color: #16a34a; }  .tra-btn.tra-approve:hover { background: #f0fdf4; border-color: #bbf7d0; }
[data-bs-theme="dark"] .tra-btn { background: #252a3d; border-color: rgba(255,255,255,.1); color: #a0a8bf; }
[data-bs-theme="dark"] .tra-btn:hover        { background: #2d334a; }
[data-bs-theme="dark"] .tra-btn.tra-view:hover    { background: rgba(37,99,235,.15);  border-color: rgba(96,165,250,.2); }
[data-bs-theme="dark"] .tra-btn.tra-edit:hover    { background: rgba(217,119,6,.15);  border-color: rgba(251,191,36,.2); }
[data-bs-theme="dark"] .tra-btn.tra-delete:hover  { background: rgba(220,38,38,.15);  border-color: rgba(248,113,113,.2); }
[data-bs-theme="dark"] .tra-btn.tra-approve:hover { background: rgba(22,163,74,.15);  border-color: rgba(74,222,128,.2); }

/* JR. SCROLL SNAP CAROUSEL — CSS-only horizontal scroll */
.snap-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
}
.snap-scroll::-webkit-scrollbar { height: 4px; }
.snap-scroll::-webkit-scrollbar-track { background: transparent; }
.snap-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
[data-bs-theme="dark"] .snap-scroll::-webkit-scrollbar-thumb { background: #3a4060; }
.snap-scroll .snap-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 14px;
}
.snap-scroll .snap-item-sm  { width: clamp(200px, 45vw, 260px); }
.snap-scroll .snap-item-md  { width: clamp(260px, 60vw, 340px); }
.snap-scroll .snap-item-lg  { width: clamp(300px, 75vw, 420px); }
.snap-scroll .snap-item-full { width: calc(100% - 2rem); }
/* Dot navigation */
.snap-dots {
    display: flex; justify-content: center; gap: .4rem;
    margin-top: .75rem;
}
.snap-dots .sd-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: #d1d5db;
    transition: width .25s, background .25s;
    cursor: pointer;
}
.snap-dots .sd-dot.active { width: 18px; background: var(--brand,#CC3826); }
[data-bs-theme="dark"] .snap-dots .sd-dot { background: #3a4060; }
[data-bs-theme="dark"] .snap-dots .sd-dot.active { background: #e05a47; }

/* JS. AUDIO / MEDIA PLAYER WIDGET */
.media-player-card {
    background: #1a1f2e;
    border-radius: 18px;
    padding: 1.25rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.media-player-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top left, rgba(204,56,38,.3), transparent 60%);
    pointer-events: none;
}
.media-player-card > * { position: relative; z-index: 1; }
.media-player-card .mp-cover {
    width: 56px; height: 56px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
    flex-shrink: 0;
}
.media-player-card .mp-title { font-size: .9375rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-player-card .mp-sub   { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: 1px; }
.media-player-card .mp-controls {
    display: flex; align-items: center; justify-content: center; gap: .875rem; margin: .875rem 0;
}
.mp-ctrl-btn {
    width: 36px; height: 36px;
    border-radius: 50%; border: none; background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, transform .15s;
}
.mp-ctrl-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }
.mp-ctrl-btn.mp-play {
    width: 46px; height: 46px; font-size: 1.25rem;
    background: var(--brand,#CC3826);
    color: #fff;
    box-shadow: 0 4px 14px rgba(204,56,38,.5);
}
.mp-ctrl-btn.mp-play:hover { background: var(--brand-hover,#a82f1e); }
.media-player-card .mp-progress { margin: .375rem 0; }
.mp-track {
    width: 100%; height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.mp-track-fill {
    height: 100%;
    background: var(--brand,#CC3826);
    border-radius: 999px;
    transition: width .1s linear;
}
.mp-track:hover .mp-track-fill { background: #e05a47; }
.media-player-card .mp-times { display: flex; justify-content: space-between; font-size: .65rem; color: rgba(255,255,255,.45); margin-top: .25rem; }
.media-player-card .mp-vol {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: rgba(255,255,255,.5);
}
.mp-vol-bar { flex: 1; height: 3px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.mp-vol-fill { height: 100%; background: rgba(255,255,255,.5); border-radius: 999px; }

/* JT. RATING INPUT — interactive star select */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .15rem;
}
.rating-input input { display: none; }
.rating-input label {
    font-size: 1.5rem;
    color: #d1d5db;
    cursor: pointer;
    transition: color .15s, transform .15s;
}
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: #f59e0b; }
.rating-input label:hover { transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .rating-input label { transition: color .15s; transform: none; } }
.rating-input label:active { transform: scale(.9); }
/* Read-only display stars */
.star-display { display: inline-flex; gap: .1rem; font-size: .9rem; }
.star-display .s-full  { color: #f59e0b; }
.star-display .s-half  { color: #f59e0b; opacity: .6; }
.star-display .s-empty { color: #d1d5db; }
[data-bs-theme="dark"] .rating-input label { color: #4b5563; }
[data-bs-theme="dark"] .star-display .s-empty { color: #3a4060; }

/* JU. FLOATING LABEL INPUT v2 — brand color on focus */
.fl-group {
    position: relative;
    margin-bottom: 1.25rem;
}
.fl-group .fl-input {
    width: 100%;
    padding: 1.375rem 1rem .5rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9375rem;
    background: #fff;
    color: #1a1f2e;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
}
.fl-group .fl-label {
    position: absolute;
    left: 1rem; top: 1rem;
    font-size: .9375rem;
    color: #9ca3af;
    pointer-events: none;
    transition: top .2s, font-size .2s, color .2s;
    background: transparent;
    padding: 0 2px;
}
.fl-group .fl-input:focus,
.fl-group .fl-input:not(:placeholder-shown) {
    border-color: var(--brand,#CC3826);
    box-shadow: 0 0 0 3px rgba(204,56,38,.12);
}
.fl-group .fl-input:focus + .fl-label,
.fl-group .fl-input:not(:placeholder-shown) + .fl-label {
    top: .35rem;
    font-size: .7rem;
    color: var(--brand,#CC3826);
    font-weight: 600;
}
.fl-group .fl-icon {
    position: absolute;
    right: .875rem; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; color: #9ca3af; pointer-events: none;
}
[data-bs-theme="dark"] .fl-group .fl-input { background: #1e2130; border-color: #3a4060; color: #e8eaf0; }
[data-bs-theme="dark"] .fl-group .fl-label { color: #6b7280; }
[data-bs-theme="dark"] .fl-group .fl-input:focus,
[data-bs-theme="dark"] .fl-group .fl-input:not(:placeholder-shown) {
    border-color: #e05a47;
    box-shadow: 0 0 0 3px rgba(224,90,71,.15);
}
[data-bs-theme="dark"] .fl-group .fl-input:focus + .fl-label,
[data-bs-theme="dark"] .fl-group .fl-input:not(:placeholder-shown) + .fl-label { color: #e05a47; }

/* JV. HEADER PAGE BANNER — contextual top-of-page section */
.page-banner {
    background: linear-gradient(120deg, var(--brand,#CC3826) 0%, #e05a47 50%, #f07055 100%);
    border-radius: 18px;
    padding: 1.5rem 2rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.page-banner::before {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    right: -60px; top: -80px;
}
.page-banner::after {
    content: "";
    position: absolute;
    width: 120px; height: 120px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    right: 60px; bottom: -60px;
}
.page-banner > * { position: relative; z-index: 1; }
.page-banner .pb-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.page-banner .pb-sub   { font-size: .875rem; opacity: .8; }
.page-banner .pb-action {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    padding: .5rem 1.25rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.page-banner .pb-action:hover { background: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 575.98px) {
    .page-banner { padding: 1.125rem 1.25rem; }
    .page-banner .pb-title { font-size: 1.0625rem; }
}
/* Variants */
.page-banner.pb-success { background: linear-gradient(120deg, #15803d, #22c55e); }
.page-banner.pb-info    { background: linear-gradient(120deg, #1d4ed8, #3b82f6); }
.page-banner.pb-amber   { background: linear-gradient(120deg, #b45309, #f59e0b); }
.page-banner.pb-dark    { background: linear-gradient(120deg, #1a1f2e, #2d334a); }

/* JW. DARK MODE — Phase 32 */
[data-bs-theme="dark"] .media-player-card { box-shadow: 0 8px 32px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .snap-scroll::-webkit-scrollbar-thumb { background: #3a4060; }
[data-bs-theme="dark"] .liquid-stat { box-shadow: 0 4px 24px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .tra-btn { background: #2d334a; }
[data-bs-theme="dark"] .page-banner.pb-dark { background: linear-gradient(120deg, #0f1117, #1e2130); border: 1px solid rgba(255,255,255,.07); }

/* ============================================================
   PHASE 33 — PRICING PLANS · DIMENSIONAL ELEVATION · ADVANCED
   FILTERS · SPLIT LAYOUT · TIMELINE v2 · ROLE BADGE SYSTEM
   JX — KF  (2026-04-07)
   ============================================================ */

/* JX. PRICING PLAN CARDS — subscription tier UI */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    align-items: start;
}
.plan-card {
    border-radius: 20px;
    border: 1.5px solid rgba(0,0,0,.08);
    background: #fff;
    padding: 1.75rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s cubic-bezier(.22,1,.36,1), border-color .25s;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.plan-card:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,.1);
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) { .plan-card:hover { transform: none; } }
.plan-card.plan-popular {
    border-color: var(--brand,#CC3826);
    box-shadow: 0 8px 32px rgba(204,56,38,.18);
    transform: translateY(-6px);
}
.plan-card.plan-popular:hover { transform: translateY(-10px); box-shadow: 0 16px 48px rgba(204,56,38,.25); }
.plan-card .plan-badge {
    position: absolute; top: 1.25rem; right: 1.25rem;
    background: var(--brand,#CC3826); color: #fff;
    font-size: .65rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: .25rem .65rem;
    border-radius: 999px;
}
.plan-card .plan-name { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.plan-card.plan-popular .plan-name { color: var(--brand,#CC3826); }
.plan-card .plan-price {
    display: flex; align-items: flex-end; gap: .25rem;
    line-height: 1;
}
.plan-card .plan-price .pp-currency { font-size: 1.25rem; font-weight: 700; color: #1a1f2e; padding-bottom: .25rem; }
.plan-card .plan-price .pp-amount   { font-size: 3rem; font-weight: 900; letter-spacing: -.04em; color: #1a1f2e; }
.plan-card .plan-price .pp-period   { font-size: .8rem; color: #9ca3af; padding-bottom: .5rem; }
.plan-card .plan-desc { font-size: .8125rem; color: #6b7280; line-height: 1.55; margin-top: -.5rem; }
.plan-card .plan-features { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.plan-card .plan-features li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem; color: #374151; list-style: none; padding: 0; margin: 0;
}
.plan-card .plan-features li i { font-size: 1rem; flex-shrink: 0; }
.plan-card .plan-features li .pf-yes  { color: #16a34a; }
.plan-card .plan-features li .pf-no   { color: #d1d5db; }
.plan-card .plan-features li.pf-na    { opacity: .4; text-decoration: line-through; }
.plan-card .plan-cta {
    display: block; width: 100%; text-align: center;
    padding: .75rem; border-radius: 10px; font-size: .9rem; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: background .2s, box-shadow .2s;
    border: 2px solid rgba(0,0,0,.1);
    background: transparent; color: #374151;
    margin-top: auto;
}
.plan-card .plan-cta:hover { background: #f3f4f6; }
.plan-card.plan-popular .plan-cta {
    background: var(--brand,#CC3826); color: #fff;
    border-color: var(--brand,#CC3826);
    box-shadow: 0 4px 16px rgba(204,56,38,.35);
}
.plan-card.plan-popular .plan-cta:hover { background: var(--brand-hover,#a82f1e); box-shadow: 0 6px 22px rgba(204,56,38,.45); }
[data-bs-theme="dark"] .plan-card { background: #252a3d; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .plan-card.plan-popular { box-shadow: 0 8px 32px rgba(204,56,38,.25); }
[data-bs-theme="dark"] .plan-card .plan-price .pp-currency,
[data-bs-theme="dark"] .plan-card .plan-price .pp-amount { color: #e8eaf0; }
[data-bs-theme="dark"] .plan-card .plan-features li { color: #d1d5db; }
[data-bs-theme="dark"] .plan-card .plan-cta { border-color: rgba(255,255,255,.12); color: #a0a8bf; }
[data-bs-theme="dark"] .plan-card .plan-cta:hover { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .plan-card .plan-features li .pf-no { color: #3a4060; }

/* JY. DIMENSIONAL ELEVATION SYSTEM — Swiss Modernism depth */
/* 4-level shadow scale applied as utility classes */
.elev-xs { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.elev-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); }
.elev-md  { box-shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05); }
.elev-lg  { box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.05); }
.elev-xl  { box-shadow: 0 20px 40px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.06); }
.elev-2xl { box-shadow: 0 32px 64px rgba(0,0,0,.14), 0 12px 24px rgba(0,0,0,.08); }
/* Colored elevation (brand glow) */
.elev-brand { box-shadow: 0 8px 24px rgba(204,56,38,.25), 0 2px 6px rgba(204,56,38,.15); }
.elev-success { box-shadow: 0 8px 24px rgba(22,163,74,.2), 0 2px 6px rgba(22,163,74,.12); }
.elev-info    { box-shadow: 0 8px 24px rgba(37,99,235,.2), 0 2px 6px rgba(37,99,235,.12); }
/* Inner shadow for inset depth */
.elev-inset { box-shadow: inset 0 2px 6px rgba(0,0,0,.08); }
/* Dark mode elevation */
[data-bs-theme="dark"] .elev-xs  { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
[data-bs-theme="dark"] .elev-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.3),  0 1px 2px rgba(0,0,0,.2); }
[data-bs-theme="dark"] .elev-md  { box-shadow: 0 4px 6px rgba(0,0,0,.3),  0 2px 4px rgba(0,0,0,.2); }
[data-bs-theme="dark"] .elev-lg  { box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.25); }
[data-bs-theme="dark"] .elev-xl  { box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 8px 16px rgba(0,0,0,.3); }
[data-bs-theme="dark"] .elev-2xl { box-shadow: 0 32px 64px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.35); }

/* JZ. ADVANCED FILTER BAR — chips + dropdown + date range */
.filter-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.filter-bar .fb-label {
    font-size: .75rem; font-weight: 700; color: #9ca3af;
    letter-spacing: .06em; text-transform: uppercase;
    flex-shrink: 0; margin-right: .25rem;
}
.fb-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    font-size: .78rem; font-weight: 500; color: #374151;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
}
.fb-chip:hover { border-color: #d1d5db; background: #f3f4f6; }
.fb-chip.active {
    border-color: var(--brand,#CC3826);
    background: rgba(204,56,38,.08);
    color: var(--brand,#CC3826);
    font-weight: 600;
}
.fb-chip .fc-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.fb-chip .fc-remove {
    margin-left: .15rem; font-size: .9rem; line-height: 1;
    color: inherit; opacity: .6;
    cursor: pointer; transition: opacity .15s;
}
.fb-chip .fc-remove:hover { opacity: 1; }
.fb-divider { width: 1px; height: 24px; background: #e5e7eb; flex-shrink: 0; }
.fb-count {
    margin-left: auto; flex-shrink: 0;
    font-size: .75rem; color: #9ca3af; font-weight: 500;
    white-space: nowrap;
}
.fb-clear {
    background: none; border: none; color: #6b7280;
    font-size: .78rem; font-weight: 500; cursor: pointer;
    padding: .25rem .5rem; border-radius: 6px;
    transition: background .15s, color .15s;
}
.fb-clear:hover { background: #fee2e2; color: #dc2626; }
[data-bs-theme="dark"] .filter-bar { background: #252a3d; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fb-chip { background: #2d334a; border-color: #3a4060; color: #d1d5db; }
[data-bs-theme="dark"] .fb-chip:hover { background: #353d58; border-color: #4b5563; }
[data-bs-theme="dark"] .fb-chip.active { background: rgba(204,56,38,.15); border-color: rgba(204,56,38,.4); color: #e05a47; }
[data-bs-theme="dark"] .fb-divider { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .fb-clear:hover { background: rgba(220,38,38,.15); color: #f87171; }

/* KA. SPLIT LAYOUT — side-by-side content panels */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    height: 100%;
}
.split-layout.split-3-7 { grid-template-columns: 3fr 7fr; }
.split-layout.split-7-3 { grid-template-columns: 7fr 3fr; }
.split-layout.split-4-8 { grid-template-columns: 4fr 8fr; }
.split-layout.split-8-4 { grid-template-columns: 8fr 4fr; }
@media (max-width: 991.98px) {
    .split-layout,
    .split-layout.split-3-7,
    .split-layout.split-7-3,
    .split-layout.split-4-8,
    .split-layout.split-8-4 { grid-template-columns: 1fr; }
}
/* Resizable split with drag handle */
.split-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.split-panel .sp-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}
.split-panel .sp-header h6 { margin: 0; font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.split-panel .sp-body { flex: 1; overflow-y: auto; padding: 1rem 1.125rem; }
.split-panel .sp-footer {
    border-top: 1px solid rgba(0,0,0,.06);
    padding: .625rem 1.125rem;
    background: #f9fafb;
    flex-shrink: 0;
    font-size: .78rem; color: #6b7280;
}
[data-bs-theme="dark"] .split-panel { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .split-panel .sp-header { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .split-panel .sp-header h6 { color: #e8eaf0; }
[data-bs-theme="dark"] .split-panel .sp-footer { background: #1e2130; border-color: rgba(255,255,255,.06); color: #6b7280; }

/* KB. TIMELINE v2 — vertical with connector & media */
.timeline-v2 { display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline-v2::before {
    content: "";
    position: absolute;
    left: 19px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--brand,#CC3826), #e5e7eb 80%);
    border-radius: 999px;
    z-index: 0;
}
.tl2-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.tl2-item:last-child { padding-bottom: 0; }
.tl2-dot {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    margin-top: 2px;
    position: relative; z-index: 1;
}
.tl2-dot.tl-brand   { background: var(--brand,#CC3826); color: #fff; }
.tl2-dot.tl-green   { background: #16a34a; color: #fff; border-color: #dcfce7; }
.tl2-dot.tl-blue    { background: #2563eb; color: #fff; border-color: #dbeafe; }
.tl2-dot.tl-amber   { background: #d97706; color: #fff; border-color: #fef3c7; }
.tl2-dot.tl-gray    { background: #e5e7eb; color: #9ca3af; }
.tl2-dot.tl-pending { background: #fff; border-color: #d1d5db; color: #9ca3af; }
.tl2-content { flex: 1; min-width: 0; }
.tl2-content .tl2-header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.tl2-content .tl2-title { font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.tl2-content .tl2-time  { font-size: .7rem; color: #9ca3af; margin-left: auto; white-space: nowrap; }
.tl2-content .tl2-desc  { font-size: .8rem; color: #4b5563; line-height: 1.5; }
.tl2-content .tl2-media {
    margin-top: .625rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.07);
    max-width: 100%;
}
.tl2-content .tl2-media img { width: 100%; height: auto; display: block; }
.tl2-content .tl2-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.tl2-content .tl2-tag {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    padding: .15rem .55rem; border-radius: 999px;
    background: #f3f4f6; color: #4b5563;
}
[data-bs-theme="dark"] .timeline-v2::before { background: linear-gradient(to bottom, #e05a47, #2d334a 80%); }
[data-bs-theme="dark"] .tl2-dot { border-color: #1e2130; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .tl2-dot.tl-gray    { background: #2d334a; color: #6b7280; }
[data-bs-theme="dark"] .tl2-dot.tl-pending { background: #252a3d; border-color: #3a4060; }
[data-bs-theme="dark"] .tl2-content .tl2-title { color: #e8eaf0; }
[data-bs-theme="dark"] .tl2-content .tl2-desc  { color: #a0a8bf; }
[data-bs-theme="dark"] .tl2-content .tl2-tag   { background: #2d334a; color: #a0a8bf; }
[data-bs-theme="dark"] .tl2-content .tl2-media { border-color: rgba(255,255,255,.07); }

/* KC. ROLE & PERMISSION BADGE SYSTEM */
.role-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem;
    border-radius: 6px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    border: 1px solid transparent;
}
.role-badge i { font-size: .85rem; }
/* Role variants */
.role-super    { background: rgba(124,58,237,.1); color: #6d28d9; border-color: rgba(124,58,237,.2); }
.role-admin    { background: rgba(204,56,38,.1);  color: #9b1c10;  border-color: rgba(204,56,38,.2); }
.role-manager  { background: rgba(37,99,235,.1);  color: #1e40af;  border-color: rgba(37,99,235,.2); }
.role-driver   { background: rgba(217,119,6,.1);  color: #92400e;  border-color: rgba(217,119,6,.2); }
.role-user     { background: rgba(75,85,99,.08);  color: #374151;  border-color: rgba(75,85,99,.15); }
.role-guest    { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb; }
/* Permission level dots */
.perm-dot {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 500; color: #4b5563;
}
.perm-dot::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.perm-dot.perm-full::before   { background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.2); }
.perm-dot.perm-read::before   { background: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.2); }
.perm-dot.perm-limited::before{ background: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,.2); }
.perm-dot.perm-none::before   { background: #e5e7eb; }
[data-bs-theme="dark"] .role-super   { background: rgba(124,58,237,.15); color: #a78bfa; }
[data-bs-theme="dark"] .role-admin   { background: rgba(204,56,38,.15);  color: #f87171; }
[data-bs-theme="dark"] .role-manager { background: rgba(37,99,235,.15);  color: #60a5fa; }
[data-bs-theme="dark"] .role-driver  { background: rgba(217,119,6,.15);  color: #fbbf24; }
[data-bs-theme="dark"] .role-user    { background: rgba(255,255,255,.06); color: #d1d5db; }
[data-bs-theme="dark"] .role-guest   { background: rgba(255,255,255,.04); color: #6b7280; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .perm-dot     { color: #a0a8bf; }
[data-bs-theme="dark"] .perm-dot.perm-none::before { background: #3a4060; }

/* KD. KANBAN / CARD BOARD — drag column layout */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.kanban-board::-webkit-scrollbar { height: 4px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
.kanban-col {
    flex-shrink: 0;
    width: clamp(220px, 30vw, 280px);
    scroll-snap-align: start;
    background: #f3f4f6;
    border-radius: 14px;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.kanban-col .kc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .25rem .25rem .5rem;
}
.kanban-col .kc-title { font-size: .8rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .06em; }
.kanban-col .kc-count {
    background: #e5e7eb; color: #6b7280;
    font-size: .7rem; font-weight: 700;
    padding: .1rem .5rem; border-radius: 999px;
}
.kanban-card {
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    cursor: grab;
    transition: box-shadow .2s, transform .15s;
}
.kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; }
.kanban-card .kcard-title { font-size: .8125rem; font-weight: 600; color: #1a1f2e; margin-bottom: .375rem; }
.kanban-card .kcard-meta  { font-size: .72rem; color: #9ca3af; display: flex; align-items: center; gap: .4rem; }
.kanban-card .kcard-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.kanban-col.kc-todo     .kc-title { color: #6b7280; }
.kanban-col.kc-progress .kc-title { color: #2563eb; }
.kanban-col.kc-review   .kc-title { color: #d97706; }
.kanban-col.kc-done     .kc-title { color: #16a34a; }
.kanban-col.kc-progress { background: rgba(37,99,235,.05); }
.kanban-col.kc-review   { background: rgba(217,119,6,.05); }
.kanban-col.kc-done     { background: rgba(22,163,74,.05); }
[data-bs-theme="dark"] .kanban-col    { background: #2d334a; }
[data-bs-theme="dark"] .kanban-card   { background: #252a3d; border-color: rgba(255,255,255,.07); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
[data-bs-theme="dark"] .kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .kanban-card .kcard-title { color: #e8eaf0; }
[data-bs-theme="dark"] .kanban-col .kc-count { background: rgba(255,255,255,.1); color: #a0a8bf; }
[data-bs-theme="dark"] .kanban-board::-webkit-scrollbar-thumb { background: #3a4060; }

/* KE. DATA EXPORT PANEL — format selector + progress */
.export-panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    padding: 1.25rem;
}
.export-panel .ep-title { font-size: .9rem; font-weight: 700; color: #1a1f2e; margin-bottom: 1rem; }
.export-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: .625rem;
    margin-bottom: 1rem;
}
.ef-btn {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: .75rem .5rem;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    font-size: .7rem; font-weight: 600; color: #4b5563;
}
.ef-btn i { font-size: 1.375rem; }
.ef-btn:hover { border-color: #d1d5db; background: #f3f4f6; }
.ef-btn.active { border-color: var(--brand,#CC3826); background: rgba(204,56,38,.06); color: var(--brand,#CC3826); }
.ef-btn.ef-csv    i { color: #16a34a; }
.ef-btn.ef-pdf    i { color: #dc2626; }
.ef-btn.ef-excel  i { color: #15803d; }
.ef-btn.ef-json   i { color: #d97706; }
.ef-btn.ef-print  i { color: #2563eb; }
.export-panel .ep-opts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.export-panel .ep-opt  { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #374151; cursor: pointer; }
.export-panel .ep-opt input[type="checkbox"] { accent-color: var(--brand,#CC3826); width: 15px; height: 15px; }
.export-panel .ep-submit {
    width: 100%; padding: .7rem;
    background: var(--brand,#CC3826); color: #fff;
    border: none; border-radius: 9px; font-size: .875rem; font-weight: 700;
    cursor: pointer; transition: background .2s;
}
.export-panel .ep-submit:hover { background: var(--brand-hover,#a82f1e); }
[data-bs-theme="dark"] .export-panel { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .export-panel .ep-title { color: #e8eaf0; }
[data-bs-theme="dark"] .ef-btn { background: #2d334a; border-color: #3a4060; color: #a0a8bf; }
[data-bs-theme="dark"] .ef-btn:hover { background: #353d58; border-color: #4b5563; }
[data-bs-theme="dark"] .ef-btn.active { background: rgba(204,56,38,.15); border-color: rgba(204,56,38,.35); color: #e05a47; }
[data-bs-theme="dark"] .export-panel .ep-opt { color: #d1d5db; }

/* KF. DARK MODE — Phase 33 */
[data-bs-theme="dark"] .filter-bar .fb-label  { color: #4b5563; }
[data-bs-theme="dark"] .filter-bar .fb-count  { color: #6b7280; }
[data-bs-theme="dark"] .plan-card .plan-desc   { color: #a0a8bf; }
[data-bs-theme="dark"] .split-panel .sp-body   { scrollbar-color: #3a4060 transparent; }
[data-bs-theme="dark"] .kanban-col.kc-progress { background: rgba(37,99,235,.08); }
[data-bs-theme="dark"] .kanban-col.kc-review   { background: rgba(217,119,6,.08); }
[data-bs-theme="dark"] .kanban-col.kc-done     { background: rgba(22,163,74,.08); }

/* ============================================================
   PHASE 34 — SUPPORT TICKET · HEATMAP · LEADERBOARD · DRIVER
   PROFILE CARD · TRIP RECEIPT · BOOKING FLOW · MINI CALENDAR
   KG — KP  (2026-04-07)
   ============================================================ */

/* KG. SUPPORT TICKET CARD — CRM/helpdesk style */
.ticket-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.07);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    transition: box-shadow .2s, transform .18s cubic-bezier(.22,1,.36,1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.ticket-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ticket-clr, #d1d5db);
    border-radius: 4px 0 0 4px;
}
.ticket-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.09); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ticket-card:hover { transform: none; } }
/* Priority colors */
.ticket-card.tc-urgent   { --ticket-clr: #dc2626; }
.ticket-card.tc-high     { --ticket-clr: #d97706; }
.ticket-card.tc-medium   { --ticket-clr: #2563eb; }
.ticket-card.tc-low      { --ticket-clr: #16a34a; }
.ticket-card .tc-header  { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.ticket-card .tc-id      { font-size: .68rem; font-weight: 700; color: #9ca3af; letter-spacing: .06em; font-family: "Fira Code", monospace; }
.ticket-card .tc-badges  { display: flex; gap: .3rem; flex-wrap: wrap; }
.ticket-card .tc-title   { font-size: .875rem; font-weight: 700; color: #1a1f2e; line-height: 1.4; }
.ticket-card .tc-preview { font-size: .78rem; color: #6b7280; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-card .tc-footer  { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .125rem; }
.ticket-card .tc-meta    { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: #9ca3af; }
.ticket-card .tc-meta i  { font-size: .85rem; }
.ticket-card .tc-assign  { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #4b5563; }
.ticket-card .tc-assign img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* Ticket status badge */
.tc-status {
    font-size: .65rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px;
}
.tc-status.tcs-open       { background: #dbeafe; color: #1d4ed8; }
.tc-status.tcs-progress   { background: #fef3c7; color: #92400e; }
.tc-status.tcs-resolved   { background: #dcfce7; color: #15803d; }
.tc-status.tcs-closed     { background: #f3f4f6; color: #6b7280; }
.tc-status.tcs-escalated  { background: #fee2e2; color: #991b1b; }
[data-bs-theme="dark"] .ticket-card { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .ticket-card .tc-title   { color: #e8eaf0; }
[data-bs-theme="dark"] .ticket-card .tc-preview { color: #a0a8bf; }
[data-bs-theme="dark"] .ticket-card .tc-meta    { color: #6b7280; }
[data-bs-theme="dark"] .ticket-card .tc-assign  { color: #a0a8bf; }
[data-bs-theme="dark"] .tc-status.tcs-closed    { background: rgba(255,255,255,.07); color: #6b7280; }

/* KH. HEATMAP GRID — intensity visualization */
.heatmap-wrap { overflow-x: auto; }
.heatmap-grid {
    display: grid;
    gap: 3px;
    width: max-content;
    min-width: 100%;
}
.heatmap-grid.hm-7col  { grid-template-columns: repeat(7, 1fr); }
.heatmap-grid.hm-12col { grid-template-columns: repeat(12, 1fr); }
.heatmap-grid.hm-24col { grid-template-columns: repeat(24, 1fr); }
.hm-cell {
    width: clamp(18px, 3.5vw, 28px);
    height: clamp(18px, 3.5vw, 28px);
    border-radius: 4px;
    background: var(--hm-bg, #e5e7eb);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
    position: relative;
}
.hm-cell:hover { transform: scale(1.25); box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 1; }
/* Intensity levels — 0 to 5 */
.hm-cell[data-intensity="0"] { --hm-bg: #f3f4f6; }
.hm-cell[data-intensity="1"] { --hm-bg: rgba(204,56,38,.2); }
.hm-cell[data-intensity="2"] { --hm-bg: rgba(204,56,38,.4); }
.hm-cell[data-intensity="3"] { --hm-bg: rgba(204,56,38,.6); }
.hm-cell[data-intensity="4"] { --hm-bg: rgba(204,56,38,.8); }
.hm-cell[data-intensity="5"] { --hm-bg: #CC3826; }
/* Heatmap legend */
.hm-legend {
    display: flex; align-items: center; gap: .375rem;
    margin-top: .625rem; font-size: .7rem; color: #6b7280;
}
.hm-legend-scale { display: flex; gap: 2px; }
.hm-legend-scale span {
    width: 12px; height: 12px; border-radius: 2px;
    display: block;
}
/* Day/hour labels */
.hm-labels { display: flex; gap: 3px; margin-bottom: 2px; }
.hm-label  { font-size: .6rem; color: #9ca3af; width: clamp(18px,3.5vw,28px); text-align: center; }
[data-bs-theme="dark"] .hm-cell[data-intensity="0"] { --hm-bg: #2d334a; }
[data-bs-theme="dark"] .hm-legend { color: #6b7280; }

/* KI. DRIVER LEADERBOARD — ranked performance table */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
.lb-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .625rem .875rem;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid rgba(0,0,0,.05);
    transition: background .15s, box-shadow .15s;
    cursor: pointer;
}
.lb-item:hover { background: #f3f4f6; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.lb-item .lb-rank {
    width: 28px;
    font-size: .875rem; font-weight: 800;
    text-align: center; flex-shrink: 0; color: #9ca3af;
}
.lb-item:nth-child(1) .lb-rank { color: #f59e0b; font-size: 1.1rem; }
.lb-item:nth-child(2) .lb-rank { color: #9ca3af; }
.lb-item:nth-child(3) .lb-rank { color: #cd7f32; }
.lb-item .lb-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lb-item .lb-info   { flex: 1; min-width: 0; }
.lb-item .lb-name   { font-size: .8125rem; font-weight: 700; color: #1a1f2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-item .lb-sub    { font-size: .72rem; color: #6b7280; margin-top: 1px; }
.lb-item .lb-score  { font-size: .9375rem; font-weight: 800; color: var(--brand,#CC3826); flex-shrink: 0; }
.lb-item .lb-trend  { font-size: .7rem; flex-shrink: 0; }
.lb-item .lb-trend.up   { color: #16a34a; }
.lb-item .lb-trend.down { color: #dc2626; }
.lb-item .lb-trend.flat { color: #9ca3af; }
/* Top 3 special styling */
.lb-item:nth-child(1) { background: linear-gradient(90deg, rgba(245,158,11,.08), #f9fafb); border-color: rgba(245,158,11,.2); }
.lb-item:nth-child(2) { background: linear-gradient(90deg, rgba(156,163,175,.08), #f9fafb); border-color: rgba(156,163,175,.2); }
.lb-item:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.08), #f9fafb); border-color: rgba(205,127,50,.2); }
[data-bs-theme="dark"] .lb-item { background: #2d334a; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .lb-item:hover { background: #353d58; }
[data-bs-theme="dark"] .lb-item .lb-name { color: #e8eaf0; }
[data-bs-theme="dark"] .lb-item .lb-sub  { color: #6b7280; }
[data-bs-theme="dark"] .lb-item:nth-child(1) { background: linear-gradient(90deg, rgba(245,158,11,.1), #2d334a); }
[data-bs-theme="dark"] .lb-item:nth-child(2) { background: linear-gradient(90deg, rgba(156,163,175,.07), #2d334a); }
[data-bs-theme="dark"] .lb-item:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.08), #2d334a); }

/* KJ. DRIVER PROFILE CARD — full-detail driver widget */
.driver-profile-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
}
.driver-profile-card .dpc-cover {
    height: 80px;
    background: linear-gradient(120deg, var(--brand,#CC3826), #e05a47 60%, #f07055);
    position: relative;
}
.driver-profile-card .dpc-avatar-wrap {
    position: absolute;
    bottom: -24px; left: 1.25rem;
}
.driver-profile-card .dpc-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: block;
}
.driver-profile-card .dpc-status-dot {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.driver-profile-card .dpc-body { padding: 2rem 1.25rem 1.25rem; }
.driver-profile-card .dpc-name { font-size: 1.0625rem; font-weight: 800; color: #1a1f2e; margin-bottom: 2px; }
.driver-profile-card .dpc-meta { font-size: .78rem; color: #6b7280; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.driver-profile-card .dpc-stats {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: .5rem; margin: 1rem 0;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .875rem 0;
}
.driver-profile-card .dpc-stat { text-align: center; }
.driver-profile-card .dpc-stat .ds-val { font-size: 1.125rem; font-weight: 800; color: #1a1f2e; }
.driver-profile-card .dpc-stat .ds-lbl { font-size: .68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }
.driver-profile-card .dpc-actions { display: flex; gap: .5rem; }
.driver-profile-card .dpc-actions .btn { flex: 1; font-size: .8rem; padding: .5rem; }
[data-bs-theme="dark"] .driver-profile-card { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .driver-profile-card .dpc-avatar { border-color: #252a3d; }
[data-bs-theme="dark"] .driver-profile-card .dpc-status-dot { border-color: #252a3d; }
[data-bs-theme="dark"] .driver-profile-card .dpc-name { color: #e8eaf0; }
[data-bs-theme="dark"] .driver-profile-card .dpc-stat .ds-val { color: #e8eaf0; }
[data-bs-theme="dark"] .driver-profile-card .dpc-stats { border-color: rgba(255,255,255,.07); }

/* KK. TRIP RECEIPT CARD — booking summary widget */
.trip-receipt {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.08);
    overflow: hidden;
    font-size: .8125rem;
}
.trip-receipt .tr-header {
    background: linear-gradient(120deg, #1a1f2e, #2d3350);
    color: #fff;
    padding: 1rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
}
.trip-receipt .tr-header .trh-id   { font-size: .7rem; opacity: .6; font-family: "Fira Code",monospace; }
.trip-receipt .tr-header .trh-status { font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.trh-status.trh-completed { background: rgba(22,163,74,.25); color: #4ade80; }
.trh-status.trh-cancelled { background: rgba(220,38,38,.25); color: #f87171; }
.trh-status.trh-progress  { background: rgba(217,119,6,.25);  color: #fbbf24; }
.trip-receipt .tr-route {
    padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: .5rem;
    border-bottom: 1px dashed rgba(0,0,0,.1);
}
.trip-receipt .tr-route .trr-point { display: flex; align-items: center; gap: .625rem; }
.trip-receipt .tr-route .trr-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.trr-dot.trr-pickup  { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.trr-dot.trr-dropoff { background: var(--brand,#CC3826); box-shadow: 0 0 0 3px rgba(204,56,38,.2); }
.trip-receipt .tr-route .trr-addr  { font-size: .8125rem; color: #374151; font-weight: 500; }
.trip-receipt .tr-route .trr-line  { width: 1.5px; height: 14px; background: #e5e7eb; margin-left: 4.25px; }
.trip-receipt .tr-details {
    padding: .875rem 1.25rem;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
    border-bottom: 1px dashed rgba(0,0,0,.1);
}
.trip-receipt .tr-details .trd-item .trd-lbl { font-size: .68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; }
.trip-receipt .tr-details .trd-item .trd-val { font-size: .8125rem; font-weight: 600; color: #1a1f2e; margin-top: 1px; }
.trip-receipt .tr-fare {
    padding: .875rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
}
.trip-receipt .tr-fare .trf-label { font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.trip-receipt .tr-fare .trf-amount { font-size: 1.375rem; font-weight: 900; color: var(--brand,#CC3826); letter-spacing: -.02em; }
/* Dashed border separator (receipt style) */
.trip-receipt .tr-tear {
    height: 1px;
    background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(0,0,0,.12) 6px, rgba(0,0,0,.12) 12px);
    position: relative;
}
.trip-receipt .tr-tear::before,
.trip-receipt .tr-tear::after {
    content: "";
    position: absolute;
    top: -10px;
    width: 20px; height: 20px;
    background: #f8f9fa;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
}
.trip-receipt .tr-tear::before { left: -10px; }
.trip-receipt .tr-tear::after  { right: -10px; }
[data-bs-theme="dark"] .trip-receipt { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .trip-receipt .tr-route { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .trip-receipt .tr-route .trr-addr { color: #d1d5db; }
[data-bs-theme="dark"] .trip-receipt .tr-route .trr-line { background: #3a4060; }
[data-bs-theme="dark"] .trip-receipt .tr-details { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .trip-receipt .tr-details .trd-item .trd-val { color: #e8eaf0; }
[data-bs-theme="dark"] .trip-receipt .tr-fare .trf-label { color: #e8eaf0; }
[data-bs-theme="dark"] .trip-receipt .tr-tear { background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,255,255,.1) 6px, rgba(255,255,255,.1) 12px); }
[data-bs-theme="dark"] .trip-receipt .tr-tear::before,
[data-bs-theme="dark"] .trip-receipt .tr-tear::after { background: #1e2130; border-color: rgba(255,255,255,.08); }

/* KL. MINI CALENDAR — compact date picker widget */
.mini-cal {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    padding: 1rem;
    min-width: 220px;
    user-select: none;
}
.mini-cal .mc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
}
.mini-cal .mc-month { font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.mini-cal .mc-nav {
    width: 28px; height: 28px;
    border-radius: 8px; border: 1px solid rgba(0,0,0,.08);
    background: transparent; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem;
    transition: background .15s, color .15s;
}
.mini-cal .mc-nav:hover { background: #f3f4f6; color: var(--brand,#CC3826); }
.mini-cal .mc-weekdays {
    display: grid; grid-template-columns: repeat(7,1fr);
    margin-bottom: .375rem;
}
.mini-cal .mc-weekdays span { text-align: center; font-size: .65rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; padding: .25rem 0; }
.mini-cal .mc-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mini-cal .mc-day {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 500; color: #374151;
    border-radius: 8px; cursor: pointer;
    transition: background .12s, color .12s;
}
.mini-cal .mc-day:hover  { background: #f3f4f6; }
.mini-cal .mc-day.today  { background: rgba(204,56,38,.1); color: var(--brand,#CC3826); font-weight: 700; }
.mini-cal .mc-day.selected { background: var(--brand,#CC3826); color: #fff; font-weight: 700; }
.mini-cal .mc-day.in-range { background: rgba(204,56,38,.08); }
.mini-cal .mc-day.other-month { color: #d1d5db; }
.mini-cal .mc-day.disabled { color: #e5e7eb; pointer-events: none; }
.mini-cal .mc-day.has-event::after {
    content: ""; display: block;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand,#CC3826);
    position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
}
.mini-cal .mc-day { position: relative; }
[data-bs-theme="dark"] .mini-cal { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .mini-cal .mc-month { color: #e8eaf0; }
[data-bs-theme="dark"] .mini-cal .mc-nav   { border-color: rgba(255,255,255,.1); color: #a0a8bf; }
[data-bs-theme="dark"] .mini-cal .mc-nav:hover { background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .mini-cal .mc-day   { color: #d1d5db; }
[data-bs-theme="dark"] .mini-cal .mc-day:hover { background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .mini-cal .mc-day.other-month { color: #3a4060; }
[data-bs-theme="dark"] .mini-cal .mc-day.disabled    { color: #2d334a; }

/* KM. BOOKING FLOW STEP — multi-step reservation UI */
.booking-flow {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
}
.booking-flow .bf-step {
    display: none;
    padding: 1.5rem;
    animation: stepFade .25s ease-out;
}
@keyframes stepFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .booking-flow .bf-step { animation: none; } }
.booking-flow .bf-step.active { display: block; }
.booking-flow .bf-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,.07);
    background: #f9fafb;
    gap: .75rem;
}
.booking-flow .bf-footer .bf-back {
    background: transparent; border: 1.5px solid #e5e7eb;
    color: #4b5563; border-radius: 10px;
    padding: .6rem 1.25rem; font-size: .875rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.booking-flow .bf-footer .bf-back:hover { border-color: #d1d5db; background: #f3f4f6; }
.booking-flow .bf-footer .bf-next {
    background: var(--brand,#CC3826); color: #fff;
    border: none; border-radius: 10px;
    padding: .6rem 1.5rem; font-size: .875rem; font-weight: 700;
    cursor: pointer; transition: background .2s, box-shadow .2s;
    margin-left: auto;
    display: flex; align-items: center; gap: .4rem;
}
.booking-flow .bf-footer .bf-next:hover { background: var(--brand-hover,#a82f1e); box-shadow: 0 4px 14px rgba(204,56,38,.35); }
/* Route input pair */
.route-input-pair {
    display: flex; flex-direction: column; gap: 0;
    border: 1.5px solid #e5e7eb; border-radius: 12px; overflow: hidden;
}
.route-input-pair .rip-row {
    display: flex; align-items: center; gap: .625rem;
    padding: .75rem 1rem;
    transition: background .15s;
}
.route-input-pair .rip-row:first-child { border-bottom: 1px solid #f3f4f6; }
.route-input-pair .rip-row:hover { background: #fafafa; }
.route-input-pair .rip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rip-dot.rip-from { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.rip-dot.rip-to   { background: var(--brand,#CC3826); box-shadow: 0 0 0 3px rgba(204,56,38,.15); }
.route-input-pair .rip-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: .875rem; color: #1a1f2e;
}
.route-input-pair .rip-input::placeholder { color: #9ca3af; }
.route-input-pair .rip-swap {
    width: 28px; height: 28px; border-radius: 8px;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem; color: #6b7280;
    transition: background .15s, transform .3s;
    flex-shrink: 0;
}
.route-input-pair .rip-swap:hover { background: #e5e7eb; transform: rotate(180deg); }
[data-bs-theme="dark"] .booking-flow { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .booking-flow .bf-footer { background: #1e2130; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .booking-flow .bf-footer .bf-back { border-color: rgba(255,255,255,.1); color: #a0a8bf; }
[data-bs-theme="dark"] .booking-flow .bf-footer .bf-back:hover { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .route-input-pair { border-color: #3a4060; }
[data-bs-theme="dark"] .route-input-pair .rip-row:first-child { border-color: #2d334a; }
[data-bs-theme="dark"] .route-input-pair .rip-row:hover { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .route-input-pair .rip-input { color: #e8eaf0; }
[data-bs-theme="dark"] .route-input-pair .rip-swap { background: #2d334a; border-color: #3a4060; color: #a0a8bf; }

/* KN. VEHICLE TYPE SELECTOR — booking car class picker */
.vehicle-selector {
    display: flex; gap: .625rem; flex-wrap: wrap;
}
.vehicle-option {
    flex: 1; min-width: 100px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 12px;
    padding: .875rem .75rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    position: relative;
}
.vehicle-option input[type="radio"] { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.vehicle-option .vo-icon { font-size: 1.75rem; margin-bottom: .375rem; display: block; }
.vehicle-option .vo-name { font-size: .78rem; font-weight: 700; color: #374151; }
.vehicle-option .vo-price { font-size: .7rem; color: #9ca3af; margin-top: 2px; }
.vehicle-option .vo-eta   { font-size: .68rem; color: #16a34a; font-weight: 600; margin-top: 2px; }
.vehicle-option:has(input:checked),
.vehicle-option.selected {
    border-color: var(--brand,#CC3826);
    background: rgba(204,56,38,.06);
    box-shadow: 0 2px 10px rgba(204,56,38,.15);
}
.vehicle-option:has(input:checked) .vo-name,
.vehicle-option.selected .vo-name { color: var(--brand,#CC3826); }
.vehicle-option:has(input:checked) .vo-price,
.vehicle-option.selected .vo-price { color: rgba(204,56,38,.7); }
[data-bs-theme="dark"] .vehicle-option { background: #2d334a; border-color: #3a4060; }
[data-bs-theme="dark"] .vehicle-option .vo-name  { color: #d1d5db; }
[data-bs-theme="dark"] .vehicle-option:has(input:checked),
[data-bs-theme="dark"] .vehicle-option.selected   { background: rgba(204,56,38,.12); border-color: rgba(204,56,38,.4); }

/* KO. STAT COMPARISON ROW — before/after metric */
.stat-compare-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.stat-compare-row:last-child { border-bottom: none; }
.stat-compare-row .scr-label { flex: 1; font-size: .8125rem; color: #4b5563; min-width: 0; }
.stat-compare-row .scr-bar-wrap { flex: 2; position: relative; height: 6px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.stat-compare-row .scr-bar-fill { height: 100%; border-radius: 999px; background: var(--brand,#CC3826); transition: width .6s cubic-bezier(.22,1,.36,1); }
.stat-compare-row .scr-bar-fill.scr-green  { background: #16a34a; }
.stat-compare-row .scr-bar-fill.scr-blue   { background: #2563eb; }
.stat-compare-row .scr-bar-fill.scr-amber  { background: #d97706; }
.stat-compare-row .scr-val { font-size: .8125rem; font-weight: 700; color: #1a1f2e; min-width: 48px; text-align: right; }
.stat-compare-row .scr-delta {
    font-size: .7rem; font-weight: 600; min-width: 42px; text-align: right;
}
.stat-compare-row .scr-delta.up   { color: #16a34a; }
.stat-compare-row .scr-delta.down { color: #dc2626; }
[data-bs-theme="dark"] .stat-compare-row { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .stat-compare-row .scr-label { color: #a0a8bf; }
[data-bs-theme="dark"] .stat-compare-row .scr-bar-wrap { background: #2d334a; }
[data-bs-theme="dark"] .stat-compare-row .scr-val { color: #e8eaf0; }

/* KP. DARK MODE — Phase 34 final sweep */
[data-bs-theme="dark"] .ticket-card.tc-urgent   { --ticket-clr: #f87171; }
[data-bs-theme="dark"] .ticket-card.tc-high     { --ticket-clr: #fbbf24; }
[data-bs-theme="dark"] .ticket-card.tc-medium   { --ticket-clr: #60a5fa; }
[data-bs-theme="dark"] .ticket-card.tc-low      { --ticket-clr: #4ade80; }
[data-bs-theme="dark"] .tc-status.tcs-open      { background: rgba(37,99,235,.15);  color: #60a5fa; }
[data-bs-theme="dark"] .tc-status.tcs-progress  { background: rgba(217,119,6,.15);  color: #fbbf24; }
[data-bs-theme="dark"] .tc-status.tcs-resolved  { background: rgba(22,163,74,.15);  color: #4ade80; }
[data-bs-theme="dark"] .tc-status.tcs-escalated { background: rgba(220,38,38,.15);  color: #f87171; }
[data-bs-theme="dark"] .driver-profile-card .dpc-meta { color: #6b7280; }
[data-bs-theme="dark"] .lb-item .lb-score { color: #e05a47; }
[data-bs-theme="dark"] .mini-cal .mc-day.in-range { background: rgba(204,56,38,.12); }
[data-bs-theme="dark"] .stat-compare-row .scr-delta.up   { color: #4ade80; }
[data-bs-theme="dark"] .stat-compare-row .scr-delta.down { color: #f87171; }

/* ============================================================
   PHASE 35 — SETTINGS PAGE · SECURITY · GAUGE CHART · REVENUE
   WATERFALL · PARCEL DELIVERY · ZONE MAP · PROMO CODE · API DOCS
   KQ — KZ  (2026-04-07)
   ============================================================ */

/* KQ. SETTINGS PAGE LAYOUT — tabbed sections */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 767.98px) { .settings-layout { grid-template-columns: 1fr; } }

.settings-nav {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    position: sticky;
    top: calc(var(--topbar-h,60px) + 1rem);
}
.settings-nav .sn-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    font-size: .8375rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.settings-nav .sn-item i { font-size: 1.1rem; width: 20px; text-align: center; flex-shrink: 0; }
.settings-nav .sn-item:hover { background: #f9fafb; color: #1a1f2e; }
.settings-nav .sn-item.active {
    background: rgba(204,56,38,.06);
    color: var(--brand,#CC3826);
    border-left-color: var(--brand,#CC3826);
    font-weight: 700;
}
.settings-nav .sn-divider { height: 1px; background: rgba(0,0,0,.06); margin: .25rem 0; }
.settings-nav .sn-danger  { color: #dc2626 !important; }
.settings-nav .sn-danger:hover { background: #fee2e2 !important; }

.settings-content { display: flex; flex-direction: column; gap: 1.25rem; }
.settings-block {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
}
.settings-block .sb-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex; align-items: center; justify-content: space-between;
}
.settings-block .sb-head h6 { margin: 0; font-size: .9375rem; font-weight: 700; color: #1a1f2e; }
.settings-block .sb-head p  { margin: .125rem 0 0; font-size: .78rem; color: #6b7280; }
.settings-block .sb-body { padding: 0; }

/* Settings row inside block */
.setting-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: background .15s;
}
.setting-row:last-child { border-bottom: none; }
.setting-row:hover { background: #fafafa; }
.setting-row .sr-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    background: #f3f4f6; color: #6b7280;
}
.setting-row .sr-info { flex: 1; min-width: 0; }
.setting-row .sr-label { font-size: .875rem; font-weight: 600; color: #1a1f2e; }
.setting-row .sr-desc  { font-size: .75rem; color: #6b7280; margin-top: 1px; }
.setting-row .sr-ctrl  { flex-shrink: 0; }
/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .ts-slider {
    position: absolute; inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s;
}
.toggle-switch .ts-slider::before {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .ts-slider { background: var(--brand,#CC3826); }
.toggle-switch input:checked + .ts-slider::before { transform: translateX(20px); }
.toggle-switch input:focus-visible + .ts-slider { outline: 3px solid rgba(204,56,38,.4); outline-offset: 2px; }

[data-bs-theme="dark"] .settings-nav { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .settings-nav .sn-item { color: #a0a8bf; }
[data-bs-theme="dark"] .settings-nav .sn-item:hover { background: rgba(255,255,255,.05); color: #e8eaf0; }
[data-bs-theme="dark"] .settings-nav .sn-divider { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .settings-nav .sn-danger { color: #f87171 !important; }
[data-bs-theme="dark"] .settings-nav .sn-danger:hover { background: rgba(220,38,38,.12) !important; }
[data-bs-theme="dark"] .settings-block { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .settings-block .sb-head { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .settings-block .sb-head h6 { color: #e8eaf0; }
[data-bs-theme="dark"] .settings-block .sb-head p  { color: #6b7280; }
[data-bs-theme="dark"] .setting-row { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .setting-row:hover { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .setting-row .sr-icon  { background: #2d334a; color: #a0a8bf; }
[data-bs-theme="dark"] .setting-row .sr-label { color: #e8eaf0; }
[data-bs-theme="dark"] .setting-row .sr-desc  { color: #6b7280; }
[data-bs-theme="dark"] .toggle-switch .ts-slider { background: #3a4060; }

/* KR. SECURITY PANEL — 2FA, sessions, danger zone */
.security-sessions { display: flex; flex-direction: column; gap: .375rem; }
.session-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: background .15s;
}
.session-item:last-child { border-bottom: none; }
.session-item .si-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: #f3f4f6; color: #6b7280;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
}
.session-item.si-current .si-icon { background: rgba(204,56,38,.1); color: var(--brand,#CC3826); }
.session-item .si-info { flex: 1; min-width: 0; }
.session-item .si-device { font-size: .8125rem; font-weight: 600; color: #1a1f2e; }
.session-item .si-meta   { font-size: .72rem; color: #9ca3af; margin-top: 1px; }
.session-item .si-badge  {
    font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
    background: rgba(22,163,74,.1); color: #15803d;
}
.session-item .si-revoke {
    background: none; border: 1px solid #e5e7eb; color: #6b7280;
    font-size: .75rem; padding: .3rem .65rem; border-radius: 7px;
    cursor: pointer; transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
}
.session-item .si-revoke:hover { border-color: #fca5a5; color: #dc2626; background: #fee2e2; }
/* Danger zone */
.danger-zone {
    border: 1.5px solid #fca5a5;
    border-radius: 14px;
    overflow: hidden;
}
.danger-zone .dz-head {
    background: #fee2e2;
    padding: .75rem 1.25rem;
    display: flex; align-items: center; gap: .5rem;
    font-size: .8125rem; font-weight: 700; color: #991b1b;
}
.danger-zone .dz-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid #fee2e2;
}
.danger-zone .dz-item .dz-label { font-size: .875rem; font-weight: 600; color: #1a1f2e; }
.danger-zone .dz-item .dz-desc  { font-size: .75rem; color: #6b7280; margin-top: 1px; }
.danger-zone .dz-item .dz-action {
    flex-shrink: 0;
    border: 1.5px solid #fca5a5; background: transparent; color: #dc2626;
    padding: .4rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.danger-zone .dz-item .dz-action:hover { background: #dc2626; color: #fff; }
[data-bs-theme="dark"] .security-sessions .session-item { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .session-item .si-icon  { background: #2d334a; color: #a0a8bf; }
[data-bs-theme="dark"] .session-item .si-device { color: #e8eaf0; }
[data-bs-theme="dark"] .session-item .si-revoke { border-color: rgba(255,255,255,.1); color: #6b7280; }
[data-bs-theme="dark"] .session-item .si-revoke:hover { border-color: #f87171; color: #f87171; background: rgba(220,38,38,.12); }
[data-bs-theme="dark"] .danger-zone { border-color: rgba(220,38,38,.3); }
[data-bs-theme="dark"] .danger-zone .dz-head { background: rgba(220,38,38,.12); color: #f87171; }
[data-bs-theme="dark"] .danger-zone .dz-item { border-color: rgba(220,38,38,.12); }
[data-bs-theme="dark"] .danger-zone .dz-item .dz-label { color: #e8eaf0; }
[data-bs-theme="dark"] .danger-zone .dz-item .dz-action { border-color: rgba(220,38,38,.4); color: #f87171; }
[data-bs-theme="dark"] .danger-zone .dz-item .dz-action:hover { background: #dc2626; color: #fff; }

/* KS. SVG GAUGE CHART — CSS-only performance ring */
.gauge-wrap {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    position: relative;
}
.gauge-svg { overflow: visible; }
.gauge-track { fill: none; stroke: #f3f4f6; stroke-width: 10; stroke-linecap: round; }
.gauge-fill  {
    fill: none; stroke-width: 10; stroke-linecap: round;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);
}
.gauge-fill.gf-red    { stroke: #dc2626; }
.gauge-fill.gf-amber  { stroke: #d97706; }
.gauge-fill.gf-green  { stroke: #16a34a; }
.gauge-fill.gf-brand  { stroke: var(--brand,#CC3826); }
.gauge-fill.gf-blue   { stroke: #2563eb; }
.gauge-center-val {
    font-size: 1.5rem; font-weight: 800;
    fill: #1a1f2e; text-anchor: middle; dominant-baseline: central;
    font-family: "Inter", sans-serif;
}
.gauge-center-lbl {
    font-size: .6rem; font-weight: 600;
    fill: #9ca3af; text-anchor: middle;
    font-family: "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
/* Threshold marker */
.gauge-marker { fill: none; stroke: #1a1f2e; stroke-width: 2; stroke-linecap: round; }
.gauge-wrap .gw-label { font-size: .78rem; font-weight: 600; color: #4b5563; text-align: center; }
[data-bs-theme="dark"] .gauge-track { stroke: #2d334a; }
[data-bs-theme="dark"] .gauge-center-val { fill: #e8eaf0; }
[data-bs-theme="dark"] .gauge-marker { stroke: #e8eaf0; }
[data-bs-theme="dark"] .gauge-wrap .gw-label { color: #a0a8bf; }

/* KT. PARCEL DELIVERY CARD — package tracking widget */
.parcel-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
}
.parcel-card .pc-header {
    background: linear-gradient(120deg, #1a1f2e, #2d3350);
    color: #fff; padding: .875rem 1.125rem;
    display: flex; align-items: center; justify-content: space-between;
}
.parcel-card .pc-header .pch-id { font-size: .7rem; font-family: "Fira Code",monospace; opacity: .65; }
.parcel-card .pc-header .pch-status {
    font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    padding: .2rem .6rem; border-radius: 999px;
}
.pch-status.pcs-transit  { background: rgba(37,99,235,.3);  color: #93c5fd; }
.pch-status.pcs-arrived  { background: rgba(22,163,74,.3);  color: #86efac; }
.pch-status.pcs-pending  { background: rgba(217,119,6,.3);  color: #fde68a; }
.pch-status.pcs-failed   { background: rgba(220,38,38,.3);  color: #fca5a5; }
.parcel-card .pc-body { padding: 1rem 1.125rem; }
.parcel-card .pc-route {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .875rem;
}
.parcel-card .pc-route .pcr-from,
.parcel-card .pc-route .pcr-to { flex: 1; }
.parcel-card .pc-route .pcr-label { font-size: .65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.parcel-card .pc-route .pcr-city  { font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.parcel-card .pc-route .pcr-arrow { font-size: 1.25rem; color: #d1d5db; flex-shrink: 0; }
.parcel-card .pc-meta {
    display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(0,0,0,.06);
}
.parcel-card .pc-meta .pcm-item .pcm-lbl { font-size: .65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; }
.parcel-card .pc-meta .pcm-item .pcm-val { font-size: .8125rem; font-weight: 700; color: #1a1f2e; margin-top: 2px; }
/* Parcel tracking steps */
.parcel-steps {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 0 0; position: relative;
}
.parcel-steps::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: calc(.875rem + 11px);
    height: 2px; background: #e5e7eb; z-index: 0;
}
.parcel-step {
    display: flex; flex-direction: column; align-items: center; gap: .375rem;
    position: relative; z-index: 1; flex: 1;
}
.parcel-step .ps-dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700;
    border: 2px solid #e5e7eb;
    background: #fff; color: #9ca3af;
}
.parcel-step.ps-done .ps-dot   { background: var(--brand,#CC3826); border-color: var(--brand,#CC3826); color: #fff; }
.parcel-step.ps-active .ps-dot { background: #fff; border-color: var(--brand,#CC3826); color: var(--brand,#CC3826); box-shadow: 0 0 0 3px rgba(204,56,38,.2); }
.parcel-step .ps-label { font-size: .62rem; color: #9ca3af; text-align: center; line-height: 1.3; font-weight: 500; }
.parcel-step.ps-done .ps-label   { color: var(--brand,#CC3826); font-weight: 700; }
.parcel-step.ps-active .ps-label { color: #1a1f2e; font-weight: 700; }
[data-bs-theme="dark"] .parcel-card { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .parcel-card .pc-route .pcr-city { color: #e8eaf0; }
[data-bs-theme="dark"] .parcel-card .pc-route .pcr-arrow { color: #3a4060; }
[data-bs-theme="dark"] .parcel-card .pc-meta { border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .parcel-card .pc-meta .pcm-item .pcm-val { color: #e8eaf0; }
[data-bs-theme="dark"] .parcel-steps::before { background: #3a4060; }
[data-bs-theme="dark"] .parcel-step .ps-dot { background: #252a3d; border-color: #3a4060; }

/* KU. PROMO CODE WIDGET — discount input + validation */
.promo-input-wrap {
    display: flex; gap: .5rem; align-items: stretch;
}
.promo-input-wrap .pi-field {
    flex: 1;
    display: flex; align-items: center; gap: .5rem;
    padding: .625rem .875rem;
    border: 1.5px solid #e5e7eb; border-radius: 10px;
    background: #f9fafb;
    transition: border-color .2s, box-shadow .2s;
}
.promo-input-wrap .pi-field:focus-within {
    border-color: var(--brand,#CC3826);
    box-shadow: 0 0 0 3px rgba(204,56,38,.12);
    background: #fff;
}
.promo-input-wrap .pi-field i { font-size: 1rem; color: #9ca3af; flex-shrink: 0; }
.promo-input-wrap .pi-field input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: .875rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #1a1f2e;
}
.promo-input-wrap .pi-field input::placeholder { letter-spacing: 0; text-transform: none; font-weight: 400; color: #9ca3af; }
.promo-input-wrap .pi-apply {
    background: var(--brand,#CC3826); color: #fff;
    border: none; border-radius: 10px; padding: .625rem 1.25rem;
    font-size: .875rem; font-weight: 700;
    cursor: pointer; transition: background .2s; white-space: nowrap;
}
.promo-input-wrap .pi-apply:hover { background: var(--brand-hover,#a82f1e); }
/* Promo result states */
.promo-result {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .5rem; font-size: .8rem; font-weight: 600;
    padding: .5rem .75rem; border-radius: 8px;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.promo-result.visible { opacity: 1; pointer-events: auto; }
.promo-result.pr-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.promo-result.pr-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.promo-result.pr-success i { color: #16a34a; }
.promo-result.pr-error   i { color: #dc2626; }
.promo-result .pr-dismiss { margin-left: auto; background: none; border: none; color: inherit; opacity: .5; cursor: pointer; font-size: 1rem; padding: 0; line-height: 1; }
[data-bs-theme="dark"] .promo-input-wrap .pi-field { background: #2d334a; border-color: #3a4060; }
[data-bs-theme="dark"] .promo-input-wrap .pi-field:focus-within { background: #252a3d; border-color: #e05a47; box-shadow: 0 0 0 3px rgba(224,90,71,.15); }
[data-bs-theme="dark"] .promo-input-wrap .pi-field input { color: #e8eaf0; }
[data-bs-theme="dark"] .promo-result.pr-success { background: rgba(22,163,74,.12); border-color: rgba(74,222,128,.2); color: #4ade80; }
[data-bs-theme="dark"] .promo-result.pr-error   { background: rgba(220,38,38,.12); border-color: rgba(248,113,113,.2); color: #f87171; }

/* KV. ZONE / PRICING MAP LEGEND — geographic zone indicator */
.zone-legend-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.07);
    padding: 1rem 1.125rem;
}
.zone-legend-card .zlc-title { font-size: .8rem; font-weight: 700; color: #1a1f2e; margin-bottom: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.zone-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.zone-item:last-child { border-bottom: none; }
.zone-swatch { width: 28px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.zone-item .zi-name  { flex: 1; font-size: .8rem; font-weight: 600; color: #374151; }
.zone-item .zi-mult  { font-size: .78rem; font-weight: 700; color: var(--brand,#CC3826); }
.zone-item .zi-desc  { font-size: .7rem; color: #9ca3af; }
/* Surge zone visual ring */
.surge-zone-indicator {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    animation: surgePulse 2s ease-in-out infinite;
}
.surge-zone-indicator.sz-high   { background: rgba(220,38,38,.12); color: #dc2626; border: 1.5px solid rgba(220,38,38,.3); }
.surge-zone-indicator.sz-medium { background: rgba(217,119,6,.12);  color: #d97706; border: 1.5px solid rgba(217,119,6,.3); }
.surge-zone-indicator.sz-low    { background: rgba(22,163,74,.1);   color: #16a34a; border: 1.5px solid rgba(22,163,74,.25); }
@keyframes surgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(var(--sz-rgb,204 56 38),.4); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--sz-rgb,204 56 38),0); }
}
.surge-zone-indicator.sz-high   { --sz-rgb: 220 38 38; }
.surge-zone-indicator.sz-medium { --sz-rgb: 217 119 6; }
@media (prefers-reduced-motion: reduce) { .surge-zone-indicator { animation: none; } }
[data-bs-theme="dark"] .zone-legend-card { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .zone-legend-card .zlc-title { color: #e8eaf0; }
[data-bs-theme="dark"] .zone-item { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .zone-item .zi-name { color: #d1d5db; }

/* KW. API DOCS CODE BLOCK — developer reference widget */
.api-block {
    background: #0f1117;
    border-radius: 14px;
    overflow: hidden;
    font-family: "Fira Code", "Consolas", monospace;
    font-size: .8rem;
}
.api-block .ab-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .625rem 1rem;
    background: #1a1d27;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.api-block .ab-method {
    font-size: .7rem; font-weight: 800; letter-spacing: .08em;
    padding: .2rem .55rem; border-radius: 5px;
}
.ab-method.am-get    { background: rgba(22,163,74,.2);  color: #4ade80; }
.ab-method.am-post   { background: rgba(37,99,235,.2);  color: #60a5fa; }
.ab-method.am-put    { background: rgba(217,119,6,.2);  color: #fbbf24; }
.ab-method.am-delete { background: rgba(220,38,38,.2);  color: #f87171; }
.api-block .ab-endpoint { color: #a0a8bf; font-size: .78rem; flex: 1; padding: 0 .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-block .ab-copy {
    background: rgba(255,255,255,.08); border: none; color: #6b7280;
    padding: .25rem .6rem; border-radius: 6px; font-size: .7rem;
    cursor: pointer; transition: background .15s, color .15s;
}
.api-block .ab-copy:hover { background: rgba(255,255,255,.15); color: #e8eaf0; }
.api-block .ab-copy.copied { color: #4ade80; }
.api-block pre {
    margin: 0; padding: 1rem;
    color: #e8eaf0; line-height: 1.65;
    overflow-x: auto; font-size: .78rem;
}
.api-block pre .tok-key    { color: #60a5fa; }
.api-block pre .tok-str    { color: #4ade80; }
.api-block pre .tok-num    { color: #fbbf24; }
.api-block pre .tok-bool   { color: #f87171; }
.api-block pre .tok-null   { color: #9ca3af; font-style: italic; }
.api-block pre .tok-comment{ color: #4b5563; font-style: italic; }
/* Response status line */
.api-status-line {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem;
    background: #1a1d27;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: .72rem; color: #6b7280;
}
.api-status-line .asl-code { font-weight: 800; }
.api-status-line .asl-code.ok  { color: #4ade80; }
.api-status-line .asl-code.err { color: #f87171; }
.api-status-line .asl-time { margin-left: auto; color: #4b5563; }

/* KX. REVENUE WATERFALL BARS — CSS-only chart */
.waterfall-chart {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 160px;
    padding: 0 .25rem;
    position: relative;
}
.waterfall-chart::before {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px; background: rgba(0,0,0,.08);
}
.wf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.wf-bar-wrap { width: 100%; display: flex; align-items: flex-end; justify-content: center; flex: 1; }
.wf-bar {
    width: 70%; border-radius: 5px 5px 0 0;
    min-height: 4px;
    transition: opacity .2s;
    position: relative;
}
.wf-bar:hover { opacity: .8; }
.wf-bar.wf-pos   { background: #16a34a; }
.wf-bar.wf-neg   { background: #dc2626; border-radius: 0 0 5px 5px; }
.wf-bar.wf-start { background: #2563eb; }
.wf-bar.wf-end   { background: #1a1f2e; }
.wf-label { font-size: .65rem; font-weight: 600; color: #6b7280; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.wf-val   { font-size: .68rem; font-weight: 800; text-align: center; }
.wf-val.wf-pos   { color: #16a34a; }
.wf-val.wf-neg   { color: #dc2626; }
.wf-val.wf-start { color: #2563eb; }
.wf-val.wf-end   { color: #1a1f2e; }
[data-bs-theme="dark"] .waterfall-chart::before { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .wf-label { color: #6b7280; }
[data-bs-theme="dark"] .wf-val.wf-end { color: #e8eaf0; }
[data-bs-theme="dark"] .wf-bar.wf-end { background: #e8eaf0; }

/* KY. RESPONSIVE IMAGE GALLERY — grid with lightbox hint */
.img-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .625rem;
}
.img-gallery .ig-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f3f4f6;
    cursor: pointer;
}
.img-gallery .ig-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.img-gallery .ig-item:hover img { transform: scale(1.07); }
.img-gallery .ig-item .ig-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
    color: #fff; font-size: 1.5rem;
}
.img-gallery .ig-item:hover .ig-overlay { opacity: 1; }
.img-gallery .ig-item .ig-badge {
    position: absolute; top: .375rem; right: .375rem;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: .65rem; font-weight: 700;
    padding: .15rem .45rem; border-radius: 4px;
    backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) { .img-gallery .ig-item img { transition: none; } .img-gallery .ig-item .ig-overlay { transition: none; } }
[data-bs-theme="dark"] .img-gallery .ig-item { background: #2d334a; }

/* KZ. DARK MODE — Phase 35 */
[data-bs-theme="dark"] .settings-block .sb-head h6 { color: #e8eaf0; }
[data-bs-theme="dark"] .promo-input-wrap .pi-apply  { box-shadow: none; }
[data-bs-theme="dark"] .api-block .ab-endpoint      { color: #6b7280; }
[data-bs-theme="dark"] .surge-zone-indicator.sz-high   { border-color: rgba(220,38,38,.35); }
[data-bs-theme="dark"] .surge-zone-indicator.sz-medium { border-color: rgba(217,119,6,.35); }
[data-bs-theme="dark"] .surge-zone-indicator.sz-low    { border-color: rgba(22,163,74,.3); }
[data-bs-theme="dark"] .parcel-step.ps-active .ps-label { color: #e8eaf0; }

/* ============================================================
   PHASE 36 — EXECUTIVE DASHBOARD · COUNT-UP ANIMATION ·
   MULTI-STEP FORM · AVATAR EDITOR · CURRENCY INPUT ·
   SKELETON v2 · PERMISSION MATRIX · WIDGET DRAG GRID
   LA — LJ  (2026-04-08)
   ============================================================ */

/* LA. EXECUTIVE SUMMARY BAR — C-suite at-a-glance strip */
.exec-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: rgba(0,0,0,.07);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.07);
    margin-bottom: 1.5rem;
}
.exec-kpi {
    background: #fff;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    position: relative;
    transition: background .15s;
}
.exec-kpi:hover { background: #fafafa; }
.exec-kpi .ek-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #9ca3af;
}
.exec-kpi .ek-value {
    font-size: 2rem; font-weight: 900;
    letter-spacing: -.04em; color: #1a1f2e;
    line-height: 1;
}
.exec-kpi .ek-footer {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; color: #6b7280;
}
.exec-kpi .ek-trend {
    display: inline-flex; align-items: center; gap: .15rem;
    font-size: .75rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 999px;
}
.exec-kpi .ek-trend.up   { background: #dcfce7; color: #15803d; }
.exec-kpi .ek-trend.down { background: #fee2e2; color: #991b1b; }
.exec-kpi .ek-trend.flat { background: #f3f4f6; color: #6b7280; }
/* Traffic-light left border */
.exec-kpi::before {
    content: "";
    position: absolute; left: 0; top: 16px; bottom: 16px;
    width: 3px; border-radius: 999px;
    background: var(--ek-clr, transparent);
}
.exec-kpi.ek-green  { --ek-clr: #16a34a; }
.exec-kpi.ek-amber  { --ek-clr: #d97706; }
.exec-kpi.ek-red    { --ek-clr: #dc2626; }
.exec-kpi.ek-brand  { --ek-clr: var(--brand,#CC3826); }
/* Inline sparkline placeholder (real sparkline via ApexCharts) */
.exec-kpi .ek-spark {
    height: 28px; margin-top: .25rem;
    background: linear-gradient(to right, rgba(204,56,38,.08), rgba(204,56,38,.18));
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.exec-kpi .ek-spark::after {
    content: "";
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(204,56,38,.15), transparent);
}
[data-bs-theme="dark"] .exec-summary-bar { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .exec-kpi { background: #252a3d; }
[data-bs-theme="dark"] .exec-kpi:hover { background: #2d334a; }
[data-bs-theme="dark"] .exec-kpi .ek-value { color: #e8eaf0; }
[data-bs-theme="dark"] .exec-kpi .ek-footer { color: #6b7280; }
[data-bs-theme="dark"] .exec-kpi .ek-trend.up   { background: rgba(21,128,61,.2);  color: #4ade80; }
[data-bs-theme="dark"] .exec-kpi .ek-trend.down  { background: rgba(153,27,27,.2);  color: #f87171; }
[data-bs-theme="dark"] .exec-kpi .ek-trend.flat  { background: rgba(255,255,255,.08); color: #6b7280; }

/* LB. COUNT-UP NUMBER — CSS keyframe approximation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.count-up-anim {
    animation: countUp .5s ease-out both;
}
/* Staggered children */
.count-up-group > *:nth-child(1) { animation-delay: .05s; }
.count-up-group > *:nth-child(2) { animation-delay: .12s; }
.count-up-group > *:nth-child(3) { animation-delay: .19s; }
.count-up-group > *:nth-child(4) { animation-delay: .26s; }
.count-up-group > *:nth-child(5) { animation-delay: .33s; }
.count-up-group > *:nth-child(6) { animation-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
    .count-up-anim, .count-up-group > * { animation: none !important; }
}
/* Number slot machine — digit flip */
@keyframes digitFlip {
    0%  { transform: translateY(-100%); opacity: 0; }
    100%{ transform: translateY(0);     opacity: 1; }
}
.digit-flip span {
    display: inline-block;
    animation: digitFlip .35s cubic-bezier(.22,1,.36,1) both;
}
@media (prefers-reduced-motion: reduce) { .digit-flip span { animation: none; } }

/* LC. MULTI-STEP FORM v2 — side-panel layout */
.msf-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden;
    min-height: 400px;
}
@media (max-width: 767.98px) { .msf-layout { grid-template-columns: 1fr; } }
.msf-sidebar {
    background: linear-gradient(160deg, #1a1f2e, #2d3350);
    padding: 1.75rem 1.25rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.msf-sidebar .mss-title { color: rgba(255,255,255,.5); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
.msf-step-nav {
    display: flex; flex-direction: column; gap: 0; position: relative;
}
.msf-step-nav::before {
    content: ""; position: absolute;
    left: 15px; top: 8px; bottom: 8px;
    width: 2px; background: rgba(255,255,255,.1);
}
.msf-nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .5rem;
    border-radius: 10px; cursor: pointer;
    transition: background .15s;
    position: relative; z-index: 1;
}
.msf-nav-item:hover { background: rgba(255,255,255,.06); }
.msf-nav-item .mni-dot {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    border: 2px solid rgba(255,255,255,.1);
    transition: all .2s;
}
.msf-nav-item .mni-text { flex: 1; }
.msf-nav-item .mni-label { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.45); }
.msf-nav-item .mni-sub   { font-size: .7rem; color: rgba(255,255,255,.25); margin-top: 1px; }
.msf-nav-item.done .mni-dot  { background: rgba(22,163,74,.3); border-color: #4ade80; color: #4ade80; }
.msf-nav-item.done .mni-label{ color: rgba(255,255,255,.6); }
.msf-nav-item.active .mni-dot { background: var(--brand,#CC3826); border-color: var(--brand,#CC3826); color: #fff; box-shadow: 0 0 0 4px rgba(204,56,38,.25); }
.msf-nav-item.active .mni-label { color: #fff; font-weight: 700; }
.msf-nav-item.active .mni-sub   { color: rgba(255,255,255,.5); }
.msf-content { padding: 1.75rem; display: flex; flex-direction: column; }
.msf-content .msc-header { margin-bottom: 1.25rem; }
.msf-content .msc-header h5 { font-size: 1.125rem; font-weight: 800; color: #1a1f2e; margin: 0 0 .25rem; }
.msf-content .msc-header p  { font-size: .8125rem; color: #6b7280; margin: 0; }
.msf-content .msc-body { flex: 1; }
.msf-content .msc-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,.06);
    gap: .75rem;
}
[data-bs-theme="dark"] .msf-layout { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .msf-content .msc-header h5 { color: #e8eaf0; }
[data-bs-theme="dark"] .msf-content .msc-header p  { color: #6b7280; }
[data-bs-theme="dark"] .msf-content .msc-footer { border-color: rgba(255,255,255,.07); }

/* LD. AVATAR EDITOR — profile photo upload */
.avatar-editor {
    display: flex; align-items: center; gap: 1.25rem;
    flex-wrap: wrap;
}
.avatar-editor .ae-preview {
    position: relative; flex-shrink: 0;
    width: 80px; height: 80px;
}
.avatar-editor .ae-preview img {
    width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.avatar-editor .ae-edit-btn {
    position: absolute; bottom: 0; right: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand,#CC3826); color: #fff;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; cursor: pointer;
    box-shadow: 0 2px 6px rgba(204,56,38,.4);
    transition: background .15s, transform .15s;
}
.avatar-editor .ae-edit-btn:hover { background: var(--brand-hover,#a82f1e); transform: scale(1.15); }
.avatar-editor .ae-actions { display: flex; flex-direction: column; gap: .5rem; }
.avatar-editor .ae-actions .ae-upload {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: 8px;
    border: 1.5px solid #e5e7eb; background: #f9fafb;
    color: #374151; font-size: .8125rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.avatar-editor .ae-actions .ae-upload:hover { border-color: var(--brand,#CC3826); color: var(--brand,#CC3826); background: rgba(204,56,38,.04); }
.avatar-editor .ae-actions .ae-remove {
    background: none; border: none; color: #dc2626;
    font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0;
    text-align: left; transition: opacity .15s;
}
.avatar-editor .ae-actions .ae-remove:hover { opacity: .7; }
.avatar-editor .ae-hint { font-size: .72rem; color: #9ca3af; margin-top: .125rem; }
/* Avatar initials fallback */
.avatar-initials {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand,#CC3826), #e05a47);
    color: #fff; font-size: 1.5rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(204,56,38,.25);
    letter-spacing: -.02em;
    user-select: none;
    flex-shrink: 0;
}
.avatar-initials.ai-sm { width: 36px; height: 36px; font-size: .875rem; border-width: 2px; }
.avatar-initials.ai-md { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar-initials.ai-lg { width: 80px; height: 80px; font-size: 1.5rem; }
.avatar-initials.ai-xl { width: 96px; height: 96px; font-size: 1.75rem; }
[data-bs-theme="dark"] .avatar-editor .ae-preview img { border-color: #252a3d; }
[data-bs-theme="dark"] .avatar-editor .ae-edit-btn { border-color: #252a3d; }
[data-bs-theme="dark"] .avatar-editor .ae-actions .ae-upload { background: #2d334a; border-color: #3a4060; color: #d1d5db; }
[data-bs-theme="dark"] .avatar-editor .ae-actions .ae-upload:hover { border-color: #e05a47; color: #e05a47; }

/* LE. CURRENCY INPUT — formatted amount field */
.currency-input-wrap {
    position: relative; display: flex; align-items: stretch;
}
.currency-input-wrap .ci-prefix {
    display: flex; align-items: center; justify-content: center;
    padding: 0 .875rem;
    background: #f3f4f6;
    border: 1.5px solid #e5e7eb;
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: .9rem; font-weight: 700; color: #4b5563;
    white-space: nowrap; flex-shrink: 0;
    min-width: 48px;
}
.currency-input-wrap input {
    flex: 1; border: 1.5px solid #e5e7eb; border-left: none;
    border-radius: 0 10px 10px 0;
    padding: .625rem .875rem;
    font-size: 1rem; font-weight: 700; color: #1a1f2e;
    background: #fff; outline: none;
    transition: border-color .2s, box-shadow .2s;
    text-align: right;
}
.currency-input-wrap input:focus {
    border-color: var(--brand,#CC3826);
    box-shadow: 0 0 0 3px rgba(204,56,38,.12);
    z-index: 1;
}
.currency-input-wrap input::placeholder { color: #d1d5db; font-weight: 400; }
/* With suffix (currency code) */
.currency-input-wrap .ci-suffix {
    display: flex; align-items: center; padding: 0 .75rem;
    background: #f3f4f6; border: 1.5px solid #e5e7eb;
    border-left: none; border-radius: 0 10px 10px 0;
    font-size: .8rem; font-weight: 700; color: #6b7280;
}
.currency-input-wrap.has-suffix input { border-radius: 0; }
[data-bs-theme="dark"] .currency-input-wrap .ci-prefix,
[data-bs-theme="dark"] .currency-input-wrap .ci-suffix { background: #2d334a; border-color: #3a4060; color: #a0a8bf; }
[data-bs-theme="dark"] .currency-input-wrap input { background: #1e2130; border-color: #3a4060; color: #e8eaf0; }
[data-bs-theme="dark"] .currency-input-wrap input:focus { border-color: #e05a47; box-shadow: 0 0 0 3px rgba(224,90,71,.15); }

/* LF. SKELETON v2 — semantic structure skeletons */
/* Page header skeleton */
.skel-page-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; margin-bottom: 1rem;
}
.skel-page-header .sph-icon  { width: 48px; height: 48px; border-radius: 12px; }
.skel-page-header .sph-lines { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.skel-page-header .sph-title { height: 20px; width: 40%; border-radius: 6px; }
.skel-page-header .sph-sub   { height: 14px; width: 25%; border-radius: 6px; }
/* Table skeleton */
.skel-table { width: 100%; border-collapse: collapse; }
.skel-table .st-row td { padding: .75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.skel-table .st-row td .skel-cell { height: 14px; border-radius: 5px; }
.skel-table .st-row td:first-child .skel-cell { width: 40px; height: 40px; border-radius: 50%; }
/* Chart skeleton */
.skel-chart-wrap {
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1rem;
}
.skel-chart-bars {
    display: flex; align-items: flex-end; gap: .375rem;
    height: 100px;
}
.skel-chart-bars .scb-bar { flex: 1; border-radius: 5px 5px 0 0; }
/* All skeleton elements use shimmer */
.skel-page-header .sph-icon,
.skel-page-header .sph-title,
.skel-page-header .sph-sub,
.skel-table .skel-cell,
.skel-chart-bars .scb-bar { @extend .shimmer; }
/* Explicit shimmer since @extend not pure CSS — apply class directly */
.skel-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerSlide 1.4s ease-in-out infinite;
    border-radius: 6px;
}
[data-bs-theme="dark"] .skel-shimmer {
    background: linear-gradient(90deg, #2d334a 25%, #3a4060 50%, #2d334a 75%);
    background-size: 200% 100%;
}
[data-bs-theme="dark"] .skel-table .st-row td { border-color: rgba(255,255,255,.05); }
@media (prefers-reduced-motion: reduce) { .skel-shimmer { animation: none; background: #f0f0f0; } }

/* LG. PERMISSION MATRIX v2 — role×action grid */
.perm-matrix-v2 {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}
.perm-matrix-v2 th {
    padding: .625rem .75rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #6b7280;
    border-bottom: 2px solid rgba(0,0,0,.07);
    white-space: nowrap;
}
.perm-matrix-v2 th:first-child { text-align: left; }
.perm-matrix-v2 th:not(:first-child) { text-align: center; min-width: 80px; }
.perm-matrix-v2 td {
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    vertical-align: middle;
}
.perm-matrix-v2 td:not(:first-child) { text-align: center; }
.perm-matrix-v2 tr:hover td { background: #f9fafb; }
.perm-matrix-v2 .pmv-action { font-size: .8125rem; font-weight: 600; color: #1a1f2e; }
.perm-matrix-v2 .pmv-module { font-size: .72rem; color: #9ca3af; margin-top: 1px; }
/* Permission cell icons */
.perm-cell { display: inline-flex; align-items: center; justify-content: center; }
.perm-cell.pc-full    { color: #16a34a; font-size: 1.1rem; }
.perm-cell.pc-partial { color: #d97706; font-size: 1rem; }
.perm-cell.pc-read    { color: #2563eb; font-size: 1rem; }
.perm-cell.pc-none    { color: #e5e7eb; font-size: 1rem; }
/* Role column headers */
.perm-matrix-v2 .pmv-role-hdr {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pmv-role-hdr .pmr-name { font-size: .72rem; font-weight: 800; color: #374151; }
.pmv-role-hdr .pmr-count{ font-size: .65rem; color: #9ca3af; }
[data-bs-theme="dark"] .perm-matrix-v2 th { border-color: rgba(255,255,255,.08); color: #6b7280; }
[data-bs-theme="dark"] .perm-matrix-v2 td { border-color: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .perm-matrix-v2 tr:hover td { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .perm-matrix-v2 .pmv-action { color: #e8eaf0; }
[data-bs-theme="dark"] .perm-cell.pc-none { color: #2d334a; }
[data-bs-theme="dark"] .pmv-role-hdr .pmr-name { color: #d1d5db; }

/* LH. DRAGGABLE WIDGET GRID — dashboard rearrangement hint */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.widget-cell {
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    position: relative;
}
.widget-cell:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); }
/* Column spans */
.wc-12 { grid-column: span 12; }
.wc-8  { grid-column: span 8; }
.wc-6  { grid-column: span 6; }
.wc-4  { grid-column: span 4; }
.wc-3  { grid-column: span 3; }
@media (max-width: 1199.98px) { .wc-8  { grid-column: span 12; } .wc-4  { grid-column: span 6; } }
@media (max-width: 767.98px)  { .wc-6, .wc-4, .wc-3 { grid-column: span 12; } }
/* Drag handle */
.widget-cell .wc-drag-handle {
    position: absolute; top: .75rem; right: .75rem;
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .875rem; color: #d1d5db;
    cursor: grab; background: transparent;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
    opacity: 0;
}
.widget-cell:hover .wc-drag-handle { opacity: 1; }
.widget-cell .wc-drag-handle:hover { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
.widget-cell .wc-drag-handle:active { cursor: grabbing; }
/* Dragging state */
.widget-cell.wc-dragging {
    opacity: .7; transform: scale(.98) rotate(1deg);
    box-shadow: 0 16px 40px rgba(0,0,0,.2);
    z-index: 100;
}
/* Drop zone hint */
.widget-cell.wc-drop-target {
    border: 2px dashed var(--brand,#CC3826);
    background: rgba(204,56,38,.03);
}
/* Widget header */
.widget-cell .wc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.widget-cell .wc-header h6 { margin: 0; font-size: .875rem; font-weight: 700; color: #1a1f2e; }
.widget-cell .wc-header .wch-actions { display: flex; gap: .25rem; }
.wch-btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid transparent; background: transparent;
    color: #9ca3af; font-size: .875rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.wch-btn:hover { background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; }
.widget-cell .wc-body { padding: 1rem; }
[data-bs-theme="dark"] .widget-cell { background: #252a3d; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .widget-cell:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .widget-cell .wc-drag-handle:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #a0a8bf; }
[data-bs-theme="dark"] .widget-cell.wc-drop-target { background: rgba(204,56,38,.06); }
[data-bs-theme="dark"] .widget-cell .wc-header { border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .widget-cell .wc-header h6 { color: #e8eaf0; }
[data-bs-theme="dark"] .wch-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #d1d5db; }

/* LI. UTILITY DISPLAY HELPERS — spacing, overflow, z-index */
/* Overflow utilities */
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-hidden   { overflow: hidden; }
.truncate         { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp-2          { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3          { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Interaction utilities */
.cursor-pointer   { cursor: pointer; }
.cursor-default   { cursor: default; }
.cursor-grab      { cursor: grab; }
.select-none      { user-select: none; }
.pointer-events-none { pointer-events: none; }
/* Visibility */
.opacity-0 { opacity: 0; } .opacity-50 { opacity: .5; } .opacity-75 { opacity: .75; }
.invisible { visibility: hidden; }
/* Flex shortcuts */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-1       { flex: 1; }
.flex-shrink-0{ flex-shrink: 0; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }   .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
/* Min touch target */
.touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* LJ. DARK MODE — Phase 36 */
[data-bs-theme="dark"] .exec-kpi .ek-spark { background: linear-gradient(to right, rgba(224,90,71,.1), rgba(224,90,71,.2)); }
[data-bs-theme="dark"] .exec-kpi .ek-spark::after { background: linear-gradient(to top, rgba(224,90,71,.12), transparent); }
[data-bs-theme="dark"] .msf-content .msc-footer .bf-back { border-color: rgba(255,255,255,.1); }
[data-bs-theme="dark"] .currency-input-wrap .ci-prefix { border-right: none; }
[data-bs-theme="dark"] .skel-shimmer { background: linear-gradient(90deg, #2d334a 25%, #3a4060 50%, #2d334a 75%); background-size: 200% 100%; }
[data-bs-theme="dark"] .perm-matrix-v2 .pmv-module { color: #4b5563; }
[data-bs-theme="dark"] .avatar-initials { border-color: #252a3d; }

/* ============================================================
   PHASE 37 — Wappi VTC Admin (LK–LV)
   Notification Center · Toast Stack · Offline/PWA · Print ·
   Fleet Grid · Batch Toolbar · Command Palette · Tooltip v2 ·
   Popover Card · Pagination v2 · Connection Status · Dark Mode
   ============================================================ */

/* LK. NOTIFICATION CENTER */
/* Bell icon wrapper with badge */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s;
}
.notif-bell:hover { background: rgba(0,0,0,.06); }
.notif-bell .nb-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  border-radius: 99px;
  text-align: center;
  border: 2px solid var(--bs-body-bg, #fff);
  animation: notifPop 0.3s cubic-bezier(.36,.07,.19,.97) both;
  pointer-events: none;
}
@keyframes notifPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Dropdown panel */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  z-index: 1050;
  overflow: hidden;
}
.notif-dropdown .nd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.notif-dropdown .nd-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.notif-mark-all {
  font-size: 12px;
  font-weight: 500;
  color: #22c55e;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  border: none;
  background: none;
}
.notif-mark-all:hover { background: rgba(34,197,94,.1); }
.notif-list {
  overflow-y: auto;
  flex: 1;
}
/* Individual notification item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(0,0,0,.03); }
.notif-item.unread { background: rgba(34,197,94,.05); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.notif-item .ni-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.notif-item .ni-icon.ni-success { background: rgba(34,197,94,.12); color: #16a34a; }
.notif-item .ni-icon.ni-warning { background: rgba(251,146,60,.12); color: #ea580c; }
.notif-item .ni-icon.ni-info    { background: rgba(59,130,246,.12); color: #2563eb; }
.notif-item .ni-icon.ni-danger  { background: rgba(239,68,68,.12);  color: #dc2626; }
.notif-item .ni-body { flex: 1; min-width: 0; }
.notif-item .ni-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item .ni-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item .ni-time {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-dropdown .nd-footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(0,0,0,.07);
  text-align: center;
  flex-shrink: 0;
}
.notif-dropdown .nd-footer a {
  font-size: 13px;
  font-weight: 500;
  color: #22c55e;
  text-decoration: none;
}
/* Notification dot — minimal inline indicator */
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: notifPulse 2s infinite;
}
@keyframes notifPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-dot { animation: none; }
  .notif-bell .nb-badge { animation: none; }
}

/* LL. TOAST STACK */
.toast-stack {
  position: fixed;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
/* Position variants */
.toast-stack.ts-top-right    { top: 16px;    right: 16px;  align-items: flex-end; }
.toast-stack.ts-top-left     { top: 16px;    left: 16px;   align-items: flex-start; }
.toast-stack.ts-top-center   { top: 16px;    left: 50%;    transform: translateX(-50%); align-items: center; }
.toast-stack.ts-bottom-right { bottom: 16px; right: 16px;  align-items: flex-end; }
.toast-stack.ts-bottom-left  { bottom: 16px; left: 16px;   align-items: flex-start; }
.toast-stack.ts-bottom-center{ bottom: 16px; left: 50%;    transform: translateX(-50%); align-items: center; }
/* Individual toast */
.toast-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 16px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  border-left: 4px solid #64748b;
  pointer-events: auto;
  animation: toastSlideIn 0.25s ease both;
  overflow: hidden;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast-item.ti-success { border-left-color: #22c55e; }
.toast-item.ti-error   { border-left-color: #ef4444; }
.toast-item.ti-warning { border-left-color: #f59e0b; }
.toast-item.ti-info    { border-left-color: #3b82f6; }
.toast-item .ti-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast-item.ti-success .ti-icon { color: #16a34a; }
.toast-item.ti-error   .ti-icon { color: #dc2626; }
.toast-item.ti-warning .ti-icon { color: #d97706; }
.toast-item.ti-info    .ti-icon { color: #2563eb; }
.toast-item .ti-body { flex: 1; min-width: 0; }
.toast-item .ti-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}
.toast-item .ti-msg {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
}
.toast-item .ti-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #94a3b8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.toast-item .ti-close:hover { background: rgba(0,0,0,.06); color: #334155; }
/* Progress bar auto-dismiss */
.toast-item .ti-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 0 12px;
  animation: toastProgress var(--ti-dur, 5s) linear forwards;
}
.toast-item.ti-success .ti-progress { background: #22c55e; }
.toast-item.ti-error   .ti-progress { background: #ef4444; }
.toast-item.ti-warning .ti-progress { background: #f59e0b; }
.toast-item.ti-info    .ti-progress { background: #3b82f6; }
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .toast-item { animation: none; }
  .toast-item .ti-progress { animation: none; }
}

/* LM. OFFLINE / PWA BANNER */
.offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9980;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  border-top: 1px solid rgba(255,255,255,.08);
}
.offline-banner.ob-visible { transform: translateY(0); }
.offline-banner .ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}
.offline-banner.ob-reconnecting .ob-dot {
  background: #f59e0b;
  animation: obPulse 1s ease-in-out infinite;
}
.offline-banner.ob-online .ob-dot { background: #22c55e; }
@keyframes obPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .offline-banner.ob-reconnecting .ob-dot { animation: none; }
}
/* PWA install prompt */
.pwa-install-prompt {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 20px));
  z-index: 9970;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
  min-width: 300px;
  max-width: 420px;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s;
  opacity: 0;
}
.pwa-install-prompt.pip-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.pwa-install-prompt .pip-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-prompt .pip-body { flex: 1; }
.pwa-install-prompt .pip-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.pwa-install-prompt .pip-desc  { font-size: 12px; color: #64748b; }
.pwa-install-prompt .pip-btn {
  padding: 8px 16px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.pwa-install-prompt .pip-btn:hover { background: #16a34a; }
.pwa-install-prompt .pip-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-prompt .pip-dismiss:hover { background: rgba(0,0,0,.06); color: #475569; }

/* LN. PRINT STYLES */
@media print {
  /* Hide navigation chrome */
  .sidebar, .topbar, .navbar, .page-banner,
  .notif-bell, .toast-stack, .offline-banner,
  .pwa-install-prompt, .batch-toolbar, .cmd-palette,
  .btn-print-hide, [data-print="hide"] { display: none !important; }
  /* Reset body */
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  /* Make main content full width */
  .main-content, .page-wrapper, main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  /* Clean tables */
  table { border-collapse: collapse !important; width: 100% !important; }
  th, td { border: 1px solid #ccc !important; padding: 6px 8px !important; font-size: 10pt; }
  thead { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Receipt / invoice print */
  .trip-receipt { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
  .trip-receipt .tr-tear { border-top: 2px dashed #999 !important; }
  /* Page break utilities */
  .page-break-before  { page-break-before: always; }
  .page-break-after   { page-break-after: always; }
  .page-break-avoid   { page-break-inside: avoid; }
  /* Print header with logo placeholder */
  .print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #0f172a;
  }
  .print-header .ph-logo { font-size: 20pt; font-weight: 800; color: #0f172a; }
  .print-header .ph-meta { font-size: 9pt; color: #475569; text-align: right; }
  /* Links */
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #64748b; }
  a[href^="#"]::after, a.no-print-href::after { content: ""; }
  /* Force colors for status badges */
  .badge, .role-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* LO. LIVE FLEET STATUS GRID */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.fleet-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: default;
}
.fleet-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-1px); }
/* Status variants */
.fleet-card.fc-online   { border-top: 3px solid #22c55e; }
.fleet-card.fc-on-trip  { border-top: 3px solid #3b82f6; }
.fleet-card.fc-offline  { border-top: 3px solid #94a3b8; }
.fleet-card.fc-maint    { border-top: 3px solid #f59e0b; }
.fleet-card .fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fleet-card .fc-plate {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0f172a;
}
/* Status dot with pulse */
.fleet-card .fc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fleet-card.fc-online  .fc-dot { background: #22c55e; animation: fleetPulse 2s infinite; }
.fleet-card.fc-on-trip .fc-dot { background: #3b82f6; animation: fleetPulse 2s infinite; }
.fleet-card.fc-offline .fc-dot { background: #94a3b8; }
.fleet-card.fc-maint   .fc-dot { background: #f59e0b; }
@keyframes fleetPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 5px transparent; }
}
.fleet-card.fc-online  .fc-dot { box-shadow: 0 0 0 0 #22c55e; }
.fleet-card.fc-on-trip .fc-dot { box-shadow: 0 0 0 0 #3b82f6; }
@media (prefers-reduced-motion: reduce) {
  .fleet-card .fc-dot { animation: none !important; }
}
.fleet-card .fc-driver {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fleet-card .fc-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  display: inline-block;
  width: fit-content;
}
.fleet-card.fc-online  .fc-status { background: rgba(34,197,94,.12);  color: #15803d; }
.fleet-card.fc-on-trip .fc-status { background: rgba(59,130,246,.12); color: #1d4ed8; }
.fleet-card.fc-offline .fc-status { background: rgba(148,163,184,.12); color: #64748b; }
.fleet-card.fc-maint   .fc-status { background: rgba(245,158,11,.12); color: #b45309; }
.fleet-card .fc-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #64748b;
}
/* Fleet summary bar */
.fleet-summary {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 16px;
}
.fleet-summary .fs-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.fleet-summary .fs-item .fs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.fleet-summary .fs-item.fsi-online  .fs-dot { background: #22c55e; }
.fleet-summary .fs-item.fsi-on-trip .fs-dot { background: #3b82f6; }
.fleet-summary .fs-item.fsi-offline .fs-dot { background: #94a3b8; }
.fleet-summary .fs-item.fsi-maint   .fs-dot { background: #f59e0b; }
.fleet-summary .fs-item .fs-count { font-weight: 700; color: #0f172a; }

/* LP. BATCH ACTION TOOLBAR */
.batch-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s;
  opacity: 0;
  white-space: nowrap;
}
.batch-toolbar.bt-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.batch-toolbar .bt-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,.1);
  min-height: 44px;
}
.batch-toolbar .bt-count strong { color: #f8fafc; }
.batch-toolbar .bt-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.1);
}
.batch-toolbar .bt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
  min-width: 44px;
  justify-content: center;
}
.batch-toolbar .bt-btn.btb-default  { background: rgba(255,255,255,.1); color: #e2e8f0; }
.batch-toolbar .bt-btn.btb-default:hover { background: rgba(255,255,255,.18); }
.batch-toolbar .bt-btn.btb-success  { background: rgba(34,197,94,.2);  color: #4ade80; }
.batch-toolbar .bt-btn.btb-success:hover { background: rgba(34,197,94,.3); }
.batch-toolbar .bt-btn.btb-danger   { background: rgba(239,68,68,.2);  color: #f87171; }
.batch-toolbar .bt-btn.btb-danger:hover  { background: rgba(239,68,68,.32); }
.batch-toolbar .bt-dismiss {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 4px;
}
.batch-toolbar .bt-dismiss:hover { background: rgba(255,255,255,.15); color: #f8fafc; }

/* LQ. COMMAND PALETTE */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.cmd-backdrop.cp-visible { opacity: 1; pointer-events: auto; }
.cmd-palette {
  width: 580px;
  max-width: calc(100vw - 32px);
  background: var(--bs-body-bg, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.1);
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
}
.cmd-backdrop.cp-visible .cmd-palette { transform: scale(1) translateY(0); }
.cmd-palette .cp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.cmd-palette .cp-search-icon { color: #94a3b8; font-size: 18px; flex-shrink: 0; }
.cmd-palette .cp-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: inherit;
  caret-color: #22c55e;
}
.cmd-palette .cp-input::placeholder { color: #94a3b8; }
.cmd-palette .cp-kbd {
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(0,0,0,.07);
  border-radius: 5px;
  color: #64748b;
  border: 1px solid rgba(0,0,0,.12);
}
.cmd-palette .cp-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
}
.cmd-palette .cp-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94a3b8;
  padding: 8px 12px 4px;
}
.cmd-palette .cp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
}
.cmd-palette .cp-item:hover,
.cmd-palette .cp-item.cp-focused {
  background: rgba(34,197,94,.1);
  outline: none;
}
.cmd-palette .cp-item .cpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.cmd-palette .cp-item .cpi-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}
.cmd-palette .cp-item .cpi-hint {
  font-size: 11px;
  color: #94a3b8;
}
.cmd-palette .cp-empty {
  padding: 32px 18px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}
.cmd-palette .cp-footer {
  padding: 8px 16px;
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cmd-palette .cp-footer .cpf-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #94a3b8;
}

/* LR. TOOLTIP V2 */
/* Usage: <span class="tip" data-tip="Your tooltip text">hover me</span> */
.tip {
  position: relative;
  display: inline-block;
}
.tip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  transform-origin: bottom center;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.tip::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}
.tip:hover::before,
.tip:focus-within::before { opacity: 1; transform: translateX(-50%) scale(1); }
.tip:hover::after,
.tip:focus-within::after  { opacity: 1; }
/* Variants */
.tip.tip-bottom::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform-origin: top center;
  transform: translateX(-50%) scale(0.92);
}
.tip.tip-bottom:hover::before  { transform: translateX(-50%) scale(1); }
.tip.tip-bottom::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #0f172a;
}
.tip.tip-right::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) scale(0.92);
  transform-origin: left center;
}
.tip.tip-right:hover::before { transform: translateY(-50%) scale(1); }
.tip.tip-right::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: #0f172a;
}
.tip.tip-left::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%) scale(0.92);
  transform-origin: right center;
}
.tip.tip-left:hover::before { transform: translateY(-50%) scale(1); }
.tip.tip-left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 2px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: #0f172a;
}
/* Light tooltip variant */
.tip.tip-light::before { background: #fff; color: #0f172a; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.tip.tip-light::after  { border-top-color: #fff; }
.tip.tip-light.tip-bottom::after { border-top-color: transparent; border-bottom-color: #fff; }
.tip.tip-light.tip-right::after  { border-top-color: transparent; border-right-color: #fff; }
.tip.tip-light.tip-left::after   { border-top-color: transparent; border-left-color: #fff; }
/* Success / warning / danger tip */
.tip.tip-success::before { background: #15803d; } .tip.tip-success::after { border-top-color: #15803d; }
.tip.tip-warning::before { background: #b45309; } .tip.tip-warning::after { border-top-color: #b45309; }
.tip.tip-danger::before  { background: #dc2626; } .tip.tip-danger::after  { border-top-color: #dc2626; }
@media (prefers-reduced-motion: reduce) {
  .tip::before, .tip::after { transition: none; }
}

/* LS. POPOVER CARD */
.popover-card {
  position: relative;
  display: inline-block;
}
.popover-card .pc-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.94);
  transform-origin: bottom center;
  width: 240px;
  background: var(--bs-body-bg, #fff);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.09);
  padding: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1060;
}
.popover-card:hover .pc-content,
.popover-card:focus-within .pc-content {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}
/* Arrow */
.popover-card .pc-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--bs-body-bg, #fff);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
}
/* Driver quick-info card */
.popover-card .pc-driver {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popover-card .pc-driver .pcd-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.popover-card .pc-driver .pcd-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(34,197,94,.4);
  flex-shrink: 0;
}
.popover-card .pc-driver .pcd-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.popover-card .pc-driver .pcd-sub {
  font-size: 11px;
  color: #64748b;
}
.popover-card .pc-driver .pcd-stats {
  display: flex;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.07);
}
.popover-card .pc-driver .pcd-stat {
  flex: 1;
  text-align: center;
}
.popover-card .pc-driver .pcd-stat .pds-val {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.popover-card .pc-driver .pcd-stat .pds-lbl {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Right-aligned variant */
.popover-card.pc-right .pc-content {
  left: auto;
  right: 0;
  transform: translateX(0) scale(0.94);
  transform-origin: bottom right;
}
.popover-card.pc-right:hover .pc-content { transform: translateX(0) scale(1); }
.popover-card.pc-right .pc-content::after { left: auto; right: 20px; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .popover-card .pc-content { transition: none; }
}

/* LT. PAGINATION V2 */
.pag-v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pag-v2 .pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: #475569;
  text-decoration: none;
}
.pag-v2 .pv-btn:hover:not(:disabled):not(.pv-active) {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.18);
}
.pag-v2 .pv-btn.pv-active {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.pag-v2 .pv-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pag-v2 .pv-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: 13px;
  color: #94a3b8;
  cursor: default;
  letter-spacing: .05em;
}
/* Items per page + meta info row */
.pag-v2-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.pag-v2-meta {
  font-size: 13px;
  color: #64748b;
}
.pag-v2-meta strong { color: #0f172a; font-weight: 600; }
.pag-v2-per {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}
.pag-v2-per select {
  padding: 4px 28px 4px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 8px center no-repeat;
  -webkit-appearance: none;
  appearance: none;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
}
/* Compact mode */
.pag-v2.pv-compact .pv-btn { min-width: 30px; height: 30px; font-size: 12px; border-radius: 6px; }

/* LU. CONNECTION STATUS INDICATOR */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  transition: background 0.2s, color 0.2s;
}
.conn-status .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* States */
.conn-status.cs-online  { background: rgba(34,197,94,.1);  color: #15803d; }
.conn-status.cs-online  .cs-dot { background: #22c55e; animation: csPulse 2s infinite; }
.conn-status.cs-lag     { background: rgba(245,158,11,.1); color: #b45309; }
.conn-status.cs-lag     .cs-dot { background: #f59e0b; animation: csPulse 1.5s infinite; }
.conn-status.cs-offline { background: rgba(239,68,68,.1);  color: #dc2626; }
.conn-status.cs-offline .cs-dot { background: #ef4444; }
@keyframes csPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .conn-status .cs-dot { animation: none !important; }
}
/* WebSocket latency badge */
.ws-latency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  padding: 2px 8px;
  background: rgba(0,0,0,.05);
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.ws-latency.wsl-good    { color: #15803d; }
.ws-latency.wsl-medium  { color: #b45309; }
.ws-latency.wsl-poor    { color: #dc2626; }

/* LV. DARK MODE — Phase 37 */
/* Notification */
[data-bs-theme="dark"] .notif-bell:hover { background: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .notif-bell .nb-badge { border-color: #0f172a; }
[data-bs-theme="dark"] .notif-dropdown { border-color: rgba(255,255,255,.08); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .notif-dropdown .nd-header { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .notif-item { border-bottom-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .notif-item.unread { background: rgba(34,197,94,.06); }
[data-bs-theme="dark"] .notif-item .ni-desc { color: #94a3b8; }
[data-bs-theme="dark"] .notif-item .ni-time { color: #64748b; }
[data-bs-theme="dark"] .notif-dropdown .nd-footer { border-top-color: rgba(255,255,255,.06); }
/* Toast */
[data-bs-theme="dark"] .toast-item { background: #1e293b; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .toast-item .ti-msg { color: #94a3b8; }
[data-bs-theme="dark"] .toast-item .ti-close { color: #64748b; }
[data-bs-theme="dark"] .toast-item .ti-close:hover { background: rgba(255,255,255,.08); color: #cbd5e1; }
/* PWA */
[data-bs-theme="dark"] .pwa-install-prompt { background: #1e293b; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .pwa-install-prompt .pip-desc { color: #94a3b8; }
/* Fleet */
[data-bs-theme="dark"] .fleet-card { background: #1e293b; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .fleet-card .fc-plate { color: #f1f5f9; }
[data-bs-theme="dark"] .fleet-card .fc-driver { color: #94a3b8; }
[data-bs-theme="dark"] .fleet-summary { background: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .fleet-summary .fs-item .fs-count { color: #f1f5f9; }
/* Command palette */
[data-bs-theme="dark"] .cmd-palette { border-color: rgba(255,255,255,.1); box-shadow: 0 24px 80px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .cmd-palette .cp-search { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .cmd-palette .cp-input { color: #f1f5f9; }
[data-bs-theme="dark"] .cmd-palette .cp-kbd { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #94a3b8; }
[data-bs-theme="dark"] .cmd-palette .cp-item .cpi-icon { background: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .cmd-palette .cp-footer { border-top-color: rgba(255,255,255,.06); }
/* Tooltip — already dark by default; light override */
[data-bs-theme="dark"] .tip.tip-light::before { background: #1e293b; color: #f1f5f9; }
[data-bs-theme="dark"] .tip.tip-light::after  { border-top-color: #1e293b; }
[data-bs-theme="dark"] .tip.tip-light.tip-bottom::after { border-bottom-color: #1e293b; border-top-color: transparent; }
/* Popover */
[data-bs-theme="dark"] .popover-card .pc-content { border-color: rgba(255,255,255,.08); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .popover-card .pc-driver .pcd-name { color: #f1f5f9; }
[data-bs-theme="dark"] .popover-card .pc-driver .pcd-stats { border-top-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .popover-card .pc-driver .pcd-stat .pds-val { color: #f1f5f9; }
/* Pagination */
[data-bs-theme="dark"] .pag-v2 .pv-btn { border-color: rgba(255,255,255,.1); color: #94a3b8; }
[data-bs-theme="dark"] .pag-v2 .pv-btn:hover:not(:disabled):not(.pv-active) { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
[data-bs-theme="dark"] .pag-v2-meta { color: #94a3b8; }
[data-bs-theme="dark"] .pag-v2-meta strong { color: #f1f5f9; }
[data-bs-theme="dark"] .pag-v2-per { color: #94a3b8; }
[data-bs-theme="dark"] .pag-v2-per select { border-color: rgba(255,255,255,.1); }
/* Connection */
[data-bs-theme="dark"] .ws-latency { background: rgba(255,255,255,.06); }

/* ============================================================
   PHASE 38 — Responsive Généralisé + UI Global (LW–MH)
   Token System · Fluid Typography · Sidebar · Topbar ·
   Tables Cards · Forms · KPI Grid · Dashboard Layout ·
   Modals · Breakpoint Utils · Touch UX · Dark Mode
   ============================================================ */

/* LW. RESPONSIVE TOKEN SYSTEM */
:root {
  /* Spacing scale responsive */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* Border radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Column gap responsive (overridden at breakpoints below) */
  --col-gap: 1.5rem;

  /* Container max-width */
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1140px;
  --container-xxl: 1320px;

  /* Z-index scale */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-offcanvas: 1045;
  --z-modal:     1055;
  --z-popover:   1070;
  --z-toast:     9990;
  --z-cmd:       9998;

  /* Sidebar & topbar tokens (sync with existing vars) */
  --sidebar-w:           250px;
  --sidebar-collapsed-w: 70px;
  --topbar-h:            64px;
  --topbar-h-mobile:     56px;

  /* Transition easing */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-enter:    cubic-bezier(0, 0, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
}

/* Responsive token overrides per breakpoint */
@media (max-width: 991px) {
  :root {
    --col-gap: 1rem;
    --topbar-h: var(--topbar-h-mobile);
  }
}
@media (max-width: 575px) {
  :root {
    --col-gap: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
  }
}

/* LX. FLUID TYPOGRAPHY — clamp() scale 375px→1440px */
/*
  Formula: clamp(min, preferred, max)
  preferred = min + (max - min) * (100vw - 375px) / (1440px - 375px)
  Simplified to readable clamp values
*/
h1, .h1 { font-size: clamp(1.6rem,  3.5vw + .5rem, 2.5rem);  line-height: 1.2; }
h2, .h2 { font-size: clamp(1.35rem, 2.8vw + .4rem, 2rem);    line-height: 1.25; }
h3, .h3 { font-size: clamp(1.15rem, 2.2vw + .3rem, 1.6rem);  line-height: 1.3; }
h4, .h4 { font-size: clamp(1rem,    1.8vw + .2rem, 1.25rem); line-height: 1.35; }
h5, .h5 { font-size: clamp(.9rem,   1.4vw + .15rem, 1.05rem); }
h6, .h6 { font-size: clamp(.8rem,   1vw + .1rem, .9rem); }
/* Body text */
body, .body-text {
  font-size: clamp(14px, 1vw + 10px, 15px);
  line-height: 1.65;
}
/* Display sizes */
.display-1 { font-size: clamp(2.5rem, 6vw + 1rem, 5rem); }
.display-2 { font-size: clamp(2rem,   5vw + .8rem, 4.5rem); }
.display-3 { font-size: clamp(1.75rem, 4vw + .6rem, 4rem); }
/* Table text stays readable but slightly smaller */
.table { font-size: clamp(12px, .9vw + 8px, 14px); }
/* Page title fluid */
.page-title-box h4,
.page-title-box .page-title {
  font-size: clamp(.95rem, 1.5vw + .4rem, 1.25rem);
  font-weight: 600;
}
/* Card title */
.card-title { font-size: clamp(.85rem, 1.2vw + .3rem, 1rem); font-weight: 600; }
/* Stat/KPI number */
.stat-number, .kpi-value, .counter {
  font-size: clamp(1.4rem, 2.5vw + .5rem, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* LY. SIDEBAR RESPONSIVE BEHAVIOR */
/* Mobile (≤768px): hidden off-screen, slides in as overlay */
@media (max-width: 768px) {
  /* The sidebar slides in from the left as offcanvas */
  .vertical-menu,
  #sidebar-menu-wrapper,
  .left-side-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-w) !important;
    z-index: var(--z-offcanvas) !important;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-standard),
                box-shadow 0.28s var(--ease-standard);
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* When sidebar is visible (toggle class added by existing JS) */
  body.sidebar-enable .vertical-menu,
  body.sidebar-enable #sidebar-menu-wrapper,
  body.sidebar-enable .left-side-menu {
    transform: translateX(0);
    box-shadow: 4px 0 30px rgba(0,0,0,.18);
  }
  /* Backdrop overlay behind sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-offcanvas) - 1);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.28s var(--ease-standard);
    opacity: 0;
    pointer-events: none;
  }
  body.sidebar-enable .sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  /* Main content takes full width on mobile */
  .main-content,
  #main-content,
  .content-page {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* Tablet (769–991px): icon-only collapsed sidebar */
@media (min-width: 769px) and (max-width: 991px) {
  .vertical-menu,
  #sidebar-menu-wrapper,
  .left-side-menu {
    width: var(--sidebar-collapsed-w) !important;
    overflow: hidden;
    transition: width 0.25s var(--ease-standard);
  }
  /* Hide menu text labels, keep only icons */
  .vertical-menu .menu-title,
  #sidebar-menu-wrapper .menu-title,
  .left-side-menu .menu-title,
  .vertical-menu span.menu-item-text,
  .left-side-menu .badge {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s, width 0.2s;
  }
  /* Center icons in collapsed state */
  .vertical-menu #sidebar-menu ul li a,
  .left-side-menu #sidebar-menu ul li a {
    padding-left: 0 !important;
    justify-content: center !important;
  }
  /* Expand on hover */
  .vertical-menu:hover,
  #sidebar-menu-wrapper:hover,
  .left-side-menu:hover {
    width: var(--sidebar-w) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.1);
    z-index: calc(var(--z-fixed) + 1);
  }
  .vertical-menu:hover .menu-title,
  .left-side-menu:hover .menu-title,
  .vertical-menu:hover span.menu-item-text,
  .left-side-menu:hover span.menu-item-text,
  .left-side-menu:hover .badge {
    opacity: 1;
    pointer-events: auto;
    width: auto;
  }
  .vertical-menu:hover #sidebar-menu ul li a,
  .left-side-menu:hover #sidebar-menu ul li a {
    padding-left: 1.25rem !important;
    justify-content: flex-start !important;
  }
  /* Main content offset for collapsed sidebar */
  .main-content,
  #main-content,
  .content-page {
    margin-left: var(--sidebar-collapsed-w) !important;
    transition: margin-left 0.25s var(--ease-standard);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vertical-menu, .left-side-menu, .sidebar-overlay { transition: none !important; }
}

/* LZ. TOPBAR MOBILE */
/* Mobile topbar height and search behavior */
@media (max-width: 768px) {
  #page-topbar,
  .navbar-header,
  .topbar {
    height: var(--topbar-h-mobile) !important;
    min-height: var(--topbar-h-mobile) !important;
  }
  /* Content offset */
  .main-content, #main-content, .content-page {
    padding-top: var(--topbar-h-mobile) !important;
  }
  /* Collapse search bar on mobile — expand on focus */
  .topbar-search,
  .app-search,
  .search-bar {
    width: 36px;
    overflow: hidden;
    transition: width 0.25s var(--ease-standard);
    border-radius: var(--radius-full);
  }
  .topbar-search:focus-within,
  .app-search:focus-within,
  .search-bar:focus-within {
    width: 200px;
  }
  /* Hide non-essential topbar items on mobile */
  .topbar-stats,
  .topnav-menu .d-none-mobile,
  #topbar-megadropdown-left { display: none !important; }
  /* Compact icon spacing in topbar */
  .nav-link.nav-topbar-icon {
    padding: .25rem .4rem !important;
    margin: 0 1px !important;
  }
  /* Breadcrumb — truncate long paths */
  .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: calc(100vw - 120px);
  }
  .breadcrumb-item + .breadcrumb-item { min-width: 0; }
  .breadcrumb-item span,
  .breadcrumb-item a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
  }
}
@media (max-width: 400px) {
  .topbar-search, .app-search, .search-bar { display: none; }
}

/* MA. TABLES → CARDS ON MOBILE */
/*
  Usage: add class "table-card-mobile" to the <table> element.
  On ≤576px each <tr> becomes a card, using [data-label] attrs on <td>.
  Existing .table-responsive still works for non-card tables.
*/
@media (max-width: 576px) {
  .table-card-mobile { border: none; }
  .table-card-mobile thead { display: none; }   /* hide header row */
  .table-card-mobile tbody, .table-card-mobile tr { display: block; }
  .table-card-mobile tr {
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .table-card-mobile td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: 13px;
  }
  .table-card-mobile td:last-child { border-bottom: none; padding-bottom: 0; }
  .table-card-mobile td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    flex-shrink: 0;
    min-width: 90px;
  }
  .table-card-mobile td .cell-val { text-align: right; flex: 1; }
  /* Universal horizontal scroll fallback */
  .table-responsive-always { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Swipe hint (re-used from Phase 32 pattern) */
  .table-card-mobile + .table-swipe-hint { display: none; }
}
/* Ensure ALL tables have horizontal scroll wrapper behavior on tablet */
@media (max-width: 991px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* Ensure table rows don't wrap badly */
  .table th, .table td { white-space: nowrap; }
  /* Allow wrapping only in description/text columns */
  .table td.cell-wrap,
  .table td[data-wrap] { white-space: normal; }
}

/* MB. FORMS RESPONSIVE */
@media (max-width: 768px) {
  /* All inputs and selects full width */
  .form-control, .form-select { font-size: 16px; } /* Prevents iOS zoom */
  /* Input groups stack vertically on mobile */
  .input-group.ig-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .input-group.ig-stack-mobile .input-group-text {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: none;
    justify-content: center;
  }
  .input-group.ig-stack-mobile .form-control,
  .input-group.ig-stack-mobile .form-select {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
}
@media (max-width: 576px) {
  /* Filter bar wraps naturally */
  .filter-bar, .fb-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filter-bar .fb-chip { flex: 1 1 auto; text-align: center; }
  .filter-bar .btn, .filter-bar .form-select, .filter-bar .form-control {
    width: 100%;
  }
  /* Date picker full width */
  .flatpickr-input, .vue-flatpickr { width: 100% !important; }
  /* Button groups full width on XS */
  .btn-group.bg-stack-mobile { flex-direction: column; }
  .btn-group.bg-stack-mobile .btn {
    border-radius: var(--radius-sm) !important;
    margin-bottom: 4px;
  }
  /* Modal form labels above inputs */
  .modal .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* MC. KPI / STAT CARD RESPONSIVE GRID */
/* Unified responsive grid for all KPI/stat rows */
.kpi-row,
.stats-row,
.stat-cards-row {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
  .kpi-row, .stats-row, .stat-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .kpi-row, .stats-row, .stat-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}
@media (max-width: 400px) {
  .kpi-row, .stats-row, .stat-cards-row {
    grid-template-columns: 1fr;
  }
}
/* KPI card itself — responsive padding */
.kpi-row > *, .stats-row > *, .stat-cards-row > * {
  min-width: 0; /* Prevent grid blowout */
}
.kpi-row .card, .stats-row .card, .stat-cards-row .card {
  height: 100%;
}
/* 3-column variant */
.kpi-row.kpi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .kpi-row.kpi-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .kpi-row.kpi-3 { grid-template-columns: 1fr; } }

/* MD. DASHBOARD LAYOUT — RESPONSIVE GRID AREAS */
.dash-layout {
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}
/* Two-thirds + one-third */
.dash-layout.dl-2-1 { grid-template-columns: 2fr 1fr; }
/* Three-quarters + one-quarter */
.dash-layout.dl-3-1 { grid-template-columns: 3fr 1fr; }
/* Full width column spans */
.dash-layout .dl-full  { grid-column: 1 / -1; }
.dash-layout .dl-half  { grid-column: span 2; }
/* Tablet: stack to 2 cols */
@media (max-width: 991px) {
  .dash-layout,
  .dash-layout.dl-2-1,
  .dash-layout.dl-3-1 { grid-template-columns: 1fr 1fr; }
  .dash-layout .dl-half { grid-column: 1 / -1; }
}
/* Mobile: single column */
@media (max-width: 767px) {
  .dash-layout,
  .dash-layout.dl-2-1,
  .dash-layout.dl-3-1 { grid-template-columns: 1fr; }
  .dash-layout .dl-full,
  .dash-layout .dl-half { grid-column: 1; }
}
/* Named grid areas for main dashboard */
.dash-main-grid {
  display: grid;
  gap: var(--col-gap);
  grid-template-areas:
    "kpi   kpi   kpi   kpi"
    "chart chart chart side"
    "map   map   table table"
    "recent recent recent recent";
  grid-template-columns: 1fr 1fr 1fr 280px;
  align-items: start;
}
.dash-main-grid .dg-kpi    { grid-area: kpi; }
.dash-main-grid .dg-chart  { grid-area: chart; }
.dash-main-grid .dg-side   { grid-area: side; }
.dash-main-grid .dg-map    { grid-area: map; }
.dash-main-grid .dg-table  { grid-area: table; }
.dash-main-grid .dg-recent { grid-area: recent; }
@media (max-width: 1199px) {
  .dash-main-grid {
    grid-template-areas:
      "kpi   kpi"
      "chart side"
      "map   table"
      "recent recent";
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .dash-main-grid {
    grid-template-areas:
      "kpi" "chart" "side" "map" "table" "recent";
    grid-template-columns: 1fr;
  }
}

/* ME. MODALS — FULL SCREEN ON MOBILE */
@media (max-width: 576px) {
  /* Full-screen modal on XS */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }
  .modal-content {
    height: 100% !important;
    min-height: 100svh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex;
    flex-direction: column;
  }
  .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex-shrink: 0; }
  /* Slide-up animation on mobile instead of fade+scale */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-enter);
  }
  .modal.show .modal-dialog {
    transform: translateY(0);
  }
  /* Opt-out: .modal-dialog-centered keeps center behavior */
  .modal-dialog.modal-dialog-centered {
    height: auto !important;
    min-height: auto !important;
    margin: auto 0 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  .modal-dialog.modal-dialog-centered .modal-content {
    height: auto !important;
    min-height: auto !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  /* Bottom sheet handle */
  .modal-dialog.modal-dialog-centered .modal-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,.15);
    border-radius: 99px;
    margin: 10px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none; }
}

/* MF. BREAKPOINT UTILITY CLASSES */
/* Show/hide at breakpoints */
/* XS only (≤575px) */
@media (max-width: 575px) {
  .d-xs-none    { display: none !important; }
  .d-xs-block   { display: block !important; }
  .d-xs-flex    { display: flex !important; }
  .d-xs-grid    { display: grid !important; }
  .text-xs-center { text-align: center !important; }
  .text-xs-left   { text-align: left !important; }
  .w-xs-100     { width: 100% !important; max-width: 100% !important; }
  .flex-xs-col  { flex-direction: column !important; }
  .flex-xs-wrap { flex-wrap: wrap !important; }
  .gap-xs-sm    { gap: var(--space-sm) !important; }
  .p-xs-sm      { padding: var(--space-sm) !important; }
  .mt-xs-sm     { margin-top: var(--space-sm) !important; }
  .mb-xs-sm     { margin-bottom: var(--space-sm) !important; }
  .order-xs-first { order: -1 !important; }
  .order-xs-last  { order: 999 !important; }
  .rounded-xs-none { border-radius: 0 !important; }
  .border-xs-none  { border: none !important; }
  /* Hide complex decorative elements on XS */
  .hide-xs { display: none !important; }
  .show-xs  { display: block !important; }
}
/* SM only (576–767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .d-sm-only { display: block !important; }
  .d-sm-none { display: none !important; }
}
/* MD and up (≥768px) */
@media (min-width: 768px) {
  .d-md-up   { display: block !important; }
  .d-md-none { display: none !important; }
  .hide-xs   { display: block !important; } /* restore on MD+ */
  .show-xs   { display: none !important; }
}
/* LG and up (≥992px) */
@media (min-width: 992px) {
  .d-lg-up   { display: block !important; }
  .d-lg-none { display: none !important; }
}
/* XL and up (≥1200px) */
@media (min-width: 1200px) {
  .d-xl-up   { display: block !important; }
  .d-xl-none { display: none !important; }
}

/* MG. TOUCH UX ENHANCEMENTS */
/* Prevent pull-to-refresh on scrollable lists */
.touch-scroll-contain {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Suppress tap highlight on interactive elements */
a, button, [role="button"], .card, .list-group-item,
.nav-link, .dropdown-item, .notif-item, .fleet-card {
  -webkit-tap-highlight-color: transparent;
}
/* Safe area insets for devices with notch/home bar */
.page-footer,
.batch-toolbar,
.offline-banner,
.pwa-install-prompt,
.toast-stack.ts-bottom-right,
.toast-stack.ts-bottom-left,
.toast-stack.ts-bottom-center {
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}
/* Bottom nav safe area */
.bottom-nav, .mobile-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom);
}
/* Touch scroll snap on horizontal card lists (tablet) */
@media (max-width: 991px) {
  .snap-scroll-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    display: flex;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
  }
  .snap-scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 85vw;
    max-width: 320px;
  }
}
/* Larger touch targets on mobile for small action buttons */
@media (max-width: 768px) {
  /* Increase tap area without visual change */
  .btn-sm, .btn-xs,
  .action-btn, .tra-btn {
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Prevent close icon being too small */
  .btn-close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
  }
  /* Dropdown items — taller tap area */
  .dropdown-item {
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Nav tabs — more tappable */
  .nav-tabs .nav-link {
    padding: 10px 14px;
    min-height: 44px;
  }
}
/* Scrollbar styling — thin on all platforms */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.35); }
/* Global horizontal scroll prevention */
html, body { overflow-x: hidden; max-width: 100%; }
/* Global box-sizing (safety net for components added later) */
*, *::before, *::after { box-sizing: border-box; }
/* Prevent images from blowing out containers */
img, video, canvas, svg { max-width: 100%; height: auto; }
/* Focus visible ring — accessible, non-intrusive */
:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* MH. DARK MODE — Phase 38 */
/* Topbar mobile dark */
[data-bs-theme="dark"] #page-topbar,
[data-bs-theme="dark"] .topbar { border-bottom-color: rgba(255,255,255,.06); }
/* Sidebar overlay dark */
[data-bs-theme="dark"] .sidebar-overlay { background: rgba(0,0,0,.6); }
/* Table card mobile dark */
[data-bs-theme="dark"] .table-card-mobile tr {
  background: #1e293b;
  border-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .table-card-mobile td { border-bottom-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .table-card-mobile td::before { color: #64748b; }
/* Modal dark bottom sheet handle */
[data-bs-theme="dark"] .modal-dialog.modal-dialog-centered .modal-content::before {
  background: rgba(255,255,255,.15);
}
/* KPI grid dark */
[data-bs-theme="dark"] .kpi-row .card,
[data-bs-theme="dark"] .stats-row .card,
[data-bs-theme="dark"] .stat-cards-row .card { background: #1e293b; border-color: rgba(255,255,255,.06); }
/* Scrollbar dark */
[data-bs-theme="dark"] * {
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
/* Form controls dark 16px — no override needed (Bootstrap handles it) */
/* Filter bar dark */
[data-bs-theme="dark"] .filter-bar { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); }
/* Snap scroll cards dark */
[data-bs-theme="dark"] .snap-scroll-x > * { background: #1e293b; border-color: rgba(255,255,255,.06); }

/* ==========================================================================
   MN. KPI CARDS COLORÉES — gradient via CSS :has() (dashboard)
   Chrome 105+, Firefox 121+, Safari 15.4+ — dégradation gracieuse sinon
   ========================================================================== */

/* Carte 1 — Chauffeurs totaux (bx-user-check) → bleu */
.card.card-animate:has(.bx-user-check) { background: var(--grad-blue) !important; border: none !important; box-shadow: 0 6px 22px rgba(29,78,216,.28) !important; position: relative; overflow: hidden; }
/* Carte 2 — Chauffeurs approuvés (bx-badge-check) → émeraude */
.card.card-animate:has(.bx-badge-check) { background: var(--grad-emerald) !important; border: none !important; box-shadow: 0 6px 22px rgba(6,95,70,.28) !important; position: relative; overflow: hidden; }
/* Carte 3 — En attente (bx-time-five) → ambre */
.card.card-animate:has(.bx-time-five) { background: var(--grad-amber) !important; border: none !important; box-shadow: 0 6px 22px rgba(146,64,14,.28) !important; position: relative; overflow: hidden; }
/* Carte 4 — Utilisateurs (bx-group) → violet */
.card.card-animate:has(.bx-group) { background: var(--grad-violet) !important; border: none !important; box-shadow: 0 6px 22px rgba(91,33,182,.28) !important; position: relative; overflow: hidden; }
/* Carte 5 — Annulés (bx-x-circle) → rose */
.card.card-animate:has(.bx-x-circle) { background: var(--grad-rose) !important; border: none !important; box-shadow: 0 6px 22px rgba(159,18,57,.28) !important; position: relative; overflow: hidden; }
/* Carte 6 — Portefeuilles perso (ri-wallet-3-line) → teal */
.card.card-animate:has(.bx-wallet),
.card.card-animate:has(.bx-wallet-alt),
.card.card-animate:has(.ri-wallet-3-line) { background: var(--grad-teal) !important; border: none !important; box-shadow: 0 6px 22px rgba(13,148,136,.28) !important; position: relative; overflow: hidden; }
/* Carte 7 — Portefeuilles entreprise (ri-building-4-line) → violet 2 */
.card.card-animate:has(.ri-building-4-line) { background: var(--grad-brand) !important; border: none !important; box-shadow: 0 6px 22px rgba(204,56,38,.28) !important; position: relative; overflow: hidden; }

/* Texte blanc sur toutes les cartes colorées */
.card.card-animate:has(.bx-user-check) *:not(.avatar-title),
.card.card-animate:has(.bx-badge-check) *:not(.avatar-title),
.card.card-animate:has(.bx-time-five) *:not(.avatar-title),
.card.card-animate:has(.bx-group) *:not(.avatar-title),
.card.card-animate:has(.bx-x-circle) *:not(.avatar-title),
.card.card-animate:has(.bx-wallet) *:not(.avatar-title),
.card.card-animate:has(.bx-wallet-alt) *:not(.avatar-title),
.card.card-animate:has(.ri-wallet-3-line) *:not(.avatar-title),
.card.card-animate:has(.ri-building-4-line) *:not(.avatar-title) { color: rgba(255,255,255,.92) !important; }

/* Muted text légèrement transparent sur cartes colorées */
.card.card-animate:has(.bx-user-check) .text-muted,
.card.card-animate:has(.bx-badge-check) .text-muted,
.card.card-animate:has(.bx-time-five) .text-muted,
.card.card-animate:has(.bx-group) .text-muted,
.card.card-animate:has(.bx-x-circle) .text-muted,
.card.card-animate:has(.bx-wallet) .text-muted,
.card.card-animate:has(.bx-wallet-alt) .text-muted,
.card.card-animate:has(.ri-wallet-3-line) .text-muted,
.card.card-animate:has(.ri-building-4-line) .text-muted { color: rgba(255,255,255,.68) !important; }

/* Avatar frosted glass sur cartes colorées */
.card.card-animate:has(.bx-user-check) .avatar-title,
.card.card-animate:has(.bx-badge-check) .avatar-title,
.card.card-animate:has(.bx-time-five) .avatar-title,
.card.card-animate:has(.bx-group) .avatar-title,
.card.card-animate:has(.bx-x-circle) .avatar-title,
.card.card-animate:has(.bx-wallet) .avatar-title,
.card.card-animate:has(.bx-wallet-alt) .avatar-title,
.card.card-animate:has(.ri-wallet-3-line) .avatar-title,
.card.card-animate:has(.ri-building-4-line) .avatar-title { background: rgba(255,255,255,.18) !important; color: #fff !important; }

/* Orbe décoratif ::after */
.card.card-animate:has(.bx-user-check)::after,
.card.card-animate:has(.bx-badge-check)::after,
.card.card-animate:has(.bx-time-five)::after,
.card.card-animate:has(.bx-group)::after,
.card.card-animate:has(.bx-x-circle)::after,
.card.card-animate:has(.bx-wallet)::after,
.card.card-animate:has(.bx-wallet-alt)::after,
.card.card-animate:has(.ri-wallet-3-line)::after,
.card.card-animate:has(.ri-building-4-line)::after { content: ''; position: absolute; top: -20px; right: -20px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }

/* Hover lift sur cartes colorées */
.card.card-animate:has(.bx-user-check):hover,
.card.card-animate:has(.bx-badge-check):hover,
.card.card-animate:has(.bx-time-five):hover,
.card.card-animate:has(.bx-group):hover,
.card.card-animate:has(.bx-x-circle):hover,
.card.card-animate:has(.bx-wallet):hover,
.card.card-animate:has(.bx-wallet-alt):hover,
.card.card-animate:has(.ri-wallet-3-line):hover,
.card.card-animate:has(.ri-building-4-line):hover { transform: translateY(-4px) !important; filter: brightness(1.05); box-shadow: 0 12px 32px rgba(0,0,0,.22) !important; }

/* ==========================================================================
   MO. PREMIUM UI — Final polish pass  (ui-ux-pro-max v2)
   Objectif : élever chaque composant au niveau enterprise SaaS
   ========================================================================== */

/* Fond de page — très subtil, pas plat */
body:not([data-bs-theme="dark"]) .page-content {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(204,56,38,.04) 0%, transparent 70%),
                linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Typographie — nombres premium (tabular) */
.card .card-body h3,
.card .card-body h4,
.card .card-body .fs-22,
.card .card-body .fs-24,
.card .card-body .fs-28,
.ff-secondary {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

/* Labels KPI — uppercase small caps */
.card .card-body p.fw-medium,
.card .card-body p.text-muted.fw-medium {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    opacity: .75;
}

/* Page header — titre hiérarchie forte */
.page-title-box h4,
.d-flex.align-items-center h4 { font-size: 1.2rem !important; font-weight: 800 !important; letter-spacing: -.03em !important; }

/* Badges pills premium */
.badge { border-radius: 20px !important; font-size: 0.68rem !important; font-weight: 700 !important; padding: .3em .75em !important; letter-spacing: .02em; }

/* text-bg-* corrections Bootstrap */
.text-bg-info    { background-color: #0284c7 !important; color: #fff !important; }
.text-bg-primary { background-color: var(--vz-primary, #cc3826) !important; color: #fff !important; }

/* Nav tabs premium — pill transparent → rouge filled */
.nav-tabs-custom .nav-link { border-radius: 8px !important; font-weight: 600 !important; font-size: .79rem !important; transition: all .15s ease; }
.nav-tabs-custom .nav-link:not(.active) { background: transparent !important; border-color: transparent !important; color: #6b7280 !important; }
.nav-tabs-custom .nav-link:not(.active):hover { background: #f1f5f9 !important; color: #374151 !important; }
.nav-tabs-custom .nav-link.active { background: var(--vz-primary, #cc3826) !important; color: #fff !important; border-color: var(--vz-primary, #cc3826) !important; box-shadow: 0 2px 10px rgba(204,56,38,.3) !important; }

/* Dropdown action button dans les tables */
.table td .dropdown > a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; transition: background .15s, color .15s; color: #9ca3af !important; text-decoration: none; }
.table td .dropdown > a:hover { background: #f1f5f9; color: #374151 !important; }

/* Formulaires — cohérence premium */
.form-label { font-size: .79rem !important; font-weight: 600 !important; color: #374151 !important; }
.form-control, .form-select { border-color: #e2e8f0 !important; background: #fafbfc !important; border-radius: 9px !important; }
.form-control::placeholder { color: #c0c9d6 !important; }
.input-group-text { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; }

/* Offcanvas filtre — premium header */
.offcanvas-header { background: #f8fafc !important; border-bottom: 1px solid #f1f5f9 !important; }
.offcanvas-title { font-size: .9rem !important; font-weight: 700 !important; color: #111827 !important; }

/* Bouton primaire */
.btn-primary, .btn.btn-add-primary { background: var(--primary-gradient) !important; border: none !important; box-shadow: 0 2px 8px rgba(204,56,38,.28) !important; }
.btn-primary:hover, .btn.btn-add-primary:hover { box-shadow: 0 4px 16px rgba(204,56,38,.4) !important; transform: translateY(-1px) !important; }

/* Live dot animation enrichie */
@keyframes pulse-wappi { 0% { box-shadow: 0 0 0 0 rgba(10,179,156,.7); } 70% { box-shadow: 0 0 0 9px rgba(10,179,156,0); } 100% { box-shadow: 0 0 0 0 rgba(10,179,156,0); } }
.live-dot { animation: pulse-wappi 2s ease-out infinite !important; border-radius: 50%; }

/* Sidebar: active item meilleur contraste */
#sidebar-menu ul li a.active,
.nav-link.active,
.side-nav-link-ref.active {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.35) !important;
}

/* Dark mode overrides pour MO */
[data-bs-theme="dark"] .form-label { color: #94a3b8 !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: #1e293b !important; border-color: rgba(255,255,255,.1) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .input-group-text { background: #252d40 !important; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .offcanvas-header { background: #1a1f2e !important; border-color: rgba(255,255,255,.06) !important; }

/* ==========================================================================
   MP. DARK SIDEBAR "OBSIDIAN" — premium enterprise look (mode clair)
   Inspiré : Vercel, Linear, Notion — sidebar foncée sur fond clair
   ========================================================================== */

/* Conteneur sidebar principal */
.vertical-menu,
.app-menu,
.navbar-menu {
    background: #0f1117 !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}

/* Logo zone */
.navbar-brand-box {
    background: #0f1117 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Texte des items de menu */
#sidebar-menu ul li a,
.side-nav-link-ref {
    color: rgba(255,255,255,.62) !important;
}

/* Hover sur items */
#sidebar-menu ul li a:hover,
.side-nav-link-ref:hover {
    color: rgba(255,255,255,.92) !important;
    background: rgba(255,255,255,.07) !important;
}

/* Item actif — gradient de marque */
#sidebar-menu ul li a.active,
.nav-link.active,
.side-nav-link-ref.active {
    background: var(--primary-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.35) !important;
}

/* Icônes menu */
#sidebar-menu ul li a i,
#sidebar-menu ul li a .side-nav-icon { opacity: .65; }
#sidebar-menu ul li a.active i,
#sidebar-menu ul li a:hover i { opacity: 1; }

/* Titres de section menu (OVERVIEW, OPERATIONS…) */
#sidebar-menu ul li.menu-title,
.menu-title {
    color: rgba(255,255,255,.28) !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    padding: 1.2rem 1.5rem .4rem !important;
}

/* Sous-menus */
#sidebar-menu ul ul a {
    color: rgba(255,255,255,.52) !important;
    font-size: .81rem !important;
    padding-left: 3.2rem !important;
}
#sidebar-menu ul ul a.active { color: #fff !important; }

/* Badge dans le menu */
#sidebar-menu .badge { background: rgba(204,56,38,.85) !important; color: #fff !important; }

/* Fond de sidebar — gradient subtil */
.sidebar-background {
    background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(204,56,38,.08) 0%, transparent 70%);
}

/* ==========================================================================
   MQ. CHART CARDS PREMIUM — dimensional layering
   Cards contenant les graphiques ApexCharts
   ========================================================================== */

/* Accent top border sur les cards charts */
.card:has(.apex-charts),
.card:has(apexchart) {
    border-top: 2px solid var(--vz-primary, #cc3826) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.04) !important;
}

/* Header des chart cards */
.card:has(.apex-charts) .card-header,
.card:has(apexchart) .card-header {
    padding-bottom: .25rem !important;
}
.card:has(.apex-charts) .card-header h6,
.card:has(apexchart) .card-header h6 {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -.01em;
}

/* ApexCharts tooltip premium — improved */
.apexcharts-tooltip {
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 4px 10px rgba(0,0,0,.08) !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    overflow: hidden !important;
}
.apexcharts-tooltip-title {
    padding: 8px 14px !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #374151 !important;
}
.apexcharts-tooltip-series-group { padding: 6px 14px !important; }
.apexcharts-tooltip-text-y-label { font-size: .78rem !important; color: #6b7280 !important; }
.apexcharts-tooltip-text-y-value { font-size: .84rem !important; font-weight: 700 !important; color: #111827 !important; }

/* Grid lines — plus légères */
.apexcharts-gridline { stroke: rgba(0,0,0,.04) !important; }
.apexcharts-xaxis-tick, .apexcharts-yaxis-tick { stroke: rgba(0,0,0,.1) !important; }

/* Dark mode chart cards */
[data-bs-theme="dark"] .card:has(.apex-charts),
[data-bs-theme="dark"] .card:has(apexchart) { box-shadow: 0 2px 12px rgba(0,0,0,.25), 0 8px 32px rgba(0,0,0,.2) !important; }
[data-bs-theme="dark"] .apexcharts-tooltip { background: #1e2436 !important; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .apexcharts-tooltip-title { background: #252d40 !important; border-color: rgba(255,255,255,.06) !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-value { color: #f8fafc !important; }
[data-bs-theme="dark"] .apexcharts-tooltip-text-y-label { color: #94a3b8 !important; }
[data-bs-theme="dark"] .apexcharts-gridline { stroke: rgba(255,255,255,.04) !important; }

/* ==========================================================================
   MR. LEGEND ROWS (chart donut breakdown) — premium list items
   Les lignes Complétées / Annulées / Planifiées sous le donut
   ========================================================================== */

/* Ligne de légende — hover premium */
.d-flex.align-items-center.justify-content-between.py-2.border-top {
    transition: background .15s ease;
    border-radius: 6px;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin: 0 -4px;
}
.d-flex.align-items-center.justify-content-between.py-2.border-top:hover {
    background: #f8fafc;
}

/* Dot couleur légende — plus grand, arrondi */
.d-flex.align-items-center.gap-2 > span[style*="width:10px"] {
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important;
    flex-shrink: 0;
}

/* ==========================================================================
   MS. EARNING SUB-CARDS — polish (Cash/Wallet/Card/Commission)
   Les mini-cards colorées dans la section Today Earnings
   ========================================================================== */

/* Cartes colorées dans today earnings */
.p-3.rounded-3[style*="background:#f3fdf6"],
.p-3.rounded-3[style*="background:#fff8ec"],
.p-3.rounded-3[style*="background:#eef6ff"],
.p-3.rounded-3[style*="background:#fff0f0"] {
    transition: box-shadow .2s ease, transform .15s ease;
}
.p-3.rounded-3[style*="background:#f3fdf6"]:hover,
.p-3.rounded-3[style*="background:#fff8ec"]:hover,
.p-3.rounded-3[style*="background:#eef6ff"]:hover,
.p-3.rounded-3[style*="background:#fff0f0"]:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

/* ==========================================================================
   MT. ELEVATION SYSTEM — dimensional layering (ui-ux-pro-max)
   4 niveaux d'élévation selon la position dans l'interface
   ========================================================================== */

/* Niveau 1 — Surface de base (page, sidebar) */
.main-content { background: #f8fafc; }

/* Niveau 2 — Cartes standard */
.card:not(.card-animate):not(:has(.apex-charts)):not(:has(apexchart)) {
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04) !important;
    border: 1px solid #f0f4f8 !important;
}

/* Niveau 3 — Cartes interactives hover */
.card:not(.card-animate):hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Niveau 4 — Dropdowns, modals, tooltips (déjà configuré) */

/* Dark mode elevation */
[data-bs-theme="dark"] .main-content { background: #131720; }
[data-bs-theme="dark"] .card:not(.card-animate) {
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2) !important;
    border-color: rgba(255,255,255,.06) !important;
}

/* ==========================================================================
   MU. SIDEBAR DARK — override active item pour correspondre
   ========================================================================== */

/* Lien actif sidebar - assure la visibilité en mode sombre */
[data-bs-theme="dark"] .vertical-menu,
[data-bs-theme="dark"] .app-menu,
[data-bs-theme="dark"] .navbar-menu {
    background: #0a0d14 !important;
    border-right-color: rgba(255,255,255,.04) !important;
}
[data-bs-theme="dark"] .navbar-brand-box { background: #0a0d14 !important; }
[data-bs-theme="dark"] #sidebar-menu ul li a { color: rgba(255,255,255,.52) !important; }
[data-bs-theme="dark"] #sidebar-menu ul li a:hover { color: rgba(255,255,255,.85) !important; background: rgba(255,255,255,.05) !important; }
[data-bs-theme="dark"] .menu-title { color: rgba(255,255,255,.22) !important; }

/* ==========================================================================
   MV. LIVE STATUS BADGES — Real-Time Monitoring (SOS / Ongoing Rides)
   BBadge variant="success/danger/warning/info" → bg-success/danger/etc.
   ========================================================================== */

/* Base solid badge colors — Bootstrap-Vue variant mapping */
.badge.bg-success { background: #16a34a !important; color: #fff !important; }
.badge.bg-danger  { background: #dc2626 !important; color: #fff !important; }
.badge.bg-warning { background: #d97706 !important; color: #fff !important; }
.badge.bg-info    { background: #0284c7 !important; color: #fff !important; }
.badge.bg-primary { background: var(--vz-primary, #cc3826) !important; color: #fff !important; }
.badge.bg-secondary { background: #6b7280 !important; color: #fff !important; }

/* Live pulse — badge "Active" (SOS, driver status) */
@keyframes badge-pulse-active {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}
.badge.bg-success {
    animation: badge-pulse-active 2.5s ease-out infinite;
    position: relative;
}

/* On Trip — special blue with pulse */
@keyframes badge-pulse-trip {
    0%, 100% { box-shadow: 0 0 0 0 rgba(2,132,199,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(2,132,199,0); }
}
.badge.bg-info[class*="uppercase"],
.badge.text-bg-info {
    animation: badge-pulse-trip 2.5s ease-out infinite;
}

/* Searching — amber pulse */
@keyframes badge-pulse-search {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(217,119,6,0); }
}
.badge.bg-warning, .badge.text-bg-warning {
    animation: badge-pulse-search 3s ease-out infinite;
}

/* Inactive / Cancelled — no pulse, static grey-red */
.badge.bg-danger { animation: none !important; }
.badge.bg-secondary { animation: none !important; }

/* ==========================================================================
   MW. OPERATIONAL TABLE ENHANCEMENTS — rides, drivers, SOS
   ========================================================================== */

/* Row click hint — cursor pointer when row is clickable */
.table-hover tbody tr[style*="cursor:pointer"],
.table-hover tbody tr[onclick] { cursor: pointer; }

/* Striping premium — very subtle alternating */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(0,0,0,.012) !important;
}

/* Sticky header for long tables */
.table-responsive .table thead { position: sticky; top: 0; z-index: 2; }
.table thead th { border-bottom: 2px solid #f0f4f8 !important; }

/* Request ID column — monospace */
.table tbody td:first-child {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: .78rem !important;
    color: #6b7280 !important;
    letter-spacing: .01em;
}

/* Driver/user name column — bold */
.table tbody td:nth-child(3),
.table tbody td:nth-child(4) {
    font-weight: 500 !important;
    color: #1e293b !important;
}

/* Date column — muted smaller */
.table tbody td:nth-child(2) {
    font-size: .78rem !important;
    color: #6b7280 !important;
}

/* Dark mode table improvements */
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255,255,255,.025) !important;
}
[data-bs-theme="dark"] .table tbody td:first-child { color: #64748b !important; }
[data-bs-theme="dark"] .table tbody td:nth-child(3),
[data-bs-theme="dark"] .table tbody td:nth-child(4) { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .table tbody td:nth-child(2) { color: #64748b !important; }

/* ==========================================================================
   MX. PROFILE & SETTINGS PAGES — Trust & Authority style
   ========================================================================== */

/* Section titles dans settings */
.settings-section-title,
h5.fw-semibold.text-muted,
.card-body h5.text-muted {
    font-size: .7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    color: #94a3b8 !important;
    margin-bottom: 1rem !important;
    padding-bottom: .5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Profile avatar — shadow + border */
.avatar-xl img,
.profile-img img,
img[class*="avatar"][class*="xl"] {
    border: 3px solid #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    border-radius: 50% !important;
}

/* Security badge dans profile */
.security-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.security-badge.warning { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.security-badge.danger  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

/* Card header dans profile — separator subtil */
.profile-card .card-header,
[class*="profile"] .card-header {
    border-bottom: 2px solid var(--vz-primary, #cc3826) !important;
    padding-bottom: .75rem !important;
}

/* 2FA warning card */
.alert-warning.border-warning,
.alert[class*="warning"] {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    border-left: 4px solid #f59e0b !important;
}

/* ==========================================================================
   MY. FILTER OFFCANVAS CONTENT — premium filter panel
   ========================================================================== */

/* Filter section headers */
.offcanvas-body .text-muted.text-uppercase.fw-semibold {
    font-size: .65rem !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    color: #94a3b8 !important;
    padding-bottom: .4rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: .75rem !important;
    display: block;
}

/* Multiselect in offcanvas */
.offcanvas-body .multiselect { font-size: .82rem !important; }
.offcanvas-body .multiselect__tags {
    border-color: #e2e8f0 !important;
    border-radius: 9px !important;
    min-height: 40px !important;
    background: #fafbfc !important;
}
.offcanvas-body .multiselect__placeholder { color: #c0c9d6 !important; font-size: .82rem !important; }

/* Apply/clear buttons in offcanvas footer */
.offcanvas-footer .btn { min-width: 100px; font-weight: 600 !important; }

/* ==========================================================================
   MZ. FINAL SYSTEM POLISH — micro-details that elevate the whole UI
   ========================================================================== */

/* Scrollbar global — thin, premium */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* Selection color — brand */
::selection { background: rgba(204,56,38,.16); color: #991b1b; }

/* HR separator premium */
hr { border-color: #f1f5f9 !important; opacity: 1 !important; }

/* Code/monospace blocks */
code, kbd, pre, .font-monospace {
    font-family: 'Fira Code', 'Consolas', monospace !important;
    font-size: .82em !important;
}
code { background: #f1f5f9; color: #cc3826; padding: .15em .4em; border-radius: 4px; }

/* Input number spinners — hide */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Link premium */
a:not([class]) { color: var(--vz-primary, #cc3826); text-decoration: none; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }

/* Smooth transitions sur tout — performance-safe */
.card, .btn, .badge, .form-control, .form-select,
.dropdown-menu, .dropdown-item, .nav-link, .page-link,
.list-group-item, .offcanvas, .modal-content, .alert {
    transition-property: background-color, border-color, color, box-shadow, opacity, transform;
    transition-duration: .15s;
    transition-timing-function: ease;
}

/* Reduced motion final override */
@media (prefers-reduced-motion: reduce) {
    .badge.bg-success, .badge.bg-info, .badge.bg-warning,
    .badge.text-bg-info, .badge.text-bg-warning,
    .live-dot { animation: none !important; }
    .card, .btn, .badge, .form-control, .form-select,
    .dropdown-item, .nav-link { transition-duration: .01ms !important; }
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] * { scrollbar-color: rgba(255,255,255,.12) transparent; }
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
[data-bs-theme="dark"] hr { border-color: rgba(255,255,255,.07) !important; }
[data-bs-theme="dark"] code { background: rgba(204,56,38,.15); color: #f87171; }
[data-bs-theme="dark"] a:not([class]) { color: #f87171; }


/* ============================================================
   SECTION NAA — Pagination Premium
   ============================================================ */
.pagination {
    gap: 3px;
}
.page-link {
    border-radius: 8px !important;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid #e9ecef;
    color: #64748b;
    padding: 0 10px;
    letter-spacing: .01em;
}
.page-link:hover {
    background: #fff5f4;
    border-color: var(--vz-primary, #cc3826);
    color: var(--vz-primary, #cc3826);
    box-shadow: 0 2px 8px rgba(204,56,38,.12);
}
.page-item.active .page-link {
    background: linear-gradient(135deg, #cc3826 0%, #a82e1e 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(204,56,38,.35);
}
.page-item.disabled .page-link { opacity: .45; }

/* ============================================================
   SECTION NAB — Page Header & Breadcrumb Premium
   ============================================================ */
.page-title-box {
    padding-top: 1.25rem;
    padding-bottom: .75rem;
}
.page-title-box h4,
.page-title-box .page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.015em;
}
.breadcrumb {
    font-size: .78rem;
    font-weight: 500;
    margin-bottom: 0;
}
.breadcrumb-item a {
    color: #64748b;
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--vz-primary, #cc3826); }
.breadcrumb-item.active { color: var(--vz-primary, #cc3826); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }

/* ============================================================
   SECTION NAC — Empty States
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 2rem;
    gap: 1rem;
}
.empty-state i {
    font-size: 3rem;
    opacity: .3;
    color: #cc3826;
}
.empty-state p {
    font-size: .9rem;
    color: #94a3b8;
    margin: 0;
}
tbody tr td[colspan] {
    text-align: center;
    color: #94a3b8;
    font-size: .88rem;
    padding: 2.5rem 1rem;
}

/* ============================================================
   SECTION NAD — Modal Premium
   ============================================================ */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
    overflow: hidden;
}
.modal-header {
    border-bottom: 2px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
    background: #fff;
}
.modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.01em;
}
.modal-header .btn-close {
    background-color: #f1f5f9;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    opacity: .7;
}
.modal-header .btn-close:hover { opacity: 1; background-color: #fee2e2; }
.modal-body { padding: 1.5rem; }
.modal-footer {
    border-top: 1px solid #f1f5f9;
    padding: 1rem 1.5rem;
    gap: .5rem;
}
.modal-content::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #cc3826 0%, #f87171 100%);
}

/* ============================================================
   SECTION NAE — SweetAlert2 Custom Theme
   ============================================================ */
.swal2-popup {
    border-radius: 16px !important;
    padding: 2rem 1.5rem !important;
    box-shadow: 0 20px 60px rgba(15,23,42,.2) !important;
    font-family: 'Inter', sans-serif !important;
}
.swal2-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.015em !important;
}
.swal2-html-container {
    font-size: .875rem !important;
    color: #64748b !important;
}
.swal2-confirm {
    background: linear-gradient(135deg, #cc3826 0%, #a82e1e 100%) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    padding: .55rem 1.5rem !important;
    box-shadow: 0 4px 12px rgba(204,56,38,.35) !important;
    border: none !important;
}
.swal2-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: .875rem !important;
    padding: .55rem 1.5rem !important;
    border: none !important;
}
.swal2-cancel:hover { background: #e2e8f0 !important; }
.swal2-icon.swal2-warning { border-color: #f59e0b !important; color: #f59e0b !important; }
.swal2-icon.swal2-error { border-color: #cc3826 !important; color: #cc3826 !important; }
.swal2-icon.swal2-success { border-color: #10b981 !important; color: #10b981 !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background: #10b981 !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16,185,129,.3) !important; }

/* ============================================================
   SECTION NAF — Flatpickr Date Picker Premium
   ============================================================ */
.flatpickr-calendar {
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(15,23,42,.14) !important;
    border: 1px solid #e9ecef !important;
    font-family: 'Inter', sans-serif !important;
    overflow: hidden;
}
.flatpickr-months { background: var(--vz-primary, #cc3826) !important; }
.flatpickr-month,
.flatpickr-next-month,
.flatpickr-prev-month { color: #fff !important; fill: #fff !important; }
.flatpickr-current-month .cur-month,
.flatpickr-current-month .numInputWrapper input { color: #fff !important; font-weight: 700 !important; }
.flatpickr-weekdays { background: #cc3826 !important; }
span.flatpickr-weekday { color: rgba(255,255,255,.75) !important; font-weight: 600 !important; font-size: .72rem !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--vz-primary, #cc3826) !important;
    border-color: var(--vz-primary, #cc3826) !important;
    border-radius: 8px !important;
}
.flatpickr-day:hover {
    background: #fff5f4 !important;
    border-color: #fca5a5 !important;
    border-radius: 8px !important;
}
.flatpickr-day.today { border-color: var(--vz-primary, #cc3826) !important; }
.flatpickr-day.inRange {
    background: #fee2e2 !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 #fee2e2, 5px 0 0 #fee2e2 !important;
}

/* ============================================================
   SECTION NAG — Multiselect (vueform) Premium
   ============================================================ */
.multiselect {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    min-height: 42px !important;
    font-size: .875rem !important;
    font-family: 'Inter', sans-serif !important;
}
.multiselect.is-open { border-color: var(--vz-primary, #cc3826) !important; box-shadow: 0 0 0 3px rgba(204,56,38,.1) !important; }
.multiselect.is-active { border-color: var(--vz-primary, #cc3826) !important; }
.multiselect-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(15,23,42,.12) !important;
    border: 1px solid #e9ecef !important;
    margin-top: 4px !important;
    overflow: hidden;
}
.multiselect-option.is-selected {
    background: var(--vz-primary, #cc3826) !important;
    color: #fff !important;
}
.multiselect-option.is-pointed { background: #fff5f4 !important; color: #cc3826 !important; }
.multiselect-tag {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    border-radius: 6px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    padding: .2rem .5rem !important;
}
.multiselect-tag-remove { color: #cc3826 !important; }
.multiselect-placeholder { color: #94a3b8 !important; }

/* ============================================================
   SECTION NAH — Image Thumbnails in Tables
   ============================================================ */
.table td img {
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #f1f5f9;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
}
.table td img:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
    cursor: zoom-in;
}
.avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl {
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.badge.text-bg-light {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 500;
}

/* ============================================================
   SECTION NAI — Alert Components Premium
   ============================================================ */
.alert {
    border-radius: 12px !important;
    border: none !important;
    font-size: .875rem !important;
    font-weight: 500;
    padding: .875rem 1.25rem;
}
.alert-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-left: 4px solid #10b981 !important;
}
.alert-danger {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border-left: 4px solid #cc3826 !important;
}
.alert-warning {
    background: #fffbeb !important;
    color: #78350f !important;
    border-left: 4px solid #f59e0b !important;
}
.alert-info {
    background: #eff6ff !important;
    color: #1e3a5f !important;
    border-left: 4px solid #3b82f6 !important;
}

/* ============================================================
   SECTION NAJ — Card Header Toolbar
   ============================================================ */
.card-header .btn {
    font-size: .8rem;
    font-weight: 600;
    border-radius: 8px;
}
.card-header .form-control:focus,
.card-header input[type="search"]:focus {
    border-color: var(--vz-primary, #cc3826);
    box-shadow: 0 0 0 3px rgba(204,56,38,.1);
}

/* ============================================================
   SECTION NAK — Offcanvas Panel Premium
   ============================================================ */
.offcanvas {
    box-shadow: -12px 0 40px rgba(15,23,42,.12) !important;
}
.offcanvas-start { box-shadow: 12px 0 40px rgba(15,23,42,.12) !important; }
.offcanvas-header {
    border-bottom: 2px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
}
.offcanvas-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.01em;
}
.offcanvas-header .btn-close {
    background-color: #f1f5f9;
    border-radius: 50%;
    opacity: .6;
}
.offcanvas-header .btn-close:hover { opacity: 1; background-color: #fee2e2; }
.offcanvas-body { padding: 1.5rem; }
.offcanvas-body label.form-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #64748b;
    margin-bottom: .4rem;
}

/* ============================================================
   SECTION NAL — Form Pages Premium
   ============================================================ */
.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .35rem;
}
.form-control {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    font-size: .875rem !important;
    padding: .5rem .875rem !important;
    color: #0f172a !important;
    background: #fff !important;
}
.form-control:focus {
    border-color: var(--vz-primary, #cc3826) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.1) !important;
}
.form-control::placeholder { color: #94a3b8 !important; }
.form-select {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    font-size: .875rem !important;
    padding: .5rem .875rem !important;
    color: #0f172a !important;
}
.form-select:focus {
    border-color: var(--vz-primary, #cc3826) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.1) !important;
}
.input-group .input-group-text {
    border-radius: 10px 0 0 10px;
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .85rem;
}
.input-group .form-control { border-radius: 0 10px 10px 0 !important; }

/* ============================================================
   SECTION NAM — Toggle / Checkbox Premium
   ============================================================ */
.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
    cursor: pointer;
    border-color: #d1d5db;
}
.form-check-input:checked {
    background-color: var(--vz-primary, #cc3826) !important;
    border-color: var(--vz-primary, #cc3826) !important;
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(204,56,38,.15) !important;
    border-color: var(--vz-primary, #cc3826) !important;
}
.form-switch .form-check-input {
    width: 2.4rem;
    height: 1.25rem;
    border-radius: 20px;
}
.form-switch .form-check-input:checked { background-color: var(--vz-primary,#cc3826) !important; }

/* ============================================================
   SECTION NAN — Driver / User Detail Pages
   ============================================================ */
.profile-cover {
    background: linear-gradient(135deg, #cc3826 0%, #7f1d1d 100%);
    border-radius: 16px 16px 0 0;
    min-height: 140px;
    position: relative;
}
.document-card {
    border-radius: 14px;
    border: 1.5px solid #f1f5f9;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.document-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 4px 16px rgba(204,56,38,.1);
}
.rating-stars i { color: #f59e0b; font-size: .9rem; }
.stat-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: .875rem 1rem;
    text-align: center;
    border: 1px solid #f1f5f9;
}
.stat-box .stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-box .stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-top: .15rem;
}

/* ============================================================
   SECTION NAO — Dark Mode Comprehensive Overrides
   ============================================================ */
[data-bs-theme="dark"] .modal-content { background: #1e293b; }
[data-bs-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,.08); background: #1e293b; }
[data-bs-theme="dark"] .modal-footer { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .modal-title { color: #f1f5f9; }
[data-bs-theme="dark"] .offcanvas { background: #1e293b; }
[data-bs-theme="dark"] .offcanvas-header { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .offcanvas-title { color: #f1f5f9; }
[data-bs-theme="dark"] .offcanvas-body label.form-label { color: #94a3b8; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #0f172a !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #f1f5f9 !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #cc3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.2) !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: rgba(255,255,255,.3) !important; }
[data-bs-theme="dark"] .input-group-text { background: #1e293b; border-color: rgba(255,255,255,.1); color: #94a3b8; }
[data-bs-theme="dark"] .stat-box { background: #1e293b; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .stat-box .stat-value { color: #f1f5f9; }
[data-bs-theme="dark"] .page-title-box h4,
[data-bs-theme="dark"] .page-title-box .page-title { color: #f1f5f9; }
[data-bs-theme="dark"] .alert-success { background: rgba(16,185,129,.12) !important; color: #6ee7b7 !important; }
[data-bs-theme="dark"] .alert-danger { background: rgba(204,56,38,.12) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .alert-warning { background: rgba(245,158,11,.12) !important; color: #fde68a !important; }
[data-bs-theme="dark"] .alert-info { background: rgba(59,130,246,.12) !important; color: #bfdbfe !important; }
[data-bs-theme="dark"] .multiselect { background: #0f172a !important; border-color: rgba(255,255,255,.1) !important; color: #f1f5f9 !important; }
[data-bs-theme="dark"] .multiselect-dropdown { background: #1e293b !important; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .multiselect-option { color: #cbd5e1; }
[data-bs-theme="dark"] .multiselect-option.is-pointed { background: rgba(204,56,38,.15) !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .flatpickr-calendar { background: #1e293b !important; border-color: rgba(255,255,255,.1) !important; }
[data-bs-theme="dark"] .flatpickr-day { color: #cbd5e1 !important; }
[data-bs-theme="dark"] .flatpickr-day:hover { background: rgba(204,56,38,.15) !important; }
[data-bs-theme="dark"] .swal2-popup { background: #1e293b !important; }
[data-bs-theme="dark"] .swal2-title { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .swal2-html-container { color: #94a3b8 !important; }
[data-bs-theme="dark"] .swal2-cancel { background: #334155 !important; color: #cbd5e1 !important; }

/* ============================================================
   SECTION NAP — SIDEBAR FIX: revert obsidian light-mode forced dark
   Section MP avait forcé background #0f1117 en light mode.
   On annule ici pour le light mode et on adoucit le dark mode.
   ============================================================ */

/* Light mode — sidebar revient au blanc/gris du thème Velzon */
:not([data-bs-theme="dark"]) .vertical-menu,
:not([data-bs-theme="dark"]) .app-menu,
:not([data-bs-theme="dark"]) .navbar-menu {
    background: #fff !important;
    border-right: 1px solid #f0f0f0 !important;
}
:not([data-bs-theme="dark"]) .navbar-brand-box {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* Light mode — texte menu : revenir aux couleurs sombres du thème */
:not([data-bs-theme="dark"]) #sidebar-menu ul li a,
:not([data-bs-theme="dark"]) .side-nav-link-ref {
    color: #545a6d !important;
}
:not([data-bs-theme="dark"]) #sidebar-menu ul li a:hover,
:not([data-bs-theme="dark"]) .side-nav-link-ref:hover {
    color: #cc3826 !important;
    background: rgba(204,56,38,.06) !important;
}
:not([data-bs-theme="dark"]) #sidebar-menu ul li.menu-title,
:not([data-bs-theme="dark"]) .menu-title {
    color: #9aa2b1 !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}
:not([data-bs-theme="dark"]) #sidebar-menu ul ul a {
    color: #7a8499 !important;
}
:not([data-bs-theme="dark"]) #sidebar-menu ul li a i,
:not([data-bs-theme="dark"]) #sidebar-menu ul li a .side-nav-icon {
    opacity: .75;
    color: inherit;
}
:not([data-bs-theme="dark"]) #sidebar-menu ul li a.active i,
:not([data-bs-theme="dark"]) #sidebar-menu ul li a:hover i { opacity: 1; }

/* Light mode — item actif reste rouge gradient */
:not([data-bs-theme="dark"]) #sidebar-menu ul li a.active,
:not([data-bs-theme="dark"]) .mm-active > a {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Light mode — sidebar-background gradient subtil au fond */
:not([data-bs-theme="dark"]) .sidebar-background {
    background: none !important;
}

/* ----------------------------------------------------------------
   Dark mode — sidebar adouci : #1a2235 (navy) au lieu de #0f1117
   ---------------------------------------------------------------- */
[data-bs-theme="dark"] .vertical-menu,
[data-bs-theme="dark"] .app-menu,
[data-bs-theme="dark"] .navbar-menu {
    background: #1a2235 !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
}
[data-bs-theme="dark"] .navbar-brand-box {
    background: #1a2235 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
[data-bs-theme="dark"] #sidebar-menu ul li a,
[data-bs-theme="dark"] .side-nav-link-ref {
    color: rgba(255,255,255,.65) !important;
}
[data-bs-theme="dark"] #sidebar-menu ul li a:hover,
[data-bs-theme="dark"] .side-nav-link-ref:hover {
    color: #fff !important;
    background: rgba(255,255,255,.06) !important;
}
[data-bs-theme="dark"] #sidebar-menu ul li a.active,
[data-bs-theme="dark"] .mm-active > a {
    background: linear-gradient(135deg, rgba(204,56,38,.85), rgba(168,46,30,.85)) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(204,56,38,.3) !important;
}
[data-bs-theme="dark"] #sidebar-menu ul li.menu-title,
[data-bs-theme="dark"] .menu-title {
    color: rgba(255,255,255,.32) !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
}
[data-bs-theme="dark"] #sidebar-menu ul ul a {
    color: rgba(255,255,255,.5) !important;
}
[data-bs-theme="dark"] #sidebar-menu ul ul a.active { color: #fff !important; }
[data-bs-theme="dark"] .sidebar-background {
    background: radial-gradient(ellipse 60% 35% at 50% 100%, rgba(204,56,38,.07) 0%, transparent 70%);
}

/* ============================================================
   SECTION NAQ — SIDEBAR UNIVERSEL : toujours identique au screenshot 1
   Force le sidebar blanc/clair pour TOUS les themes (light ET dark).
   Override final — placé en dernier pour gagner la cascade CSS.
   ============================================================ */

/* --- Conteneur sidebar : toujours blanc --- */
.vertical-menu,
.app-menu,
.navbar-menu,
html .vertical-menu,
html .app-menu,
[data-bs-theme] .vertical-menu,
[data-bs-theme] .app-menu,
[data-bs-theme] .navbar-menu {
    background: #ffffff !important;
    border-right: 1px solid #eef0f2 !important;
}

/* --- Logo box : toujours blanc --- */
.navbar-brand-box,
[data-bs-theme] .navbar-brand-box {
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f2 !important;
}

/* --- Texte des liens de menu : gris ardoise foncé --- */
#sidebar-menu ul li a,
.side-nav-link-ref,
[data-bs-theme] #sidebar-menu ul li a,
[data-bs-theme] .side-nav-link-ref {
    color: #545a6d !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
}

/* --- Hover : rouge brand subtil --- */
#sidebar-menu ul li a:hover,
.side-nav-link-ref:hover,
[data-bs-theme] #sidebar-menu ul li a:hover,
[data-bs-theme] .side-nav-link-ref:hover {
    color: #cc3826 !important;
    background: rgba(204,56,38,.07) !important;
}

/* --- Item actif : fond rouge 10% + texte rouge + bold --- */
#sidebar-menu ul li a.active,
.mm-active > a,
[data-bs-theme] #sidebar-menu ul li a.active,
[data-bs-theme] .mm-active > a {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* --- Icônes : suivent la couleur du texte --- */
#sidebar-menu ul li a i,
[data-bs-theme] #sidebar-menu ul li a i {
    opacity: .7;
}
#sidebar-menu ul li a.active i,
#sidebar-menu ul li a:hover i,
[data-bs-theme] #sidebar-menu ul li a.active i,
[data-bs-theme] #sidebar-menu ul li a:hover i {
    opacity: 1;
    color: #cc3826 !important;
}

/* --- Titres de section (OVERVIEW, OPÉRATIONS…) --- */
#sidebar-menu ul li.menu-title,
.menu-title,
[data-bs-theme] #sidebar-menu ul li.menu-title,
[data-bs-theme] .menu-title {
    color: #adb5bd !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* --- Sous-menus --- */
#sidebar-menu ul ul a,
[data-bs-theme] #sidebar-menu ul ul a {
    color: #6c757d !important;
    font-size: .84rem !important;
}
#sidebar-menu ul ul a:hover,
[data-bs-theme] #sidebar-menu ul ul a:hover {
    color: #cc3826 !important;
}
#sidebar-menu ul ul a.active,
[data-bs-theme] #sidebar-menu ul ul a.active {
    color: #cc3826 !important;
    font-weight: 600 !important;
}

/* --- Séparateur de section menu --- */
.vertical-menu #sidebar-menu li.menu-section-label,
[data-bs-theme] .vertical-menu #sidebar-menu li.menu-section-label {
    border-top-color: #f0f0f0 !important;
    color: #adb5bd !important;
}

/* --- Fond décoratif sidebar --- */
.sidebar-background,
[data-bs-theme] .sidebar-background {
    background: none !important;
}

/* --- Badge sidebar (notification count) --- */
#sidebar-menu .badge,
[data-bs-theme] #sidebar-menu .badge {
    background: rgba(204,56,38,.15) !important;
    color: #cc3826 !important;
    font-weight: 700 !important;
}

/* --- Contenu principal : fond légèrement gris comme screenshot 1 --- */
.main-content,
#main-content,
.page-content,
[data-bs-theme] .main-content,
[data-bs-theme] #main-content,
[data-bs-theme] .page-content {
    background: #f8f9fa !important;
}

/* --- Topbar : toujours blanc --- */
#page-topbar,
.navbar-header,
[data-bs-theme] #page-topbar,
[data-bs-theme] .navbar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f2 !important;
    box-shadow: 0 1px 10px rgba(0,0,0,.05) !important;
}

/* --- Liens topbar --- */
#page-topbar .nav-link,
.navbar-header .nav-link,
[data-bs-theme] #page-topbar .nav-link,
[data-bs-theme] .navbar-header .nav-link {
    color: #545a6d !important;
}
#page-topbar .nav-link:hover,
.navbar-header .nav-link:hover {
    color: #cc3826 !important;
}

/* --- Dropdown topbar --- */
.dropdown-menu,
[data-bs-theme] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #eef0f2 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.1) !important;
    border-radius: 12px !important;
}
.dropdown-item,
[data-bs-theme] .dropdown-item {
    color: #545a6d !important;
}
.dropdown-item:hover,
[data-bs-theme] .dropdown-item:hover {
    background: rgba(204,56,38,.07) !important;
    color: #cc3826 !important;
}

/* --- Cards : toujours blanches, ombre légère --- */
.card,
[data-bs-theme] .card {
    background: #ffffff !important;
    border: 1px solid #f0f2f5 !important;
    color: #0f172a !important;
}
.card-header,
[data-bs-theme] .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f2f5 !important;
    color: #0f172a !important;
}
.card-body,
[data-bs-theme] .card-body {
    color: #0f172a !important;
}

/* --- Tables : toujours fond blanc --- */
.table,
[data-bs-theme] .table {
    color: #0f172a !important;
    background: #ffffff !important;
}
.table-active,
[data-bs-theme] .table-active {
    background: #f8f9fa !important;
    color: #374151 !important;
}
.table > thead,
[data-bs-theme] .table > thead {
    background: #f8f9fa !important;
}
.table > thead th,
[data-bs-theme] .table > thead th {
    color: #6c757d !important;
    border-bottom-color: #eef0f2 !important;
}
.table > tbody td,
[data-bs-theme] .table > tbody td {
    border-color: #f3f4f6 !important;
    color: #374151 !important;
}

/* --- Textes body --- */
body,
[data-bs-theme] body {
    color: #374151 !important;
}
h1, h2, h3, h4, h5, h6,
[data-bs-theme] h1,
[data-bs-theme] h2,
[data-bs-theme] h3,
[data-bs-theme] h4,
[data-bs-theme] h5,
[data-bs-theme] h6 {
    color: #0f172a !important;
}
.text-muted,
[data-bs-theme] .text-muted {
    color: #6c757d !important;
}

/* --- Scrollbar sidebar : rouge discret --- */
.vertical-menu,
[data-bs-theme] .vertical-menu {
    scrollbar-color: rgba(204,56,38,.25) transparent !important;
}

/* --- Reduced motion safety --- */
@media (prefers-reduced-motion: reduce) {
    .vertical-menu, .app-menu, .navbar-menu { transition: none !important; }
}

/* ============================================================
   SECTION NAR — SIDEBAR LOCK: force data-sidebar="light" via CSS
   Garantit le sidebar blanc même si JS ou localStorage met "dark".
   Override absolu — dernier dans le fichier, gagne toujours.
   ============================================================ */

/* Neutralise TOUS les variants data-sidebar possibles */
[data-sidebar="dark"] .navbar-menu,
[data-sidebar="dark"] .vertical-menu,
[data-sidebar="dark"] .app-menu,
[data-sidebar="gradient"] .navbar-menu,
[data-sidebar="gradient"] .vertical-menu,
[data-sidebar="gradient-2"] .navbar-menu,
[data-sidebar="gradient-2"] .vertical-menu,
[data-sidebar="gradient-3"] .navbar-menu,
[data-sidebar="gradient-3"] .vertical-menu,
[data-sidebar="gradient-4"] .navbar-menu,
[data-sidebar="gradient-4"] .vertical-menu {
    background: #ffffff !important;
    border-right: 1px solid #eef0f2 !important;
}

[data-sidebar="dark"] .navbar-brand-box,
[data-sidebar="gradient"] .navbar-brand-box,
[data-sidebar="gradient-2"] .navbar-brand-box,
[data-sidebar="gradient-3"] .navbar-brand-box,
[data-sidebar="gradient-4"] .navbar-brand-box {
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f2 !important;
}

[data-sidebar="dark"] #sidebar-menu ul li a,
[data-sidebar="dark"] .side-nav-link-ref,
[data-sidebar="gradient"] #sidebar-menu ul li a,
[data-sidebar="gradient-2"] #sidebar-menu ul li a,
[data-sidebar="gradient-3"] #sidebar-menu ul li a,
[data-sidebar="gradient-4"] #sidebar-menu ul li a {
    color: #545a6d !important;
}

[data-sidebar="dark"] #sidebar-menu ul li a:hover,
[data-sidebar="gradient"] #sidebar-menu ul li a:hover,
[data-sidebar="gradient-2"] #sidebar-menu ul li a:hover,
[data-sidebar="gradient-3"] #sidebar-menu ul li a:hover,
[data-sidebar="gradient-4"] #sidebar-menu ul li a:hover {
    color: #cc3826 !important;
    background: rgba(204,56,38,.07) !important;
}

[data-sidebar="dark"] #sidebar-menu ul li a.active,
[data-sidebar="dark"] .mm-active > a,
[data-sidebar="gradient"] #sidebar-menu ul li a.active,
[data-sidebar="gradient"] .mm-active > a,
[data-sidebar="gradient-2"] #sidebar-menu ul li a.active,
[data-sidebar="gradient-2"] .mm-active > a,
[data-sidebar="gradient-3"] #sidebar-menu ul li a.active,
[data-sidebar="gradient-3"] .mm-active > a,
[data-sidebar="gradient-4"] #sidebar-menu ul li a.active,
[data-sidebar="gradient-4"] .mm-active > a {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

[data-sidebar="dark"] #sidebar-menu ul li a i,
[data-sidebar="gradient"] #sidebar-menu ul li a i,
[data-sidebar="gradient-2"] #sidebar-menu ul li a i,
[data-sidebar="gradient-3"] #sidebar-menu ul li a i,
[data-sidebar="gradient-4"] #sidebar-menu ul li a i {
    opacity: .7;
    color: inherit;
}

[data-sidebar="dark"] #sidebar-menu ul li a.active i,
[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
[data-sidebar="gradient"] #sidebar-menu ul li a.active i,
[data-sidebar="gradient"] #sidebar-menu ul li a:hover i {
    opacity: 1;
    color: #cc3826 !important;
}

[data-sidebar="dark"] #sidebar-menu ul li.menu-title,
[data-sidebar="gradient"] #sidebar-menu ul li.menu-title,
[data-sidebar="gradient-2"] #sidebar-menu ul li.menu-title,
[data-sidebar="gradient-3"] #sidebar-menu ul li.menu-title,
[data-sidebar="gradient-4"] #sidebar-menu ul li.menu-title {
    color: #adb5bd !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

[data-sidebar="dark"] #sidebar-menu ul ul a,
[data-sidebar="gradient"] #sidebar-menu ul ul a {
    color: #6c757d !important;
}
[data-sidebar="dark"] #sidebar-menu ul ul a:hover,
[data-sidebar="gradient"] #sidebar-menu ul ul a:hover {
    color: #cc3826 !important;
}
[data-sidebar="dark"] #sidebar-menu ul ul a.active,
[data-sidebar="gradient"] #sidebar-menu ul ul a.active {
    color: #cc3826 !important;
    font-weight: 600 !important;
}

[data-sidebar="dark"] #sidebar-menu .badge,
[data-sidebar="gradient"] #sidebar-menu .badge {
    background: rgba(204,56,38,.12) !important;
    color: #cc3826 !important;
}

/* Sidebar scrollbar toujours rouge discret */
[data-sidebar="dark"] .vertical-menu,
[data-sidebar="gradient"] .vertical-menu {
    scrollbar-color: rgba(204,56,38,.2) transparent !important;
}

/* Topbar : toujours blanc même en data-bs-theme="dark" */
[data-bs-theme="dark"] #page-topbar,
[data-bs-theme="dark"] .navbar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eef0f2 !important;
    box-shadow: 0 1px 10px rgba(0,0,0,.06) !important;
}
[data-bs-theme="dark"] #page-topbar .nav-link,
[data-bs-theme="dark"] .navbar-header .nav-link {
    color: #545a6d !important;
}
[data-bs-theme="dark"] #page-topbar .topbar-user,
[data-bs-theme="dark"] .topbar-user { background: transparent !important; }

/* ============================================================
   SECTION NAS — FULL LIGHT LOCK: tout le dashboard = screenshot 1
   Neutralise data-bs-theme="dark" sur TOUS les éléments visuels.
   ============================================================ */

/* Body & fond principal */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] html {
    background-color: #f8f9fa !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .page-content,
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] #main-content,
[data-bs-theme="dark"] .content-page {
    background: #f8f9fa !important;
}

/* Cards — toujours blanches */
[data-bs-theme="dark"] .card {
    background: #ffffff !important;
    border-color: #f0f2f5 !important;
    color: #374151 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
}
[data-bs-theme="dark"] .card-header {
    background: #ffffff !important;
    border-bottom-color: #f0f2f5 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .card-body { color: #374151 !important; }
[data-bs-theme="dark"] .card-footer {
    background: #fafafa !important;
    border-top-color: #f0f2f5 !important;
}
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-subtitle { color: #0f172a !important; }

/* Textes */
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 { color: #0f172a !important; }
[data-bs-theme="dark"] p, [data-bs-theme="dark"] span,
[data-bs-theme="dark"] label, [data-bs-theme="dark"] small { color: #374151 !important; }
[data-bs-theme="dark"] .text-muted { color: #6c757d !important; }
[data-bs-theme="dark"] .text-dark { color: #0f172a !important; }
[data-bs-theme="dark"] .text-body { color: #374151 !important; }

/* Tables */
[data-bs-theme="dark"] .table {
    color: #374151 !important;
    background: #ffffff !important;
    --bs-table-bg: #ffffff !important;
    --bs-table-striped-bg: #f9fafb !important;
    --bs-table-hover-bg: #f5f7fa !important;
    --bs-table-border-color: #f0f2f5 !important;
    --bs-table-color: #374151 !important;
}
[data-bs-theme="dark"] .table thead th {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
}
[data-bs-theme="dark"] .table tbody tr { background: #ffffff !important; }
[data-bs-theme="dark"] .table tbody td {
    border-color: #f3f4f6 !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .table-active {
    background: #f8f9fa !important;
    --bs-table-active-bg: #f8f9fa !important;
}
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #f9fafb !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: #f5f7fa !important;
}

/* Formulaires */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #94a3b8 !important; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: #ffffff !important;
    border-color: #cc3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.1) !important;
}
[data-bs-theme="dark"] .form-label { color: #374151 !important; }
[data-bs-theme="dark"] .input-group-text {
    background: #f8f9fa !important;
    border-color: #e2e8f0 !important;
    color: #6c757d !important;
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
    background: #ffffff !important;
    border-color: #eef0f2 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.1) !important;
}
[data-bs-theme="dark"] .dropdown-item { color: #374151 !important; }
[data-bs-theme="dark"] .dropdown-item:hover {
    background: rgba(204,56,38,.07) !important;
    color: #cc3826 !important;
}
[data-bs-theme="dark"] .dropdown-divider { border-color: #f0f2f5 !important; }
[data-bs-theme="dark"] .dropdown-header { color: #94a3b8 !important; }

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background: #ffffff !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .modal-header {
    background: #ffffff !important;
    border-bottom-color: #f0f2f5 !important;
}
[data-bs-theme="dark"] .modal-title { color: #0f172a !important; }
[data-bs-theme="dark"] .modal-footer {
    background: #fafafa !important;
    border-top-color: #f0f2f5 !important;
}
[data-bs-theme="dark"] .modal-body { color: #374151 !important; }

/* Offcanvas */
[data-bs-theme="dark"] .offcanvas {
    background: #ffffff !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .offcanvas-header {
    background: #ffffff !important;
    border-bottom-color: #f0f2f5 !important;
}
[data-bs-theme="dark"] .offcanvas-title { color: #0f172a !important; }

/* List groups */
[data-bs-theme="dark"] .list-group-item {
    background: #ffffff !important;
    border-color: #f0f2f5 !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .list-group-item:hover { background: #f8f9fa !important; }
[data-bs-theme="dark"] .list-group-item.active {
    background: rgba(204,56,38,.1) !important;
    border-color: rgba(204,56,38,.2) !important;
    color: #cc3826 !important;
}

/* Nav tabs & pills */
[data-bs-theme="dark"] .nav-tabs { border-bottom-color: #e9ecef !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link { color: #6c757d !important; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: #ffffff !important;
    border-color: #e9ecef #e9ecef #ffffff !important;
    color: #cc3826 !important;
}
[data-bs-theme="dark"] .nav-pills .nav-link { color: #6c757d !important; }
[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
}

/* Alerts */
[data-bs-theme="dark"] .alert-success { background: #ecfdf5 !important; color: #065f46 !important; }
[data-bs-theme="dark"] .alert-danger  { background: #fff1f2 !important; color: #9f1239 !important; }
[data-bs-theme="dark"] .alert-warning { background: #fffbeb !important; color: #78350f !important; }
[data-bs-theme="dark"] .alert-info    { background: #eff6ff !important; color: #1e3a5f !important; }

/* Badges — couleurs vivantes conservées */
[data-bs-theme="dark"] .badge.bg-success { background: #10b981 !important; color: #fff !important; }
[data-bs-theme="dark"] .badge.bg-danger  { background: #cc3826 !important; color: #fff !important; }
[data-bs-theme="dark"] .badge.bg-warning { background: #f59e0b !important; color: #fff !important; }
[data-bs-theme="dark"] .badge.bg-info    { background: #3b82f6 !important; color: #fff !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background: #6c757d !important; color: #fff !important; }

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background: #ffffff !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}
[data-bs-theme="dark"] .page-item.active .page-link {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb-item a { color: #6c757d !important; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: #cc3826 !important; }
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8 !important; }

/* Page title */
[data-bs-theme="dark"] .page-title-box h4,
[data-bs-theme="dark"] .page-title-box .page-title { color: #0f172a !important; }

/* Borders & dividers */
[data-bs-theme="dark"] hr { border-color: #f1f5f9 !important; }
[data-bs-theme="dark"] .border { border-color: #e9ecef !important; }
[data-bs-theme="dark"] .border-top { border-top-color: #e9ecef !important; }
[data-bs-theme="dark"] .border-bottom { border-bottom-color: #e9ecef !important; }

/* Code */
[data-bs-theme="dark"] code { background: #f1f5f9 !important; color: #cc3826 !important; }

/* Scrollbar — discret */
[data-bs-theme="dark"] * { scrollbar-color: rgba(0,0,0,.12) transparent; }
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }

/* ApexCharts en light toujours */
[data-bs-theme="dark"] .apexcharts-canvas text { fill: #374151 !important; }
[data-bs-theme="dark"] .apexcharts-gridline { stroke: #f0f2f5 !important; }
[data-bs-theme="dark"] .apexcharts-tooltip {
    background: #ffffff !important;
    border-color: #e9ecef !important;
    color: #374151 !important;
}

/* Multiselect */
[data-bs-theme="dark"] .multiselect {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .multiselect-dropdown {
    background: #ffffff !important;
    border-color: #e9ecef !important;
}
[data-bs-theme="dark"] .multiselect-option { color: #374151 !important; }
[data-bs-theme="dark"] .multiselect-option.is-pointed {
    background: #fff5f4 !important;
    color: #cc3826 !important;
}

/* Flatpickr */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: #ffffff !important;
    border-color: #e9ecef !important;
}
[data-bs-theme="dark"] .flatpickr-day { color: #374151 !important; }
[data-bs-theme="dark"] .flatpickr-day:hover { background: #fff5f4 !important; }

/* SweetAlert2 */
[data-bs-theme="dark"] .swal2-popup {
    background: #ffffff !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .swal2-title { color: #0f172a !important; }
[data-bs-theme="dark"] .swal2-html-container { color: #6c757d !important; }

/* Stat boxes */
[data-bs-theme="dark"] .stat-box {
    background: #f8f9fa !important;
    border-color: #f0f2f5 !important;
}
[data-bs-theme="dark"] .stat-box .stat-value { color: #0f172a !important; }

/* Footer */
[data-bs-theme="dark"] .footer {
    background: #ffffff !important;
    border-top-color: #f0f2f5 !important;
    color: #6c757d !important;
}

/* ============================================================
   SECTION NAT — DASHBOARD EXACT MATCH
   Reproduit exactement le screenshot de référence :
   - Cartes KPI blanches, ombre légère, sans bordure colorée
   - Cartes graphiques sans border-top rouge
   - Sous-cartes revenus : fonds colorés pastel conservés
   - Avatar icônes : subtle teinté
   ============================================================ */

/* --- Annule border-top rouge sur TOUTES les cartes chart (Section MQ) --- */
.card:has(.apex-charts),
.card:has(apexchart),
[data-bs-theme="dark"] .card:has(.apex-charts),
[data-bs-theme="dark"] .card:has(apexchart) {
    border-top: none !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04) !important;
}

/* --- Toutes les cartes du dashboard : style screenshot exact --- */
.card {
    background: #ffffff !important;
    border: 1px solid #eef2f7 !important;
    border-top: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04) !important;
    border-radius: 14px !important;
}
.card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f4f6f9 !important;
}
.card-body { background: transparent !important; }

/* --- Cartes KPI : ombre douce comme screenshot --- */
.card.h-100.border-0.shadow-sm {
    border: 1px solid #eef2f7 !important;
    border-top: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.04) !important;
}

/* --- Icônes avatar-title : couleurs exactes du screenshot --- */
.avatar-title.bg-primary-subtle {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
}
.avatar-title.bg-success-subtle {
    background: rgba(16,185,129,.12) !important;
    color: #059669 !important;
}
.avatar-title.bg-warning-subtle {
    background: rgba(245,158,11,.12) !important;
    color: #d97706 !important;
}
.avatar-title.bg-info-subtle {
    background: rgba(59,130,246,.12) !important;
    color: #2563eb !important;
}
.avatar-title.bg-danger-subtle {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
}

/* --- Labels KPI uppercase --- */
.card-body .text-muted.fw-medium {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #9ca3af !important;
}

/* --- Chiffres KPI --- */
.card-body h3.fw-bold.ff-secondary {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
    font-variant-numeric: tabular-nums !important;
}

/* --- Liens "Tout voir →" --- */
.card-body .text-primary.fw-medium,
.card-body .text-success.fw-medium,
.card-body .text-warning.fw-medium,
.card-body .text-info.fw-medium {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity .15s !important;
}
.card-body .text-primary.fw-medium:hover,
.card-body .text-success.fw-medium:hover,
.card-body .text-warning.fw-medium:hover,
.card-body .text-info.fw-medium:hover { opacity: .75; }

/* --- Badge "Aujourd'hui" / "Today" --- */
.card .badge.bg-primary-subtle.text-primary {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    padding: .3rem .75rem !important;
}

/* --- Sous-cartes revenus : fonds pastel conservés via inline styles --- */
/* Ces divs ont des inline styles donc pas besoin de CSS spécifique */
/* Juste s'assurer que les overrides .card ne les affectent pas */
.card-body .row .col-6 > div[style*="background"],
.card-body .row .col-12 > div[style*="background"] {
    border-radius: 10px !important;
}

/* --- Total revenus du jour --- */
.card-header h4.fw-bold.text-primary.ff-secondary {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1e3a5f !important;
    letter-spacing: -.02em !important;
}

/* --- Légende donut chart --- */
.card-body .border-top {
    border-top-color: #f4f6f9 !important;
}
.card-body .border-top .text-muted { font-size: 0.82rem !important; }
.card-body .border-top .fw-bold.text-dark {
    font-size: 0.9rem !important;
    color: #0f172a !important;
}

/* --- Page background gris très clair --- */
body,
.page-content,
#main-content,
.main-content,
.content-page {
    background-color: #f8f9fa !important;
}

/* --- Topbar blanc propre --- */
#page-topbar,
.navbar-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eef2f7 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}

/* --- Textes topbar --- */
#page-topbar .nav-link,
.navbar-header .nav-link {
    color: #374151 !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
}
#page-topbar .nav-link:hover { color: #cc3826 !important; }

/* --- Dropdown menus topbar --- */
#page-topbar .dropdown-menu,
.navbar-header .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid #eef2f7 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04) !important;
    border-radius: 12px !important;
}
#page-topbar .dropdown-item,
.navbar-header .dropdown-item { color: #374151 !important; font-size: .875rem !important; }
#page-topbar .dropdown-item:hover,
.navbar-header .dropdown-item:hover {
    background: #fff5f4 !important;
    color: #cc3826 !important;
}

/* --- Badge notification topbar --- */
#page-topbar .badge {
    font-size: .65rem !important;
    font-weight: 700 !important;
}

/* --- Bouton flottant vert (dispatch/actions) --- */
.btn-floating-action,
.floating-action-btn {
    background: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: 0 6px 20px rgba(16,185,129,.35) !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
}

/* ============================================================
   SECTION NAU — FONT FIX: DM Sans partout (thème Velzon original)
   Remplace tous les overrides Inter par DM Sans.
   DM Sans est déjà chargé via style.css (bunny.net).
   ============================================================ */

/* Import DM Sans avec tous les graisses nécessaires */
@import url('https://fonts.bunny.net/css?family=dm-sans:300,400,500,600,700,800&display=swap');

/* Override ABSOLU — DM Sans sur tout le dashboard */
body,
html,
.card, .card-body, .card-header, .card-footer,
.table, .thead-light, th, td,
.form-control, .form-select,
.btn,
.modal-content, .modal-header, .modal-body, .modal-footer,
.offcanvas, .offcanvas-body, .offcanvas-header,
.dropdown-menu, .dropdown-item,
.nav, .nav-link, .navbar,
.sidebar, .vertical-menu, .app-menu,
#sidebar-menu ul li a,
.page-link,
.alert,
.badge,
.list-group-item,
.breadcrumb-item,
.multiselect,
.flatpickr-calendar,
.swal2-popup,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, label, small, strong, a,
input, select, textarea,
.ff-secondary,
.page-title,
.page-title-box,
.apexcharts-canvas text {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Fira Code uniquement pour les IDs et code monospace */
code, kbd, pre,
.font-monospace,
td:first-child.id-col,
.ticket-id,
.trip-id {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace !important;
}

/* Graisses exactes du screenshot */
body { font-weight: 400 !important; font-size: .875rem !important; line-height: 1.6 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: 700 !important; letter-spacing: -.015em !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder, .fw-800 { font-weight: 800 !important; }

/* KPI card numbers — DM Sans 800 */
.card-body h3.fw-bold.ff-secondary {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    letter-spacing: -.02em !important;
}

/* Revenus total */
.card-header h4.fw-bold.ff-secondary,
.card-header h4.fw-bold {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

/* Labels uppercase petits */
.text-muted.fw-medium[style*="uppercase"],
.text-muted.fw-medium[style*="0.72rem"],
.text-muted.fw-medium[style*="0.75rem"] {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}

/* Nav topbar horizontal */
#page-topbar .navbar-nav .nav-link,
#page-topbar .dropdown-toggle,
.navbar-header .nav-link {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
}

/* Sidebar menu items */
#sidebar-menu ul li a,
.side-nav-link-ref {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500 !important;
}

/* Titres section menu */
#sidebar-menu ul li.menu-title,
.menu-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

/* Boutons */
.btn {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

/* Badges */
.badge {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}

/* Tableaux */
.table thead th {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
    letter-spacing: .04em !important;
}
.table tbody td {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: .875rem !important;
}

/* Pagination */
.page-link {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
}

/* SweetAlert2 */
.swal2-title {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
}
.swal2-html-container {
    font-family: 'DM Sans', sans-serif !important;
}
.swal2-confirm, .swal2-cancel {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
}

/* ApexCharts textes */
.apexcharts-canvas text,
.apexcharts-legend-text {
    font-family: 'DM Sans', sans-serif !important;
}

/* ============================================================
   SECTION NAV — TABLES OPÉRATIONNELLES (Rides, Drivers, Users)
   Ongoing rides, rides request, approved drivers, users list
   ============================================================ */

/* Table container */
.table-responsive {
    border-radius: 12px;
    overflow: hidden;
}

/* Thead sticky + style */
.table.align-middle thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc !important;
}
.table.align-middle thead th {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #6c757d !important;
    border-bottom: 2px solid #eef2f7 !important;
    padding: .875rem 1rem !important;
    white-space: nowrap;
    background: #f8fafc !important;
}

/* Table rows */
.table.align-middle tbody td {
    padding: .875rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    font-size: .875rem !important;
    color: #374151 !important;
}
.table.align-middle tbody tr {
    transition: background .12s ease !important;
}
.table.align-middle tbody tr:hover td {
    background: #fafbfc !important;
}
.table.align-middle tbody tr:last-child td {
    border-bottom: none !important;
}

/* ID column monospace */
.table tbody td:first-child {
    font-family: 'Fira Code', monospace !important;
    font-size: .78rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}

/* Noms — bold */
.table tbody td:nth-child(3),
.table tbody td.driver-name,
.table tbody td.user-name {
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* Badges statut rides */
.badge.bg-success-subtle { background: rgba(16,185,129,.12) !important; color: #065f46 !important; }
.badge.bg-danger-subtle  { background: rgba(204,56,38,.1)   !important; color: #9f1239 !important; }
.badge.bg-warning-subtle { background: rgba(245,158,11,.12) !important; color: #92400e !important; }
.badge.bg-info-subtle    { background: rgba(59,130,246,.12) !important; color: #1e40af !important; }
.badge.bg-primary-subtle { background: rgba(204,56,38,.1)   !important; color: #cc3826 !important; }
.badge.bg-secondary-subtle { background: rgba(107,114,128,.1) !important; color: #374151 !important; }

/* Dropdown action (...) */
.dropdown-toggle.text-reset,
a.text-reset[data-bs-toggle="dropdown"] {
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background .15s;
    cursor: pointer;
}
.dropdown-toggle.text-reset:hover,
a.text-reset[data-bs-toggle="dropdown"]:hover {
    background: #f1f5f9 !important;
}
.mdi-dots-vertical { font-size: 1.25rem !important; color: #6c757d !important; }

/* ============================================================
   SECTION NAW — CARDS DOSSIER BORD (card header actions)
   ============================================================ */

/* Card avec table intégrée */
#tasksList .card-header,
.card[id$="List"] .card-header {
    padding: 1.25rem 1.5rem !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Show X entries select */
.card-header .form-select-sm {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
    font-size: .82rem !important;
    padding: .3rem .75rem !important;
    color: #374151 !important;
    cursor: pointer;
}
.card-header label.text-muted {
    font-size: .82rem !important;
    color: #9ca3af !important;
}

/* Boutons Filtres + Ajouter dans card header */
.card-header .btn-danger {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border: none !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .45rem 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.25) !important;
}
.card-header .btn-primary {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border: none !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .45rem 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(204,56,38,.25) !important;
}
.card-header .btn-danger:hover,
.card-header .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(204,56,38,.35) !important;
    transform: translateY(-1px);
}

/* Searchbar dans card header */
.card-header .search-box .form-control,
.card-header input[type="search"],
.card-header input[type="text"].search {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    font-size: .85rem !important;
    background: #f8fafc !important;
    padding: .45rem 1rem !important;
    min-width: 200px;
}
.card-header .search-box .form-control:focus,
.card-header input[type="search"]:focus {
    background: #fff !important;
    border-color: #cc3826 !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.1) !important;
}

/* ============================================================
   SECTION NAX — OFFCANVAS FILTRES (toutes les pages)
   ============================================================ */

.offcanvas-end {
    width: 320px !important;
    box-shadow: -8px 0 30px rgba(15,23,42,.1) !important;
}
.offcanvas-header.bg-light {
    background: #f8fafc !important;
    border-bottom: 1px solid #eef2f7 !important;
}
.offcanvas-header .offcanvas-title {
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.offcanvas-body .form-label.text-muted.text-uppercase.fw-semibold {
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    color: #9ca3af !important;
    margin-bottom: .5rem !important;
}
/* Boutons bas d'offcanvas */
.offcanvas footer .btn,
[footer-class*="border-top"] .btn {
    font-size: .85rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: .55rem 1.5rem !important;
}

/* ============================================================
   SECTION NAY — PAGE HEADER (toutes les pages)
   ============================================================ */

.page-title-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 0 .75rem !important;
}
.page-title-box .page-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.015em !important;
    margin-bottom: 0 !important;
}
.page-title-box .breadcrumb {
    margin-bottom: 0 !important;
    font-size: .78rem !important;
}
.page-title-box .breadcrumb-item + .breadcrumb-item::before {
    color: #d1d5db !important;
}
.page-title-box .breadcrumb-item a {
    color: #9ca3af !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.page-title-box .breadcrumb-item a:hover { color: #cc3826 !important; }
.page-title-box .breadcrumb-item.active {
    color: #cc3826 !important;
    font-weight: 600 !important;
}

/* ============================================================
   SECTION NAZ — PARAMÈTRES / SETTINGS PAGES
   Grouped settings cards, toggle rows, config forms
   ============================================================ */

/* Card settings avec sections */
.settings-card .card-header,
.card-header:has(+ .card-body .form-check) {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-left: 3px solid #cc3826 !important;
    padding-left: 1.25rem !important;
}

/* Ligne de setting (label + toggle) */
.form-check.form-switch {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .75rem 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin: 0 !important;
}
.form-check.form-switch:last-child { border-bottom: none !important; }
.form-check.form-switch .form-check-label {
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
}
.form-check.form-switch .form-check-input {
    margin-left: auto !important;
    float: none !important;
    flex-shrink: 0 !important;
}

/* Config number inputs */
.form-control[type="number"] {
    text-align: center !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* Submit button settings */
.card-footer .btn-primary,
.card-body .btn-primary[type="submit"] {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: .55rem 1.75rem !important;
    box-shadow: 0 3px 10px rgba(204,56,38,.3) !important;
}
.card-footer .btn-primary:hover,
.card-body .btn-primary[type="submit"]:hover {
    box-shadow: 0 5px 16px rgba(204,56,38,.4) !important;
    transform: translateY(-1px) !important;
}

/* ============================================================
   SECTION NBA — WALLET / FINANCE PAGES
   ============================================================ */

/* Wallet balance cards */
.wallet-balance-card,
.card:has(.wallet-amount),
.card:has(.balance-amount) {
    border-top: 3px solid #cc3826 !important;
}

/* Montants financiers */
.wallet-amount,
.balance-amount,
.earning-amount,
td.amount-col,
td[class*="amount"],
.ff-secondary.text-success,
.ff-secondary.text-warning,
.ff-secondary.text-danger,
.ff-secondary.text-info,
.ff-secondary.text-primary {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.02em !important;
}

/* Transaction type badges */
.badge.credit  { background: rgba(16,185,129,.12) !important; color: #065f46 !important; }
.badge.debit   { background: rgba(204,56,38,.1) !important; color: #9f1239 !important; }
.badge.pending { background: rgba(245,158,11,.12) !important; color: #92400e !important; }

/* Withdrawal request status */
.badge.approved  { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; }
.badge.declined  { background: #fee2e2 !important; color: #7f1d1d !important; border: 1px solid #fca5a5 !important; }
.badge.requested { background: #fef9c3 !important; color: #713f12 !important; border: 1px solid #fde68a !important; }

/* ============================================================
   SECTION NBB — NOTIFICATIONS / EMAILS PAGES
   ============================================================ */

/* Notification channel cards */
.notification-card,
.card:has(.notification-toggle),
.card:has(.channel-icon) {
    transition: border-color .2s, box-shadow .2s !important;
}
.notification-card:hover {
    border-color: rgba(204,56,38,.2) !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.08) !important;
}

/* Email template preview */
.email-preview-card {
    border: 1.5px solid #eef2f7 !important;
    border-radius: 14px !important;
    overflow: hidden;
}

/* ============================================================
   SECTION NBC — RAPPORTS / REPORTS PAGES
   ============================================================ */

/* Report filter form */
.report-filter-card .card-header {
    background: linear-gradient(135deg, rgba(204,56,38,.05) 0%, rgba(255,255,255,0) 100%) !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

/* Export buttons */
.btn-export,
.btn[class*="export"],
.btn:has(.ri-file-excel),
.btn:has(.ri-file-pdf),
.btn:has(.bx-export) {
    font-size: .8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: .4rem .9rem !important;
}

/* Stats summary row */
.report-stat,
.stats-row .stat-item {
    background: #f8fafc !important;
    border-radius: 10px !important;
    padding: .875rem 1rem !important;
    border: 1px solid #eef2f7 !important;
}
.report-stat .stat-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #9ca3af !important;
}
.report-stat .stat-value {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
}

/* ============================================================
   SECTION NBC — ZONES / MAP PAGES
   ============================================================ */

/* Carte map container */
.map-container,
#map,
.leaflet-container,
.gm-style {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
}

/* Zone list sidebar */
.zone-list-item {
    padding: .75rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background .12s !important;
}
.zone-list-item:hover { background: #fafbfc !important; }
.zone-list-item .zone-name {
    font-weight: 600 !important;
    font-size: .875rem !important;
    color: #0f172a !important;
}
.zone-list-item .zone-type {
    font-size: .72rem !important;
    color: #9ca3af !important;
}

/* Map overlay controls */
.map-controls,
.leaflet-control,
.leaflet-bar {
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
}

/* ============================================================
   SECTION NBD — SUPPORT / TICKETS
   ============================================================ */

/* Ticket list */
.ticket-row {
    padding: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background .12s !important;
}
.ticket-row:hover { background: #fafbfc !important; }
.ticket-row .ticket-subject {
    font-weight: 600 !important;
    color: #0f172a !important;
    font-size: .9rem !important;
}
.ticket-row .ticket-meta {
    font-size: .78rem !important;
    color: #9ca3af !important;
}

/* Priority badges */
.badge.priority-high   { background: #fee2e2 !important; color: #7f1d1d !important; }
.badge.priority-medium { background: #fef9c3 !important; color: #713f12 !important; }
.badge.priority-low    { background: #dcfce7 !important; color: #166534 !important; }

/* Ticket detail view */
.ticket-message-bubble {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
    border: 1px solid #eef2f7 !important;
    margin-bottom: .75rem !important;
}
.ticket-message-bubble.admin {
    background: rgba(204,56,38,.06) !important;
    border-color: rgba(204,56,38,.15) !important;
}

/* ============================================================
   SECTION NBE — PROMO CODES / SUBSCRIPTIONS
   ============================================================ */

/* Promo code row */
.promo-code-badge {
    font-family: 'Fira Code', monospace !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    letter-spacing: .05em !important;
    background: rgba(204,56,38,.08) !important;
    color: #cc3826 !important;
    padding: .25rem .6rem !important;
    border-radius: 6px !important;
    border: 1px dashed rgba(204,56,38,.3) !important;
}

/* Discount type badge */
.badge.discount-flat       { background: #eff6ff !important; color: #1e40af !important; }
.badge.discount-percentage { background: #f5f0ff !important; color: #5b21b6 !important; }

/* ============================================================
   SECTION NBF — VEHICLES & CATEGORIES
   ============================================================ */

/* Vehicle type row */
.vehicle-type-img {
    width: 60px !important;
    height: 40px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    padding: 4px !important;
    border: 1px solid #eef2f7 !important;
}

/* Category pills */
.category-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: #f8fafc !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 20px !important;
    padding: .2rem .65rem !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* ============================================================
   SECTION NBG — GLOBAL POLISH FINAL
   Éléments restants pour cohérence totale
   ============================================================ */

/* Toutes les images dans les cards : border-radius */
.card img:not(.avatar):not([class*="logo"]):not([class*="icon"]) {
    border-radius: 10px !important;
}

/* Hover sur les lignes de table — subtil */
.table-hover > tbody > tr:hover > * {
    background: rgba(204,56,38,.025) !important;
}

/* Border dashed cards */
.border.border-dashed {
    border-color: #e9ecef !important;
    border-style: dashed !important;
}

/* Card sans body padding (tables intégrées) */
.card-body.p-0 { padding: 0 !important; }

/* Spacing cohérent */
.g-3 { --bs-gutter-x: 1rem !important; --bs-gutter-y: 1rem !important; }
.g-2 { --bs-gutter-x: .75rem !important; --bs-gutter-y: .75rem !important; }

/* Focus visible global */
:focus-visible {
    outline: 2px solid rgba(204,56,38,.5) !important;
    outline-offset: 2px !important;
}
*:focus:not(:focus-visible) { outline: none !important; }

/* Sélection de texte */
::selection {
    background: rgba(204,56,38,.15) !important;
    color: #0f172a !important;
}

/* Scrollbar globale — fin et discrète */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(204,56,38,.2) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(204,56,38,.2);
    border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(204,56,38,.4); }

/* Reduced motion — safety net final */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   SECTION NBH — PROFIL CHAUFFEUR / UTILISATEUR (edit pages)
   ============================================================ */

/* Carte profil principal */
.profile-wrapper .card,
.card:has(.profile-photo),
.card:has(.driver-avatar) {
    border: 1px solid #eef2f7 !important;
    overflow: hidden !important;
}

/* Zone avatar en haut */
.profile-avatar-wrap {
    position: relative;
    display: inline-block;
}
.profile-avatar-wrap img,
.card-body img.avatar-xl,
.card-body img.rounded-circle {
    border: 3px solid #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}

/* Infos profil */
.profile-name {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.profile-role {
    font-size: .8rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}

/* Tabs navigation (nav-tabs-custom) */
.nav-tabs-custom {
    border-bottom: 2px solid #f3f4f6 !important;
    gap: .25rem !important;
}
.nav-tabs-custom .nav-link {
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: .65rem 1.1rem !important;
    margin-bottom: -2px !important;
    transition: color .15s, border-color .15s !important;
}
.nav-tabs-custom .nav-link:hover { color: #cc3826 !important; }
.nav-tabs-custom .nav-link.active {
    color: #cc3826 !important;
    border-bottom-color: #cc3826 !important;
    background: transparent !important;
}

/* Section form dans le profil */
.profile-form-section {
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 1.25rem !important;
    margin-top: 1.25rem !important;
}
.profile-form-section h6 {
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #9ca3af !important;
    margin-bottom: 1rem !important;
}

/* Documents verification grid */
.document-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
}
.document-item {
    border-radius: 12px !important;
    border: 1.5px solid #eef2f7 !important;
    overflow: hidden !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.document-item:hover {
    border-color: rgba(204,56,38,.25) !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.08) !important;
}
.document-item img {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
}
.document-item .doc-label {
    padding: .5rem .75rem !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    background: #f8fafc !important;
    border-top: 1px solid #eef2f7 !important;
}

/* ============================================================
   SECTION NBI — INCENTIVE / LEVEL UP PAGES
   ============================================================ */

/* Cards incentive avec bordure dashed */
.card.border.border-dashed.border-primary {
    border-color: rgba(204,56,38,.3) !important;
    border-style: dashed !important;
    border-width: 1.5px !important;
    border-radius: 14px !important;
    background: rgba(204,56,38,.02) !important;
}
.card.border.border-dashed.border-primary .card-body {
    text-align: center !important;
}

/* Badge de zone/vehicle type dans incentive */
.badge.bg-secondary-subtle.fs-18 {
    font-size: .75rem !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    padding: .4rem .75rem !important;
}

/* Progress bar incentive */
.incentive-progress {
    height: 8px !important;
    border-radius: 99px !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}
.incentive-progress .progress-bar {
    background: linear-gradient(90deg, #cc3826, #f87171) !important;
    border-radius: 99px !important;
}

/* Alert info dans incentive */
.alert.bg-warning.border-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #78350f !important;
    border-radius: 12px !important;
    font-size: .875rem !important;
    border: 1px solid #fde68a !important;
}

/* ============================================================
   SECTION NBJ — PRICING / SET PRICES
   ============================================================ */

/* Ligne de prix dans tableau */
.price-row td {
    padding: .75rem 1rem !important;
}
.price-row .price-value {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
}
.price-row .price-currency {
    font-size: .75rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}

/* Input pricing inline */
.price-input-group {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}
.price-input-group .form-control {
    text-align: right !important;
    font-weight: 600 !important;
    max-width: 120px !important;
}

/* ============================================================
   SECTION NBK — ROLES & PERMISSIONS
   ============================================================ */

/* Grid permissions */
.permission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: .75rem !important;
}
.permission-item {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .6rem .875rem !important;
    border-radius: 10px !important;
    border: 1px solid #f3f4f6 !important;
    background: #fafbfc !important;
    transition: background .12s, border-color .12s !important;
}
.permission-item:hover {
    background: #fff5f4 !important;
    border-color: rgba(204,56,38,.2) !important;
}
.permission-item .form-check-input:checked + .form-check-label {
    color: #cc3826 !important;
    font-weight: 600 !important;
}
.permission-item .form-check-label {
    font-size: .82rem !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
}

/* Role card */
.role-card {
    border-radius: 14px !important;
    border: 1.5px solid #eef2f7 !important;
    transition: border-color .2s, box-shadow .2s !important;
    cursor: pointer !important;
}
.role-card:hover,
.role-card.selected {
    border-color: #cc3826 !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.1) !important;
}
.role-card .role-name {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.role-card .role-count {
    font-size: .75rem !important;
    color: #9ca3af !important;
}

/* ============================================================
   SECTION NBL — INSTALLATION / ONBOARDING PAGES
   ============================================================ */

/* Steps installation */
.installation-step {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
    border: 1px solid #eef2f7 !important;
    margin-bottom: .75rem !important;
    transition: border-color .2s !important;
}
.installation-step.completed {
    border-color: rgba(16,185,129,.3) !important;
    background: rgba(16,185,129,.03) !important;
}
.installation-step.active {
    border-color: rgba(204,56,38,.3) !important;
    background: rgba(204,56,38,.03) !important;
}
.step-number {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: .85rem !important;
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
    color: #6c757d !important;
}
.installation-step.completed .step-number {
    background: rgba(16,185,129,.15) !important;
    color: #059669 !important;
}
.installation-step.active .step-number {
    background: rgba(204,56,38,.15) !important;
    color: #cc3826 !important;
}
.step-title {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.step-desc {
    font-size: .8rem !important;
    color: #9ca3af !important;
    margin-top: .2rem !important;
}

/* ============================================================
   SECTION NBM — BANNER / MEDIA UPLOAD
   ============================================================ */

/* Zone d'upload */
.upload-zone,
.image-upload-area,
[class*="upload-area"] {
    border: 2px dashed #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 2rem !important;
    text-align: center !important;
    background: #fafbfc !important;
    transition: border-color .2s, background .2s !important;
    cursor: pointer !important;
}
.upload-zone:hover,
.image-upload-area:hover {
    border-color: rgba(204,56,38,.4) !important;
    background: rgba(204,56,38,.02) !important;
}
.upload-zone i,
.image-upload-area i {
    font-size: 2rem !important;
    color: #d1d5db !important;
    margin-bottom: .5rem !important;
}
.upload-zone p,
.image-upload-area p {
    font-size: .82rem !important;
    color: #9ca3af !important;
    margin: 0 !important;
}

/* Preview image */
.upload-preview {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid #eef2f7 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}
.upload-preview img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
}

/* ============================================================
   SECTION NBN — LANGUAGE / TRANSLATION PAGE
   ============================================================ */

/* Table traductions */
.translation-table td:first-child {
    font-family: 'Fira Code', monospace !important;
    font-size: .8rem !important;
    color: #6c757d !important;
    max-width: 200px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.translation-table td input.form-control {
    font-size: .85rem !important;
    border-radius: 8px !important;
    min-height: 36px !important;
}

/* Language flag + name */
.lang-item {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}
.lang-item .lang-flag {
    width: 24px !important;
    height: 16px !important;
    border-radius: 3px !important;
    object-fit: cover !important;
}
.lang-item .lang-name {
    font-weight: 600 !important;
    font-size: .875rem !important;
}
.lang-item .lang-code {
    font-family: 'Fira Code', monospace !important;
    font-size: .72rem !important;
    color: #9ca3af !important;
}

/* ============================================================
   SECTION NBO — TOASTS & ALERTS GLOBAUX
   ============================================================ */

/* Custom alert (ongoing rides, etc.) */
.custom-alert {
    border-radius: 12px !important;
    border: none !important;
    padding: .875rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 1090 !important;
    min-width: 320px !important;
    max-width: 480px !important;
}
.custom-alert.alert-success {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-left: 4px solid #10b981 !important;
}
.custom-alert.alert-danger {
    background: #fff1f2 !important;
    color: #9f1239 !important;
    border-left: 4px solid #cc3826 !important;
}
.custom-alert .alert-content {
    flex: 1 !important;
    font-size: .875rem !important;
}
.custom-alert .btn-close-success,
.custom-alert .btn-close-danger {
    background: transparent !important;
    border: none !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    opacity: .5 !important;
    color: inherit !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.custom-alert .btn-close-success:hover,
.custom-alert .btn-close-danger:hover { opacity: 1 !important; }

/* Alert inline (dans card) */
.alert.alert-border-left {
    border-radius: 10px !important;
    border-left-width: 4px !important;
    font-size: .875rem !important;
}

/* ============================================================
   SECTION NBP — RESPONSIVE MOBILE (≤768px)
   ============================================================ */

@media (max-width: 768px) {
    /* Cards padding réduit */
    .card-body { padding: 1rem !important; }
    .card-header { padding: .875rem 1rem !important; }

    /* KPI cards — 2 colonnes sur mobile */
    .g-3 > [class*="col-xl-2"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Tables — scroll horizontal */
    .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Custom alert — pleine largeur */
    .custom-alert {
        left: 1rem !important;
        right: 1rem !important;
        min-width: auto !important;
    }

    /* Page title — plus petit */
    .page-title-box .page-title { font-size: .95rem !important; }

    /* Boutons header — icône seul */
    .card-header .btn span { display: none !important; }
    .card-header .btn i { margin: 0 !important; }

    /* Offcanvas pleine largeur */
    .offcanvas-end { width: 100% !important; }
}

@media (max-width: 576px) {
    /* KPI cards — 1 colonne sur petit mobile */
    .g-3 > [class*="col-xl-2"],
    .g-3 > [class*="col-sm-6"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Revenue sub-cards — 1 colonne */
    .card-body .row.g-2 > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   SECTION NCA — DRIVER LIST / USER LIST PAGES
   ============================================================ */

/* Avatar + name dans liste */
.driver-list-avatar,
.user-list-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
    flex-shrink: 0 !important;
}

/* Cellule nom + email empilés */
.driver-name-cell,
.user-name-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: .1rem !important;
}
.driver-name-cell .name,
.user-name-cell .name {
    font-weight: 600 !important;
    font-size: .875rem !important;
    color: #0f172a !important;
}
.driver-name-cell .email,
.user-name-cell .email {
    font-size: .76rem !important;
    color: #9ca3af !important;
}

/* Badge statut (online/offline/blocked) */
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .3rem !important;
    padding: .25rem .65rem !important;
    border-radius: 99px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
}
.status-badge.online  { background: #ecfdf5 !important; color: #065f46 !important; }
.status-badge.offline { background: #f1f5f9 !important; color: #475569 !important; }
.status-badge.blocked { background: #fff1f2 !important; color: #9f1239 !important; }
.status-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
}

/* Rating stars inline */
.rating-stars {
    display: inline-flex !important;
    align-items: center !important;
    gap: .15rem !important;
    font-size: .75rem !important;
    color: #f59e0b !important;
    font-weight: 600 !important;
}

/* ============================================================
   SECTION NCB — RIDE / TRIP HISTORY TABLE
   ============================================================ */

/* Trip ID avec icône */
.trip-id {
    font-family: 'Fira Code', monospace !important;
    font-size: .78rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

/* Route affichage (origine → dest) */
.trip-route {
    display: flex !important;
    flex-direction: column !important;
    gap: .2rem !important;
    font-size: .8rem !important;
}
.trip-route .origin {
    color: #374151 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
}
.trip-route .destination {
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
}
.trip-route .origin::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #cc3826 !important;
    flex-shrink: 0 !important;
}
.trip-route .destination::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    flex-shrink: 0 !important;
}

/* Badge statut trip */
.trip-status {
    padding: .25rem .65rem !important;
    border-radius: 99px !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.trip-status.completed  { background: #ecfdf5 !important; color: #065f46 !important; }
.trip-status.cancelled  { background: #fff1f2 !important; color: #9f1239 !important; }
.trip-status.ongoing    { background: #eff6ff !important; color: #1e40af !important; }
.trip-status.scheduled  { background: #fffbeb !important; color: #78350f !important; }

/* Montant course */
.trip-amount {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-variant-numeric: tabular-nums !important;
    font-size: .875rem !important;
}
.trip-amount .currency {
    font-size: .72rem !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    margin-left: .1rem !important;
}

/* ============================================================
   SECTION NCC — VEHICLE / CATEGORY MANAGEMENT
   ============================================================ */

/* Carte véhicule */
.vehicle-card {
    border-radius: 14px !important;
    border: 1.5px solid #eef2f7 !important;
    overflow: hidden !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.vehicle-card:hover {
    border-color: rgba(204,56,38,.25) !important;
    box-shadow: 0 4px 20px rgba(204,56,38,.08) !important;
}
.vehicle-card .vehicle-img {
    width: 100% !important;
    height: 160px !important;
    object-fit: contain !important;
    padding: 1rem !important;
    background: #f8fafc !important;
}
.vehicle-card .vehicle-info {
    padding: .875rem 1rem !important;
    border-top: 1px solid #eef2f7 !important;
}
.vehicle-card .vehicle-name {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: .25rem !important;
}
.vehicle-card .vehicle-meta {
    font-size: .76rem !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}

/* Category badge */
.category-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: .3rem .75rem !important;
    border-radius: 8px !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.category-badge img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

/* ============================================================
   SECTION NCD — MAP / GODSVIEW / LIVE TRACKING PAGE
   ============================================================ */

/* Conteneur carte pleine hauteur */
.map-wrapper {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1.5px solid #eef2f7 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
}

/* Panel info ride sur la carte */
.map-info-panel {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
    min-width: 240px !important;
    border: 1px solid #eef2f7 !important;
}
.map-info-panel .panel-title {
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #9ca3af !important;
    margin-bottom: .75rem !important;
}

/* Stats live drivers */
.live-stat {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .35rem 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: .82rem !important;
}
.live-stat:last-child { border-bottom: none !important; }
.live-stat .stat-label { color: #6c757d !important; }
.live-stat .stat-value { font-weight: 700 !important; color: #0f172a !important; }
.live-stat .stat-value.green  { color: #059669 !important; }
.live-stat .stat-value.red    { color: #cc3826 !important; }
.live-stat .stat-value.orange { color: #d97706 !important; }

/* ============================================================
   SECTION NCE — DISPATCH / CREATE RIDE PAGE
   ============================================================ */

/* Steps wizard */
.dispatch-wizard {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 2rem !important;
}
.dispatch-step {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
}
.dispatch-step:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    width: 100% !important;
    height: 2px !important;
    background: #eef2f7 !important;
}
.dispatch-step.completed::after { background: #cc3826 !important; }
.dispatch-step-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #6c757d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    z-index: 1 !important;
    border: 2px solid #eef2f7 !important;
    position: relative !important;
}
.dispatch-step.active .dispatch-step-icon {
    background: #cc3826 !important;
    color: #fff !important;
    border-color: #cc3826 !important;
    box-shadow: 0 4px 12px rgba(204,56,38,.3) !important;
}
.dispatch-step.completed .dispatch-step-icon {
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    border-color: rgba(204,56,38,.3) !important;
}
.dispatch-step-label {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    margin-top: .4rem !important;
    text-align: center !important;
}
.dispatch-step.active .dispatch-step-label { color: #cc3826 !important; }
.dispatch-step.completed .dispatch-step-label { color: #374151 !important; }

/* Autocomplete locations */
.location-input-wrap {
    position: relative !important;
}
.location-input-wrap .location-icon {
    position: absolute !important;
    left: .875rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    font-size: 1rem !important;
}
.location-input-wrap .form-control {
    padding-left: 2.5rem !important;
}

/* Card sélection véhicule dans dispatch */
.vehicle-select-card {
    border-radius: 12px !important;
    border: 2px solid #eef2f7 !important;
    padding: .875rem !important;
    cursor: pointer !important;
    transition: border-color .15s, box-shadow .15s !important;
    display: flex !important;
    align-items: center !important;
    gap: .875rem !important;
}
.vehicle-select-card:hover {
    border-color: rgba(204,56,38,.3) !important;
}
.vehicle-select-card.selected {
    border-color: #cc3826 !important;
    background: rgba(204,56,38,.03) !important;
    box-shadow: 0 4px 16px rgba(204,56,38,.1) !important;
}
.vehicle-select-card img {
    width: 64px !important;
    height: 40px !important;
    object-fit: contain !important;
}
.vehicle-select-card .v-name {
    font-weight: 700 !important;
    font-size: .875rem !important;
    color: #0f172a !important;
}
.vehicle-select-card .v-eta {
    font-size: .76rem !important;
    color: #9ca3af !important;
}
.vehicle-select-card .v-price {
    margin-left: auto !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: #cc3826 !important;
    white-space: nowrap !important;
}

/* ============================================================
   SECTION NCF — WALLET / TRANSACTIONS PAGE
   ============================================================ */

/* Balance hero */
.wallet-balance-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
}
.wallet-balance-card::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    background: rgba(204,56,38,.15) !important;
}
.wallet-balance-card .balance-label {
    font-size: .78rem !important;
    opacity: .65 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    margin-bottom: .5rem !important;
}
.wallet-balance-card .balance-amount {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
}
.wallet-balance-card .balance-currency {
    font-size: 1rem !important;
    opacity: .7 !important;
    font-weight: 500 !important;
    margin-left: .25rem !important;
}

/* Transaction list */
.transaction-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: .875rem 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.transaction-item:last-child { border-bottom: none !important; }
.transaction-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.transaction-icon.credit { background: #ecfdf5 !important; color: #059669 !important; }
.transaction-icon.debit  { background: #fff1f2 !important; color: #cc3826 !important; }
.transaction-info { flex: 1 !important; }
.transaction-info .t-title {
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}
.transaction-info .t-date {
    font-size: .75rem !important;
    color: #9ca3af !important;
    margin-top: .1rem !important;
}
.transaction-amount {
    font-weight: 700 !important;
    font-size: .95rem !important;
    white-space: nowrap !important;
}
.transaction-amount.credit { color: #059669 !important; }
.transaction-amount.debit  { color: #cc3826 !important; }

/* ============================================================
   SECTION NCG — SUPPORT / CHAT / TICKETS DETAIL
   ============================================================ */

/* Chat bubble */
.chat-bubble {
    max-width: 75% !important;
    padding: .75rem 1rem !important;
    border-radius: 16px !important;
    font-size: .875rem !important;
    line-height: 1.6 !important;
    position: relative !important;
}
.chat-bubble.outgoing {
    background: #cc3826 !important;
    color: #fff !important;
    margin-left: auto !important;
    border-bottom-right-radius: 4px !important;
}
.chat-bubble.incoming {
    background: #f1f5f9 !important;
    color: #374151 !important;
    margin-right: auto !important;
    border-bottom-left-radius: 4px !important;
}
.chat-timestamp {
    font-size: .68rem !important;
    color: #9ca3af !important;
    margin-top: .25rem !important;
    display: block !important;
}
.chat-timestamp.outgoing { text-align: right !important; }

/* Status ticket */
.ticket-status {
    padding: .3rem .75rem !important;
    border-radius: 99px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
}
.ticket-status.open     { background: #eff6ff !important; color: #1e40af !important; }
.ticket-status.pending  { background: #fffbeb !important; color: #78350f !important; }
.ticket-status.closed   { background: #f1f5f9 !important; color: #475569 !important; }
.ticket-status.resolved { background: #ecfdf5 !important; color: #065f46 !important; }

/* ============================================================
   SECTION NCH — SETTINGS / CONFIGURATION PAGES (global)
   ============================================================ */

/* Card setting section avec titre */
.setting-section-card {
    border-radius: 16px !important;
    border: 1px solid #eef2f7 !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
}
.setting-section-card .section-header {
    padding: 1rem 1.5rem !important;
    background: #fafbfc !important;
    border-bottom: 1px solid #eef2f7 !important;
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
}
.setting-section-card .section-header .section-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: rgba(204,56,38,.1) !important;
    color: #cc3826 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.setting-section-card .section-header .section-title {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
.setting-section-card .section-header .section-desc {
    font-size: .76rem !important;
    color: #9ca3af !important;
    margin: 0 !important;
}
.setting-section-card .section-body {
    padding: 1.25rem 1.5rem !important;
}

/* Toggle switch styled */
.setting-toggle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .75rem 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.setting-toggle-row:last-child { border-bottom: none !important; }
.setting-toggle-row .toggle-info .toggle-label {
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: .1rem !important;
}
.setting-toggle-row .toggle-info .toggle-desc {
    font-size: .76rem !important;
    color: #9ca3af !important;
}

/* ============================================================
   SECTION NCI — GLOBAL EMPTY STATES
   ============================================================ */

/* Empty state (aucun résultat, liste vide) */
.empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4rem 2rem !important;
    text-align: center !important;
}
.empty-state .empty-icon {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.75rem !important;
    color: #d1d5db !important;
    margin-bottom: 1.25rem !important;
}
.empty-state .empty-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin-bottom: .5rem !important;
}
.empty-state .empty-desc {
    font-size: .82rem !important;
    color: #9ca3af !important;
    max-width: 320px !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================================
   SECTION NCJ — SEARCH BAR GLOBAL + FILTER CHIPS
   ============================================================ */

/* Barre de recherche dans card-header */
.search-input-wrap {
    position: relative !important;
    max-width: 280px !important;
}
.search-input-wrap .search-icon {
    position: absolute !important;
    left: .875rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9ca3af !important;
    pointer-events: none !important;
    font-size: .95rem !important;
}
.search-input-wrap .form-control {
    padding-left: 2.4rem !important;
    border-radius: 10px !important;
    border-color: #e9ecef !important;
    font-size: .82rem !important;
    min-height: 36px !important;
    background: #f8fafc !important;
}
.search-input-wrap .form-control:focus {
    border-color: rgba(204,56,38,.4) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.08) !important;
    background: #fff !important;
}

/* Filter chips */
.filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    padding: .3rem .75rem !important;
    border-radius: 99px !important;
    border: 1.5px solid #e9ecef !important;
    background: #fff !important;
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    cursor: pointer !important;
    transition: border-color .15s, background .15s, color .15s !important;
}
.filter-chip:hover,
.filter-chip.active {
    border-color: #cc3826 !important;
    background: rgba(204,56,38,.06) !important;
    color: #cc3826 !important;
}
.filter-chip .chip-close {
    font-size: .7rem !important;
    opacity: .6 !important;
    cursor: pointer !important;
}
.filter-chip .chip-close:hover { opacity: 1 !important; }

/* ============================================================
   SECTION NCK — FLOATING ACTION BUTTON (FAB)
   ============================================================ */

.fab-btn {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #cc3826 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(204,56,38,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    z-index: 1080 !important;
    transition: transform .15s, box-shadow .15s !important;
}
.fab-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 28px rgba(204,56,38,.4) !important;
}

/* ============================================================
   SECTION NCL — BREADCRUMB REFINED
   ============================================================ */

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: .25rem !important;
}
.breadcrumb-item {
    font-size: .8rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
}
.breadcrumb-item a {
    color: #9ca3af !important;
    text-decoration: none !important;
    transition: color .15s !important;
}
.breadcrumb-item a:hover { color: #cc3826 !important; }
.breadcrumb-item.active { color: #374151 !important; font-weight: 600 !important; }
.breadcrumb-item + .breadcrumb-item::before {
    color: #d1d5db !important;
    font-size: .7rem !important;
}

/* ============================================================
   SECTION NCM — SKELETON LOADING STATES
   ============================================================ */

@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f2f5 25%, #e8eaed 50%, #f0f2f5 75%) !important;
    background-size: 800px 100% !important;
    animation: skeleton-shimmer 1.6s infinite !important;
    border-radius: 8px !important;
}
.skeleton-text  { height: 14px !important; margin-bottom: .5rem !important; }
.skeleton-title { height: 20px !important; width: 60% !important; margin-bottom: .75rem !important; }
.skeleton-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.skeleton-card {
    border-radius: 14px !important;
    height: 120px !important;
    width: 100% !important;
}

/* ============================================================
   SECTION NCN — PRINT STYLES
   ============================================================ */

@media print {
    .sidebar-menu,
    #page-topbar,
    .footer,
    .btn-print,
    .fab-btn,
    .custom-alert { display: none !important; }

    .main-content { margin: 0 !important; padding: 1rem !important; }
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid !important;
    }
    .table { font-size: 11px !important; }
    .badge { border: 1px solid #ccc !important; }
}

/* ============================================================
   SECTION NCO — FINAL GLOBAL POLISH v2
   ============================================================ */

/* Liens dans cards — couleur cohérente */
.card a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: #cc3826 !important;
    text-decoration: none !important;
}
.card a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Select2 / tom-select styled */
.ts-wrapper .ts-control {
    border-color: #e9ecef !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    min-height: 42px !important;
    font-size: .875rem !important;
}
.ts-wrapper.focus .ts-control {
    border-color: rgba(204,56,38,.4) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.08) !important;
}
.ts-wrapper .ts-dropdown {
    border-radius: 12px !important;
    border-color: #e9ecef !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.1) !important;
    font-size: .875rem !important;
}
.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover {
    background: rgba(204,56,38,.08) !important;
    color: #cc3826 !important;
}

/* Tooltip styling */
.tooltip-inner {
    background: #0f172a !important;
    border-radius: 8px !important;
    font-size: .75rem !important;
    padding: .4rem .75rem !important;
    font-weight: 500 !important;
}
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #0f172a !important; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #0f172a !important; }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: #0f172a !important; }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: #0f172a !important; }

/* Popover styling */
.popover {
    border-radius: 14px !important;
    border-color: #eef2f7 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
    font-size: .875rem !important;
}
.popover-header {
    background: #fafbfc !important;
    border-bottom-color: #eef2f7 !important;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700 !important;
    font-size: .875rem !important;
    color: #0f172a !important;
}
.popover-body { color: #374151 !important; }

/* Scrollbar global slim */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover { background: #9ca3af !important; }

/* Selection color */
::selection { background: rgba(204,56,38,.15) !important; color: #cc3826 !important; }

/* ============================================================
   SECTION NAV — LOGIN PAGES (Enterprise & Hotel)
   Fallback gradient when loginbg / owner_loginbg is not uploaded.
   ============================================================ */

/* Enterprise login — fallback gradient if --loginbg not set */
body#bodyContainer {
    background-color: #1a1f2e !important;
    background-image:
        var(--loginbg,
            linear-gradient(135deg, #0f1117 0%, #1a1f2e 40%, #2d1f3d 70%, #cc3826 100%)
        ) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Overlay semi-transparent pour lisibilité du texte sur fond image */
body#bodyContainer .bg-overlay {
    background: linear-gradient(135deg, rgba(15,17,23,.85) 0%, rgba(15,17,23,.5) 100%) !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
}
body#bodyContainer .container-fluid {
    position: relative;
    z-index: 1;
}

/* Card login transparente sur fond sombre */
body#bodyContainer .card {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.4) !important;
    border-radius: 16px !important;
}
body#bodyContainer .card-body {
    background: transparent !important;
}

/* Inputs sur fond sombre */
body#bodyContainer #email-input,
body#bodyContainer #password-input {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    color: #fff !important;
    border-radius: 10px !important;
}
body#bodyContainer #email-input::placeholder,
body#bodyContainer #password-input::placeholder {
    color: rgba(255,255,255,.5) !important;
}
body#bodyContainer #email-input:focus,
body#bodyContainer #password-input:focus {
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(204,56,38,.6) !important;
    box-shadow: 0 0 0 3px rgba(204,56,38,.2) !important;
}

/* Label texte blanc */
body#bodyContainer label,
body#bodyContainer .form-label {
    color: rgba(255,255,255,.85) !important;
}

/* Checkbox visible sur fond sombre */
body#bodyContainer .form-check-label {
    color: rgba(255,255,255,.75) !important;
}

/* Bouton login Wappi brand */
body#bodyContainer .btn-primary {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    box-shadow: 0 4px 20px rgba(204,56,38,.4) !important;
}
body#bodyContainer .btn-success {
    background: linear-gradient(135deg, #cc3826, #a82e1e) !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(204,56,38,.4) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Metric deltas teal/red
   ────────────────────────────────────────────────────────────────────────── */
.ml-delta, .delta-up, .kpi-delta.positive { color: #00C896 !important; }
.ml-delta.down, .delta-down, .kpi-delta.negative { color: #EF4444 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Badges statut alignés avec le design system
   ────────────────────────────────────────────────────────────────────────── */

/* Completed / Accepted / Active → teal */
.text-bg-success,
.badge.bg-success { background-color: #00C896 !important; color: #fff !important; }

/* Cancelled → rouge Wappi */
.text-bg-danger,
.badge.bg-danger  { background-color: #EF4444 !important; color: #fff !important; }

/* Pending / Searching / Upcoming → orange */
.text-bg-warning,
.badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }

/* On Trip / Info → bleu */
.text-bg-info,
.badge.bg-info    { background-color: #3b82f6 !important; color: #fff !important; }

/* Subtle variants — garder léger */
.badge.bg-success-subtle { background-color: rgba(0,200,150,.12) !important; color: #00a87c !important; }
.badge.bg-danger-subtle  { background-color: rgba(239,68,68,.12)  !important; color: #dc2626 !important; }
.badge.bg-warning-subtle { background-color: rgba(245,158,11,.12) !important; color: #d97706 !important; }
.badge.bg-info-subtle    { background-color: rgba(59,130,246,.12) !important; color: #2563eb !important; }

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Page Header alignment
   ────────────────────────────────────────────────────────────────────────── */

/* Titre de page h4/h5 avec fw-bold */
.d-flex h4.fw-bold, .d-flex h5.fw-bold {
    font-family: 'Syne', system-ui, sans-serif !important;
    font-size: 1.25rem;
}

/* Breadcrumb labels → Geist Mono */
.breadcrumb { font-family: 'Geist Mono', monospace !important; font-size: 0.75rem !important; }

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Table alignment complet
   ────────────────────────────────────────────────────────────────────────── */

/* Toutes les th dans tableaux → Geist Mono */
.table th, .table thead th, .table-active th {
    font-family: 'Geist Mono', monospace !important;
    font-size: 0.70rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    font-weight: 500 !important;
}

/* Cellules de données → DM Sans propre */
.table td {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.84rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Sidebar item labels
   ────────────────────────────────────────────────────────────────────────── */
#sidebar-menu ul li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem;
}

/* Icône sidebar active → rouge Wappi */
#sidebar-menu ul li a.active i,
.side-nav-link-ref.active i {
    color: var(--vz-primary, #cc3826) !important;
}

/* Section labels sidebar */
.menu-title {
    font-family: 'Geist Mono', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Filtres et formulaires
   ────────────────────────────────────────────────────────────────────────── */
.form-label.text-muted.text-uppercase.fw-semibold {
    font-family: 'Geist Mono', monospace !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
}

.form-control, .form-select {
    font-family: 'DM Sans', sans-serif !important;
    border-radius: var(--radius-sm) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   WAPPI — Card header / footer consistency
   ────────────────────────────────────────────────────────────────────────── */
.card-header .card-title, .card-header h4, .card-header h5, .card-header h6 {
    font-family: 'Syne', system-ui, sans-serif !important;
    font-weight: 700 !important;
}