/* ══════════════════════════════════════════════════════════
   Driver Detail Panel — "second sidebar" from the driver popover
   title row. All selectors scoped under .sd-drv-detail-
══════════════════════════════════════════════════════════ */

/* ── Driver Sidebar design tokens — exact copy of the prototype's own
   src/index.css vars (light + [data-theme="dark"]), scoped --dsb- prefix.
   Same pattern as RoutesV2's own --rv2-* block in map.routes.v2.css.
   Used across the Drivers Panel, DriverPopup, Driver Detail Panel and the
   Orders panel's driver-filter header — not just this file — wherever a
   driver-sidebar rule needs the prototype's exact color instead of the
   project's general-purpose --sd-neutral-* approximation. ────────────── */
:root {
    --dsb-bg:           #FFFFFF;
    --dsb-bg2:          #F8F8F5;
    --dsb-bg3:          #F4F4F5;
    --dsb-bg4:          #FAFAFA;
    --dsb-border:       #E8E8E4;
    --dsb-border2:      #D4D4D4;
    --dsb-border3:      #E5E5E5;
    --dsb-text:         #0A0A0A;
    --dsb-text2:        #262626;
    --dsb-text3:        #404040;
    --dsb-text4:        #525252;
    --dsb-text5:        #737373;
    --dsb-text6:        #A3A3A3;
    --dsb-overlay:      rgba(0,0,0,0.45);
    --dsb-shadow-sm:    0 1px 4px rgba(0,0,0,0.08);
    --dsb-shadow-md:    0px 4px 16px rgba(0,0,0,0.10);
    --dsb-shadow-lg:    0px 8px 32px rgba(0,0,0,0.14);
    --dsb-shadow-xl:    0 12px 48px rgba(0,0,0,0.18);
    --dsb-fade-bottom:  linear-gradient(transparent, #FFFFFF);
    --dsb-fade-right:   linear-gradient(to right, transparent, #FAFAFA 45%);

    --dsb-green-primary:     #03624C;
    --dsb-green-badge:       #17C289;
    --dsb-green-pin:         #0ABF8C;
    --dsb-orange-pin:        #FFB349;
    --dsb-gray-pin:          #737373;
    --dsb-light-pin:         #D4D4D4;
    --dsb-red-notification:  #CC4A30;
    --dsb-blue-store:        #175CD3;
    --dsb-driver-bg:         #404040;
    --dsb-icon:              #525252;

    /* Driver-status colors (App.jsx DRIVER_STATUS_CONFIG) — status dots */
    --dsb-driver-free-bg:    #DCFCE7; --dsb-driver-free-text:  #047048; --dsb-driver-free-dot:  #22C55E;
    --dsb-driver-busy-bg:    var(--dsb-bg3); --dsb-driver-busy-text: var(--dsb-text4); --dsb-driver-busy-dot: #94A3B8;
    --dsb-driver-late-bg:    #FEE2E2; --dsb-driver-late-text: #B42318; --dsb-driver-late-dot: #EF4444;
    /* Avatar-initials variant (App.jsx driverInitialsBg/Color) — softer pastels,
       used ONLY for the round avatar circle background/initials, not the status dot */
    --dsb-avatar-free-bg:    #B8E8D8; --dsb-avatar-free-text: #047048;
    --dsb-avatar-busy-bg:    var(--dsb-bg3); --dsb-avatar-busy-text: var(--dsb-text3);
    --dsb-avatar-late-bg:    #F5C6C2; --dsb-avatar-late-text: #B42318;
    /* DriverPopup's OWN "late" status-text red is a 4th distinct literal — keep separate */
    --dsb-popover-late-text: #D92D20;

    --dsb-order-card-more-menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
    --dsb-bg:           #141414;
    --dsb-bg2:          #0C0C0C;
    --dsb-bg3:          #252525;
    --dsb-bg4:          #1C1C1C;
    --dsb-border:       #2E2E2E;
    --dsb-border2:      #3A3A3A;
    --dsb-border3:      #333333;
    --dsb-text:         #F0F0F0;
    --dsb-text2:        #D0D0D0;
    --dsb-text3:        #B0B0B0;
    --dsb-text4:        #909090;
    --dsb-text5:        #757575;
    --dsb-text6:        #555555;
    --dsb-overlay:      rgba(0,0,0,0.72);
    --dsb-shadow-sm:    0 1px 4px rgba(0,0,0,0.4);
    --dsb-shadow-md:    0px 4px 16px rgba(0,0,0,0.50);
    --dsb-shadow-lg:    0px 8px 32px rgba(0,0,0,0.60);
    --dsb-shadow-xl:    0 12px 48px rgba(0,0,0,0.70);
    --dsb-fade-bottom:  linear-gradient(transparent, #141414);
    --dsb-fade-right:   linear-gradient(to right, transparent, #1C1C1C 45%);
    /* Prototype's own dark theme never redefines the brand/status/avatar colors above —
       they're hardcoded hex in App.jsx regardless of theme. Carry forward unchanged. */
    --dsb-order-card-more-menu-shadow: 0 4px 16px rgba(0, 0, 0, 0.50);
}

.sd-drv-detail-panel {
    width: 380px;
    min-width: 380px;
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
    background: var(--dsb-bg);
    border-right: 1px solid var(--dsb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-drv-detail-header {
    flex-shrink: 0;
    padding: 20px 20px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--dsb-border);
}

.sd-drv-detail-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-drv-detail-name {
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--dsb-text);
}

.sd-drv-detail-status {
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--dsb-text5);
}

.sd-drv-detail-status--late {
    color: var(--dsb-popover-late-text);
}

.sd-drv-detail-close {
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-shrink: 0;
    color: var(--dsb-text5);
    border-radius: 6px;
    transition: background 0.1s;
}

.sd-drv-detail-close .material-symbols-outlined {
    font-size: 20px !important;
    font-weight: 300 !important;
}

.sd-drv-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sd-drv-detail-avatar-row {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sd-drv-detail-avatar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-drv-detail-avatar-name {
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--dsb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-drv-detail-avatar-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-drv-detail-avatar-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sd-drv-detail-avatar-status-text {
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--dsb-text5);
}

.sd-drv-detail-section-title {
    padding: 14px 20px 8px;
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--dsb-text5);
}

/* Store detail panel stats — reuses .np-store-stats layout but the base classes are tuned for the
   compact store popover (16px padding, 17px value). The DetailsPanel wants 20px 20px 16px padding
   and a 20px value (prototype uses 800 weight; capped at 700 per the project's font-weight rule,
   which the base .np-store-stat-value already is — so only size/padding differ). Scoped under
   .sd-drv-detail-body so it beats the single-class .np-store-* rules regardless of stylesheet load
   order (this file loads before custom_map.css). */
.sd-drv-detail-body .sd-drv-detail-store-stats {
    padding: 20px 20px 16px;
}
.sd-drv-detail-body .sd-drv-detail-store-stat-value {
    font-size: 20px;
}

.sd-drv-detail-orders-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-drv-detail-order-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.sd-drv-detail-order-row:hover {
    background: var(--dsb-bg3);
}

.sd-drv-detail-order-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sd-drv-detail-order-id {
    flex: 1;
    min-width: 0;
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--dsb-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-drv-detail-order-row--with-badge .sd-drv-detail-order-id {
    flex: 0 0 140px;
    width: 140px;
}

.sd-drv-detail-order-row--with-badge .sd-drv-detail-order-time {
    flex: 1;
}

.sd-drv-detail-order-time {
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--dsb-text5);
    flex-shrink: 0;
}

/* Store detail panel rows add a StatusBadge after the time (driver panel rows don't). The id keeps
   the base flex:1/min-width:0 so IT is the element that absorbs slack and ellipsizes; time and badge
   stay natural width, pinned right. (Do NOT flip flex:1 onto time — that leaves the id at natural
   width and it overflows the panel instead of ellipsizing.) */
.sd-drv-detail-order-row--with-badge .sd-order-badge {
    flex-shrink: 0;
}

.sd-drv-detail-empty {
    padding: 8px 4px;
    font-family: 'sd-avenir', system-ui, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--dsb-text5);
}