/* /Pages/BTD/BTD_FleetDashboard.razor.rz.scp.css */
/* Fleet Dashboard — top toolbar */
.fd-toolbar[b-mfmalo1qty] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.fd-toolbar-title[b-mfmalo1qty] {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fd-toolbar-input[b-mfmalo1qty] {
    flex: 0 0 auto;
}

.fd-toolbar-actions[b-mfmalo1qty] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.fd-input[b-mfmalo1qty] {
    padding: 8px 11px;
    border: 1px solid #D7DFF0;
    border-radius: 7px;
    font-size: 12.5px;
    color: #12296B;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.fd-input:focus[b-mfmalo1qty] {
    border-color: #1B57D6;
}

.fd-icon-btn[b-mfmalo1qty] {
    min-width: 32px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Stat cards */
.fd-stat-row[b-mfmalo1qty] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 14px;
}

.fd-stat-card[b-mfmalo1qty] {
    background: #fff;
    border: 1px solid #E1E7F4;
    border-radius: 12px;
    padding: 13px 13px 12px;
    box-shadow: none;
}

.fd-stat-lbl[b-mfmalo1qty] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7C8AAE;
}

.fd-stat-val[b-mfmalo1qty] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 29px;
    font-weight: 600;
    line-height: 1;
    margin: 6px 0 8px;
    color: #12296B;
}

.fd-stat-val.active[b-mfmalo1qty] {
    color: #0E7A54;
}

.fd-stat-val.warn[b-mfmalo1qty] {
    color: #B57608;
}

.fd-stat-val.danger[b-mfmalo1qty] {
    color: #C23B3B;
}

.fd-stat-card.danger[b-mfmalo1qty] {
    border-color: #F3D9D9;
}

.fd-stat-card.danger .fd-stat-lbl[b-mfmalo1qty] {
    color: #B24A4A;
}

.fd-stat-split[b-mfmalo1qty] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3A4A6B;
}

.fd-dot-bafco[b-mfmalo1qty] {
    color: #1B57D6;
}

.fd-dot-3rd[b-mfmalo1qty] {
    color: #A7B7DE;
}

/* Grid toolbar — status/fleet chips only */
.fd-grid-toolbar[b-mfmalo1qty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #EEF1F8;
}

.fd-chip-group[b-mfmalo1qty] {
    display: flex;
    gap: 6px;
}

.fd-chip[b-mfmalo1qty] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.fd-chip:hover[b-mfmalo1qty] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.fd-chip.active[b-mfmalo1qty] {
    background: #12296B;
    color: #fff;
    border-color: #12296B;
}

/* Grid progress bar */
.fd-progress-track[b-mfmalo1qty] {
    height: 5px;
    border-radius: 3px;
    background: #EEF1F8;
    overflow: hidden;
}

.fd-progress-fill[b-mfmalo1qty] {
    height: 100%;
    border-radius: 3px;
}

/* Detail drawer — three-part flex column with a fixed height: header and footer stay pinned
   (flex: 0 0 auto), only the body scrolls (flex: 1 1 auto; overflow-y: auto). */
.fd-drawer-backdrop[b-mfmalo1qty] {
    position: fixed;
    inset: 0;
    background: rgba(12, 30, 69, .42);
    z-index: 90;
    display: flex;
    justify-content: flex-end;
}

.fd-drawer[b-mfmalo1qty] {
    width: 420px;
    max-width: 94vw;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 44px rgba(12, 30, 69, .22);
    animation: drawerIn-b-mfmalo1qty .2s cubic-bezier(.2, .8, .3, 1);
    outline: none;
}

@keyframes drawerIn-b-mfmalo1qty {
    from {
        transform: translateX(28px);
        opacity: .4;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.fd-drawer-hd[b-mfmalo1qty] {
    background: #0C1E45;
    padding: 16px;
    color: #fff;
    flex: 0 0 auto;
}

.fd-drawer-hd-top[b-mfmalo1qty] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fd-drawer-icon[b-mfmalo1qty] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #16305F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.fd-drawer-icon img[b-mfmalo1qty] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.fd-drawer-plate[b-mfmalo1qty] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 17px;
    font-weight: 600;
}

.fd-drawer-vendor[b-mfmalo1qty] {
    font-size: 11.5px;
    color: #9DB3E4;
}

.fd-drawer-status[b-mfmalo1qty] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.fd-drawer-hd-actions[b-mfmalo1qty] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.fd-drawer-close[b-mfmalo1qty] {
    background: none;
    border: none;
    color: #9DB3E4;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fd-drawer-close:hover[b-mfmalo1qty] {
    color: #fff;
}

.fd-drawer-metrics[b-mfmalo1qty] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.fd-drawer-metric[b-mfmalo1qty] {
    background: #16305F;
    border-radius: 8px;
    padding: 8px 10px;
}

.fd-drawer-metric-val[b-mfmalo1qty] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.fd-drawer-metric-lbl[b-mfmalo1qty] {
    font-size: 9.5px;
    color: #7E93C4;
    letter-spacing: .08em;
}

.fd-drawer-progress-wrap[b-mfmalo1qty] {
    margin-top: 12px;
}

.fd-drawer-progress-lbl[b-mfmalo1qty] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #9DB3E4;
    margin-bottom: 5px;
}

.fd-drawer-progress-track[b-mfmalo1qty] {
    height: 6px;
    border-radius: 3px;
    background: #16305F;
    overflow: hidden;
}

.fd-drawer-progress-fill[b-mfmalo1qty] {
    height: 100%;
    border-radius: 3px;
    background: #17A673;
}

.fd-drawer-body[b-mfmalo1qty] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.fd-drawer-section-lbl[b-mfmalo1qty] {
    font-size: 10.5px;
    letter-spacing: .1em;
    color: #7C8AAE;
    font-weight: 600;
    text-transform: uppercase;
    padding: 14px 16px 6px;
}

.fd-drawer-doc-count[b-mfmalo1qty] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #8A97B8;
}

.fd-drawer-row[b-mfmalo1qty] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #F2F5FC;
    font-size: 12.5px;
}

.fd-drawer-k[b-mfmalo1qty] {
    color: #7C8AAE;
}

.fd-drawer-v[b-mfmalo1qty] {
    font-weight: 600;
    text-align: right;
    color: #12296B;
}

.fd-drawer-v-notes[b-mfmalo1qty] {
    font-size: 11px;
    font-weight: 500;
}

.fd-drawer-empty[b-mfmalo1qty] {
    padding: 10px 16px 14px;
    color: #8A97B8;
    font-size: 12px;
}

/* Timeline — one row per event, dot + label/by-line + time, no border between events */
.fd-tl-list[b-mfmalo1qty] {
    padding: 2px 0 6px;
}

.fd-tl-row[b-mfmalo1qty] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 16px;
}

.fd-tl-dot[b-mfmalo1qty] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 8px;
}

.fd-tl-label[b-mfmalo1qty] {
    font-size: 12.5px;
    font-weight: 500;
    color: #12296B;
}

.fd-tl-by[b-mfmalo1qty] {
    font-size: 11px;
    color: #8A97B8;
    margin-top: 1px;
}

.fd-tl-time[b-mfmalo1qty] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #5C6D96;
    white-space: nowrap;
    flex-shrink: 0;
}

.fd-drawer-driver[b-mfmalo1qty] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid #E7ECF8;
    border-radius: 10px;
    margin: 8px 16px 16px;
}

.fd-drawer-driver-ava[b-mfmalo1qty] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.fd-drawer-driver-name[b-mfmalo1qty] {
    font-size: 13px;
    font-weight: 600;
    color: #12296B;
}

.fd-drawer-driver-phone[b-mfmalo1qty] {
    font-size: 11.5px;
    color: #8A97B8;
    font-family: 'IBM Plex Mono', monospace;
}

/* Footer — pinned, real trip links (Live Track / View Trip), never scrolls away */
.fd-drawer-ft[b-mfmalo1qty] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #EEF1F8;
    background: #FAFBFF;
}

.fd-ft-btn[b-mfmalo1qty] {
    flex: 1 1 0;
    padding: 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.fd-ft-primary[b-mfmalo1qty] {
    background: #1B57D6;
    color: #fff;
    border: 1px solid #1B57D6;
}

.fd-ft-primary:hover[b-mfmalo1qty] {
    background: #12296B;
    border-color: #12296B;
}

.fd-ft-secondary[b-mfmalo1qty] {
    background: #fff;
    border: 1px solid #D7DFF0;
    color: #12296B;
}

.fd-ft-secondary:hover[b-mfmalo1qty] {
    border-color: #1B57D6;
    color: #1B57D6;
}

/* Documents — scrollable list of per-attachment cards */
.fd-doc-list[b-mfmalo1qty] {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 16px 2px;
}

.fd-doc-card[b-mfmalo1qty] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    border: 1px solid #E7ECF8;
    border-radius: 9px;
}

.fd-doc-icon[b-mfmalo1qty] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #F2F5FC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.fd-doc-name[b-mfmalo1qty] {
    font-size: 12px;
    font-weight: 600;
    color: #12296B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-doc-meta[b-mfmalo1qty] {
    font-size: 10.5px;
    color: #8A97B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-doc-phase[b-mfmalo1qty] {
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.fd-doc-view[b-mfmalo1qty] {
    background: #F2F5FC;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
}

.fd-doc-view:hover[b-mfmalo1qty] {
    background: #E1E7F4;
}

/* Attachment preview — rendered inline via a data: URI, never a new tab (which would show a
   blob: URL in the address bar). */
.fd-preview-backdrop[b-mfmalo1qty] {
    position: fixed;
    inset: 0;
    background: rgba(12, 30, 69, .6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.fd-preview-modal[b-mfmalo1qty] {
    width: 720px;
    max-width: 100%;
    height: 80vh;
    max-height: 800px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(12, 30, 69, .35);
    outline: none;
}

.fd-preview-hd[b-mfmalo1qty] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #0C1E45;
    color: #fff;
}

.fd-preview-name[b-mfmalo1qty] {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Own class, not shared with .fd-drawer-close — the preview popup's close is a plain ✕ glyph at
   20px, not the drawer header's "Close ✕" text link, so this stays local to the preview only. */
.fd-preview-close-x[b-mfmalo1qty] {
    background: none;
    border: none;
    color: #9DB3E4;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.fd-preview-close-x:hover[b-mfmalo1qty] {
    color: #fff;
}

.fd-preview-body[b-mfmalo1qty] {
    flex: 1 1 auto;
    min-width: 0;
    background: #F2F5FC;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Zoom/pan (imageZoom.js) drives the image via its own transform — hidden here so that
       doesn't fight a native scrollbar on the container. */
    overflow: hidden;
}

.fd-preview-img[b-mfmalo1qty] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fd-preview-frame[b-mfmalo1qty] {
    width: 100%;
    height: 100%;
    border: none;
}

.fd-preview-msg[b-mfmalo1qty] {
    color: #7C8AAE;
    font-size: 13px;
}
/* /Pages/BTD/BTD_LiveTracker.razor.rz.scp.css */
/* Live Tracker v2 — full-bleed map, everything else floats over it as cards */

.lt-shell[b-rumi6fqhpd] {
    position: relative;
    height: calc(100vh - 90px);
    min-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    background: #E6EBF5;
}

.lt-map[b-rumi6fqhpd] {
    position: absolute;
    inset: 0;
}

/* ── Rail: collapsible truck list, top-left ─────────────────────────────── */
.lt-rail[b-rumi6fqhpd] {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 300px;
    max-width: calc(100% - 28px);
    max-height: calc(100% - 28px);
    z-index: 500;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #E1E7F4;
    border-radius: 13px;
    box-shadow: 0 10px 30px rgba(12, 30, 69, .16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width .22s ease;
}

.lt-rail.collapsed[b-rumi6fqhpd] {
    width: 192px;
}

.lt-rail-hd[b-rumi6fqhpd] {
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #EEF1F8;
    flex: 0 0 auto;
}

.lt-rail-title[b-rumi6fqhpd] {
    font-size: 13.5px;
    font-weight: 700;
}

.lt-rail-count[b-rumi6fqhpd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: #7C8AAE;
}

.lt-rail-toggle[b-rumi6fqhpd] {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: #EEF1F8;
    color: #5C6D96;
    font-size: 13px;
    cursor: pointer;
}

.lt-rail-toggle:hover[b-rumi6fqhpd] {
    background: #E1E7F4;
}

.lt-rail-body[b-rumi6fqhpd] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lt-rail-filters[b-rumi6fqhpd] {
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-bottom: 1px solid #EEF1F8;
}

.lt-input[b-rumi6fqhpd] {
    padding: 8px 11px;
    border: 1px solid #D7DFF0;
    border-radius: 8px;
    font-size: 12.5px;
    color: #12296B;
    outline: none;
    background: #fff;
}

.lt-input:focus[b-rumi6fqhpd] {
    border-color: #1B57D6;
}

.lt-chip-group[b-rumi6fqhpd] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.lt-fchip[b-rumi6fqhpd] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.lt-fchip:hover[b-rumi6fqhpd] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.lt-fchip.active[b-rumi6fqhpd] {
    background: #12296B;
    color: #fff;
    border-color: #12296B;
}

.lt-select-row[b-rumi6fqhpd] {
    display: flex;
    gap: 6px;
}

.lt-btn-all[b-rumi6fqhpd] {
    flex: 1 1 0;
    border: 1px solid #E1E7F4;
    background: #F7F9FE;
    color: #8A97B8;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.lt-btn-all.active[b-rumi6fqhpd] {
    border-color: #1B57D6;
    background: #1B57D6;
    color: #fff;
}

.lt-btn-outline[b-rumi6fqhpd] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.lt-btn-outline:hover[b-rumi6fqhpd] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.lt-rail-list[b-rumi6fqhpd] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: min(60vh, 520px);
}

.lt-item[b-rumi6fqhpd] {
    display: flex;
    gap: 9px;
    padding: 10px 13px;
    border-bottom: 1px solid #F4F6FC;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.lt-item:hover[b-rumi6fqhpd] {
    background: #F4F8FF;
}

.lt-item-check[b-rumi6fqhpd] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 2px;
    border: 1.5px solid #C3CBDE;
    border-radius: 5px;
    background: #fff;
    color: #fff;
    font-size: 10px;
    line-height: 13px;
    text-align: center;
    font-weight: 700;
}

.lt-item-top[b-rumi6fqhpd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.lt-item-plate[b-rumi6fqhpd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
}

.lt-item-state[b-rumi6fqhpd] {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

.lt-item-driver[b-rumi6fqhpd] {
    font-size: 11.5px;
    color: #12296B;
    margin-top: 1px;
}

.lt-item-route[b-rumi6fqhpd] {
    font-size: 10.5px;
    color: #8A97B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-item-progress[b-rumi6fqhpd] {
    height: 3px;
    border-radius: 2px;
    background: #EEF1F8;
    margin-top: 6px;
    overflow: hidden;
}

.lt-item-progress-fill[b-rumi6fqhpd] {
    height: 100%;
    border-radius: 2px;
}

.lt-rail-empty[b-rumi6fqhpd] {
    padding: 22px 14px;
    text-align: center;
    font-size: 11.5px;
    color: #8A97B8;
}

/* ── Stat pills, top-right ───────────────────────────────────────────────── */
.lt-stats[b-rumi6fqhpd] {
    position: absolute;
    /* Extra right offset clears the map's own zoom +/- control, which docks in this same
       top-right corner and would otherwise sit right underneath this panel. */
    right: 56px;
    top: 14px;
    z-index: 500;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 70px);
}

.lt-stat[b-rumi6fqhpd] {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #E1E7F4;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 6px 18px rgba(12, 30, 69, .12);
}

.lt-stat.danger[b-rumi6fqhpd] {
    border-color: #F3D9D9;
}

.lt-stat.dark[b-rumi6fqhpd] {
    background: #0C1E45;
    border-color: #0C1E45;
}

.lt-stat-lbl[b-rumi6fqhpd] {
    font-size: 9.5px;
    letter-spacing: .09em;
    color: #7C8AAE;
    font-weight: 700;
}

.lt-stat.danger .lt-stat-lbl[b-rumi6fqhpd] {
    color: #B24A4A;
}

.lt-stat.dark .lt-stat-lbl[b-rumi6fqhpd] {
    color: #7E93C4;
}

.lt-stat-val[b-rumi6fqhpd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 17px;
    font-weight: 600;
    color: #12296B;
}

.lt-stat.dark .lt-stat-val[b-rumi6fqhpd] {
    color: #fff;
}

/* ── Legend, bottom-left ─────────────────────────────────────────────────── */
.lt-legend[b-rumi6fqhpd] {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 500;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #E1E7F4;
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 11px;
    color: #5C6D96;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 6px 18px rgba(12, 30, 69, .12);
}

.lt-legend > div[b-rumi6fqhpd] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lt-legend-line[b-rumi6fqhpd] {
    width: 22px;
    height: 0;
    border-top: 3px solid #1B57D6;
    border-radius: 2px;
    display: inline-block;
}

.lt-legend-line.dashed[b-rumi6fqhpd] {
    border-top: 2px dashed #8A97B8;
}

.lt-legend-dot[b-rumi6fqhpd] {
    width: 11px;
    height: 11px;
    border: 2px solid #17A673;
    border-radius: 50%;
    display: inline-block;
}

/* ── Hint pill, bottom-center ────────────────────────────────────────────── */
.lt-hint[b-rumi6fqhpd] {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 500;
    background: #fff;
    border: 1px solid #E1E7F4;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(12, 30, 69, .12);
    white-space: nowrap;
    color: #12296B;
}

/* ── Dock: selected truck(s) info, bottom ───────────────────────────────── */
.lt-dock[b-rumi6fqhpd] {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 500;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #E1E7F4;
    border-radius: 13px;
    box-shadow: 0 12px 34px rgba(12, 30, 69, .18);
    overflow: hidden;
    max-height: 52%;
    display: flex;
    flex-direction: column;
    animation: dockIn-b-rumi6fqhpd .18s cubic-bezier(.2, .8, .3, 1);
}

@keyframes dockIn-b-rumi6fqhpd {
    from {
        transform: translateY(14px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.lt-dock-hd[b-rumi6fqhpd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #EEF1F8;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.lt-dock-dot[b-rumi6fqhpd] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lt-dock-title[b-rumi6fqhpd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.lt-dock-sub[b-rumi6fqhpd] {
    font-size: 12px;
    color: #5C6D96;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-tab[b-rumi6fqhpd] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.lt-tab.active[b-rumi6fqhpd] {
    background: #12296B;
    color: #fff;
    border-color: #12296B;
}

.lt-tab-trip[b-rumi6fqhpd] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #12296B;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.lt-tab-trip:hover[b-rumi6fqhpd] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.lt-dock-close[b-rumi6fqhpd] {
    border: none;
    background: none;
    color: #8A97B8;
    font-size: 13px;
    cursor: pointer;
    padding: 0 2px;
}

.lt-dock-close:hover[b-rumi6fqhpd] {
    color: #C23B3B;
}

.lt-dock-body[b-rumi6fqhpd] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.lt-metrics-grid[b-rumi6fqhpd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 1px;
    background: #EEF1F8;
}

.lt-metric[b-rumi6fqhpd] {
    background: #fff;
    padding: 11px 13px;
}

.lt-metric-lbl[b-rumi6fqhpd] {
    font-size: 9.5px;
    letter-spacing: .09em;
    color: #7C8AAE;
    font-weight: 700;
}

.lt-metric-val[b-rumi6fqhpd] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 17px;
    font-weight: 600;
    margin-top: 2px;
}

.lt-metric-sub[b-rumi6fqhpd] {
    font-size: 10.5px;
    color: #8A97B8;
}

.lt-table[b-rumi6fqhpd] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.lt-table th[b-rumi6fqhpd] {
    text-align: left;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: .08em;
    color: #7C8AAE;
    font-weight: 600;
    background: #F7F9FE;
    white-space: nowrap;
}

.lt-table td[b-rumi6fqhpd] {
    padding: 8px 10px;
    border-top: 1px solid #EEF1F8;
    color: #3A4A6B;
    white-space: nowrap;
}

.lt-table td:first-child[b-rumi6fqhpd],
.lt-table th:first-child[b-rumi6fqhpd] {
    padding-left: 14px;
}

.lt-table-dot[b-rumi6fqhpd] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
}
/* /Pages/BTD/BTD_TripOverview.razor.rz.scp.css */
/* Trip Overview — sidebar trip list + full single-trip record */

.tov-shell[b-xf7gc5dhzy] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: calc(100vh - 90px);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.tov-sidebar[b-xf7gc5dhzy] {
    width: 288px;
    flex: 0 0 288px;
    background: #fff;
    border: 1px solid #E1E7F4;
    border-radius: 12px 0 0 12px;
    border-right: none;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 14px;
    height: calc(100vh - 104px);
}

.tov-sidebar-hd[b-xf7gc5dhzy] {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #EEF1F8;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 0 0 auto;
}

.tov-sidebar-title-row[b-xf7gc5dhzy] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tov-sidebar-title[b-xf7gc5dhzy] {
    font-size: 14px;
    font-weight: 700;
}

.tov-sidebar-count[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #7C8AAE;
}

.tov-input[b-xf7gc5dhzy] {
    padding: 8px 11px;
    border: 1px solid #D7DFF0;
    border-radius: 8px;
    font-size: 12.5px;
    color: #12296B;
    outline: none;
    background: #fff;
}

.tov-input:focus[b-xf7gc5dhzy] {
    border-color: #1B57D6;
}

.tov-chip-group[b-xf7gc5dhzy] {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tov-chip[b-xf7gc5dhzy] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.tov-chip:hover[b-xf7gc5dhzy] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.tov-chip.active[b-xf7gc5dhzy] {
    background: #12296B;
    color: #fff;
    border-color: #12296B;
}

.tov-sidebar-list[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.tov-row[b-xf7gc5dhzy] {
    padding: 11px 14px;
    border-bottom: 1px solid #F4F6FC;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.tov-row:hover[b-xf7gc5dhzy] {
    background: #F4F8FF;
}

.tov-row.on[b-xf7gc5dhzy] {
    background: #F4F8FF;
}

.tov-row-top[b-xf7gc5dhzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tov-row-trip[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.tov-row-status[b-xf7gc5dhzy] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

.tov-row-route[b-xf7gc5dhzy] {
    font-size: 11.5px;
    color: #12296B;
    margin-top: 2px;
}

.tov-row-meta[b-xf7gc5dhzy] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #8A97B8;
    margin-top: 2px;
}

.tov-sidebar-empty[b-xf7gc5dhzy] {
    padding: 22px 14px;
    text-align: center;
    font-size: 11.5px;
    color: #8A97B8;
}

/* ── Main ─────────────────────────────────────────────────── */
.tov-main[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 20px 14px;
}

.tov-loading[b-xf7gc5dhzy] {
    padding: 60px 0;
    text-align: center;
    color: #8A97B8;
    font-size: 13px;
}

/* Header banner */
.tov-banner[b-xf7gc5dhzy] {
    background: #0C1E45;
    border-radius: 14px;
    padding: 18px 20px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.tov-banner-main[b-xf7gc5dhzy] {
    flex: 1 1 230px;
    min-width: 200px;
}

.tov-banner-top[b-xf7gc5dhzy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tov-banner-trip[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 22px;
    font-weight: 600;
}

.tov-banner-badge[b-xf7gc5dhzy] {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.tov-banner-route[b-xf7gc5dhzy] {
    font-size: 12.5px;
    color: #9DB3E4;
    margin-top: 4px;
}

.tov-banner-sub[b-xf7gc5dhzy] {
    font-size: 11.5px;
    color: #7E93C4;
    margin-top: 2px;
}

.tov-banner-tiles[b-xf7gc5dhzy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    flex: 2 1 380px;
}

.tov-banner-tile[b-xf7gc5dhzy] {
    background: #16305F;
    border-radius: 9px;
    padding: 9px 11px;
}

.tov-banner-tile-val[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
}

.tov-banner-tile-lbl[b-xf7gc5dhzy] {
    font-size: 9.5px;
    color: #7E93C4;
    letter-spacing: .08em;
}

.tov-banner-actions[b-xf7gc5dhzy] {
    flex: 0 0 auto;
}

.tov-btn-primary[b-xf7gc5dhzy] {
    padding: 9px 14px;
    border-radius: 9px;
    background: #1B57D6;
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tov-btn-primary:hover[b-xf7gc5dhzy] {
    background: #2E68E4;
}

.tov-btn-outline[b-xf7gc5dhzy] {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #12296B;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tov-btn-outline:hover:not(:disabled)[b-xf7gc5dhzy] {
    border-color: #1B57D6;
    color: #1B57D6;
}

/* Two-column card row */
.tov-2col[b-xf7gc5dhzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.tov-card[b-xf7gc5dhzy] {
    flex: 1 1 380px;
    min-width: 320px;
    background: #fff;
    border: 1px solid #E1E7F4;
    border-radius: 12px;
}

.tov-card-hd[b-xf7gc5dhzy] {
    padding: 13px 16px;
    border-bottom: 1px solid #EEF1F8;
    font-size: 13.5px;
    font-weight: 700;
}

.tov-card-hd-row[b-xf7gc5dhzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tov-doc-summary[b-xf7gc5dhzy] {
    font-size: 11.5px;
    font-weight: 400;
    color: #7C8AAE;
}

/* Route & legs stepper */
.tov-legs[b-xf7gc5dhzy] {
    padding: 14px 16px 4px;
}

.tov-leg-row[b-xf7gc5dhzy] {
    display: flex;
    gap: 12px;
}

.tov-leg-rail[b-xf7gc5dhzy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 14px;
}

.tov-leg-dot[b-xf7gc5dhzy] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 3px solid #D7DFF0;
    background: #fff;
    flex-shrink: 0;
}

.tov-leg-line[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    width: 2px;
    background: #EEF1F8;
    min-height: 22px;
}

.tov-leg-body[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    padding-bottom: 14px;
    min-width: 0;
}

.tov-leg-top[b-xf7gc5dhzy] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.tov-leg-name[b-xf7gc5dhzy] {
    font-size: 13px;
    font-weight: 600;
}

.tov-leg-time[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #5C6D96;
    white-space: nowrap;
}

.tov-leg-meta[b-xf7gc5dhzy] {
    font-size: 11.5px;
    color: #8A97B8;
    margin-top: 2px;
}

/* Audit timeline */
.tov-tl[b-xf7gc5dhzy] {
    padding: 6px 16px 12px;
}

.tov-tl-row[b-xf7gc5dhzy] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 8px 0;
    border-bottom: 1px solid #F6F8FD;
}

.tov-tl-dot[b-xf7gc5dhzy] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex: 0 0 9px;
}

.tov-tl-label[b-xf7gc5dhzy] {
    font-size: 12.5px;
    font-weight: 600;
}

.tov-tl-by[b-xf7gc5dhzy] {
    font-size: 11px;
    color: #8A97B8;
}

.tov-tl-time[b-xf7gc5dhzy] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #5C6D96;
    white-space: nowrap;
}

/* Documents by phase */
.tov-phases[b-xf7gc5dhzy] {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tov-phase-hd[b-xf7gc5dhzy] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.tov-phase-lbl[b-xf7gc5dhzy] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
}

.tov-phase-line[b-xf7gc5dhzy] {
    height: 1px;
    flex: 1 1 auto;
    background: #EEF1F8;
}

.tov-phase-count[b-xf7gc5dhzy] {
    font-size: 11px;
    color: #8A97B8;
}

/* One row per phase, never wraps — a phase with more files than fit across the width scrolls
   horizontally on its own instead of growing the whole section taller. */
.tov-doc-grid[b-xf7gc5dhzy] {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.tov-doc-card[b-xf7gc5dhzy] {
    flex: 0 0 190px;
    width: 190px;
    border: 1px solid #E7ECF8;
    border-radius: 10px;
    overflow: hidden;
    background: #FAFBFF;
}

.tov-doc-thumb[b-xf7gc5dhzy] {
    height: 80px;
    background: repeating-linear-gradient(135deg, #EEF1F8 0 8px, #E6EBF5 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    font-size: 24px;
}

.tov-doc-stamp[b-xf7gc5dhzy] {
    position: absolute;
    top: 7px;
    left: 7px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(12, 30, 69, .78);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
}

.tov-doc-info[b-xf7gc5dhzy] {
    padding: 9px 10px;
}

.tov-doc-name[b-xf7gc5dhzy] {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tov-doc-meta[b-xf7gc5dhzy] {
    font-size: 10.5px;
    color: #8A97B8;
    margin-top: 2px;
}

.tov-doc-view[b-xf7gc5dhzy] {
    width: 100%;
    margin-top: 8px;
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #1B57D6;
    font-size: 11px;
    font-weight: 600;
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
}

.tov-doc-view:hover[b-xf7gc5dhzy] {
    border-color: #1B57D6;
}

.tov-doc-empty[b-xf7gc5dhzy] {
    border: 1px dashed #D7DFF0;
    border-radius: 10px;
    padding: 26px 12px;
    text-align: center;
    font-size: 11.5px;
    color: #8A97B8;
}

/* Geofence event log table */
.tov-table[b-xf7gc5dhzy] {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 12.5px;
}

.tov-table th[b-xf7gc5dhzy] {
    text-align: left;
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: .08em;
    color: #7C8AAE;
    font-weight: 600;
    background: #F7F9FE;
    white-space: nowrap;
}

.tov-table td[b-xf7gc5dhzy] {
    padding: 9px 10px;
    border-top: 1px solid #EEF1F8;
    color: #3A4A6B;
    white-space: nowrap;
}

.tov-table td:first-child[b-xf7gc5dhzy],
.tov-table th:first-child[b-xf7gc5dhzy] {
    padding-left: 16px;
}

/* Driver & vehicle */
.tov-driver-block[b-xf7gc5dhzy] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tov-driver-row[b-xf7gc5dhzy] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.tov-driver-ava[b-xf7gc5dhzy] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EEF1F8;
    color: #12296B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.tov-driver-name[b-xf7gc5dhzy] {
    font-size: 13.5px;
    font-weight: 600;
}

.tov-driver-phone[b-xf7gc5dhzy] {
    font-size: 11.5px;
    color: #8A97B8;
    font-family: 'IBM Plex Mono', monospace;
}

.tov-compliance-row[b-xf7gc5dhzy] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid #F4F6FC;
    font-size: 12.5px;
}

.tov-compliance-k[b-xf7gc5dhzy] {
    color: #7C8AAE;
}

.tov-compliance-v[b-xf7gc5dhzy] {
    font-weight: 600;
}

/* Exceptions & notes */
.tov-notes[b-xf7gc5dhzy] {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tov-note[b-xf7gc5dhzy] {
    border: 1px solid;
    border-radius: 9px;
    padding: 10px 12px;
}

.tov-note-title[b-xf7gc5dhzy] {
    font-size: 12px;
    font-weight: 700;
}

.tov-note-body[b-xf7gc5dhzy] {
    font-size: 12px;
    color: #5C6D96;
    margin-top: 3px;
}

/* Document preview modal — same design/size/theme as Fleet Dashboard's preview (dark navy header,
   720px/80vh modal), just with a Download footer kept here. */
.tov-preview-backdrop[b-xf7gc5dhzy] {
    position: fixed;
    inset: 0;
    background: rgba(12, 30, 69, .6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.tov-preview-modal[b-xf7gc5dhzy] {
    width: 720px;
    max-width: 100%;
    height: 80vh;
    max-height: 800px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(12, 30, 69, .35);
    outline: none;
}

.tov-preview-hd[b-xf7gc5dhzy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #0C1E45;
    color: #fff;
}

.tov-preview-name[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tov-preview-close-x[b-xf7gc5dhzy] {
    background: none;
    border: none;
    color: #9DB3E4;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.tov-preview-close-x:hover[b-xf7gc5dhzy] {
    color: #fff;
}

.tov-preview-body[b-xf7gc5dhzy] {
    flex: 1 1 auto;
    min-width: 0;
    background: #F2F5FC;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Zoom/pan (imageZoom.js) drives the image via its own transform — hidden here so that
       doesn't fight a native scrollbar on the container. */
    overflow: hidden;
}

.tov-preview-img[b-xf7gc5dhzy] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tov-preview-frame[b-xf7gc5dhzy] {
    width: 100%;
    height: 100%;
    border: none;
}

.tov-preview-msg[b-xf7gc5dhzy] {
    color: #7C8AAE;
    font-size: 13px;
}

.tov-preview-ft[b-xf7gc5dhzy] {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid #EEF1F8;
    background: #FAFBFF;
    display: flex;
    gap: 8px;
}
/* /Pages/BTD/BTD_UsersList.razor.rz.scp.css */
/* BTD Users — top toolbar: icon + title + search box + Search/Clear/New, all one row */
.bu-toolbar[b-7eh8n0mt7t] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-bottom: 18px;
    overflow-x: auto;
}

.bu-toolbar-title[b-7eh8n0mt7t] {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.bu-toolbar-input[b-7eh8n0mt7t] {
    flex: 0 0 auto;
}

.bu-toolbar-actions[b-7eh8n0mt7t] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Grid toolbar — search box + fleet/status pill chips + New button, right above the grid */
.bu-input[b-7eh8n0mt7t] {
    padding: 8px 11px;
    border: 1px solid #D7DFF0;
    border-radius: 7px;
    font-size: 12.5px;
    color: #12296B;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.bu-input:focus[b-7eh8n0mt7t] {
    border-color: #1B57D6;
}

.bu-grid-toolbar[b-7eh8n0mt7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #EEF1F8;
}

.bu-grid-search-wrap[b-7eh8n0mt7t] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bu-grid-search[b-7eh8n0mt7t] {
    width: 220px;
}

.bu-icon-btn[b-7eh8n0mt7t] {
    min-width: 32px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.bu-chip-group[b-7eh8n0mt7t] {
    display: flex;
    gap: 6px;
}

.bu-chip[b-7eh8n0mt7t] {
    border: 1px solid #D7DFF0;
    background: #fff;
    color: #5C6D96;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}

.bu-chip:hover[b-7eh8n0mt7t] {
    border-color: #1B57D6;
    color: #1B57D6;
}

.bu-chip.active[b-7eh8n0mt7t] {
    background: #12296B;
    color: #fff;
    border-color: #12296B;
}

.bu-grid-toolbar-spacer[b-7eh8n0mt7t] {
    flex: 1 1 auto;
}

/* BTD Users — 6 KPI cards, matched to the D:\RosterProto\BBMS_BTD\export prototype */

.bu-stat-row[b-7eh8n0mt7t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 14px;
}

.bu-stat-card[b-7eh8n0mt7t] {
    background: #fff;
    border: 1px solid #E1E7F4;
    border-radius: 12px;
    padding: 13px 13px 12px;
    box-shadow: none;
}

.bu-stat-lbl[b-7eh8n0mt7t] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7C8AAE;
}

.bu-stat-val[b-7eh8n0mt7t] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 29px;
    font-weight: 600;
    line-height: 1;
    margin: 6px 0 8px;
    color: #12296B;
}

.bu-stat-sub[b-7eh8n0mt7t] {
    font-size: 10.5px;
    color: #8A97B8;
}

.bu-stat-split[b-7eh8n0mt7t] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3A4A6B;
    margin-bottom: 4px;
}

.bu-stat-split b[b-7eh8n0mt7t] {
    font-weight: 700;
}

.bu-dot-bafco[b-7eh8n0mt7t] {
    color: #1B57D6;
}

.bu-dot-3rd[b-7eh8n0mt7t] {
    color: #A7B7DE;
}

/* Per-card number colours */
.bu-stat-val.active[b-7eh8n0mt7t] {
    color: #0E7A54;
}

.bu-stat-val.warn[b-7eh8n0mt7t] {
    color: #B57608;
}

.bu-stat-val.danger[b-7eh8n0mt7t] {
    color: #C23B3B;
}

/* Alert cards — border + label tint */
.bu-stat-card.warn[b-7eh8n0mt7t] {
    border-color: #F1E2C4;
}

.bu-stat-card.warn .bu-stat-lbl[b-7eh8n0mt7t] {
    color: #B57608;
}

.bu-stat-card.danger[b-7eh8n0mt7t] {
    border-color: #F3D9D9;
}

.bu-stat-card.danger .bu-stat-lbl[b-7eh8n0mt7t] {
    color: #B24A4A;
}
/* /Shared/MainLayout.razor.rz.scp.css */