/* =============================================================================
   POWA TAXI — Modern admin UI
   Loaded AFTER css/style.css, so plain rules here win by source order.
   !important is used only where style.css already forces a value.

   Scope:
     1. Topbar widgets — menu search, language switcher, profile dropdown
     2. Dashboard — header, filter bar, KPI grid, cards, charts, tables
   ============================================================================= */

:root {
    --ui-ink:        #0f172a;
    --ui-ink-soft:   #475569;
    --ui-muted:      #94a3b8;
    --ui-line:       #e8eaf0;
    --ui-line-soft:  #f1f3f7;
    --ui-surface:    #ffffff;
    --ui-canvas:     #f6f7fb;

    --ui-radius:     16px;
    --ui-radius-sm:  11px;

    --ui-shadow-xs:  0 1px 2px rgba(16, 24, 40, .05);
    --ui-shadow-sm:  0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --ui-shadow-md:  0 8px 24px rgba(16, 24, 40, .07), 0 2px 6px rgba(16, 24, 40, .04);
    --ui-shadow-lg:  0 18px 44px rgba(16, 24, 40, .13), 0 4px 12px rgba(16, 24, 40, .06);

    --ui-ring:       0 0 0 3px rgba(var(--primary-rgb), .22);
}


/* =============================================================================
   1. TOPBAR
   ============================================================================= */

.topbar .top-navbar {
    min-height: 72px;
    padding-right: 22px;
    gap: 14px;
}

/* The three widgets sit at the right edge; search takes the free space. */
.topbar .navbar-collapse {
    display: flex;
    align-items: center;
    gap: 14px;
}


/* ── 1a. Menu search ──────────────────────────────────────────────────────── */

.sidebar-search.hdr-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    padding: 0 !important;
}

.sidebar-search.hdr-search input {
    width: 100% !important;
    height: 42px;
    background: var(--ui-canvas) !important;
    border: 1.5px solid var(--ui-line) !important;
    border-radius: 999px !important;
    color: var(--ui-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 38px 0 42px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.sidebar-search.hdr-search input::placeholder {
    color: var(--ui-muted) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.sidebar-search.hdr-search input:focus {
    background: var(--ui-surface) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--ui-ring) !important;
}

.hdr-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--ui-muted);
    pointer-events: none;
    transition: color .18s ease;
}

.sidebar-search.hdr-search:focus-within .hdr-search-icon { color: var(--primary); }

.hdr-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) scale(.7);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #e2e6ee;
    color: var(--ui-ink-soft);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, background .16s ease;
}

.hdr-search-clear.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.hdr-search-clear:hover { background: #cfd5e0; color: var(--ui-ink); }


/* ── 1b. Language switcher ──────────────────────────────────────────────────
   The real <select> is kept for its existing JS but hidden; the visible control
   is a button + styled list, since a native option list cannot be themed. */

.language-list.hdr-lang {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    margin-left: 0 !important;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
}

/* Present for the app's own JS, invisible to the user. */
.hdr-lang .hdr-lang-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hdr-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px 0 13px;
    background: var(--ui-canvas);
    border: 1.5px solid var(--ui-line);
    border-radius: 999px;
    color: var(--ui-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hdr-lang-trigger:hover {
    background: var(--ui-surface);
    border-color: rgba(var(--primary-rgb), .55);
}

.language-list.hdr-lang.is-open .hdr-lang-trigger {
    background: var(--ui-surface);
    border-color: var(--primary);
    box-shadow: var(--ui-ring);
}

.hdr-lang .hdr-lang-globe { display: flex; align-items: center; color: var(--primary); flex-shrink: 0; }

.hdr-lang-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.hdr-lang .hdr-lang-caret {
    display: flex;
    align-items: center;
    color: var(--ui-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}

.language-list.hdr-lang.is-open .hdr-lang-caret { transform: rotate(180deg); }

/* ── Menu ── */
.hdr-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 100%;
    width: max-content;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    box-shadow: var(--ui-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.language-list.hdr-lang.is-open .hdr-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hdr-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ui-ink-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.hdr-lang-item:hover { background: rgba(var(--primary-rgb), .1); color: var(--ui-ink); }

.hdr-lang-item.is-selected {
    background: rgba(var(--primary-rgb), .18);
    color: #7a5c00;
    font-weight: 700;
}

/* Tick on the active language. */
.hdr-lang-item.is-selected::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-left: auto;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

@media (max-width: 767px) {
    .hdr-lang-label { display: none; }
    .hdr-lang-trigger { padding: 0 10px; gap: 5px; }
}


/* ── 1c. Profile dropdown ─────────────────────────────────────────────────── */

.hdr-profile-nav { flex-shrink: 0; }

.topbar .top-navbar .navbar-nav > .nav-item.hdr-profile { background: transparent !important; }

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link.hdr-profile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px 0 5px !important;
    background: var(--ui-canvas);
    border: 1.5px solid var(--ui-line);
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link.hdr-profile-trigger:hover,
.topbar .top-navbar .navbar-nav > .nav-item.show > .nav-link.hdr-profile-trigger {
    background: var(--ui-surface);
    border-color: rgba(var(--primary-rgb), .55);
    box-shadow: var(--ui-shadow-xs);
}

.hdr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 2px;
}

.topbar .hdr-avatar .profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.hdr-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    min-width: 0;
}

.hdr-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-ink);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-profile-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--ui-muted);
    text-transform: capitalize;
}

.hdr-profile-caret {
    display: flex;
    align-items: center;
    color: var(--ui-muted);
    transition: transform .2s ease;
}

.topbar .top-navbar .navbar-nav > .nav-item.show .hdr-profile-caret { transform: rotate(180deg); }

/* Menu panel */
.topbar .dropdown-menu.hdr-profile-menu {
    min-width: 268px;
    margin-top: 10px;
    padding: 0;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg) !important;
    -webkit-box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

.topbar .hdr-profile-menu ul.dropdown-user { padding: 0; margin: 0; }

.topbar .hdr-profile-menu ul.dropdown-user li { padding: 0; }

.topbar .hdr-profile-menu ul.dropdown-user li.divider {
    height: 1px;
    background: var(--ui-line-soft);
    margin: 0;
}

.topbar .hdr-profile-menu .dw-user-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .10) 0%, rgba(var(--primary-rgb), .02) 100%);
}

.topbar .hdr-profile-menu .dw-user-box .u-img {
    width: 46px;
    height: 46px;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    flex-shrink: 0;
}

.topbar .hdr-profile-menu .dw-user-box .u-img img {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.topbar .hdr-profile-menu .dw-user-box .u-text { min-width: 0; }

.topbar .hdr-profile-menu .dw-user-box .u-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-ink);
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .hdr-profile-menu .dw-user-box .u-text p {
    font-size: 11.5px;
    color: var(--ui-muted) !important;
    margin: 0 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-role-chip {
    display: inline-block;
    padding: 2px 9px;
    background: rgba(var(--primary-rgb), .18);
    color: #7a5c00;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.topbar .hdr-profile-menu ul.dropdown-user li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ui-ink-soft);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.topbar .hdr-profile-menu ul.dropdown-user li a:hover {
    background: rgba(var(--primary-rgb), .09);
    color: var(--ui-ink);
    padding-left: 16px;
}

.hdr-menu-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ui-canvas);
    color: var(--ui-ink-soft);
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.topbar .hdr-profile-menu ul.dropdown-user li a:hover .hdr-menu-ico {
    background: rgba(var(--primary-rgb), .2);
    color: #7a5c00;
}

.topbar .hdr-profile-menu ul.dropdown-user li a.hdr-menu-danger { color: #dc2626; }
.topbar .hdr-profile-menu ul.dropdown-user li a.hdr-menu-danger:hover { background: #fef2f2; color: #b91c1c; }
.topbar .hdr-profile-menu ul.dropdown-user li a.hdr-menu-danger .hdr-menu-ico { background: #fef2f2; color: #dc2626; }
.topbar .hdr-profile-menu ul.dropdown-user li a.hdr-menu-danger:hover .hdr-menu-ico { background: #fee2e2; color: #b91c1c; }


/* ── 1d. Topbar responsive ────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .sidebar-search.hdr-search { max-width: 240px; }
    .hdr-profile-meta { display: none; }
}

@media (max-width: 767px) {
    .topbar .top-navbar { padding-right: 12px; gap: 8px; }
    .topbar .navbar-collapse { gap: 8px; }
    .sidebar-search.hdr-search { max-width: none; flex: 1 1 auto; }
    .sidebar-search.hdr-search input { padding-right: 34px !important; }
}

@media (max-width: 480px) {
    .hdr-lang-trigger { padding: 0 8px; gap: 4px; }
    .hdr-lang .hdr-lang-caret { display: none; }
    .topbar .top-navbar .navbar-nav > .nav-item > .nav-link.hdr-profile-trigger { padding: 0 6px 0 4px !important; }
    .hdr-profile-caret { display: none; }
}


/* =============================================================================
   1e. SIDEBAR SUB-MENUS
   -----------------------------------------------------------------------------
   The sidebar shell was switched to white (.left-sidebar background), but the
   sub-menu rules in style.css were still written for the old DARK sidebar:
   the container used rgba(0,0,0,.18) — the grey slab — and the links used
   rgba(255,255,255,.42), i.e. white text on a white panel. Both are restated
   here for a light surface.
   ============================================================================= */

/* Container: no slab. An indent guide line ties children to their parent. */
.sidebar-nav ul li > ul {
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    margin: 2px 0 8px 27px !important;
    padding: 2px 0 2px 11px !important;
    border-left: 1.5px solid rgba(var(--primary-rgb), .34) !important;
}

/* Sub-menu links */
.sidebar-nav ul li ul li > a {
    padding: 7px 10px !important;
    font-size: 12.8px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    border-radius: 8px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    transition: color .18s ease, background .18s ease !important;
}

.sidebar-nav ul li ul li a::before {
    background: #cbd5e1 !important;
}

.sidebar-nav ul li ul li a:hover {
    color: var(--brand-ink) !important;
    background: rgba(var(--primary-rgb), .13) !important;
}

.sidebar-nav ul li ul li a:hover::before {
    background: var(--primary) !important;
}

.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li > a.active {
    color: #7a5c00 !important;
    background: rgba(var(--primary-rgb), .2) !important;
    font-weight: 700 !important;
}

.sidebar-nav ul li ul li.active > a::before,
.sidebar-nav ul li ul li > a.active::before {
    background: var(--primary) !important;
}

/* Expand caret — was rgba(255,255,255,.22), invisible on white. */
.sidebar-nav .has-arrow::after {
    border-color: rgba(12, 17, 28, .34) !important;
}

.sidebar-nav .has-arrow[aria-expanded="true"]::after,
.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after {
    border-color: var(--primary) !important;
}

/* Fly-out panel shown when the sidebar is collapsed (built by layouts/menu.blade.php).
   Re-skinned from the old dark card to match the light sidebar. */
#mini-hover-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-lg);
    padding: 6px;
}

#mini-hover-panel .mhp-label {
    color: var(--ui-ink);
    font-weight: 700;
}

#mini-hover-panel .mhp-label.has-sub {
    border-bottom: 1px solid var(--ui-line-soft);
}

#mini-hover-panel .mhp-link {
    color: var(--ui-ink-soft);
    font-weight: 500;
}

#mini-hover-panel .mhp-link:hover {
    background: rgba(var(--primary-rgb), .14);
    color: var(--ui-ink);
}


/* =============================================================================
   2. DASHBOARD
   ============================================================================= */

/* Soft brand-tinted wash instead of a flat grey field — gives the cards
   something to sit on without competing with them. */
.dash-page {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 8% -8%, rgba(var(--primary-rgb), .16) 0%, transparent 62%),
        radial-gradient(900px 460px at 100% 0%, rgba(99, 102, 241, .10) 0%, transparent 58%),
        linear-gradient(180deg, #f7f8fc 0%, var(--ui-canvas) 42%);
}

.dash-wrap {
    position: relative;
    padding: 26px 28px 48px;
    max-width: 1600px;
    margin: 0 auto;
}


/* ── 2a. Page header ──────────────────────────────────────────────────────── */

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 0 24px;
}

.dash-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ui-ink);
    margin: 0;
}

.dash-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: dash-wave 2.6s ease-in-out infinite;
}

@keyframes dash-wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    65%  { transform: rotate(16deg); }
    72%  { transform: rotate(-8deg); }
    80%  { transform: rotate(12deg); }
    88%  { transform: rotate(-4deg); }
}

.dash-header-sub {
    font-size: 13.5px;
    color: var(--ui-muted);
    margin: 6px 0 0;
}

.dash-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-ink-soft);
    box-shadow: 0 2px 10px rgba(16, 24, 40, .06);
    white-space: nowrap;
}

.dash-chip-live { color: #047857; }

.dash-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    animation: dash-pulse 1.9s infinite;
}

@keyframes dash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}


/* ── 2b. Filter bar ───────────────────────────────────────────────────────── */

.dash-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    padding: 14px 18px;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(16, 24, 40, .06);
}

.dash-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-ink-soft);
    margin: 0 4px 0 0;
    white-space: nowrap;
}

.dash-filter-label svg { color: var(--primary); }

/* Hidden until #viewFilter selects the matching mode (JS sets inline display). */
.dash-filter-group {
    display: none;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dash-filter-sep { color: var(--ui-muted); font-size: 13px; }

.dash-filter select,
.dash-filter input[type="date"] {
    height: 40px;
    min-width: 140px;
    max-width: 180px;
    border: 1.5px solid var(--ui-line);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-ink);
    background: #fff;
    padding: 0 12px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.dash-filter select:hover,
.dash-filter input[type="date"]:hover { border-color: #d6dae4; }

.dash-filter select:focus,
.dash-filter input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: var(--ui-ring);
}

.dash-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.dash-btn-apply {
    height: 40px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), .38);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.dash-btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .48);
    filter: brightness(1.04);
}

.dash-btn-apply:active { transform: translateY(0); }

.dash-btn-clear {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    background: #fff;
    color: var(--ui-ink-soft);
    border: 1.5px solid var(--ui-line);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.dash-btn-clear:hover {
    background: var(--ui-canvas);
    border-color: #d6dae4;
    color: var(--ui-ink);
    text-decoration: none;
}


/* ── 2c. KPI cards ────────────────────────────────────────────────────────── */

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.dash-stat {
    position: relative;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    padding: 20px 22px 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .12);
    overflow: hidden;
    isolation: isolate;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1),
                box-shadow .24s ease,
                border-color .24s ease;
    /* Per-card accent; each modifier overrides just these. */
    --stat: #6366f1;
    --stat-rgb: 99, 102, 241;
}

/* Gradient accent rail across the top edge */
.dash-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--stat) 0%, rgba(var(--stat-rgb), .35) 100%);
}

/* Soft corner glow that intensifies on hover */
.dash-stat::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--stat-rgb), .18) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    z-index: -1;
}

.dash-stat.is-clickable { cursor: pointer; }

.dash-stat:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--stat-rgb), .38);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04),
                0 18px 38px -12px rgba(var(--stat-rgb), .42);
}

.dash-stat:hover::after { transform: scale(1.25); opacity: .85; }

.dash-stat-rides     { --stat: #6366f1; --stat-rgb: 99, 102, 241; }
.dash-stat-users     { --stat: #f59e0b; --stat-rgb: 245, 158, 11; }
.dash-stat-drivers   { --stat: #10b981; --stat-rgb: 16, 185, 129; }
.dash-stat-earnings  { --stat: #8b5cf6; --stat-rgb: 139, 92, 246; }
.dash-stat-active    { --stat: #3b82f6; --stat-rgb: 59, 130, 246; }
.dash-stat-completed { --stat: #14b8a6; --stat-rgb: 20, 184, 166; }
.dash-stat-cancelled { --stat: #ef4444; --stat-rgb: 239, 68, 68; }
.dash-stat-pending   { --stat: #f97316; --stat-rgb: 249, 115, 22; }

.dash-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dash-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--stat) 0%, rgba(var(--stat-rgb), .78) 100%);
    box-shadow: 0 8px 18px -6px rgba(var(--stat-rgb), .65);
    flex-shrink: 0;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}

.dash-stat:hover .dash-stat-icon { transform: scale(1.06) rotate(-4deg); }

.dash-stat-icon img {
    width: 23px;
    height: 23px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.dash-stat-icon i { font-size: 19px; color: #fff; }

.dash-stat-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--ui-canvas);
    color: var(--ui-muted);
    opacity: 0;
    transform: translate(-5px, 5px);
    transition: opacity .22s ease, transform .22s ease, background .22s ease, color .22s ease;
}

.dash-stat:hover .dash-stat-go {
    opacity: 1;
    transform: none;
    background: rgba(var(--stat-rgb), .14);
    color: var(--stat);
}

.dash-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 8px;
}

.dash-stat-value {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--ui-ink);
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

/* Currency figures run longer — scale down so they never wrap. */
.dash-stat-value-money { font-size: 28px; }

.dash-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    margin: 0;
    min-height: 20px;
}

.dash-stat-change i { font-size: 10px; }

/* getArrowAndClass() toggles .green / .red on the trend line. */
.dash-stat-change.green,
.dash-stat-change.red {
    padding: 4px 10px;
    border-radius: 999px;
}

.dash-stat-change.green { background: #dcfce7; color: #15803d; }
.dash-stat-change.red   { background: #fee2e2; color: #b91c1c; }

.dash-stat-change.dash-stat-muted { color: var(--ui-muted); font-weight: 500; }
.dash-stat-change.dash-stat-muted strong { color: var(--ui-ink-soft); font-weight: 700; }


/* ── 2d. Responsive grids ─────────────────────────────────────────────────── */

.dash-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.dash-grid-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-grid-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid-stretch { align-items: stretch; }
.dash-grid-stretch > * { display: flex; flex-direction: column; }

@media (max-width: 1100px) {
    .dash-grid-8-4,
    .dash-grid-6-6 { grid-template-columns: minmax(0, 1fr); }
}


/* ── 2e. Cards ────────────────────────────────────────────────────────────── */

.dash-card,
.dash-table-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .12);
    overflow: hidden;
    transition: box-shadow .24s ease, border-color .24s ease;
}

.dash-card:hover,
.dash-table-card:hover {
    border-color: #dfe3ec;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 16px 34px -14px rgba(16, 24, 40, .22);
}

.dash-card-head,
.dash-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--ui-line-soft);
}

/* Small brand tick to the left of every card title */
.dash-card-head h5,
.dash-table-head h5 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ui-ink);
    margin: 0;
}

.dash-card-head h5::before,
.dash-table-head h5::before {
    content: "";
    width: 4px;
    height: 17px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    flex-shrink: 0;
}

.dash-pill-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    background: rgba(var(--primary-rgb), .16);
    color: #7a5c00;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.dash-card-body { padding: 20px 22px 22px; }

.dash-chart { position: relative; width: 100%; }
.dash-chart canvas { max-width: 100%; }

/* Shown by the chart code when a dataset has nothing to plot. */
.dash-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-muted);
    background: #fff;
}

/* Earnings vs. commission split under the doughnut */
.dash-metric-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-line-soft);
}

.dash-metric {
    min-width: 0;
    padding: 12px 14px;
    background: var(--ui-canvas);
    border-radius: 14px;
}

.dash-metric-key {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-muted);
    margin-bottom: 6px;
}

.dash-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dash-metric-val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ui-ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── 2f. Tables ───────────────────────────────────────────────────────────── */

.dash-table-card { flex: 1; }

.dash-table-scroll {
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dash-view-all {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(var(--primary-rgb), .14);
    color: #7a5c00;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease;
}

.dash-view-all:hover {
    background: rgba(var(--primary-rgb), .28);
    color: #6b5000;
    text-decoration: none;
    transform: translateX(2px);
}

.dash-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

/* 720px (was 860px) — dropping the Amount column is what lets pickup and dropoff
   both fit; the old value guaranteed a horizontal scrollbar that pushed the Ride
   ID column out of view. */
.dash-table-rides { table-layout: fixed; min-width: 720px; }

.dash-table thead th {
    padding: 12px 18px;
    background: #fafbfd;
    border-bottom: 1px solid var(--ui-line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: var(--ui-muted);
    text-align: left;
    white-space: nowrap;
}

.dash-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-line-soft);
    font-size: 13px;
    color: var(--ui-ink-soft);
    vertical-align: middle;
}

.dash-table tbody tr { transition: background .16s ease; }
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--primary-rgb), .07) 0%, transparent 100%); }

.dash-table tbody a { color: var(--ui-ink); font-weight: 600; text-decoration: none; }
.dash-table tbody a:hover { color: #4f46e5; text-decoration: none; }

.dash-empty-row td {
    padding: 40px 18px !important;
    text-align: center;
    color: var(--ui-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Status badges (built in buildRidesHTML) */
.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.dash-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.dash-badge-completed { background: #d1fae5; color: #065f46; }
.dash-badge-cancelled { background: #fee2e2; color: #991b1b; }
.dash-badge-ongoing   { background: #dbeafe; color: #1e40af; }
.dash-badge-placed    { background: #fef3c7; color: #92400e; }
.dash-badge-default   { background: #f1f5f9; color: #475569; }

.dash-ride-id {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ui-canvas);
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ui-ink-soft) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}

.dash-ride-id:hover {
    background: rgba(var(--primary-rgb), .16);
    border-color: rgba(var(--primary-rgb), .45);
    color: #6b5000 !important;
    text-decoration: none;
}

.dash-driver-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }

.dash-driver-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
    background: #fff;
    border: 2px solid rgba(var(--primary-rgb), .35);
    flex-shrink: 0;
}

.dash-loc {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cell helpers used by the row builders in home.blade.php */
.dash-center { text-align: center; }

.dash-date {
    font-size: 12px;
    color: var(--ui-muted);
    white-space: nowrap;
}

.dash-muted-text { font-size: 12px; color: var(--ui-muted); }

.dash-rating-val {
    margin-left: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ui-ink-soft);
}

.dash-table-drivers th,
.dash-table-drivers td { white-space: nowrap; }

.dash-header-left { min-width: 0; }

/* Rank pill on the Top Drivers list */
.dash-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--ui-canvas);
    color: var(--ui-muted);
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.dash-rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.dash-rank-2 { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #fff; }
.dash-rank-3 { background: linear-gradient(135deg, #fdba74, #ea9a5c); color: #fff; }


/* ── 2g. Dashboard responsive ─────────────────────────────────────────────── */

@media (max-width: 767px) {
    .dash-wrap { padding: 18px 14px 32px; }
    .dash-header { align-items: flex-start; }
    .dash-header-title { font-size: 21px; }
    .dash-filter { padding: 12px 14px; }
    .dash-filter select,
    .dash-filter input[type="date"] { min-width: 0; flex: 1 1 130px; max-width: none; }
    .dash-filter-actions { margin-left: 0; width: 100%; }
    .dash-filter-actions .dash-btn-apply,
    .dash-filter-actions .dash-btn-clear { flex: 1; justify-content: center; }
    .dash-kpi-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .dash-grid { gap: 14px; }
    .dash-stat-value { font-size: 30px; }
    .dash-stat-value-money { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-wave, .dash-dot { animation: none; }
    .dash-stat, .dash-stat-go, .dash-btn-apply, .dash-stat-icon,
    .dash-card, .dash-table-card, .dash-view-all { transition: none; }
    .dash-stat:hover { transform: none; }
    .dash-stat:hover .dash-stat-icon { transform: none; }
}


/* =============================================================================
   3. DRIVER DOCUMENTS TABLE
   ============================================================================= */

/* Front/Back preview badges, now in their own column. */
.doc-side-cell { white-space: nowrap; }

.doc-side-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    margin-right: 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.doc-side-badge:last-child { margin-right: 0; }
.doc-side-badge:hover { transform: translateY(-1px); filter: brightness(1.06); }


/* =============================================================================
   4. VEHICLE TYPES TABLE
   ============================================================================= */

.vt-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.vt-thumb {
    width: 46px;
    height: 46px;
    object-fit: contain;
    padding: 5px;
    background: var(--ui-canvas);
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    flex-shrink: 0;
}

.vt-name {
    display: block;
    font-weight: 700;
    color: var(--ui-ink);
}

.vt-desc {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ui-muted);
    white-space: normal;
    max-width: 320px;
}


/* =============================================================================
   5. SAFETY TIPS TABLE
   ============================================================================= */

.st-title {
    font-weight: 700;
    color: var(--ui-ink);
    text-decoration: none;
}

/* Tips run long — let the description wrap instead of stretching the row. */
.st-desc {
    display: block;
    white-space: normal;
    max-width: 560px;
    color: var(--ui-ink-soft);
    line-height: 1.5;
}


@media (prefers-reduced-motion: reduce) {
    .dash-wave, .dash-dot { animation: none; }
    .dash-stat, .dash-stat-go, .dash-btn-apply { transition: none; }
}


/* =============================================================================
   6. GOD'S EYE — live operations map
   ============================================================================= */

.ge-page {
    background:
        radial-gradient(1100px 520px at 8% -8%, rgba(var(--primary-rgb), .16) 0%, transparent 62%),
        linear-gradient(180deg, #f7f8fc 0%, var(--ui-canvas) 42%);
    min-height: 100vh;
}

.ge-wrap { padding: 24px 26px 32px; max-width: 1780px; margin: 0 auto; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.ge-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.ge-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ui-ink);
    margin: 0;
}

.ge-title-icon { display: flex; color: var(--primary); }

.ge-subtitle { font-size: 13.5px; color: var(--ui-muted); margin: 6px 0 0; }

.ge-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Tile switcher */
.ge-tile-switch {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    box-shadow: var(--ui-shadow-xs);
}

.ge-tile-btn {
    padding: 7px 15px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ui-ink-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.ge-tile-btn:hover { color: var(--ui-ink); background: var(--ui-canvas); }

.ge-tile-btn.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), .35);
}

/* Live sync toggle */
.ge-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #eef1f6;
    color: var(--ui-ink-soft);
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

.ge-sync-btn.is-on {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), .38);
}

.ge-sync-btn.is-on .ge-sync-icon { animation: ge-spin 2.4s linear infinite; }

@keyframes ge-spin { to { transform: rotate(360deg); } }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.ge-container {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 18px;
    min-height: 720px;
}

@media (max-width: 1100px) {
    .ge-container { grid-template-columns: minmax(0, 1fr); }
    .ge-map-shell { min-height: 480px; }
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.ge-sidebar {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .12);
}

.ge-sidebar-head { padding: 16px; border-bottom: 1px solid var(--ui-line-soft); background: #fafbfd; }

.ge-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ui-ink);
    margin: 0 0 14px;
}

.ge-units-pill {
    padding: 3px 10px;
    background: rgba(var(--primary-rgb), .18);
    color: #7a5c00;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Status pills */
.ge-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }

.ge-stat {
    padding: 9px 6px;
    background: #fff;
    border: 1.5px solid var(--ui-line);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ge-stat:hover { background: var(--ui-canvas); }

.ge-stat-label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--ui-muted); }
.ge-stat-value { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; }

.ge-stat-available .ge-stat-value { color: #15803d; }
.ge-stat-ontrip    .ge-stat-value { color: #0e7490; }
.ge-stat-offline   .ge-stat-value { color: #6b7280; }

.ge-stat-available.is-active { background: #f0fdf4; border-color: #86efac; box-shadow: 0 0 0 3px rgba(134, 239, 172, .3); }
.ge-stat-ontrip.is-active    { background: #ecfeff; border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(103, 232, 249, .3); }
.ge-stat-offline.is-active   { background: #f3f4f6; border-color: #d1d5db; box-shadow: 0 0 0 3px rgba(209, 213, 219, .35); }

/* Search */
.ge-search { position: relative; margin-bottom: 12px; }

.ge-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--ui-muted); pointer-events: none;
}

.ge-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    background: #fff;
    border: 1.5px solid var(--ui-line);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ui-ink);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ge-search input:focus { border-color: var(--primary); box-shadow: var(--ui-ring); }

/* Category tabs */
.ge-cat-tabs {
    display: flex;
    gap: 3px;
    padding: 4px;
    background: #eef1f6;
    border-radius: 11px;
    overflow-x: auto;
}

.ge-cat-btn {
    flex: 1 0 auto;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.ge-cat-btn:hover { color: var(--ui-ink); }
.ge-cat-btn.is-active { background: #fff; color: #7a5c00; font-weight: 800; box-shadow: var(--ui-shadow-xs); }

/* Unit list */
.ge-unit-list { flex: 1; overflow-y: auto; min-height: 360px; max-height: 560px; }

.ge-unit {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--ui-line-soft);
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.ge-unit:hover { background: #fafbfd; }

.ge-unit.is-selected {
    background: rgba(var(--primary-rgb), .09);
    border-left-color: var(--primary);
}

.ge-unit.is-nogps { opacity: .72; }

.ge-unit-main { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }

.ge-unit-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 12px; font-weight: 800; color: #fff;
    flex-shrink: 0;
}

.ge-unit-avatar.is-available { background: #16a34a; }
.ge-unit-avatar.is-ontrip    { background: #0e7490; }
.ge-unit-avatar.is-offline   { background: #9ca3af; }

.ge-unit-info { min-width: 0; }

.ge-unit-top { display: flex; align-items: center; gap: 7px; }

.ge-unit-name {
    font-size: 12.5px; font-weight: 700; color: var(--ui-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}

.ge-unit-rating {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    background: #fffbeb; color: #b45309;
    border-radius: 5px;
    font-size: 10px; font-weight: 700;
    white-space: nowrap;
}

.ge-unit-rating .fa { font-size: 9px; }

.ge-unit-vehicle {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 11px; color: var(--ui-ink-soft);
    min-width: 0;
}

.ge-unit-vehicle svg { color: var(--ui-muted); flex-shrink: 0; }

.ge-unit-model { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ge-unit-plate {
    padding: 1px 5px;
    background: #f1f3f7;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Vehicle type, spelled out under the vehicle line. */
.ge-unit-type { margin-top: 5px; }

.ge-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: rgba(var(--primary-rgb), .18);
    color: #7a5c00;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Active-trip block: rider, then pickup → dropoff as a connected route. */
.ge-unit-trip {
    margin-top: 6px;
    padding: 7px 9px;
    background: #ecfeff;
    color: #155e75;
    border-radius: 8px;
    font-size: 10.5px;
    line-height: 1.4;
}

.ge-trip-rider {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ge-unit-trip svg { flex-shrink: 0; }

.ge-route { position: relative; }

.ge-route-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.ge-route-row + .ge-route-row { margin-top: 9px; }

.ge-route-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 1px;
}

.ge-route-pin {
    position: relative;
    width: 9px;
    height: 9px;
    margin-top: 3px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Hollow ring for pickup, solid for dropoff — as on the ride detail page. */
.ge-route-from { border: 2px solid #0e7490; background: #fff; }
.ge-route-to   { background: #0e7490; border: 2px solid #0e7490; }

/* Dotted connector between the two markers. */
.ge-route-row:not(:last-child) .ge-route-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    width: 0;
    height: 11px;
    border-left: 2px dotted rgba(14, 116, 144, .5);
    transform: translateX(-1px);
}

.ge-unit-nogps { margin-top: 5px; font-size: 10px; color: #b45309; }

.ge-unit-side { text-align: right; flex-shrink: 0; }

.ge-unit-status {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
}

.ge-unit-status.is-available { background: #dcfce7; color: #15803d; }
.ge-unit-status.is-ontrip    { background: #cffafe; color: #155e75; }
.ge-unit-status.is-offline   { background: #f1f3f7; color: #6b7280; }

.ge-empty { padding: 44px 20px; text-align: center; color: var(--ui-muted); }
.ge-empty svg { color: #d1d5db; margin-bottom: 10px; }
.ge-empty p { font-size: 12px; margin: 0; }

.ge-sidebar-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px;
    border-top: 1px solid var(--ui-line-soft);
    background: #fafbfd;
    font-size: 11.5px;
    color: var(--ui-muted);
}

.ge-reset-btn {
    border: none; background: none; padding: 0;
    color: #7a5c00; font-size: 11.5px; font-weight: 800; cursor: pointer;
}

.ge-reset-btn:hover { text-decoration: underline; }

/* ── Map ──────────────────────────────────────────────────────────────────── */

.ge-map-shell {
    position: relative;
    background: #0f172a;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .12);
    min-height: 720px;
}

.ge-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Leaflet paints its own control chrome — keep it consistent with the panel. */
.ge-map-shell .leaflet-control-zoom a {
    border-radius: 8px !important;
    color: var(--ui-ink) !important;
    font-weight: 700;
}

.ge-marker { background: none !important; border: none !important; }
.ge-marker.is-selected { filter: drop-shadow(0 0 6px rgba(var(--primary-rgb), .9)); }

/* HUD */
.ge-hud {
    position: absolute; top: 14px; left: 14px; z-index: 500;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 13px;
    background: rgba(15, 23, 42, .9);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    color: #fff;
    font-size: 11.5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    white-space: nowrap;
}

.ge-hud-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #34d399;
    animation: ge-pulse 1.9s infinite;
}

@keyframes ge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.ge-hud-sep { color: rgba(255, 255, 255, .35); }
.ge-hud-coords { color: var(--primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Legend */
.ge-legend {
    position: absolute; bottom: 16px; right: 16px; z-index: 500;
    display: flex; align-items: center; gap: 16px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ui-ink-soft);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .18);
}

.ge-legend span { display: inline-flex; align-items: center; gap: 6px; }

.ge-legend-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; }
.ge-dot-available { background: #16a34a; }
.ge-dot-ontrip    { background: #0e7490; }
.ge-dot-offline   { background: #9ca3af; }

/* ── Popup ────────────────────────────────────────────────────────────────── */

.ge-popup .leaflet-popup-content-wrapper {
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .22);
    padding: 0;
}

.ge-popup .leaflet-popup-content { margin: 0; width: auto !important; }

.ge-popup-inner { padding: 14px 15px; }

.ge-popup-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 9px; margin-bottom: 9px;
    border-bottom: 1px solid var(--ui-line-soft);
}

.ge-popup-head strong { font-size: 13.5px; font-weight: 800; color: var(--ui-ink); }

.ge-popup-rating {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    background: #fffbeb; color: #b45309;
    border-radius: 6px;
    font-size: 11px; font-weight: 800;
}

.ge-popup-rows { display: flex; flex-direction: column; gap: 6px; }

.ge-popup-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12px; }
.ge-popup-rows span  { color: var(--ui-muted); }
.ge-popup-rows strong { color: var(--ui-ink); font-weight: 700; text-align: right; }

.ge-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f3f7; padding: 1px 6px; border-radius: 5px; }
.ge-tel  { color: #15803d !important; }

.ge-popup-trip {
    margin-top: 10px; padding: 9px 10px;
    background: #ecfeff;
    border-radius: 9px;
    font-size: 11.5px;
    color: #155e75;
    line-height: 1.6;
}

.ge-popup-actions { display: flex; gap: 8px; margin-top: 12px; }

.ge-popup-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter .16s ease, background .16s ease;
}

.ge-popup-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600 !important;
}

.ge-popup-primary:hover { filter: brightness(1.05); }

.ge-popup-ghost { background: #f1f3f7; color: var(--ui-ink-soft) !important; }
.ge-popup-ghost:hover { background: #e5e9f0; }

@media (max-width: 767px) {
    .ge-wrap { padding: 16px 14px 26px; }
    .ge-title { font-size: 20px; }
    .ge-header-actions { width: 100%; }
    .ge-map-shell { min-height: 420px; }
    .ge-legend { gap: 10px; padding: 7px 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .ge-sync-btn.is-on .ge-sync-icon, .ge-hud-dot { animation: none; }
}


/* ── God's Eye popup: Google InfoWindow chrome ─────────────────────────────
   Google injects its own bubble (.gm-style-iw-c), a scroll wrapper
   (.gm-style-iw-d) and an oversized close button. Left alone the bubble is
   narrow and top-heavy, which wrapped the action buttons onto two lines.
   The Leaflet rules above only match .leaflet-popup, so Google needs its own. */

.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .24) !important;
    max-width: none !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;      /* kills the phantom inner scrollbar */
    max-height: none !important;
    padding: 0 !important;
}

/* Google's close button is 40px and overlaps the title; shrink and inset it. */
.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
    top: 4px !important;
    right: 4px !important;
    width: 28px !important;
    height: 28px !important;
    opacity: .55;
    border-radius: 8px !important;
    transition: opacity .15s ease, background .15s ease;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
    opacity: 1;
    background: var(--ui-line-soft) !important;
}

.gm-style .gm-style-iw-c button.gm-ui-hover-effect > span {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
}

/* Bubble tail */
.gm-style .gm-style-iw-tc::after { background: #fff !important; }

/* ── Shared popup body (both engines) ─────────────────────────────────────── */

.ge-popup-inner {
    min-width: 268px;                 /* keeps the two action buttons on one line */
    max-width: 320px;
    padding: 15px 16px 16px;
    box-sizing: border-box;
}

/* Leave room for the close button so it never sits on the driver name. */
.ge-popup-inner .ge-popup-head { padding-right: 26px; }

.ge-popup-btn {
    white-space: nowrap;              /* "View Driver" was wrapping to two lines */
    line-height: 1.2;
}

@media (max-width: 480px) {
    .ge-popup-inner { min-width: 0; max-width: 260px; }
    .ge-popup-actions { flex-direction: column; }
}


/* =============================================================================
   7. SERVICE ZONES — card list + map preview
   ============================================================================= */

.zn-page {
    background:
        radial-gradient(1000px 480px at 6% -10%, rgba(var(--primary-rgb), .14) 0%, transparent 60%),
        linear-gradient(180deg, #f7f8fc 0%, var(--ui-canvas) 40%);
    min-height: 100vh;
}

.zn-wrap { padding: 26px 28px 40px; max-width: 1700px; margin: 0 auto; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.zn-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

.zn-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ui-ink);
    margin: 0;
}

.zn-subtitle { font-size: 13.5px; color: var(--ui-muted); margin: 7px 0 0; }

.zn-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600 !important;
    border: none;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), .38);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.zn-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), .48);
    filter: brightness(1.04);
    color: #1f1600 !important;
}

.zn-btn-sm { height: 38px; padding: 0 16px; font-size: 12.5px; }

.zn-btn-primary.is-disabled {
    background: #e7eaf0;
    color: var(--ui-muted) !important;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Metrics ──────────────────────────────────────────────────────────────── */

.zn-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.zn-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .1);
    transition: box-shadow .22s ease, transform .22s ease;
}

.zn-metric:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 30px -12px rgba(16, 24, 40, .2); }

.zn-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), .18);
    color: #b07d00;
    flex-shrink: 0;
}

.zn-metric-icon-amber { background: rgba(var(--primary-rgb), .28); }

.zn-metric-label { display: block; font-size: 12px; font-weight: 600; color: var(--ui-muted); }
.zn-metric-value { display: inline-block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--ui-ink); margin-right: 7px; }
.zn-metric-hint  { font-size: 11.5px; color: var(--ui-muted); }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.zn-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) { .zn-layout { grid-template-columns: minmax(0, 1fr); } }

.zn-panel {
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -8px rgba(16, 24, 40, .12);
    overflow: hidden;
}

.zn-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
}

.zn-panel-head h3 { font-size: 16px; font-weight: 700; color: var(--ui-ink); margin: 0; }
.zn-panel-head p  { font-size: 12.5px; color: var(--ui-muted); margin: 4px 0 0; }

.zn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #1f1600 !important;
    text-decoration: none !important;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .34);
    transition: transform .15s ease;
}

.zn-icon-btn:hover { transform: translateY(-2px); color: #1f1600 !important; }

/* ── Search ───────────────────────────────────────────────────────────────── */

.zn-search { position: relative; padding: 0 20px 14px; }

.zn-search-icon {
    position: absolute;
    left: 34px;
    top: 11px;
    display: flex;
    color: var(--ui-muted);
    pointer-events: none;
}

.zn-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    background: #fff;
    border: 1.5px solid var(--ui-line);
    border-radius: 12px;
    font-size: 13px;
    color: var(--ui-ink);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zn-search input:focus { border-color: var(--primary); box-shadow: var(--ui-ring); }

/* ── Zone cards ───────────────────────────────────────────────────────────── */

.zn-list { max-height: 620px; overflow-y: auto; padding: 0 20px 20px; }

.zn-card {
    border: 1.5px solid var(--ui-line);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.zn-card:last-child { margin-bottom: 0; }
.zn-card:hover { border-color: rgba(var(--primary-rgb), .5); }

.zn-card.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .16);
}

.zn-card-main {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
}

.zn-card-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), .18);
    color: #b07d00;
    flex-shrink: 0;
}

.zn-card-id { min-width: 0; flex: 1; }
.zn-card-id strong { display: block; font-size: 14px; font-weight: 700; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-card-id small  { display: block; font-size: 11.5px; color: var(--ui-muted); margin-top: 2px; }

.zn-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.zn-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zn-status.is-active   { background: rgba(var(--primary-rgb), .2); color: #8a6400; }
.zn-status.is-inactive { background: #f1f3f7; color: #6b7280; }

.zn-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--ui-line-soft);
}

.zn-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.zn-card-grid > div { padding: 10px 14px; }
.zn-card-grid > div + div { border-left: 1px solid var(--ui-line-soft); }
.zn-card-grid span   { display: block; font-size: 10.5px; font-weight: 600; color: var(--ui-muted); }
.zn-card-grid strong { display: block; font-size: 15px; font-weight: 800; color: var(--ui-ink); margin-top: 2px; }

.zn-card-actions {
    display: flex;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--ui-line-soft);
    background: #fafbfd;
}

.zn-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1.5px solid var(--ui-line);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-ink-soft) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.zn-card-btn:hover { background: var(--ui-canvas); border-color: #d6dae4; color: var(--ui-ink) !important; }

.zn-card-btn-danger { color: #dc2626 !important; }
.zn-card-btn-danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c !important; }

.zn-empty { padding: 44px 20px; text-align: center; color: var(--ui-muted); }
.zn-empty svg { color: #d1d5db; margin-bottom: 10px; }
.zn-empty strong { display: block; font-size: 13.5px; color: var(--ui-ink-soft); }
.zn-empty span { display: block; font-size: 12px; margin-top: 3px; }

/* ── Map ──────────────────────────────────────────────────────────────────── */

.zn-map-wrap { padding: 0 20px 20px; }

.zn-map {
    width: 100%;
    height: 620px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef1f6;
    border: 1px solid var(--ui-line);
}

.zn-map .leaflet-control-zoom a { border-radius: 8px !important; color: var(--ui-ink) !important; font-weight: 700; }

@media (max-width: 767px) {
    .zn-wrap { padding: 18px 14px 30px; }
    .zn-title { font-size: 21px; }
    .zn-header .zn-btn-primary { width: 100%; justify-content: center; }
    .zn-map { height: 380px; }
    .zn-list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zn-metric, .zn-card, .zn-btn-primary, .zn-icon-btn { transition: none; }
    .zn-metric:hover, .zn-btn-primary:hover, .zn-icon-btn:hover { transform: none; }
}


/* =============================================================================
   8. SUMMARY CARDS — .compact-metrics / .mini-metric
   -----------------------------------------------------------------------------
   Ported 1:1 from the reference kit's src/index.css. Sits above a listing table;
   the label spans both grid columns so the value and hint share a baseline row.
   ============================================================================= */

.compact-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
    margin-top: 18px;
}

.mini-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 15px 17px;
    background: white;
    border: 1px solid #ede8d0;
    border-radius: 9px;
}

.mini-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: none;
    color: #FFC400;
    background: #FEF3C7;
    border-radius: 8px;
}

.mini-icon.amber { color: #CC9C00; background: #FDE68A; }

.mini-metric > div:last-child {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: baseline;
}

.mini-metric span   { grid-column: 1 / -1; color: #8a7a50; font-size: 10.5px; }
.mini-metric strong { margin-top: 2px; font-size: 19px; font-weight: 700; color: #1a1608; }
.mini-metric small  { color: #a09060; font-size: 10px; }

@media (max-width: 900px) {
    .compact-metrics { grid-template-columns: 1fr; }
}


/* =============================================================================
   9. PAGE TITLE BAR — matched to the Zone / God's Eye header
   -----------------------------------------------------------------------------
   43 views share the .page-title-bar markup, so this restyles it in place rather
   than editing each one. The white bar, bottom rule and icon tile are dropped;
   what remains is the plain title + muted line the newer screens use.

   The breadcrumb is kept (it carries the Dashboard link) but styled as that
   muted subtitle line, so it reads the same as .zn-subtitle / .ge-subtitle.
   Horizontal padding matches .container-fluid (15px) so the title lines up with
   the cards beneath it.
   ============================================================================= */

.page-title-bar {
    background: transparent;
    border-bottom: none;
    padding: 26px 15px 4px;
    margin-bottom: 0;
}

.page-title-bar .ptb-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title-bar .ptb-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Soft tinted tile to the left of the title. */
.page-title-bar .ptb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), .16);
    flex-shrink: 0;
}

.page-title-bar .ptb-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.page-title-bar h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    color: var(--ui-ink);
    margin: 0;
}

/* Reads as the subtitle line on the Zone / God's Eye pages. */
.page-title-bar .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--ui-muted);
}

.page-title-bar .breadcrumb-item a { color: var(--ui-muted); text-decoration: none; }
.page-title-bar .breadcrumb-item a:hover { color: var(--primary); }
.page-title-bar .breadcrumb-item.active { color: var(--ui-muted); }
.page-title-bar .breadcrumb-item + .breadcrumb-item::before { color: #c8cdd8; }

.page-title-bar .ptb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 9px;
    background: rgba(var(--primary-rgb), .22);
    color: #8a6400;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 999px;
    margin-left: 0;
}

/* "Create" buttons that sit on the right of the bar. */
.page-title-bar .btn-page-create {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .page-title-bar { padding: 18px 15px 4px; }
    .page-title-bar h2 { font-size: 21px; }
    .page-title-bar .ptb-inner { gap: 12px; }
}


/* =============================================================================
   10. RIDES STAT CARDS — matched to .mini-metric
   -----------------------------------------------------------------------------
   Same look as the summary cards on the Users listing (which come from the
   reference kit): cream border, 9px radius, 40px amber icon tile, label above
   the value. Restyled here rather than in the markup so rides/index keeps its
   existing classes and the JS that writes .total_ride / .placed_ride / etc.

   The markup is <info><icon>, so row-reverse puts the icon on the left where
   the reference has it.
   ============================================================================= */

.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 18px 0 0;
}

.stat-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-height: 82px;
    padding: 15px 17px;
    background: #fff;
    border: 1px solid #ede8d0;
    border-radius: 9px;
    box-shadow: none;
    overflow: visible;
}

/* The coloured left rail is not part of the newer card. */
.stat-card::before { display: none; }

.stat-card-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    background: #FEF3C7;
}

.stat-card-icon img { width: 22px; height: 22px; object-fit: contain; }

.stat-card-info { min-width: 0; }

/* Label sits above the figure, as on .mini-metric. */
.stat-card-info p {
    order: -1;
    margin: 0 0 2px;
    color: #8a7a50;
    font-size: 10.5px;
    font-weight: 500;
}

.stat-card-info h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1608;
}

.stat-card-info { display: flex; flex-direction: column; }

/* Keep a per-card tint so the four stay distinguishable at a glance. */
.stat-card--blue   .stat-card-icon { background: #E4EDF7; }
.stat-card--amber  .stat-card-icon { background: #FEF3C7; }
.stat-card--purple .stat-card-icon { background: #ECE7F9; }
.stat-card--green  .stat-card-icon { background: #E3F1E4; }

@media (max-width: 991px) { .stat-cards-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .stat-cards-row { grid-template-columns: 1fr; } }


/* =============================================================================
   11. LOGIN — reference "Login Basic" card
   -----------------------------------------------------------------------------
   Ported from the reference kit's AuthReferencePage: cream page (#fffdf8), a
   centred white card with a 2xl radius, an amber shield tile, icon-prefixed
   fields and a full-width amber submit.
   ============================================================================= */

.auth-body {
    margin: 0;
    min-height: 100vh;
    background: #fffdf8;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #1a1608;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(var(--primary-rgb), .18) 0%, transparent 60%),
        radial-gradient(700px 380px at 100% 100%, rgba(var(--primary-rgb), .12) 0%, transparent 55%);
}

.auth-stage { width: 100%; max-width: 440px; }

/* Brand mark above the card — the reference has no logo, but a sign-in page
   should say whose it is. */
.auth-brand {
    display: block;
    margin: 0 auto 22px;
    text-align: center;
}

.auth-brand img { height: 44px; width: auto; object-fit: contain; }

/* ── Card ─────────────────────────────────────────────────────────────────── */

.auth-card {
    background: #fff;
    border: 1px solid #ede8d0;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 44px -22px rgba(16, 24, 40, .3);
}

.auth-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #FEF3C7;
    color: #b07d00;
}

.auth-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #1a1608;
}

.auth-copy { margin: 6px 0 24px; font-size: 12.5px; color: #8a7a50; }

/* ── Messages ─────────────────────────────────────────────────────────────── */

.auth-status,
.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 18px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.45;
}

.auth-status { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.auth-error  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.auth-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── Fields ───────────────────────────────────────────────────────────────── */

.auth-field { display: block; margin-bottom: 16px; }

.auth-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #5a4e2c;
}

.auth-input {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #ede8d0;
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.auth-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

.auth-input.has-error { border-color: #fca5a5; }

.auth-input-icon { color: #c8b880; flex-shrink: 0; }
.auth-input:focus-within .auth-input-icon { color: var(--primary); }

.auth-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    color: #1a1608;
}

.auth-input input::placeholder { color: #c8b880; }

.auth-eye {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #a09060;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.auth-eye:hover { background: #fffdf0; color: #5a4e2c; }
.auth-eye.is-on { color: var(--primary); }

/* ── Remember / forgot row ────────────────────────────────────────────────── */

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    color: #5a4e2c;
    cursor: pointer;
    font-weight: 500;
}

/* style.css hides every checkbox off-screen ([type="checkbox"] → left:-9999px)
   and expects a SIBLING <label> to draw a replacement via ::before. This input
   is nested inside its label, so nothing was drawn and the box was invisible.
   Bring it back and style it directly instead of using that machinery.
   Specificity (0,2,1) beats the base rule's (0,2,0), so no !important needed. */
.auth-remember input[type="checkbox"],
.auth-remember input[type="checkbox"]:checked,
.auth-remember input[type="checkbox"]:not(:checked) {
    position: static;
    left: auto;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    display: grid;
    place-content: center;
    flex-shrink: 0;
    border: 1.5px solid #d9d2b8;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.auth-remember input[type="checkbox"]:hover { border-color: var(--primary); }

.auth-remember input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25);
}

.auth-remember input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: #E5AF00;
}

/* Tick, drawn as a rotated corner so it needs no icon font. */
.auth-remember input[type="checkbox"]::before {
    content: "";
    width: 4px;
    height: 8px;
    margin-top: -2px;
    border: solid #1a1608;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.auth-remember input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }

.auth-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #b07d00;
    text-decoration: none;
}

.auth-link:hover { color: #8a6400; text-decoration: underline; }

/* ── Submit ───────────────────────────────────────────────────────────────── */

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border: 1px solid #E5AF00;
    border-radius: 12px;
    background: var(--primary);
    color: #1a1608;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(229, 175, 0, .18);
    transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
}

.auth-submit:hover {
    background: #FCD34D;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), .34);
}

.auth-submit:active { transform: none; }

.auth-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: #a09060;
}

@media (max-width: 480px) {
    .auth-card { padding: 24px 20px; }
    .auth-title { font-size: 22px; }
    .auth-shell { padding: 24px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit, .auth-input, .auth-eye { transition: none; }
    .auth-submit:hover { transform: none; }
}