/* =================================================================
 * DRC TMS — Design Tokens & Component Styles
 * Single source of truth. Loaded AFTER bootstrap.min.css.
 * Never hardcode colours/spacing/radius in views — always use vars.
 * ================================================================= */

:root {
    /* BRAND */
    --brand: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-active: #1e40af;
    --brand-light: #dbeafe;
    --brand-border: #93c5fd;

    /* SIDEBAR */
    --sidebar-bg: #0f172a;
    --sidebar-bg-hover: #1e293b;
    --sidebar-bg-active: var(--brand);
    --sidebar-text: #f8fafc;
    --sidebar-text-muted: #94a3b8;
    --sidebar-icon: #64748b;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 64px;
    --sidebar-item-height: 40px;

    /* HEADER */
    --header-bg: #ffffff;
    --header-border: #e2e8f0;
    --header-height: 60px;

    /* PAGE */
    --page-bg: #f1f5f9;
    --page-padding: 24px;

    /* SURFACE */
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --surface-hover: #f8fafc;

    /* TEXT */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --text-disabled: #cbd5e1;
    --text-inverse: #ffffff;
    --text-link: var(--brand);

    /* BORDER */
    --border-light: #f1f5f9;
    --border-default: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-focus: var(--brand);

    /* TABLE */
    --tbl-header-bg: #f8fafc;
    --tbl-header-text: #64748b;
    --tbl-header-border: #e2e8f0;
    --tbl-row-bg: #ffffff;
    --tbl-row-border: #f1f5f9;
    --tbl-row-hover: #f8fafc;
    --tbl-row-selected: #eef2ff;
    --tbl-row-height: 36px;
    --tbl-font-size: 13px;
    --tbl-header-font-size: 11px;
    --tbl-cell-pad-x: 10px;
    --tbl-cell-pad-y: 7px;

    /* STATUS */
    --success: #22c55e;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;
    --neutral: #64748b;
    --neutral-bg: #f1f5f9;
    --neutral-text: #475569;
    --purple: #8b5cf6;
    --orange: #f97316;
    --teal: #14b8a6;

    /* INPUT */
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-border-focus: var(--brand);
    --input-text: #1e293b;
    --input-placeholder: #94a3b8;
    --input-height: 34px;
    --input-radius: 8px;
    --input-padding-x: 10px;
    --input-font-size: 13px;
    --input-label-size: 12px;
    --input-label-color: #374151;

    /* RADII */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-full: 9999px;

    /* SHADOWS */
    --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sh-lg: 0 10px 24px rgba(15, 23, 42, 0.12);
    --sh-xl: 0 20px 40px rgba(15, 23, 42, 0.16);

    /* TYPOGRAPHY */
    --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* DURATIONS */
    --dur-fast: 150ms;
    --dur-normal: 250ms;
    --dur-slow: 350ms;

    /* Z-INDEX */
    --z-sidebar: 100;
    --z-header: 200;
    --z-drawer: 500;
    --z-modal: 600;
    --z-toast: 700;
}

/* ───────────────────────── BASE ───────────────────────── */
html, body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;          /* kill page-wide horizontal scrollbar */
    max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ─────────────── BOOTSTRAP OVERRIDES ─────────────── */
.btn {
    border-radius: var(--r-md);
    font-weight: 500;
    font-size: 13px;
    height: var(--input-height);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--dur-fast);
    line-height: 1;
}
/* Strip Bootstrap's default focus / active box-shadow halos from every .btn —
   the colour change itself is enough feedback. Outline-none is intentional;
   :focus-visible would still be nice for keyboard users but the user prefers
   no shadow. */
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active,
.btn.show {
    box-shadow: none !important;
    outline: none !important;
}
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover  { background: var(--brand-hover);  border-color: var(--brand-hover);  color: #fff; }
.btn-primary:active { background: var(--brand-active); border-color: var(--brand-active); color: #fff; box-shadow: none; }
/* :focus alone (after click, drawer open) should not change the colour — only
   active (mouse held down) does. Without this, the button stays "darker" until
   you click somewhere else, which looks like a stuck active state. */
.btn-primary:focus:not(:active),
.btn-primary:focus-visible:not(:active) {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: none !important;
}

.btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-default);
    background: var(--surface-1);
}
.btn-outline-secondary:hover { background: var(--surface-hover); border-color: var(--border-medium); color: var(--text-primary); }

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }

.form-control, .form-select {
    height: var(--input-height);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: 0 var(--input-padding-x);
    font-size: var(--input-font-size);
    color: var(--input-text);
    background: var(--input-bg);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control::placeholder { color: var(--input-placeholder); }
.form-control:focus, .form-select:focus,
.form-control:focus-visible, .form-select:focus-visible {
    border-color: var(--input-border-focus);
    box-shadow: none !important;
    outline: 0;
}
textarea.form-control:focus, input.form-control:focus, select.form-select:focus { box-shadow: none !important; }
textarea.form-control { height: auto; padding: 10px 12px; min-height: 80px; }

.form-label {
    font-size: var(--input-label-size);
    font-weight: 500;
    color: var(--input-label-color);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.form-label.required::after { content: " *"; color: var(--danger); }
.form-text { color: var(--text-muted); font-size: 11px; }
.invalid-feedback { font-size: 11px; color: var(--danger); }
.lw-field-error { font-size: 11px; color: var(--danger); margin-top: 4px; line-height: 1.3; }

/* Required-field highlighting — make Bootstrap's .is-invalid visible on every
 * input flavour we use, plus propagate to the lw-search wrapper which sits in
 * front of the (hidden) underlying <select>. */
.form-control.is-invalid,
.form-select.is-invalid,
.lw-search-select.is-invalid > .lw-ss-input {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
    background-image: none !important;
}
.lw-search-select.is-invalid { border-radius: var(--r-sm); }

.input-group-text {
    background: var(--surface-2);
    border-color: var(--input-border);
    color: var(--text-muted);
    font-size: 13px;
}

/* ─── Drawer-form spacing rhythm (global polish across all modules) ─── */
.lw-drawer-scroll > .row + .row { margin-top: 14px; }
.lw-drawer-scroll > hr {
    margin: 22px 0 14px;
    opacity: 0.45;
}
.lw-drawer-scroll > h6 + .row,
.lw-drawer-scroll > h6 + hr { margin-top: 4px; }
.lw-drawer-scroll > h6 + hr + .row { margin-top: 4px; }
.lw-drawer-scroll > .bb-section-card + .bb-section-card,
.lw-drawer-scroll > .bb-section-card + .row,
.lw-drawer-scroll > .row + .bb-section-card { margin-top: 14px; }
.lw-drawer-scroll p.text-muted.small { margin-top: 6px; }

/* Global alignment polish — applies to ALL drawer forms across modules */
.lw-drawer-form .row > [class*="col-"] { display: flex; flex-direction: column; }
.lw-drawer-form .form-control,
.lw-drawer-form .form-select { width: 100%; }
.lw-drawer-form .input-group { width: 100%; flex-wrap: nowrap; }
/* Inside an input-group, the input must NOT be 100% wide — that would push the
   suffix/prefix to a new line. Bootstrap's convention is `width: 1%` + flex-grow. */
.lw-drawer-form .input-group > .form-control,
.lw-drawer-form .input-group > .form-select { flex: 1 1 auto; width: 1% !important; min-width: 0; }

/* Section title spacing inside drawers — uniform across modules */
.lw-drawer-scroll h6:not(:first-child) { margin-top: 22px; }
.lw-drawer-scroll h6.bb-section-title:not(:first-child) { margin-top: 22px; }

/* Dense table cells — kill double-padding on rows that contain block-level chips/badges */
.lw-table tbody td .cell-secondary { display: block; line-height: 1.3; }
.lw-table tbody td > .row-avatar { margin: -2px 0; }
.lw-table tbody td .badge-pill,
.lw-table tbody td .cust-status-pill { vertical-align: middle; }

/* Make sure the auto-status column in driver/customer tables doesn't squash the toggle */
.lw-table thead th:last-child { width: 130px; }
.lw-table thead th:nth-last-child(2) { white-space: nowrap; }

/* ───────────────────── LAYOUT ───────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}
.app-sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    z-index: var(--z-sidebar);
    transition: width var(--dur-normal), transform var(--dur-normal);
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
.app-sidebar .sidebar-item,
.app-sidebar .sidebar-logo,
.app-sidebar .sidebar-section-label,
.app-sidebar .sidebar-footer { min-width: 0; max-width: 100%; }
.app-sidebar .sidebar-item .label,
.app-sidebar .sidebar-logo .logo-text,
.app-sidebar .sidebar-footer .name,
.app-sidebar .sidebar-footer .role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app-sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.app-main {
    flex: 1 1 auto;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: 0;                /* allow flex children to shrink instead of pushing parent wider */
    max-width: calc(100vw - var(--sidebar-width));
    background: var(--page-bg);
    transition: margin-left var(--dur-normal), max-width var(--dur-normal);
    overflow-x: hidden;
}
body.sidebar-collapsed .app-main { max-width: calc(100vw - var(--sidebar-width-collapsed)); }
@media (max-width: 991.98px) {
    .app-main { max-width: 100vw; }
}
.app-content {
    padding: var(--page-padding);
    min-width: 0;
    max-width: 100%;
}
body.sidebar-collapsed .app-main { margin-left: var(--sidebar-width-collapsed); }

.app-header {
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    position: sticky; top: 0;
    z-index: var(--z-header);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--page-padding);
}
/* (.app-content rules consolidated above) */

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.show { transform: translateX(0); }
    .app-main { margin-left: 0; }
    body.sidebar-collapsed .app-main { margin-left: 0; }
}

/* ──────────────────── SIDEBAR ──────────────────── */
.sidebar-logo {
    height: var(--header-height);
    padding: 0 16px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #1e293b;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.sidebar-logo img,
.sidebar-logo .logo-img,
.app-header-logo .logo-img {
    width: 44px; height: 44px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 10px;
    background: #fff;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sidebar-logo .logo-badge,
.app-header-logo .logo-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #2563eb;
    background-image: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.sidebar-logo .logo-text { font-size: 14px; line-height: 1.2; letter-spacing: 0.01em; white-space: normal; overflow: hidden; }
.sidebar-logo .logo-text small { font-size: 11px; font-weight: 500; opacity: 0.8; }
.app-sidebar.collapsed .sidebar-logo .logo-text { display: none; }
.app-sidebar.collapsed .sidebar-section-label { display: none; }

.sidebar-section-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-text-muted);
    padding: 14px 16px 6px;
    font-weight: 600;
}
.sidebar-item {
    display: flex; align-items: center; gap: 10px;
    height: var(--sidebar-item-height);
    padding: 0 16px;
    color: var(--sidebar-text);
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background var(--dur-fast);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-item:hover { background: var(--sidebar-bg-hover); color: var(--sidebar-text); text-decoration: none; }
.sidebar-item.active { background: var(--sidebar-bg-active); color: #fff; }
.sidebar-item .icon {
    width: 18px; height: 18px;
    color: var(--sidebar-text-muted);
    flex-shrink: 0;
    stroke-width: 2;
}
.sidebar-item:hover .icon, .sidebar-item.active .icon { color: #fff; }
.sidebar-item .label { flex: 1; }
.app-sidebar.collapsed .sidebar-item .label { display: none; }

.sidebar-footer {
    border-top: 1px solid #1e293b;
    padding: 12px 16px;
    margin-top: auto;
    display: flex; align-items: center; gap: 10px;
}
.sidebar-footer .avatar {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    background: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 12px;
    flex-shrink: 0;
}
.sidebar-footer .meta { font-size: 12px; color: var(--sidebar-text); line-height: 1.3; overflow: hidden; }
.sidebar-footer .meta .name { font-weight: 600; }
.sidebar-footer .meta .role { color: var(--sidebar-text-muted); font-size: 11px; text-transform: capitalize; }
.sidebar-footer .logout {
    margin-left: auto; color: var(--sidebar-text-muted);
    cursor: pointer; flex-shrink: 0;
}
.sidebar-footer .logout:hover { color: var(--danger); }
.app-sidebar.collapsed .sidebar-footer .meta { display: none; }

/* ─────────────────── PAGE HEADER ─────────────────── */
.page-header { padding-bottom: 16px; }
.page-header .breadcrumb {
    font-size: 11px; color: var(--text-muted);
    margin: 0 0 4px;
    display: flex; align-items: center; gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.page-header h1 {
    font-size: 24px; font-weight: 700;
    margin: 0; color: var(--text-primary);
    line-height: 1.2;
}
.page-header .subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─────────────────── METRIC STRIP — fixed-width horizontal slider ─────────────────── */
.metric-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    margin-bottom: 4px;
    width: 100%;
    padding-bottom: 4px;
}
.metric-strip::-webkit-scrollbar { height: 4px; }
.metric-strip::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
/* Dashboard hero: same slider behavior. */
.metric-strip.metric-strip-hero { gap: 12px; }

.metric-card {
    position: relative;
    display: flex; align-items: stretch; gap: 0;
    padding: 0;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
    flex: 0 0 200px;
    scroll-snap-align: start;
}
.metric-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}
.metric-card.active {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-light), var(--sh-md);
}
.metric-card .accent {
    width: 4px;
    flex-shrink: 0;
    background: var(--neutral);
}
.metric-card .accent.success { background: linear-gradient(180deg, #4ade80, var(--success)); }
.metric-card .accent.warning { background: linear-gradient(180deg, #fbbf24, var(--warning)); }
.metric-card .accent.danger  { background: linear-gradient(180deg, #f87171, var(--danger)); }
.metric-card .accent.info    { background: linear-gradient(180deg, #60a5fa, var(--info)); }
.metric-card .accent.brand   { background: linear-gradient(180deg, #60a5fa, var(--brand)); }
.metric-card .accent.neutral { background: linear-gradient(180deg, #94a3b8, var(--neutral)); }

.metric-card > .flex-grow-1,
.metric-card > .body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.metric-card .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metric-card .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metric-card .text-muted.small.mt-1,
.metric-card .body > .text-muted {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .metric-strip { gap: 8px; }
    .metric-card { flex: 0 0 78%; max-width: 320px; }
    .metric-card .value { font-size: 18px; }
}

/* ─────────────────── FILTER CARD ───────────────────
 * Single panel that holds: an Export Results button (and optional More filters
 * toggle) at the top-right, then a row of LABELED filter fields, then a primary
 * Search button at the end. Used by every list page in the admin. */
.filter-card {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 12px 16px 16px;
    margin: 12px 0 0;
}
.filter-card-head {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-bottom: 12px;
}
.filter-card-body {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
}
.lw-filter-field {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 220px; min-width: 200px; max-width: 360px;
}
.lw-filter-field > label {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    margin: 0;
}
.lw-filter-field .form-control,
.lw-filter-field .form-select,
.lw-filter-field .lw-msel,
.lw-filter-field .drc-date-filter,
.lw-filter-field .lw-search-select { width: 100% !important; max-width: 100%; }
.lw-filter-field .drc-date-trigger { width: 100%; justify-content: flex-start; }
.lw-filter-field .drc-date-trigger > span:first-of-type { display: none; } /* hide the "Date" label inside since the field has its own label */
.lw-filter-actions { flex: 0 0 auto; min-width: 0; max-width: none; }
.lw-search-btn { padding: 8px 28px; min-width: 120px; }

/* Booking form — colour-differentiated From/To address cards.
   Pickup is green (origin), delivery is red (destination), each with its own
   icon. Soft tinted backgrounds so the two never get mixed up at a glance. */
.bk-address-card {
    border-radius: var(--r-md);
    padding: 14px 16px 4px;
    margin-top: 18px;
    border: 1px solid var(--border-default);
}
.bk-address-from  { background: #f0fdf4; border-color: #bbf7d0; }
.bk-address-to    { background: #fef2f2; border-color: #fecaca; }
.bk-address-route { background: #fffbeb; border-color: #fde68a; padding-bottom: 14px; margin-top: 24px; }
.bk-section.bk-section-from,
.bk-section.bk-section-to,
.bk-section.bk-section-route {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 0; padding-top: 0;
}
.bk-section.bk-section-from  { color: #16a34a; }
.bk-section.bk-section-to    { color: #ef4444; }
.bk-section.bk-section-route { color: #d97706; }
.bk-section-icon { width: 18px; height: 18px; }
.bk-section-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.bk-section-row .btn-sm { padding: 4px 10px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.bk-address-from .bk-add-stop {
    background: #16a34a; border-color: #16a34a; color: #fff;
}
.bk-address-from .bk-add-stop:hover,
.bk-address-from .bk-add-stop:focus {
    background: #15803d; border-color: #15803d; color: #fff;
}
.bk-address-to .bk-add-stop {
    background: #ef4444; border-color: #ef4444; color: #fff;
}
.bk-address-to .bk-add-stop:hover,
.bk-address-to .bk-add-stop:focus {
    background: #dc2626; border-color: #dc2626; color: #fff;
}
.bk-address-route .bk-add-contact {
    background: #d97706; border-color: #d97706; color: #fff;
}
.bk-address-route .bk-add-contact:hover,
.bk-address-route .bk-add-contact:focus {
    background: #b45309; border-color: #b45309; color: #fff;
}
.bk-stops-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bk-stop-card {
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    padding: 12px 14px;
    background: rgba(255,255,255,0.6);
}
/* When the Open-in-map button is hidden, the map link input is the last
   visible element in the input-group — restore its right-side border-radius
   so it doesn't look squared-off on the right. */
.input-group:has(> .bk-map-open[style*="display:none"]) > .bk-map-link,
.input-group:has(> .bk-map-open[style*="display: none"]) > .bk-map-link {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}
.bk-address-from .bk-stop-card { border-color: #86efac; background: rgba(255,255,255,0.7); }
.bk-address-to   .bk-stop-card { border-color: #fca5a5; background: rgba(255,255,255,0.7); }
.bk-stop-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.bk-stop-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.bk-address-from .bk-stop-title { color: #16a34a; }
.bk-address-to   .bk-stop-title { color: #ef4444; }
.bk-contact-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bk-contact-card {
    border: 1px dashed #fcd34d;
    border-radius: var(--r-md);
    padding: 12px 14px;
    background: rgba(255,255,255,0.7);
}
.bk-contact-card .bk-stop-title { color: #d97706; }

/* ─── Charge lines (Additions / Deductions on the Freight & Load tab) ─── */
.bk-charge-group { margin-top: 8px; }
.bk-charge-list  { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bk-charge-card  {
    border: 1px dashed #cbd5e1;
    border-radius: var(--r-md);
    padding: 10px 12px;
    background: #f8fafc;
}
[data-bk-charge-group="addition"]  .bk-charge-card .bk-stop-title { color: #16a34a; }
[data-bk-charge-group="deduction"] .bk-charge-card .bk-stop-title { color: #dc2626; }
[data-bk-charge-group="deduction"] .bk-charge-card { border-color: #fecaca; background: #fef2f2; }
.bk-charge-summary {
    position: sticky;
    bottom: 0;
    margin: 14px -14px -8px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(248,250,252,0.85), rgba(248,250,252,1));
    border-top: 1px solid #e2e8f0;
    backdrop-filter: blur(4px);
    z-index: 2;
}
.bk-charge-summary .text-muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.bk-charge-summary .fw-bold    { font-size: 14px; }

/* ─────────────────── GLOBAL POINTER-CURSOR ON CLICKABLES ───────────────────
 * Anywhere a span / div / icon acts as a click target (data-action,
 * data-bs-toggle, data-id with click behaviour, or one of the well-known
 * link-style classes used across modules) — show the hand cursor on hover.
 * Native <a>/<button>/<label> already get it; this fills in the gaps. */
[data-action],
[data-bs-toggle],
[data-bs-target],
[role="button"],
.cell-link,
.cell-hash,
.cell-primary[data-action],
.lw-row-num,
.row-check,
.row-toggle,
.kyc-pill-btn,
.metric-card,
.bk-tab,
.bk-pay-tab,
.cust-tab,
.vc-tab,
.lw-msel-toggle,
.lw-msel-option,
.lw-ss-item,
.dash-chip,
.dash-chip-select,
.drc-date-trigger,
.drc-quick a,
.lw-pages a,
.icon-btn,
.btn-icon-danger,
.lw-doc-card,
.bk-doc-card,
.cust-doc-card,
.drv-doc-card,
.kyc-doc-card,
.kyc-doc-row,
.lw-help,
.row-avatar .cell-link,
.cell-clickable,
.lw-search-select .lw-ss-input,
.bb-add-charge,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}
/* Disabled inputs/buttons should still show not-allowed regardless. */
[disabled], .disabled, [aria-disabled="true"] { cursor: not-allowed !important; }

/* When the Payment Against picker switches to a fallback type (advance,
   on_account, against_lr), the Transaction Reference field becomes the
   primary place to record the reference — emphasise it visually. */
.pi-emphasised {
    border-color: var(--brand) !important;
    background: #f0f9ff !important;
}

/* Common Export button used everywhere — list pages, dashboard panes, detail
   pages. Neutral white-with-grey-border style (no brand-blue), consistent
   font + icon size across the app. */
.lw-export-btn,
.lw-export-btn:focus,
.lw-export-btn:focus-visible {
    background: #fff !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-size: 13px !important;
    padding: 0 14px;
    height: 34px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
    text-decoration: none !important;
}
.lw-export-btn:hover {
    background: #f8fafc !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}
.lw-export-btn:active {
    background: #f1f5f9 !important;
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}
.lw-export-btn i,
.lw-export-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: inherit;
    flex-shrink: 0;
}
/* Smaller variant for dashboard panes etc. */
.lw-export-btn.btn-sm { height: 30px; font-size: 12px !important; padding: 0 12px; }
.lw-export-btn.btn-sm i, .lw-export-btn.btn-sm svg { width: 13px !important; height: 13px !important; }

/* ─────────────────── KYC DRAWER (Vehicle Owner) ─────────────────── */
.kyc-pill-btn {
    border: 0;
    cursor: pointer;
    transition: filter var(--dur-fast);
}
.kyc-pill-btn:hover { filter: brightness(0.94); text-decoration: none; }

.kyc-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.kyc-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kyc-meta-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 2px; }
.kyc-meta-value { font-size: 13px; color: var(--text-primary); }
.kyc-reject-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-md); padding: 10px 12px; }
.kyc-notes-box  { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 10px 12px; }

.kyc-doc-list { display: flex; flex-direction: column; gap: 10px; }
.kyc-doc-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 32px; align-items: center; gap: 12px; padding: 10px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); }
@media (max-width: 575.98px) { .kyc-doc-row { grid-template-columns: 1fr; row-gap: 6px; } }
.kyc-doc-label { font-size: 13px; font-weight: 600; }
.kyc-doc-thumb { max-width: 200px; max-height: 90px; border-radius: 6px; border: 1px solid var(--border-default); object-fit: cover; }
.kyc-doc-file  { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); text-decoration: none; }
.kyc-doc-file:hover { text-decoration: none; }
.kyc-doc-empty { color: var(--text-muted); font-size: 12px; font-style: italic; }
.kyc-doc-dl    { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); background: #fff; border-radius: var(--r-md); color: var(--text-muted); }
.kyc-doc-dl:hover { background: #f1f5f9; color: var(--text-primary); }
.kyc-doc-dl i  { width: 16px; height: 16px; }

.kyc-action-form .form-control.is-invalid { border-color: #ef4444; }

/* PAN / Aadhar number inputs reflect the owner's KYC state with a coloured
   outline. Green outline = verified, red outline = rejected, default border
   for pending. Driven by a `data-kyc-state` attribute set on the input. */
input[data-kyc-state="Verified"] { border-color: #16a34a !important; box-shadow: 0 0 0 1px rgba(22,163,74,0.15) inset; }
input[data-kyc-state="Rejected"] { border-color: #ef4444 !important; box-shadow: 0 0 0 1px rgba(239,68,68,0.15) inset; }

/* ─────────────────── DASHBOARD ─────────────────── */
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.dash-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: #fff; border: 1px solid var(--border-default);
    border-radius: 999px; font-size: 13px; color: var(--text-primary);
}
.dash-chip-select {
    appearance: none;
    padding: 6px 28px 6px 14px;
    background: #fff
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--border-default); border-radius: 999px;
    font-size: 13px; color: var(--text-primary); cursor: pointer;
}
.dash-chip-select:focus { outline: none; border-color: var(--brand); }
.dash-chip-date { cursor: pointer; padding: 4px 10px 4px 12px; gap: 6px; }
.dash-chip-date input[type="date"] {
    border: 0; background: transparent; padding: 2px 0; margin: 0;
    font-size: 13px; color: var(--text-primary); outline: none;
    font-family: inherit; min-width: 120px;
}
.dash-chip-sep { color: var(--text-muted); font-size: 13px; padding: 0 2px; user-select: none; }
.dash-chip-date input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.dash-chip-date input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.dash-chip-clear {
    border: 0; background: #f1f5f9; color: var(--text-muted);
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.dash-chip-clear:hover { background: #ef4444; color: #fff; }

.metric-strip.dash-hero .metric-card { flex: 0 0 minmax(220px, 1fr); }
.metric-strip.dash-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.metric-strip.dash-hero .metric-card .label { font-size: 11px; }
.metric-strip.dash-hero .metric-card .value { font-size: 26px; font-weight: 700; }

.dash-donut-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; pointer-events: none;
}
.dash-donut-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.dash-donut-lbl { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

.lw-section h6 {
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-primary);
}

/* ─────────────────── FILTER TOOLBAR (action row + filter row inside one card) ─────────────────── */
.filter-toolbar {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 10px 12px 12px;
    margin: 12px 0 0;
    display: flex; flex-direction: column; gap: 10px;
}
.filter-actionbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0;
}
.filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 0;
}
.filter-bar .search-input { flex: 1; min-width: 200px; max-width: 320px; }
/* Soft separator line between the action row and the filter row */
.filter-toolbar > .filter-actionbar { padding-bottom: 10px; border-bottom: 1px dashed var(--border-default); }
.filter-pill {
    height: var(--input-height);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--surface-1);
    font-size: 13px; color: var(--text-primary);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, border-color .12s, color .12s, transform .05s;
    text-decoration: none;
}
.filter-pill:hover    { background: var(--surface-hover); border-color: var(--border-medium); text-decoration: none; }
.filter-pill:focus,
.filter-pill:focus-visible {
    outline: none;
    background: var(--surface-hover);
    border-color: var(--border-medium);
    box-shadow: none;
}
.filter-pill:active   { background: var(--surface-2, #e2e8f0); border-color: var(--border-medium); transform: translateY(1px); }
.filter-pill.active   { background: var(--brand-light); border-color: var(--brand); color: var(--brand-active); font-weight: 600; }
.filter-pill .icon    { width: 14px; height: 14px; }

/* ──────────────────── TABLE ──────────────────── */
.lw-table-wrap {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    overflow-x: auto;             /* table scrolls internally — never the page */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.lw-table-wrap::-webkit-scrollbar { height: 8px; }
.lw-table-wrap::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
.lw-table-wrap::-webkit-scrollbar-track { background: transparent; }
.lw-table {
    width: 100%;
    min-width: 720px;             /* keeps columns readable; container scrolls if narrower */
    border-collapse: collapse;
    font-size: var(--tbl-font-size);
    margin: 0;
}
.lw-table thead th {
    background: var(--tbl-header-bg);
    color: var(--tbl-header-text);
    font-size: var(--tbl-header-font-size);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
    border-bottom: 2px solid var(--tbl-header-border);
    text-align: left;
    white-space: nowrap;
}
/* Headers respect the column's align flag (.text-end / .text-center / .text-start)
   that the shell stamps on the <th>. Without these explicit overrides the base
   `text-align: left` above wins because both rules have the same specificity. */
.lw-table thead th.text-end    { text-align: right  !important; }
.lw-table thead th.text-center { text-align: center !important; }
.lw-table thead th.text-start  { text-align: left   !important; }
.lw-table thead th             { user-select: none; }
.lw-table tbody td {
    padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x);
    border-bottom: 1px solid var(--tbl-row-border);
    vertical-align: middle;
    color: var(--text-primary);
}
.lw-table tbody tr {
    background: var(--tbl-row-bg);
    transition: background var(--dur-fast);
}
.lw-table tbody tr:hover { background: var(--tbl-row-hover); }
.lw-table tbody tr.selected {
    background: var(--tbl-row-selected);
    box-shadow: inset 3px 0 0 var(--brand);
}
.lw-table tbody tr:last-child td { border-bottom: 0; }
.lw-table .num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.lw-table .link {
    color: var(--brand);
    cursor: pointer;
    font-weight: 600;
}
.lw-table .link:hover { text-decoration: none; }
.lw-table .row-actions {
    display: inline-flex; align-items: center; gap: 8px;
}
.lw-table .row-actions .icon-btn {
    width: 28px; height: 28px;
    border-radius: var(--r-md);
    border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dur-fast);
}
.lw-table .row-actions .icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.lw-table .row-actions .icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger-text); }
.lw-table .row-actions .icon-btn .icon { width: 16px; height: 16px; }

/* Global .icon-btn — flat, slate, borderless. Same look whether the icon
 * lives inside a list table's row-actions cell, a portal table, the booking
 * detail Bills tab, or anywhere else. Without this, plain <button class="icon-btn">
 * elements inherit Bootstrap's button border + focus ring and look boxed
 * (especially the trash button next to plain <a> icons). */
button.icon-btn,
a.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 0; background: transparent;
    color: var(--text-muted);
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast);
    outline: none; box-shadow: none;
    line-height: 1;
}
button.icon-btn:hover,
a.icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
button.icon-btn:focus,
button.icon-btn:focus-visible,
a.icon-btn:focus,
a.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
button.icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
button.icon-btn i,
a.icon-btn i { width: 16px; height: 16px; }

/* ───────────────────── BADGES ───────────────────── */
.badge-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 11px; font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.4;
}
.badge-pill.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.badge-pill.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.badge-pill.danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger); }
.badge-pill.info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info); }
.badge-pill.neutral { background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--neutral); }
.badge-pill.brand   { background: var(--brand-light); color: var(--brand-active); border-color: var(--brand); }

/* Inline editable status select — looks like a badge-pill but is a real <select> */
select.inline-status-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='currentColor' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
    padding-left: 10px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    height: auto;
    min-height: 22px;
    transition: filter .15s;
}
select.inline-status-select:hover { filter: brightness(.97); }
select.inline-status-select:focus { outline: 2px solid var(--brand-light); outline-offset: 1px; }
select.inline-status-select:disabled { opacity: .55; cursor: wait; }

/* ───────────────── OFFCANVAS DRAWER ───────────────── */
.offcanvas { border-left: 1px solid var(--border-default); }
.offcanvas.lw-drawer { width: 720px; max-width: 100vw; }
.offcanvas.lw-drawer-sm { width: 480px; max-width: 100vw; }
.offcanvas-header {
    height: 56px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-1);
    padding: 0 16px;
}
.offcanvas-title { font-size: 15px; font-weight: 600; }
.offcanvas-body { background: var(--surface-2); padding: 0; }

.lw-tabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border-default);
    padding: 0 16px;
    background: var(--surface-1);
    position: sticky; top: 0; z-index: 1;
}
.lw-tabs .tab {
    padding: 12px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border: 0; background: transparent;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.lw-tabs .tab:hover { color: var(--text-primary); }
.lw-tabs .tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: 600;
}
.lw-tab-panes { padding: 16px; }
.lw-tab-pane { display: none; }
.lw-tab-pane.active { display: block; }

/* Drawer detail rows */
.lw-detail-grid {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 8px 16px;
    font-size: 13px;
}
@media (max-width: 575.98px) { .lw-detail-grid { grid-template-columns: 1fr; gap: 2px 0; } }
.lw-detail-grid dt { color: var(--text-muted); font-weight: 500; }
.lw-detail-grid dd { color: var(--text-primary); margin: 0; word-break: break-word; }

.lw-section {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 12px;
}
.lw-section h6 {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 12px;
}

/* ───────────────────── TOASTS ───────────────────── */
.toast-container {
    position: fixed; top: 16px; right: 16px;
    z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 8px;
}
.lw-toast {
    width: 360px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--neutral);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: 12px 14px;
    display: flex; gap: 10px;
    animation: lw-toast-in 200ms ease-out;
}
.lw-toast.success { border-left-color: var(--success); }
.lw-toast.warning { border-left-color: var(--warning); }
.lw-toast.danger  { border-left-color: var(--danger); }
.lw-toast.info    { border-left-color: var(--info); }
.lw-toast .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.lw-toast.success .icon { color: var(--success); }
.lw-toast.warning .icon { color: var(--warning); }
.lw-toast.danger  .icon { color: var(--danger); }
.lw-toast.info    .icon { color: var(--info); }
.lw-toast .body { flex: 1; min-width: 0; }
.lw-toast .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.lw-toast .desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
.lw-toast .close-btn {
    border: 0; background: transparent;
    color: var(--text-muted); cursor: pointer;
    padding: 0; line-height: 1;
}

@keyframes lw-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ──────────────────── SKELETON ──────────────────── */
@keyframes shine {
    0%   { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px);
    background-size: 200px;
    animation: shine 1.5s infinite linear;
    border-radius: var(--r-sm);
    color: transparent !important;
    user-select: none;
}

/* ─────────────────── PAGINATION ─────────────────── */
.lw-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    flex-wrap: wrap;
    gap: 12px;
}
.lw-pagination .info { font-size: 12px; color: var(--text-muted); }
.lw-pagination .pages { display: inline-flex; gap: 4px; }
.lw-pagination .page-btn {
    min-width: 32px; height: 32px;
    padding: 0 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}
.lw-pagination .page-btn:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-medium); }
.lw-pagination .page-btn.active {
    background: var(--brand); color: #fff; border-color: var(--brand);
}
.lw-pagination .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lw-pagination .per-page { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.lw-pagination .per-page select { width: auto; height: 30px; padding: 0 28px 0 10px; font-size: 12px; }

/* ───────────── BULK ACTION BAR ───────────── */
.lw-bulk-bar {
    position: fixed; bottom: 16px; left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
    transition: transform var(--dur-normal);
    z-index: 400;
}
.lw-bulk-bar.show { transform: translateX(-50%) translateY(0); }
.lw-bulk-bar .count {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
}

/* ──────────────────── MODAL ──────────────────── */
.modal-content {
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
}
.modal-header {
    border-bottom: 1px solid var(--border-default);
    padding: 14px 20px;
}
.modal-title { font-size: 15px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border-default); padding: 14px 20px; gap: 8px; }

/* ──────────────────── HEADER UTILS ──────────────────── */
.app-header .header-search {
    width: 320px; max-width: 40vw;
}
.app-header .header-actions {
    display: flex; align-items: center; gap: 12px;
}
.app-header .icon-btn {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
    position: relative;
}
.app-header .icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.app-header .icon-btn .dot {
    position: absolute; top: 8px; right: 9px;
    width: 6px; height: 6px;
    background: var(--danger);
    border-radius: var(--r-full);
    border: 1.5px solid #fff;
}
.app-header .header-avatar {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
}

/* ──────────────────── UTILITIES ──────────────────── */
.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.lw-divider { height: 1px; background: var(--border-default); margin: 12px 0; }
.lw-empty {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted); font-size: 13px;
}
.lw-empty .icon { width: 32px; height: 32px; margin: 0 auto 8px; opacity: 0.5; }

/* Mobile sidebar toggle (header) */
.sidebar-mobile-toggle {
    display: none;
    width: 36px; height: 36px;
    border: 0; background: transparent;
    color: var(--text-secondary);
    border-radius: var(--r-md);
    align-items: center; justify-content: center;
}
@media (max-width: 991.98px) {
    .sidebar-mobile-toggle { display: inline-flex; }
}
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 99;
}

/* ─────────────────── FORM DRAWER ─────────────────── */
.lw-drawer-form     { width: 520px !important; max-width: 100vw; }
.lw-drawer-confirm  { width: 380px !important; max-width: 100vw; }
.lw-drawer-detail   { width: 640px !important; max-width: 100vw; }
.lw-drawer-tabbed   { width: 860px !important; max-width: 100vw; }
@media (max-width: 575.98px) {
    .lw-drawer-form, .lw-drawer-confirm, .lw-drawer-detail, .lw-drawer-tabbed { width: 100vw !important; }
}

/* ─────────── Tabbed booking drawer ─────────── */
/* Tabbed booking drawer — fix flex-column scroll inside Bootstrap offcanvas */
.lw-drawer-tabbed > form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lw-drawer-tabbed .lw-drawer-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.lw-drawer-tabbed .lw-drawer-footer { flex: 0 0 auto; }

.bk-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-default);
    padding: 0 20px;
    background: var(--surface-subtle, #fafbfc);
    overflow-x: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}
.bk-tabs::-webkit-scrollbar { height: 4px; }
.bk-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast);
    pointer-events: auto;
    user-select: none;
    z-index: 3;
    position: relative;
}
.bk-tab:hover  { color: var(--text-primary); }
.bk-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.bk-panes      { padding: 16px 20px; }
.bk-pane       { display: none; }
.bk-pane.active { display: block; }
.bk-section {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 22px 0 12px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    /* No underline / divider — was causing the labels of the next row to
     * read as if they sat *on* the heading line. */
}
.bk-section:first-child { margin-top: 0; }
.bk-pane .bk-section + .row { margin-top: 4px; }
.bk-counter { display: block; margin-top: 2px; font-size: 11px; }

/* ─────────────── Tracking pane (two-column form + timeline) ───────────────
 * Layout: form column on the left, timeline column on the right (Bootstrap
 * row-col split). Stacks on small screens. The styling tokens (button colour,
 * info callout, timeline rendering) match the rest of the app. */
.bk-track-row { gap: 0; }
.bk-track-form { padding-right: 24px; }
.bk-track-side { padding-left: 24px; border-left: 1px solid var(--border-default); }
@media (max-width: 991.98px) {
    .bk-track-form { padding-right: 0; padding-bottom: 16px; }
    .bk-track-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-default); padding-top: 16px; }
}
.bk-track-heading {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 600;
    margin: 0 0 12px;
}
.bk-track-form .form-label    { font-size: 11px; }
.bk-track-form .form-control  { font-size: 13px; }
.bk-track-form textarea.form-control { resize: vertical; min-height: 56px; }
.bk-track-form .bk-track-add:disabled { opacity: 0.6; cursor: wait; }

/* Native date/datetime inputs — pin the calendar / clock icon to the RIGHT
 * edge of the input. Chrome's flex on <input> is unreliable, so we hide
 * the native indicator visually and paint our own SVG icon at right via
 * background-image. The native indicator stays as an invisible overlay
 * that the click handler still triggers (preserves the OS picker). */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
    position: relative;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 34px;
}
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
input[type="time"].form-control {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator,
input[type="month"].form-control::-webkit-calendar-picker-indicator,
input[type="week"].form-control::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 100%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Info callout — soft blue, rounded, info icon */
.bk-track-callout {
    margin-top: 14px; padding: 10px 14px;
    background: var(--brand-light); color: var(--brand-active);
    border: 1px solid var(--brand-border); border-radius: var(--r-md);
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
}
.bk-track-callout-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); }
.bk-track-callout strong { color: var(--brand-active); }

/* Timeline list (right column) */
.bk-track-timeline {
    margin: 0; padding: 0; list-style: none;
}
.bk-track-entry {
    position: relative;
    display: grid; grid-template-columns: 28px 1fr; gap: 12px;
    padding: 10px 0;
}
/* Vertical connector line between entries */
.bk-track-entry:not(:last-child)::before {
    content: ""; position: absolute;
    left: 13px; top: 28px; bottom: -10px;
    width: 2px; background: var(--border-default);
}
.bk-track-pin {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--brand-light); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bk-track-pin svg, .bk-track-pin i { width: 14px; height: 14px; }
.bk-track-body { padding-top: 4px; }
.bk-track-body .bk-track-loc {
    display: block; font-weight: 600; font-size: 13px;
    color: var(--text-primary); line-height: 1.3;
}
.bk-track-body .bk-track-when {
    display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.bk-track-body .bk-track-note {
    margin-top: 6px; font-size: 12.5px; color: var(--text-primary);
    line-height: 1.45; white-space: pre-wrap;
}

/* Empty state */
.bk-track-empty {
    list-style: none;
    text-align: center; padding: 28px 16px;
    color: var(--text-muted);
}
.bk-track-empty-icon {
    width: 32px; height: 32px;
    color: var(--text-subtle, #cbd5e1);
    display: inline-block; margin-bottom: 8px;
}
.bk-track-empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.bk-track-empty-sub   { font-size: 12.5px; margin-top: 2px; }

/* ─────────────── Booking Bills form ─────────────── */
.bb-drawer { width: 760px !important; max-width: 100vw; }
@media (max-width: 575.98px) { .bb-drawer { width: 100vw !important; } }
.bb-section-card {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: #f8fafc;
}
.bb-section-title {
    display: inline-flex; align-items: center; gap: 8px;
    color: #2563eb; font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}
.bb-section-title i { width: 16px; height: 16px; color: #2563eb; }
.bb-charges {
    display: flex; flex-direction: column; gap: 8px;
}
.bb-charge-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 32px;
    gap: 10px;
    align-items: center;
}
@media (max-width: 575.98px) {
    .bb-charge-row { grid-template-columns: 28px minmax(0, 1fr) 32px; row-gap: 6px; }
    .bb-charge-row > .bb-charge-amount { grid-column: 2 / 4; }
}
.bb-charge-row .form-select,
.bb-charge-row .form-control { height: 38px; }

/* Bucket chip on each charge/deduction row — green "+" for charges, red "−"
   for deductions. Updates live as the user picks an option from the grouped
   dropdown, so the row's identity is unmistakable at a glance. */
.po-bucket-chip {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e2e8f0; color: #94a3b8;
    border-radius: 50%;
    font-weight: 700; font-size: 16px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.po-bucket-chip--charge    { background: #dcfce7; color: #16a34a; }
.po-bucket-chip--deduction { background: #fee2e2; color: #ef4444; }
.btn-icon-danger {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--dur-fast);
}
.btn-icon-danger:hover { background: rgba(239, 68, 68, 0.12); }
.btn-icon-danger i { width: 22px; height: 22px; }
.bb-totals-divider { margin: 16px 0 8px; opacity: 0.5; }
.bb-label-paid { color: #16a34a; font-weight: 600; }
.bb-label-due  { color: #ef4444; font-weight: 600; }
.bb-upload-row { margin-top: 18px; }
/* "+ Add Item" inside the Charges & Deductions section — pinned to brand
   blue so it matches every other primary action. The previous cyan #06b6d4
   shade clashed with the rest of the form. */
.bb-add-charge,
.bb-add-charge:focus,
.bb-add-charge:focus-visible {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.bb-add-charge:hover  { background: var(--brand-hover)  !important; border-color: var(--brand-hover)  !important; color: #fff !important; }
.bb-add-charge:active { background: var(--brand-active) !important; border-color: var(--brand-active) !important; color: #fff !important; }

/* S.No counter for any table that wants auto-numbered rows */
.lw-table tbody { counter-reset: lw-row; }
.lw-table tbody tr { counter-increment: lw-row; }
.lw-table .lw-row-num::before {
    content: counter(lw-row, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Two-line cell — primary text + dim secondary line */
.cell-primary { display: block; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.cell-secondary { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Avatar with initials — used in driver row */
.row-avatar {
    display: inline-flex; align-items: center; gap: 10px;
}
.row-avatar .avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.row-avatar .avatar-circle.bg-pic { background-size: cover; background-position: center; color: transparent; }
.avatar-circle.bg-pic { background-size: cover; background-position: center; color: transparent; }

/* Link-style cell (blue, hover underline) */
.cell-link { color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: none; }
.cell-link:hover { text-decoration: none; color: #1d4ed8; }

/* Hashed booking-id badge — `# DRC-99201` */
.cell-hash {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; color: var(--text-primary);
    cursor: pointer;
}
.cell-hash:hover { color: var(--brand); }
.cell-hash:hover::before { background: rgba(13, 110, 253, 0.18); }
/* Any span with data-action acting as a click target → hand cursor */
.lw-table tbody td span[data-action] { cursor: pointer; }
.cell-hash::before {
    content: "#";
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: rgba(13, 110, 253, 0.1);
    color: var(--brand);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Bold currency — green (paid), red (due/expense), neutral (total) */
.money-bold       { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.money-bold.green { color: #16a34a; }
.money-bold.red   { color: #ef4444; }

/* Toggle switch (driver Active toggle in row) */
.row-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.row-toggle input { display: none; }
.row-toggle .toggle-track {
    position: relative;
    width: 36px; height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background var(--dur-fast);
}
.row-toggle .toggle-track::after {
    content: "";
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--dur-fast);
}
.row-toggle input:checked + .toggle-track { background: var(--brand); }
.row-toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.row-toggle .toggle-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.row-toggle.is-loading { opacity: 0.6; pointer-events: none; }

/* Staff branch-access checkbox grid */
.staff-branch-grid {
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 14px;
    background: #f8fafc;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}
@media (max-width: 575.98px) { .staff-branch-grid { grid-template-columns: 1fr; } }
.staff-branch-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; cursor: pointer;
    margin: 0;
}
.staff-branch-check input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--brand);
}
.staff-branch-note {
    grid-column: 1 / -1;
    color: var(--text-muted); font-size: 11px;
    margin: 0; padding-top: 4px; border-top: 1px dashed var(--border-default);
    display: inline-flex; align-items: center; gap: 6px;
}

/* Settings page — left rail + right panes */
.settings-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
}
@media (max-width: 767.98px) { .settings-shell { grid-template-columns: 1fr; } }
.settings-rail {
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 4px;
    height: fit-content;
}
.rail-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 0; background: transparent;
    text-align: left; cursor: pointer;
    font-size: 13px; color: var(--text-muted);
    border-radius: var(--r-md);
    transition: all var(--dur-fast);
    border-bottom: 2px solid transparent;
}
.rail-tab i { width: 16px; height: 16px; }
.rail-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.rail-tab.active {
    color: var(--brand); font-weight: 600;
    background: rgba(13, 110, 253, 0.06);
    border-bottom-color: var(--brand);
}
.settings-panes {
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    padding: 20px;
    min-height: 400px;
}
.settings-pane { display: none; }
.settings-pane.active { display: block; }

/* Vehicle Config sub-tabs */
.vc-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 18px;
    overflow-x: auto;
}
.vc-tab {
    appearance: none; border: 0; background: transparent;
    padding: 10px 16px;
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.vc-tab:hover { color: var(--text-primary); }
.vc-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.vc-pane { display: none; }
.vc-pane.active { display: block; }

/* Master tables — clean look */
.master-table thead th {
    color: var(--text-muted); font-size: 11px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.master-table tbody tr:hover { background: var(--surface-hover); }

/* Compact pill chip used in row cells (e.g. Primary Branch) */
.branch-chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    font-size: 12px; font-weight: 500;
    background: #fff;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ─────────────────── Customer Detail page ─────────────────── */
.cust-detail-shell { max-width: 1280px; margin: 0 auto; }
.cust-detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 8px 4px 18px;
}
.cust-breadcrumb { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.cust-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.cust-breadcrumb a:hover { color: var(--brand); }
.cust-breadcrumb i { width: 14px; height: 14px; }
.cust-breadcrumb span { color: var(--text-primary); font-weight: 500; }
.cust-detail-title { font-size: 28px; font-weight: 700; margin: 4px 0 6px 0; line-height: 1.2; }
.cust-detail-subtitle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.cust-detail-subtitle .dot-sep { color: var(--text-muted); }
/* KYC action / status button (Verify KYC + KYC Verified). Outline-style for
   both states — transparent background, slate border + text. Override
   Bootstrap's .btn-info defaults so the colour stays consistent through
   focus/active/disabled states. */
.cust-edit-btn,
.cust-edit-btn.btn-info,
.cust-edit-btn:focus,
.cust-edit-btn:focus-visible,
.cust-edit-btn.show,
.cust-edit-btn.disabled,
.cust-edit-btn:disabled {
    background-color: transparent !important;
    border: 1px solid #334155 !important;
    color: #334155 !important;
    font-weight: 500;
    padding: 8px 16px;
    box-shadow: none !important;
}
.cust-edit-btn:hover:not(:disabled) {
    background-color: #f1f5f9 !important;
    border-color: #1e293b !important;
    color: #1e293b !important;
}
.cust-edit-btn:active:not(:disabled) {
    background-color: #e2e8f0 !important;
    border-color: #0f172a !important;
    color: #0f172a !important;
}
.cust-edit-btn:disabled { opacity: 0.7; cursor: default; }

/* KYC button — colour variants tied to the owner's KYC state.
   Verified → green outline. Pending / Rejected → red outline. */
.cust-edit-btn.cust-edit-btn--green,
.cust-edit-btn.cust-edit-btn--green:focus,
.cust-edit-btn.cust-edit-btn--green:focus-visible,
.cust-edit-btn.cust-edit-btn--green:disabled {
    border-color: #16a34a !important;
    color: #16a34a !important;
    background-color: transparent !important;
}
.cust-edit-btn.cust-edit-btn--green:hover:not(:disabled) {
    background-color: #f0fdf4 !important;
    border-color: #15803d !important;
    color: #15803d !important;
}
.cust-edit-btn.cust-edit-btn--green:active:not(:disabled) {
    background-color: #dcfce7 !important;
    border-color: #166534 !important;
    color: #166534 !important;
}

.cust-edit-btn.cust-edit-btn--red,
.cust-edit-btn.cust-edit-btn--red:focus,
.cust-edit-btn.cust-edit-btn--red:focus-visible,
.cust-edit-btn.cust-edit-btn--red:disabled {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background-color: transparent !important;
}
.cust-edit-btn.cust-edit-btn--red:hover:not(:disabled) {
    background-color: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
.cust-edit-btn.cust-edit-btn--red:active:not(:disabled) {
    background-color: #fee2e2 !important;
    border-color: #b91c1c !important;
    color: #b91c1c !important;
}

.cust-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    border: 1px solid;
}
.cust-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cust-status-active   { color: #16a34a; background: #dcfce7; border-color: #bbf7d0; }
.cust-status-inactive { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.cust-pill-delivered  { color: #16a34a; background: #dcfce7; border-color: #bbf7d0; }
.cust-pill-transit    { color: #2563eb; background: #dbeafe; border-color: #bfdbfe; }
.cust-pill-active     { color: #2563eb; background: #dbeafe; border-color: #bfdbfe; }
.cust-pill-rejected   { color: #ef4444; background: #fee2e2; border-color: #fecaca; }
.cust-pill-draft      { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }

.cust-detail-body {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px;
}
@media (max-width: 991.98px) { .cust-detail-body { grid-template-columns: minmax(0, 1fr); } }

/* LEFT card */
.cust-profile-card {
    background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
    padding: 22px; height: fit-content;
}
.cust-profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.cust-profile-avatar {
    width: 48px; height: 48px; border-radius: 10px;
    background: #dbeafe; color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.cust-profile-avatar i { width: 22px; height: 22px; }
.cust-profile-name { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.cust-profile-code { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cust-profile-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cust-profile-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border-default);
}
.cust-profile-list li:last-child { border-bottom: 0; }
.cust-profile-list li > span { color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.cust-profile-list li > strong { color: var(--text-primary); font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }
.cust-outstanding {
    margin-top: 18px; padding: 14px;
    background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md);
}
.cust-outstanding-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.cust-outstanding-amount { font-size: 22px; font-weight: 700; color: #2563eb; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.cust-pending-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: #fef3c7; color: #b45309; border: 1px solid #fde68a;
    font-size: 12px; font-weight: 500;
}
.cust-pending-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cust-pending-badge.cust-pending-clear { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }

/* RIGHT card */
.cust-tabs-card {
    background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
    min-width: 0;
    /* Note: NO overflow:hidden — date-filter popovers and other dropdowns
     * inside tab panes need to escape this card. The rounded corners are
     * handled by the children themselves (tabs row + tables). */
}
.cust-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--border-default);
    padding: 0 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cust-tab {
    appearance: none; border: 0; background: transparent;
    padding: 14px 18px;
    font-size: 14px; font-weight: 500; color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.cust-tab:hover { color: var(--text-primary); }
.cust-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.cust-tab-count {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
    border-radius: 999px; background: #eff6ff; color: #2563eb;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.cust-tab.active .cust-tab-count { background: #2563eb; color: #fff; }
.cust-pane { display: none; padding: 22px; min-width: 0; }
.cust-pane.active { display: block; }
/* Mirrors the .bk-tabs / .bk-pane responsive tweaks for the shared
 * .cust-tabs scaffold used by customer/vo/driver/vehicle/bill detail pages. */
@media (max-width: 1199.98px) {
    .cust-tabs { padding: 0 8px; }
    .cust-tab  { padding: 12px 12px; font-size: 13px; }
}
@media (max-width: 767.98px) {
    .cust-pane { padding: 14px; }
    .bill-tabs-card .cust-pane { padding: 14px; }
    .cust-tabs { padding: 0 4px; }
    .cust-tab  { padding: 11px 9px; font-size: 12.5px; }
}
.cust-pane-heading { font-size: 16px; font-weight: 700; margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.cust-info-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-bottom: 22px;
}
@media (max-width: 767.98px) { .cust-info-grid { grid-template-columns: 1fr; } }
.cust-info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.cust-info-value { font-size: 14px; font-weight: 500; color: var(--text-primary); word-break: break-word; }

.cust-account-summary { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 16px 18px; }
.cust-account-summary-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; }
.cust-account-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 767.98px) { .cust-account-summary-grid { grid-template-columns: 1fr; } }
.cust-account-summary-label { font-size: 13px; color: #2563eb; margin-bottom: 4px; }
.cust-account-summary-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.cust-account-summary-value.red   { color: #ef4444; }
.cust-account-summary-value.green { color: #16a34a; }

/* History tables */
.cust-history-table thead th { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.cust-history-table tbody td { font-size: 13px; padding: 14px 12px; }
/* Document expiry pills used in Linked Vehicles tab on Vehicle Owner detail.
   Quick visual cue: red for expired, amber for due-soon (≤30 days). */
.vo-exp-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.vo-exp-pill.vo-exp-expired { background: #fee2e2; color: #b91c1c; }
.vo-exp-pill.vo-exp-soon    { background: #fef3c7; color: #b45309; }
/* "+ N more completed" disclosure inside Vehicles Used → Bookings cell.
   Uses native <details>/<summary>; styled to look like a small text link. */
.cust-bk-more { margin-top: 4px; }
.cust-bk-more > summary {
    list-style: none; cursor: pointer; user-select: none;
    color: #2563eb; font-size: 11.5px; font-weight: 500;
    padding: 2px 0; display: inline-block;
}
.cust-bk-more > summary::-webkit-details-marker { display: none; }
.cust-bk-more > summary::before { content: "▸ "; color: #2563eb; }
.cust-bk-more[open] > summary::before { content: "▾ "; }
.cust-bk-more > summary:hover { text-decoration: none; }

.cust-search { position: relative; max-width: 280px; }
.cust-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); }
.cust-search .form-control { padding-left: 32px; }

/* Documents grid */
.cust-docs-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 767.98px) { .cust-docs-grid { grid-template-columns: 1fr; } }
.cust-doc-card {
    display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center;
    padding: 14px; background: #f8fafc;
    border: 1px solid var(--border-default); border-radius: var(--r-md);
    text-decoration: none !important; color: inherit;
    transition: background var(--dur-fast);
}
.cust-doc-card:hover { background: #f1f5f9; color: inherit; text-decoration: none !important; }
.cust-doc-card .cust-doc-name,
.cust-doc-card .cust-doc-sub { text-decoration: none !important; }
.cust-doc-icon { width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.cust-doc-icon i { width: 22px; height: 22px; }
.cust-doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-doc-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-doc-date { font-size: 12px; color: var(--text-muted); }
.cust-doc-download { color: var(--text-muted); }
.cust-doc-download i { width: 18px; height: 18px; }

/* ─────────────────── Booking Detail page ─────────────────── */
.bk-detail-shell { max-width: 1400px; margin: 0 auto; min-width: 0; }
@media (min-width: 1700px) { .bk-detail-shell { max-width: 1600px; } }
.bk-detail-header { padding: 8px 4px 18px; }
.bk-breadcrumb { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.bk-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.bk-breadcrumb a:hover { color: var(--brand); }
.bk-breadcrumb i { width: 14px; height: 14px; }
.bk-breadcrumb span { color: var(--text-primary); font-weight: 500; }
.bk-detail-title { font-size: 28px; font-weight: 700; margin: 4px 0 8px 0; line-height: 1.2; }
.bk-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.bk-detail-meta strong { color: var(--text-primary); font-weight: 700; }
.bk-detail-meta .dot-sep { color: var(--text-muted); }
.bk-meta-arrow { width: 16px; height: 16px; color: #2563eb; }

.bk-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; border: 1px solid;
}
.bk-status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bk-pill-active    { color: #2563eb; background: #dbeafe; border-color: #bfdbfe; }
.bk-pill-transit   { color: #2563eb; background: #dbeafe; border-color: #bfdbfe; }
.bk-pill-delivered { color: #16a34a; background: #dcfce7; border-color: #bbf7d0; }
.bk-pill-rejected  { color: #ef4444; background: #fee2e2; border-color: #fecaca; }
.bk-pill-draft     { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }

.bk-detail-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
@media (max-width: 991.98px) { .bk-detail-body { grid-template-columns: 1fr; } }

/* Left card */
.bk-profile-card {
    background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
    padding: 22px; height: fit-content;
}
.bk-profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); }
.bk-profile-avatar { width: 48px; height: 48px; border-radius: 10px; background: #dbeafe; color: #2563eb; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bk-profile-avatar i { width: 22px; height: 22px; }
.bk-profile-name { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.bk-profile-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bk-profile-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bk-profile-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.bk-profile-list li:last-child { border-bottom: 0; }
.bk-profile-list li > span { color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; flex: 0 0 auto; }
.bk-profile-list li > strong, .bk-profile-list li > a, .bk-profile-list li > em { color: var(--text-primary); font-weight: 600; text-align: right; max-width: 65%; word-break: break-word; }
.bk-profile-list li > em.bk-remark { font-style: italic; font-weight: 400; color: var(--text-muted); }
.bk-profile-list-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); }

/* Right tabs card */
.bk-tabs-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); min-width: 0; overflow: hidden; }
.bk-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); padding: 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fafbfc; border-radius: var(--r-md) var(--r-md) 0 0; }
.bk-tab { appearance: none; border: 0; background: transparent; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast), border-color var(--dur-fast); }
.bk-tab:hover { color: var(--text-primary); }
.bk-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.bk-pane { display: none; padding: 22px; min-width: 0; }
.bk-pane.active { display: block; }
/* Tighten tab padding at narrow widths so all 6 tabs fit instead of clipping
 * the trailing "Vehicle & Driver" label. Horizontal scroll still works as a
 * fallback for very tight layouts. */
@media (max-width: 1199.98px) {
    .bk-tabs { padding: 0 8px; }
    .bk-tab  { padding: 12px 12px; font-size: 13px; }
}
@media (max-width: 767.98px) {
    .bk-pane { padding: 14px; }
    .bk-tabs { padding: 0 4px; }
    .bk-tab  { padding: 11px 9px; font-size: 12.5px; }
}
.bk-pane-heading { font-size: 16px; font-weight: 700; margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }

/* Route */
.bk-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 991.98px) { .bk-route-grid { grid-template-columns: 1fr; } }
.bk-route-card { border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 16px; }
.bk-route-head { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 14px; }
.bk-route-head i { width: 14px; height: 14px; color: #b45309; }
.bk-route-leg { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.bk-leg-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.bk-leg-dot.blue { background: #2563eb; }
.bk-leg-dot.green { background: #16a34a; }
.bk-leg-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.bk-leg-address { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-top: 2px; }
.bk-leg-city { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.bk-map-link-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px;
    padding: 3px 9px;
    background: #eff6ff; color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.bk-map-link-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.bk-map-link-btn i { width: 12px; height: 12px; }
.bk-route-distance {
    margin: 8px 0 8px 22px;
    display: inline-block;
    padding: 4px 10px;
    background: #eff6ff; color: #2563eb;
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border-left: 2px dashed #cbd5e1;
}
.bk-progress { padding: 4px; }
.bk-progress-head { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.bk-progress-head i { width: 14px; height: 14px; color: #2563eb; }
.bk-progress-list { list-style: none; margin: 0; padding: 0; }
.bk-progress-step { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 6px 0 18px; }
.bk-progress-step:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: 0; width: 2px; background: #e2e8f0; }
.bk-progress-step.done:not(:last-child)::after { background: #2563eb; }
.bk-step-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; margin-top: 4px; }
.bk-progress-step.done .bk-step-dot     { background: #2563eb; }
.bk-progress-step.current .bk-step-dot  { background: #fff; border: 2px solid #2563eb; }
.bk-progress-step.pending .bk-step-dot  { background: #fff; border: 2px solid #cbd5e1; }
.bk-step-title { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.bk-progress-step.pending .bk-step-title { color: var(--text-muted); }
.bk-step-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bk-step-when { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Freight */
.bk-freight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 767.98px) { .bk-freight-grid { grid-template-columns: 1fr; } }
.bk-freight-tile { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 14px 16px; }
.bk-tile-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 6px; }
.bk-tile-value { font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bk-tile-value.blue  { color: #2563eb; }
.bk-tile-value.plain { font-weight: 600; }

.bk-pl-card { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 16px; }
.bk-pl-title { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.bk-pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: center; }
.bk-pl-lbl { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.bk-pl-val { font-size: 18px; font-weight: 700; }
.bk-pl-val.red   { color: #ef4444; }
.bk-pl-val.green { color: #16a34a; }

/* Payments
 * Layout philosophy: the In/Out rail sits as a horizontal pill bar above the
 * table at virtually every viewport (≤1599.98px) — keeps the 4-column
 * transactions table at full pane width so AMOUNT is never clipped. Only the
 * widest desktops (≥1600px) get the original side-rail look. */
/* Profit summary strip in the Payments tab — 3 small tiles showing
   freight vs hire vs profit/loss for at-a-glance trip health. */
.bk-profit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.bk-profit-tile { background: #f8fafc; border: 1px solid var(--border-default); border-radius: 8px; padding: 12px 14px; }
.bk-profit-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.bk-profit-val { font-size: 18px; font-weight: 700; }
.bk-profit-val.blue  { color: #2563eb; }
.bk-profit-val.green { color: #16a34a; }
.bk-profit-val.red   { color: #ef4444; }
@media (max-width: 575.98px) { .bk-profit-strip { grid-template-columns: 1fr; } }
.bk-pay-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bk-pay-rail { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; }
.bk-pay-tab  { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--r-md); }
.bk-pay-tab.active { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; font-weight: 600; }
@media (min-width: 1600px) {
    .bk-pay-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
    .bk-pay-rail { flex-direction: column; gap: 4px; flex-wrap: nowrap; }
    .bk-pay-tab  { border: 0; padding: 12px; }
    .bk-pay-tab.active { background: #f1f5f9; border: 0; color: var(--text-primary); }
}
.bk-pay-content { min-width: 0; }
.bk-pay-pane    { min-width: 0; }
/* Scroll wrapper for the pay table — at very narrow viewports the table can
 * exceed the pane width (e.g. when long ref numbers or amounts force min
 * cell widths). The wrapper turns into a horizontal-scroll surface instead
 * of pushing the whole card off-canvas. */
.bk-pay-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Load-board interests panel — shown above the tabs row on the admin booking
 * detail page when the booking is unallocated and owners have shown interest. */
.bk-interests-panel { padding: 14px 18px; border-bottom: 1px solid var(--border-default); background: #fffbeb; }
.bk-interests-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bk-interests-head h6 { font-size: 13px; font-weight: 700; color: #92400e; }
.bk-interests-count { display: inline-block; margin-left: 6px; padding: 2px 8px; background: #d97706; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; }
.bk-interest-card { display: flex; align-items: stretch; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid #fde68a; border-radius: 8px; margin-bottom: 8px; }
.bk-interest-card.accepted { border-color: #86efac; background: #f0fdf4; }
.bk-interest-card.rejected { border-color: var(--border-default); background: #f8fafc; opacity: 0.7; }
.bk-interest-card:last-child { margin-bottom: 0; }
.bk-interest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.bk-interest-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-interest-owner strong { font-size: 14px; color: var(--text-primary); }
.bk-interest-contact { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bk-interest-vehicle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #eff6ff; border-radius: 6px; align-self: flex-start; }
.bk-interest-note { padding: 4px 8px; background: #f8fafc; border-radius: 6px; color: var(--text-muted); }
.bk-interest-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .bk-interest-card { flex-direction: column; }
    .bk-interest-actions { flex-direction: row; }
}

/* Bills tab — header row with title and Generate button */
.bk-bills-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
/* Bills table — 7 columns: BILL ID · DATE · TOTAL · PAID · DUE · STATUS · ACTIONS.
 * KIND column removed (bill kind is implied by the BB-/DB-/VB- code prefix).
 * Override the .bk-pay-table fixed-layout / ellipsis-truncation inheritance so
 * amounts and bill codes show in full; the wrap (.bk-pay-table-wrap) already
 * provides horizontal scroll if the row gets wider than the pane. */
/* Each rule below is forced with !important because the broader
 * `.bk-pay-table` rules later in the file (table-layout: fixed +
 * tbody td text-overflow: ellipsis) have equal specificity and would
 * otherwise win in source order, re-clipping the bill codes. */
table.bk-bills-table { table-layout: auto !important; min-width: 980px; width: 100%; }
table.bk-bills-table thead th,
table.bk-bills-table tbody td,
table.bk-bills-table tfoot td {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding-left: 10px;
    padding-right: 10px;
}
table.bk-bills-table thead th:nth-child(1),
table.bk-bills-table tbody td:nth-child(1),
table.bk-bills-table tfoot td:nth-child(1) { width: 170px !important; min-width: 170px !important; }   /* BILL ID */
table.bk-bills-table .cell-link {
    overflow: visible !important; text-overflow: clip !important;
    max-width: none !important; display: inline-block;
}
table.bk-bills-table thead th:nth-child(2),
table.bk-bills-table tbody td:nth-child(2) { width: 120px !important; min-width: 120px !important; }   /* DATE */
table.bk-bills-table thead th:nth-child(3),
table.bk-bills-table tbody td:nth-child(3),
table.bk-bills-table thead th:nth-child(4),
table.bk-bills-table tbody td:nth-child(4),
table.bk-bills-table thead th:nth-child(5),
table.bk-bills-table tbody td:nth-child(5) { width: 120px !important; min-width: 120px !important; }   /* TOTAL / PAID / DUE */
table.bk-bills-table thead th:nth-child(6),
table.bk-bills-table tbody td:nth-child(6) { width: 110px !important; min-width: 110px !important; }   /* STATUS */
table.bk-bills-table thead th:nth-child(7),
table.bk-bills-table tbody td:nth-child(7) { width: 200px !important; min-width: 200px !important; }   /* ACTIONS */
.bk-bills-table tfoot td { border-top: 2px solid #cbd5e1; background: #f8fafc; }
/* Action icons — same flat treatment whether they're <a> or <button>.
 * Strips Bootstrap's default button border / focus ring so the trash
 * icon matches the eye / print icons next to it. */
.bk-bills-table .icon-btn {
    padding: 4px 6px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    line-height: 1;
}
.bk-bills-table .icon-btn:focus,
.bk-bills-table .icon-btn:focus-visible { outline: none; box-shadow: none; }
.bk-bills-table .icon-btn:hover { background: rgba(0,0,0,.04); border-radius: 4px; }
.bk-bills-table .icon-btn i { width: 16px; height: 16px; vertical-align: middle; }
/* Tab count chip — shows N bills next to the tab label */
.bk-tab-count {
    display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px;
    border-radius: 999px; background: #eff6ff; color: #2563eb;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.bk-tab.active .bk-tab-count { background: #2563eb; color: #fff; }
/* Plain rendered <table>, with fixed layout + explicit column widths so the
   AMOUNT column is guaranteed to be visible inside the pane. */
.bk-pay-table { width: 100%; table-layout: fixed; }
.bk-pay-table thead th:nth-child(1) { width: 18%; }   /* DATE */
.bk-pay-table thead th:nth-child(2) { width: 28%; }   /* REF NO. / ITEM */
.bk-pay-table thead th:nth-child(3) { width: 22%; }   /* MODE / DETAILS */
.bk-pay-table thead th:nth-child(4) { width: 32%; text-align: right; }  /* AMOUNT */
.bk-pay-table tbody td,
.bk-pay-table tfoot td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-pay-table tbody td.text-end,
.bk-pay-table tfoot td.text-end { white-space: nowrap; }
.bk-pay-tab { appearance: none; border: 0; background: transparent; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-primary); border-radius: var(--r-md); text-align: left; }
.bk-pay-tab:hover { background: #f8fafc; }
.bk-pay-tab.active { background: #f1f5f9; font-weight: 600; }
.bk-pay-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.bk-pay-icon i { width: 14px; height: 14px; }
.bk-pay-icon.green { color: #16a34a; border: 1.5px solid #16a34a; }
.bk-pay-icon.red   { color: #ef4444; border: 1.5px solid #ef4444; }
.bk-pay-pane { display: none; }
.bk-pay-pane.active { display: block; }
.bk-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bk-pay-head h6 { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.bk-pay-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.bk-pay-pill-green { color: #16a34a; background: #dcfce7; border-color: #bbf7d0; }
.bk-pay-pill-red   { color: #ef4444; background: #fee2e2; border-color: #fecaca; }
.bk-pay-table thead th { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; padding: 10px 12px; }
.bk-pay-table tbody td { font-size: 13px; padding: 11px 12px; }
.bk-pay-table tfoot td { font-size: 13px; padding: 11px 12px; border-top: 1px solid var(--border-default); }
.bk-item-chip { display: inline-block; padding: 3px 10px; border: 1px solid var(--border-default); background: #fff; border-radius: var(--r-md); font-size: 12px; }

/* Vehicle & Driver */
.bk-vd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767.98px) { .bk-vd-grid { grid-template-columns: 1fr; } }
.bk-vd-card { border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 18px; background: #f8fafc; }
.bk-vd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-default); }
.bk-vd-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-weight: 700; font-size: 14px; }
.bk-vd-icon.vehicle { background: #dbeafe; color: #2563eb; }
.bk-vd-icon.driver  { background: var(--brand); color: #fff; }
.bk-vd-icon i { width: 22px; height: 22px; }
.bk-vd-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.bk-vd-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.bk-vd-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.bk-vd-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.bk-vd-list li:last-child { border-bottom: 0; }
.bk-vd-list li > span { color: var(--text-muted); }
.bk-vd-list li > strong { font-weight: 600; }

/* Tracking */
.bk-track-list { list-style: none; margin: 0; padding: 0; }
.bk-track-li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 14px; padding: 0 0 22px 4px; }
.bk-track-li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: #e2e8f0; }
.bk-track-li.done:not(:last-child)::after { background: #2563eb; }
.bk-track-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; }
.bk-track-li.done .bk-track-dot    { background: #2563eb; }
.bk-track-li.current .bk-track-dot { background: #fff; border: 2px solid #2563eb; }
.bk-track-li.pending .bk-track-dot { background: #fff; border: 2px solid #cbd5e1; }
.bk-track-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.bk-track-li.pending .bk-track-title { color: var(--text-muted); }
.bk-track-when { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: inline-flex; align-items: center; gap: 8px; }
.bk-current-pill { background: #dbeafe; color: #2563eb; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }

/* Documents */
.bk-docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 767.98px) { .bk-docs-grid { grid-template-columns: 1fr; } }
.bk-doc-card { display: grid; grid-template-columns: 44px 1fr 32px; gap: 12px; align-items: center; padding: 14px 16px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); text-decoration: none !important; color: inherit; transition: background var(--dur-fast); }
.bk-doc-card:hover { background: #f1f5f9; color: inherit; text-decoration: none !important; }
.bk-doc-card .bk-doc-name, .bk-doc-card .bk-doc-sub { text-decoration: none !important; }
.bk-doc-icon { width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.bk-doc-icon i { width: 22px; height: 22px; }
.bk-doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-doc-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.bk-doc-sub { font-size: 12px; color: var(--text-muted); }
.bk-doc-download { width: 32px; height: 32px; border: 1px solid var(--border-default); background: #fff; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.bk-doc-download i { width: 16px; height: 16px; }

/* ─────────────────── Driver Detail page ─────────────────── */
.drv-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 4px 18px; }
.drv-pills { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.drv-pill-onduty   { color: #2563eb; background: #dbeafe; border-color: #bfdbfe; }
.drv-pill-transit  { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.drv-action-row { display: flex; gap: 10px; align-items: center; }
.drv-deactivate-btn { color: #ef4444; border-color: #ef4444; background: transparent; padding: 8px 16px; }
.drv-deactivate-btn:hover { background: #fee2e2; color: #ef4444; border-color: #ef4444; }
/* Edit Vehicle / Edit Driver primary button — pinned blue across every
   interaction state (Bootstrap's .btn-info focus/active blues used to flash
   a different cyan; these overrides keep the colour coherent). */
.drv-edit-btn,
.drv-edit-btn.btn-info,
.drv-edit-btn:focus,
.drv-edit-btn:focus-visible,
.drv-edit-btn.show {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: none !important;
}
.drv-edit-btn:hover  { background-color: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.drv-edit-btn:active { background-color: #1e40af !important; border-color: #1e40af !important; color: #fff !important; }
/* Unified Edit button on every detail page — matches the primary "Add"
   button across the app (same brand-blue pill, same height, same icon size).
   The text differs per module ("Edit Customer", "Edit Vehicle", etc.). */
.lw-edit-btn,
.lw-edit-btn:focus,
.lw-edit-btn:focus-visible,
.lw-edit-btn.show {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: none !important;
}
.lw-edit-btn:hover  { background-color: var(--brand-hover)  !important; border-color: var(--brand-hover)  !important; color: #fff !important; }
.lw-edit-btn:active { background-color: var(--brand-active) !important; border-color: var(--brand-active) !important; color: #fff !important; }

.drv-detail-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
@media (max-width: 991.98px) { .drv-detail-body { grid-template-columns: minmax(0, 1fr); } }
.drv-profile-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 22px; height: fit-content; }
.drv-profile-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); margin-bottom: 4px; }
.drv-avatar { width: 48px; height: 48px; background: var(--brand); color: #fff; border-radius: 50%; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; }
.drv-vehicle-card { margin-top: 18px; padding: 14px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); }
.drv-vehicle-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.drv-vehicle-number { font-size: 18px; font-weight: 700; color: #2563eb; margin-top: 4px; }

.drv-right { display: flex; flex-direction: column; gap: 16px; }
.drv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575.98px) { .drv-metrics { grid-template-columns: 1fr; } }
.drv-metric-tile { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 22px 24px; }
.drv-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.drv-metric-value { font-size: 32px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }
.drv-metric-value.green { color: #16a34a; }
.drv-metric-value.blue  { color: #2563eb; }
.drv-metric-value.amber { color: #f59e0b; }

.drv-docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 767.98px) { .drv-docs-grid { grid-template-columns: 1fr; } }
.drv-doc-card  { display: grid; grid-template-columns: 44px 1fr 36px; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--r-md); background: #fff; text-decoration: none; color: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.drv-doc-card:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10); transform: translateY(-1px); color: inherit; }
.drv-doc-card.is-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); }
.drv-doc-icon { width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.drv-doc-icon i { width: 22px; height: 22px; }
.drv-doc-meta { min-width: 0; }
.drv-doc-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.drv-doc-sub  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Eye icon button on the right of each doc card. Visually says "click to view". */
.drv-doc-view-icon {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); border: 1px solid var(--border-default); background: #fff;
    color: #2563eb; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.drv-doc-view-icon i { width: 16px; height: 16px; }
.drv-doc-card:hover .drv-doc-view-icon { background: #eff6ff; border-color: #93c5fd; }
.drv-doc-view-icon.disabled { color: var(--text-muted); background: #f8fafc; }

/* In-tab filter widget (search + status + date + Clear/Export) — used on
 * detail pages inside a tab pane. At narrow viewports we force every child
 * to flex-wrap onto its own row so the row never pushes its parent card
 * wider than the viewport. The inline width:160px on the status select is
 * overridden with !important since it comes from a template attribute. */
@media (max-width: 767.98px) {
    .tab-table-filter { gap: 8px; }
    .tab-table-filter .search-input { min-width: 0; max-width: 100%; flex: 1 1 100%; }
    .tab-table-filter .form-select  { width: 100% !important; flex: 1 1 100%; }
    .tab-table-filter .drc-date-filter { flex: 1 1 100%; }
    .tab-table-filter .drc-date-trigger { width: 100%; justify-content: flex-start; }
    .tab-table-filter .ms-auto { margin-left: 0 !important; width: 100%; justify-content: flex-end; }
}

/* Recent-trips filter row inside the driver detail page — same .filter-bar
   styling as list pages, with the search-icon sitting INSIDE the input. */
.drv-trip-filter { margin-bottom: 14px; }
.drv-trip-filter .search-input { flex: 1; min-width: 200px; max-width: 300px; }
.drv-trip-filter .lw-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.drv-trip-filter .search-input .form-control { padding-left: 32px; }

/* ─────────────────── Booking Bill Detail page ─────────────────── */
.bill-detail-sub { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; flex-wrap: wrap; margin-top: 4px; }
.bill-detail-sub strong { color: var(--text-primary); }

.bill-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 991.98px) { .bill-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .bill-metrics { grid-template-columns: 1fr; } }
.bill-metric-tile { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 18px 22px; }
.bill-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.bill-metric-value { font-size: 28px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.bill-metric-value.green { color: #16a34a; }
.bill-metric-value.red   { color: #ef4444; }
.bill-metric-value.amber { color: #f59e0b; }
.bill-metric-value.blue  { color: #2563eb; }

.bill-tabs-card .cust-pane { padding: 22px 26px; }
.bill-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bill-pane-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: 0.5px; }
.bill-pane-title i { width: 14px; height: 14px; color: var(--text-muted); }
.bill-pane-title.green { color: #16a34a; }
.bill-pane-title.green i { color: #16a34a; }
.bill-pane-title.red   { color: #ef4444; }
.bill-pane-title.red i { color: #ef4444; }
.bill-pane-title.amber { color: #f59e0b; }
.bill-pane-title.amber i { color: #f59e0b; }
.bill-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; }

.bill-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid; }
.bill-chip-in  { color: #16a34a; background: #dcfce7; border-color: #bbf7d0; }
.bill-chip-out { color: #ef4444; background: #fee2e2; border-color: #fecaca; }
.bill-chip-exp { color: #b45309; background: #fef3c7; border-color: #fde68a; }

/* VO portal — inline "what you submitted" expandable under the Pending
 * badge in My Vehicles. Tiny, doesn't crowd the row when collapsed. */
.vo-pending-summary { font-size: 11px; color: #475569; }
.vo-pending-summary summary { cursor: pointer; color: #2563eb; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; list-style: none; }
.vo-pending-summary summary::-webkit-details-marker { display: none; }
.vo-pending-summary summary:hover { color: #1e3a8a; }
.vo-pending-summary-body { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 8px 10px; margin-top: 4px; max-width: 360px; }
.vo-pending-summary-body ul { font-size: 11px; }

/* Owner-side pending changes panel — shown on admin vehicle detail when an
 * owner has submitted/edited/deleted-requested a vehicle, so admin knows
 * exactly what they're approving without digging through the activity log. */
.vo-pending-changes {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 12px;
}
.vo-pending-changes-head { display: flex; align-items: center; gap: 6px; color: #1e3a8a; font-weight: 600; margin-bottom: 8px; flex-wrap: wrap; }
.vo-pending-changes-head i { color: #2563eb; flex-shrink: 0; }
.vo-pending-changes-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vo-pending-changes-table th { text-align: left; font-weight: 700; color: #475569; padding: 6px 8px; border-bottom: 1px solid #bfdbfe; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
.vo-pending-changes-table td { padding: 6px 8px; border-bottom: 1px solid #dbeafe; vertical-align: top; }
.vo-pending-changes-table tr:last-child td { border-bottom: 0; }

/* VO dashboard — Unallocated Bookings strip */
.vo-unalloc { margin-top: 16px; }
.vo-unalloc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vo-unalloc-head h6 { font-size: 13px; font-weight: 700; color: #1e293b; letter-spacing: .2px; }
.vo-unalloc-count { display: inline-block; margin-left: 6px; padding: 2px 8px; background: #fef3c7; color: #92400e; border-radius: 999px; font-size: 10px; font-weight: 700; }
.vo-unalloc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.vo-unalloc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; transition: border-color .15s, box-shadow .15s; }
.vo-unalloc-card:hover { border-color: #2563eb; box-shadow: 0 2px 6px rgba(37,99,235,.06); }
.vo-unalloc-route { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.vo-unalloc-route > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-unalloc-label { font-size: 9px; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; }
.vo-unalloc-route strong { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vo-unalloc-arrow { width: 16px; height: 16px; color: #2563eb; align-self: center; justify-self: center; }
.vo-unalloc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-top: 1px dashed var(--border-default); font-size: 11px; color: var(--text-muted); }
.vo-unalloc-meta span { display: inline-flex; align-items: center; gap: 3px; }
.vo-unalloc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border-default); flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .vo-unalloc-route { grid-template-columns: 1fr; }
    .vo-unalloc-arrow { transform: rotate(90deg); justify-self: start; }
}

/* VO portal Load Board — card list of available customer bookings */
.vo-loadboard { display: grid; gap: 12px; }
.vo-load-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 16px 18px; transition: border-color .15s, box-shadow .15s; }
.vo-load-card:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,.06); }
.vo-load-route { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 12px; align-items: end; margin-bottom: 12px; }
.vo-load-city { display: flex; flex-direction: column; gap: 2px; }
.vo-load-city-label { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; }
.vo-load-city strong { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.vo-load-arrow { width: 20px; height: 20px; color: #2563eb; align-self: center; justify-self: center; margin-bottom: 2px; }
.vo-load-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px dashed var(--border-default); font-size: 12px; color: var(--text-muted); }
.vo-load-meta span { display: inline-flex; align-items: center; gap: 4px; }
.vo-load-meta i { color: var(--text-muted); }
.vo-load-desc { margin-top: 8px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.vo-load-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-default); flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .vo-load-route { grid-template-columns: 1fr; }
    .vo-load-arrow { transform: rotate(90deg); justify-self: start; }
}

/* VO portal KYC banner — shown on every page until owner is KYC-verified */
.vo-kyc-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin: 0 0 14px;
    border: 1px solid; border-radius: var(--r-md); font-size: 13px;
}
.vo-kyc-banner strong { display: block; }
.vo-kyc-banner span { color: var(--text-muted); font-size: 12px; }
.vo-kyc-banner-action { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vo-kyc-banner--pending  { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.vo-kyc-banner--pending .vo-kyc-banner-action { background: #d97706; color: #fff; }
.vo-kyc-banner--pending .vo-kyc-banner-action:hover { background: #b45309; }
.vo-kyc-banner--rejected { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.vo-kyc-banner--rejected .vo-kyc-banner-action { background: #dc2626; color: #fff; }
.vo-kyc-banner--rejected .vo-kyc-banner-action:hover { background: #991b1b; }
@media (max-width: 575.98px) { .vo-kyc-banner { flex-wrap: wrap; } .vo-kyc-banner-action { width: 100%; text-align: center; } }

/* ─────────────────── Vehicle Owner Detail page ─────────────────── */
/* Per-doc KYC verification list (admin detail page) */
.vo-kyc-doclist { display: flex; flex-direction: column; gap: 12px; }
.vo-kyc-doc {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px; align-items: center;
    padding: 12px 14px; border: 1px solid var(--border-default);
    border-radius: var(--r-md); background: #fff;
}
.vo-kyc-doc-thumb {
    width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}
.vo-kyc-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vo-kyc-doc-thumb i { width: 28px; height: 28px; }
.vo-kyc-doc-body { min-width: 0; }
.vo-kyc-doc-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-kyc-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.vo-kyc-doc-reason { font-size: 12px; color: #b91c1c; background: #fef2f2; padding: 6px 10px; border-radius: 6px; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.vo-kyc-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 575.98px) {
    .vo-kyc-doc { grid-template-columns: 1fr; }
    .vo-kyc-doc-thumb { width: 100%; height: 140px; }
    .vo-kyc-doc-actions { justify-content: flex-start; }
}

.vo-detail-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; }
@media (max-width: 991.98px) { .vo-detail-body { grid-template-columns: minmax(0, 1fr); } }
.vo-profile-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 22px; height: fit-content; }
.vo-fleet-card { margin-top: 18px; padding: 14px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); }
.vo-fleet-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.vo-fleet-value { font-size: 14px; color: #2563eb; margin-top: 4px; font-weight: 500; }
.vo-text-muted { color: var(--text-muted); font-size: 13px; }

.vo-right { display: flex; flex-direction: column; gap: 16px; }
.vo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767.98px) { .vo-metrics { grid-template-columns: 1fr; } }
.vo-metric-tile { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 18px 22px; }
.vo-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.vo-metric-value { font-size: 32px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vo-metric-value.blue  { color: #2563eb; }
.vo-metric-value.amber { color: #f59e0b; }
.vo-empty { padding: 24px; color: var(--text-muted); text-align: left; font-size: 14px; }
.vo-edit-btn { padding: 8px 16px; }

/* ─────────────────── Vehicle Detail page ─────────────────── */
.veh-profile-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 22px; height: fit-content; }
.veh-gps-card { margin-top: 18px; padding: 14px; background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); }
.veh-gps-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
.veh-gps-value { font-size: 18px; font-weight: 700; color: #2563eb; margin-top: 4px; }

.veh-spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 991.98px) { .veh-spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .veh-spec-grid { grid-template-columns: 1fr; } }
.veh-spec-tile { background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md); padding: 16px 18px; }
.veh-spec-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 8px; }
.veh-spec-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.veh-spec-value.blue { color: #2563eb; }

.veh-current-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    border: 1px solid var(--border-default); border-radius: var(--r-md);
    padding: 18px;
}
@media (max-width: 767.98px) { .veh-current-card { grid-template-columns: 1fr; gap: 14px; } }
.veh-current-card > .veh-current-leg + .veh-current-leg { border-left: 1px solid var(--border-default); padding-left: 24px; }
@media (max-width: 767.98px) { .veh-current-card > .veh-current-leg + .veh-current-leg { border-left: 0; padding-left: 0; padding-top: 14px; border-top: 1px solid var(--border-default); } }
.veh-current-leg { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.veh-current-icon { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.veh-current-icon.route  { background: #eff6ff; color: #2563eb; }
.veh-current-icon.driver { background: #f0fdf4; color: #16a34a; }
.veh-current-icon i { width: 18px; height: 18px; }
.veh-current-label { font-size: 11px; font-weight: 700; color: #2563eb; letter-spacing: 0.5px; }
.veh-current-leg .veh-current-icon.driver + div .veh-current-label { color: #16a34a; }
.veh-current-value { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-top: 4px; display: inline-flex; align-items: center; }

.veh-pill-warning { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.veh-doc-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-primary); }
.veh-download-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid var(--border-default); background: #fff;
    border-radius: var(--r-md); color: var(--text-muted);
    text-decoration: none;
}
.veh-download-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.veh-download-btn i { width: 16px; height: 16px; }

.veh-pending-card {
    background: #f8fafc; border: 1px solid var(--border-default); border-radius: var(--r-md);
    padding: 22px 24px; max-width: 360px;
}
.veh-pending-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.veh-pending-amount { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 6px; font-variant-numeric: tabular-nums; }

.bk-track-history {
    max-height: 380px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
}
.bk-track-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: var(--r-md);
    border: 1px solid var(--border-default);
}
.bk-track-item .bk-track-loc {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
}
.bk-track-item .bk-track-loc i { color: #ef4444; width: 14px; height: 14px; flex: 0 0 auto; }
.bk-track-item .bk-track-when {
    font-size: 12px; color: var(--text-muted);
    flex: 0 0 auto;
}

/* inspection photo strip */
.bk-photo-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bk-photo-tile {
    position: relative;
    width: 96px; height: 96px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    overflow: hidden;
    display: block;
}
.bk-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-photo-tile .bk-photo-tag {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 4px;
    letter-spacing: 0.4px;
}

.lw-drawer-form .offcanvas-header,
.lw-drawer-confirm .offcanvas-header,
.lw-drawer-detail .offcanvas-header {
    border-bottom: 1px solid var(--border-default);
    padding: 14px 20px;
}
.lw-drawer-form .offcanvas-header h5,
.lw-drawer-confirm .offcanvas-header h5,
.lw-drawer-detail .offcanvas-header h5 {
    font-size: 1rem; font-weight: 600; margin: 0;
}
.lw-drawer-form .offcanvas-body { padding: 20px; }

/* Company-name select/input toggle inside the booking drawer.
   Both modes (lw-search-select wrapper OR plain input) share the same row
   width by stretching with flex-grow:1, so the [+] button stays the same size. */
.bk-company-wrap > .lw-search-select,
.bk-company-wrap > .form-select,
.bk-company-wrap > .bk-company-input,
.bk-company-wrap > .bk-owner-company-input { flex: 1 1 auto; min-width: 0; }
.bk-company-wrap > button { flex: 0 0 auto; }

/* ─────────────────── SEARCHABLE SELECT (lw-search-select) ───────────────────
   Wraps a hidden <select>. Renders a text input + dropdown panel. Used wherever
   we tag a <select> with class .lw-search or attribute data-search="1". */
.lw-search-select { position: relative; }
.lw-ss-input { background-image: none !important; padding-right: 32px; cursor: text; }
.lw-search-select::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
    transition: transform var(--dur-fast);
}
.lw-search-select.is-open::after { transform: translateY(-30%) rotate(-135deg); }
.lw-ss-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1080;
    max-height: 280px; overflow-y: auto;
    background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
    padding: 4px;
}
.lw-ss-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border: 0; background: transparent; border-radius: 6px;
    font-size: 13px; color: var(--text-primary); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lw-ss-item:hover, .lw-ss-item:focus { background: #f1f5f9; outline: none; }
.lw-ss-item.is-selected { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.lw-ss-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.lw-ss-group {
    padding: 6px 12px 4px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    background: #f8fafc;
    border-top: 1px solid var(--border-light);
    user-select: none;
}
.lw-ss-group:first-child { border-top: 0; }
/* Two-line option (primary + secondary) used by booking pickers etc. */
.lw-ss-item.has-sub { white-space: normal; padding: 8px 10px; line-height: 1.3; }
.lw-ss-item.has-sub .lw-ss-line1 { display: block; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.lw-ss-item.has-sub .lw-ss-line2 { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.lw-ss-item.has-sub.is-selected .lw-ss-line1 { color: #1d4ed8; }
.lw-ss-item.has-sub.is-selected .lw-ss-line2 { color: #2563eb; }

/* When the wrapped select sits inside an input-group, keep the input flush */
.input-group > .lw-search-select { flex: 1 1 auto; }

/* Strip Bootstrap's focus ring / box-shadow from every .btn-close — it
   appears as a blue/halo box around the × icon after a click and looks
   harsh inside our drawers and modals. */
.btn-close,
.btn-close:focus,
.btn-close:focus-visible,
.btn-close:active,
.btn-close.show {
    box-shadow: none !important;
    outline: none !important;
}
.btn-close:focus-visible {
    /* keep a subtle accessibility hint without the heavy box */
    opacity: 1;
}

/* min-height:0 is REQUIRED on flex-column children that contain an overflow:auto child,
   otherwise the child grows to its content size and the body cannot scroll. Applied at the
   base level so EVERY .lw-drawer-form across all modules scrolls correctly. */
.lw-drawer-form > form,
.lw-drawer-form > .offcanvas-body,
.lw-drawer-confirm > form,
.lw-drawer-confirm > .offcanvas-body { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto; }
.lw-drawer-form .lw-drawer-scroll,
.lw-drawer-confirm .lw-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}
/* Confirm drawers usually carry a single field or a one-line message — give the
   body comfortable breathing room and only show the scrollbar when truly needed. */
.lw-drawer-confirm .lw-drawer-scroll { overflow-y: auto; padding: 18px 20px 20px; }
.lw-drawer-confirm .lw-drawer-scroll > .form-label:first-child { margin-top: 2px; }
.lw-drawer-confirm .lw-drawer-scroll > p.text-muted { margin-top: 10px; }
.lw-drawer-footer {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-top: 1px solid var(--border-default);
    background: var(--surface-1);
    display: flex; gap: 8px; justify-content: flex-end;
    position: sticky; bottom: 0;
}

/* ─────────────────── LABEL HELP TOOLTIP ─────────────────── */
.form-label .lw-help {
    display: inline-flex;
    width: 14px; height: 14px;
    margin-left: 6px;
    color: var(--text-subtle);
    cursor: help;
    vertical-align: -2px;
    transition: color var(--dur-fast);
}
.form-label .lw-help:hover { color: var(--brand); }

/* ─────────────────── FILE UPLOAD WIDGET ─────────────────── */
.lw-file {
    border: 1.5px dashed var(--border-default);
    border-radius: var(--r-lg);
    padding: 14px;
    background: var(--surface-2);
    transition: all var(--dur-fast);
    cursor: pointer;
    position: relative;
}
.lw-file:hover, .lw-file.is-drag {
    border-color: var(--brand);
    background: var(--brand-light);
}
.lw-file input[type=file] { display: none; }
.lw-file .lw-file-prompt {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    color: var(--text-muted);
    text-align: center;
    padding: 6px 0;
}
.lw-file .lw-file-prompt .icon { width: 28px; height: 28px; color: var(--text-subtle); }
.lw-file .lw-file-prompt strong { color: var(--text-primary); font-size: 13px; font-weight: 600; }
.lw-file .lw-file-prompt small { font-size: 11px; color: var(--text-subtle); }
.lw-file .lw-file-list {
    display: none;
    flex-direction: column; gap: 6px;
    margin-top: 0;
}
.lw-file.has-files .lw-file-prompt { display: none; }
.lw-file.has-files .lw-file-list { display: flex; }
.lw-file-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    font-size: 12px;
}
.lw-file-chip .lw-file-icon { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.lw-file-chip .lw-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-file-chip .lw-file-size { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.lw-file-chip .lw-file-remove {
    width: 20px; height: 20px;
    border-radius: var(--r-full);
    background: transparent; border: 0;
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.lw-file-chip .lw-file-remove:hover { background: var(--surface-3); color: var(--danger); }
.lw-file-chip.is-error { border-color: var(--danger); background: #fef2f2; }
.lw-file-chip.is-error .lw-file-icon { color: var(--danger); }

/* Sample placeholder shown inside the empty dropzone */
.lw-file-sample {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--border-default);
    background: var(--surface-1);
    border-radius: var(--r-md);
    width: 100%; max-width: 360px;
    margin-bottom: 8px;
    opacity: 0.7;
}
.lw-file-sample-thumb {
    width: 36px; height: 36px;
    border-radius: 6px; background: #eff6ff; color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lw-file-sample-thumb i { width: 18px; height: 18px; }
.lw-file-sample-meta { display: flex; flex-direction: column; min-width: 0; }
.lw-file-sample-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.lw-file-sample-sub  { font-size: 11px; color: var(--text-muted); }

/* Preview card shown after a file is picked (replaces the chip) */
.lw-file-preview {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    width: 100%;
}
.lw-file-preview .lw-file-thumb {
    width: 56px; height: 56px;
    border-radius: 8px; background: #eff6ff; color: #2563eb;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.lw-file-preview .lw-file-thumb i { width: 24px; height: 24px; }
.lw-file-preview .lw-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lw-file-preview .lw-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lw-file-preview .lw-file-name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-file-preview .lw-file-size { font-size: 11px; color: var(--text-muted); }
.lw-file-preview .lw-file-remove {
    width: 28px; height: 28px;
    border-radius: var(--r-full);
    background: transparent; border: 0;
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.lw-file-preview .lw-file-remove:hover { background: #fee2e2; color: var(--danger); }
.lw-file-preview.is-error { border-color: var(--danger); background: #fef2f2; }
.lw-file-preview.is-error .lw-file-thumb { background: #fee2e2; color: var(--danger); }

.sidebar-overlay.show { display: block; }

/* ─────────────────── MORE-FILTERS ACCORDION ───────────────────
 * Sits flush against the filter-bar above with no visible seam — they
 * read as one container that grows downward when "More filters" opens. */
.lw-more-filters {
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-top: 0;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    margin: 0;
}
.lw-more-filters-body { padding: 14px 16px 16px; }
/* When the accordion is open, kill the toolbar's bottom rounding so the
   two pieces merge into a single rounded panel. */
.filter-toolbar:has(+ .lw-more-filters.show)       { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.filter-toolbar:has(+ .lw-more-filters.collapsing) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.filter-bar:has(+ .lw-more-filters.show)       { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.filter-bar:has(+ .lw-more-filters.collapsing) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.lw-more-filters .form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
/* "More filters" button — when active/expanded, just tint the FONT to brand
 * blue (and the icon). Background and border stay neutral gray so it doesn't
 * read as a primary action. */
#moreFiltersBtn,
#moreFiltersBtn:hover,
#moreFiltersBtn:focus,
#moreFiltersBtn:focus-visible,
#moreFiltersBtn:active,
#moreFiltersBtn[aria-expanded="true"],
#moreFiltersBtn:not(:disabled):not(.disabled).active,
#moreFiltersBtn:not(:disabled):not(.disabled):active {
    background: var(--surface-1) !important;
    border-color: var(--border-default) !important;
    box-shadow: none !important;
}
#moreFiltersBtn:hover { background: var(--surface-hover) !important; }
#moreFiltersBtn[aria-expanded="true"],
#moreFiltersBtn:active {
    color: var(--brand-active) !important;
    border-color: var(--border-medium) !important;
}
#moreFiltersBtn[aria-expanded="true"] svg,
#moreFiltersBtn[aria-expanded="true"] i { color: var(--brand-active); }
#moreFiltersBtn .badge-pill { background: var(--brand); color: #fff; }
#moreFiltersBtn[aria-expanded="true"] .badge-pill { background: var(--brand); color: #fff; }

/* ─────────────────── SKELETON LOADER ─────────────────── */
@keyframes lw-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.lw-skel {
    display: inline-block;
    height: 12px;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: lw-shimmer 1.4s ease-in-out infinite;
    vertical-align: middle;
}
.lw-skel-row td { padding: var(--tbl-cell-pad-y) var(--tbl-cell-pad-x); }
.lw-skel-row td:first-child { width: 40px; }

/* ─────────────────── COMPACT TABLE TWEAKS ─────────────────── */
.lw-table tbody tr td { line-height: 1.35; }
.lw-table tbody tr { height: var(--tbl-row-height); }

/* ─────────────────── PAGINATION COMPACT ─────────────────── */
.lw-pagination {
    padding: 8px 12px !important;
    margin-top: 8px;
}
.lw-pagination .info, .lw-pagination .per-page { font-size: 12px; color: var(--text-muted); }
.lw-pagination .per-page .form-select { width: auto; min-width: 70px; height: 30px; padding-top: 0; padding-bottom: 0; }

/* ─────────────────── MOBILE POLISH ─────────────────── */
@media (max-width: 991.98px) {
    .app-sidebar {
        width: 280px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .app-sidebar.show { transform: translateX(0); }
    .app-content { padding: 12px; }
    :root { --page-padding: 12px; }
    .filter-bar { padding: 8px; gap: 6px; }
    .filter-bar .search-input { max-width: 100%; flex-basis: 100%; order: -1; }
    .filter-bar .form-select { flex: 1 1 calc(50% - 4px); width: auto !important; }
    /* Override inline `style="width:160px"` on date/search inputs across portal/customer pages
     * so they wrap into two-up rows instead of forcing horizontal page scroll on phones. */
    .filter-bar > .form-control,
    .filter-bar > input[type="date"],
    .filter-bar > input[type="search"],
    .filter-bar > input[type="text"],
    .filter-bar > .lw-msel { flex: 1 1 calc(50% - 4px); width: auto !important; min-width: 0; }
    .filter-bar > .lw-msel .lw-msel-toggle { width: 100%; }
    .lw-table { font-size: 12px; }
    .lw-table thead th, .lw-table tbody td { padding: 6px 8px; white-space: nowrap; }
    .lw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 575.98px) {
    .lw-pagination { flex-wrap: wrap; gap: 8px; }
    .lw-pagination .info, .lw-pagination .pages, .lw-pagination .per-page { width: 100%; justify-content: flex-start; }
    .metric-card { flex: 0 0 78%; min-width: 220px; max-width: 320px; }
    .metric-strip { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}

/* ═════════════════ SIDEBAR ENHANCEMENTS ═════════════════ */

/* Active item with brand left-border accent (subtle, the bg-active is already brand) */
.sidebar-item.active {
    box-shadow: inset 3px 0 0 var(--brand-light);
}

/* Collapse toggle button — pinned bottom of sidebar */
.sidebar-collapse-btn {
    position: absolute;
    right: -12px; bottom: 64px;
    width: 24px; height: 24px;
    border-radius: var(--r-full);
    border: 1px solid var(--border-default);
    background: var(--surface-1);
    color: var(--text-secondary);
    box-shadow: var(--sh-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: calc(var(--z-sidebar) + 1);
    transition: all var(--dur-fast);
}
.sidebar-collapse-btn:hover { color: var(--brand); border-color: var(--brand); }
.sidebar-collapse-btn .icon-expand,
.sidebar-collapse-btn .icon-collapse { width: 14px; height: 14px; }
.sidebar-collapse-btn .icon-collapse { display: none; }
.app-sidebar.collapsed .sidebar-collapse-btn .icon-expand   { display: none; }
.app-sidebar.collapsed .sidebar-collapse-btn .icon-collapse { display: inline-block; }
@media (max-width: 991.98px) {
    .sidebar-collapse-btn { display: none; }
}

/* When collapsed, hide everything but icons */
.app-sidebar.collapsed .sidebar-logo .logo-text,
.app-sidebar.collapsed .sidebar-section-label,
.app-sidebar.collapsed .sidebar-item .label,
.app-sidebar.collapsed .sidebar-footer .meta { display: none; }
.app-sidebar.collapsed .sidebar-footer { justify-content: center; }
.app-sidebar.collapsed .sidebar-footer .logout { margin-left: 0; }
.app-sidebar.collapsed .sidebar-item { justify-content: center; padding: 0 12px; }

/* ═════════════════ TOPBAR ENHANCEMENTS ═════════════════ */

/* Dropdown menus restyled to design tokens */
.dropdown-menu {
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 6px;
    font-size: 13px;
    min-width: 220px;
}
.dropdown-item {
    border-radius: var(--r-md);
    padding: 8px 10px;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-hover); color: var(--text-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-light); color: var(--brand-active); }
.dropdown-divider { border-color: var(--border-default); margin: 4px 0; }
.dropdown-header {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); font-weight: 600; padding: 8px 10px 4px;
}

/* Notifications dropdown — wider */
/* Admin dashboard attention strip — clickable chips linking to filtered lists */
.dash-attention { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; }
.dash-attention-head { display: flex; align-items: center; gap: 6px; color: #92400e; font-size: 13px; margin-bottom: 8px; flex-wrap: wrap; }
.dash-attention-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-attention-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid; border-radius: 999px; font-size: 12px; text-decoration: none; transition: filter .15s; }
.dash-attention-chip:hover { filter: brightness(.95); text-decoration: none; }
.dash-attention-chip strong { font-weight: 700; }
.dash-attention-chip.warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.dash-attention-chip.danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.dash-attention-chip.brand   { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }

/* Global search dropdown — anchored to the topbar search input. Grouped
 * results by category (Bookings, Customers, Vehicles, Owners, Drivers). */
.lw-global-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--border-default); border-radius: var(--r-md);
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    max-height: 480px; overflow-y: auto; z-index: 1080;
}
.lw-global-results--mobile { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; }
.lw-global-group { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; }
.lw-global-group-icon { width: 12px; height: 12px; }
.lw-global-item { display: block; padding: 8px 14px; border-bottom: 1px solid var(--border-default); text-decoration: none; color: var(--text-primary); cursor: pointer; }
.lw-global-item:last-child { border-bottom: 0; }
.lw-global-item:hover, .lw-global-item.is-active { background: #f1f5f9; }
.lw-global-item-label { font-size: 13px; font-weight: 600; }
.lw-global-item-label mark { background: #fef08a; padding: 0 1px; color: inherit; }
.lw-global-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lw-global-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
/* Make the wrap a positioning context so the dropdown anchors to it */
.header-search-wrap { position: relative; }
.mobile-search-overlay { position: relative; }

.lw-notif-menu { width: 360px; max-width: 96vw; padding: 0; }
.lw-notif-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.lw-notif-item.is-unread { background: #eff6ff; }
.lw-notif-item.is-unread .title { font-weight: 700; }
.lw-notif-item-icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; color: var(--text-muted); }
.lw-notif-item .time { font-size: 11px; }
/* Counter badge on the topbar bell — shows how many items need admin attention */
.lw-notif-counter {
    position: absolute; top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
}
.lw-notif-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--border-default);
    font-size: 13px; font-weight: 600;
}
.lw-notif-head .badge-pill { font-size: 10px; padding: 1px 8px; }
.lw-notif-list { max-height: 360px; overflow-y: auto; padding: 4px; }
.lw-notif-item {
    display: flex; gap: 10px; padding: 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur-fast);
    text-decoration: none; color: var(--text-primary);
}
.lw-notif-item:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.lw-notif-item .dot {
    width: 8px; height: 8px; border-radius: var(--r-full);
    background: var(--brand); margin-top: 6px; flex-shrink: 0;
}
.lw-notif-item .dot.read { background: var(--border-medium); }
.lw-notif-item .body { flex: 1; min-width: 0; }
.lw-notif-item .title { font-size: 13px; font-weight: 600; }
.lw-notif-item .desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lw-notif-item .time  { font-size: 11px; color: var(--text-subtle); margin-top: 4px; }
.lw-notif-foot {
    text-align: center; padding: 10px;
    border-top: 1px solid var(--border-default);
}
.lw-notif-foot a { font-size: 12px; color: var(--brand); font-weight: 600; }

/* Quick-add menu */
.lw-quickadd-menu { width: 240px; }

/* Header search styled to brand on focus */
.app-header .header-search-wrap {
    position: relative;
    width: 360px; max-width: 50vw;
}
.app-header .header-search {
    width: 100%;
    background: var(--surface-2);
    border-color: transparent;
    padding-left: 36px;
    padding-right: 60px;
    height: 36px;
}
.app-header .header-search:focus {
    background: var(--surface-1);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.app-header .header-search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--text-subtle);
    pointer-events: none;
}

/* Header keyboard shortcut hint */
.app-header .kbd-hint {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px; padding: 2px 6px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    color: var(--text-muted); pointer-events: none;
    font-family: var(--font-mono);
}

/* Topbar avatar with online dot */
.app-header .header-avatar {
    position: relative;
}
.app-header .header-avatar::after {
    content: ''; position: absolute;
    bottom: -2px; right: -2px;
    width: 10px; height: 10px;
    border-radius: var(--r-full);
    background: var(--success);
    border: 2px solid #fff;
}

/* Mini button in topbar */
.app-header .topbar-pill {
    height: 32px; padding: 0 10px;
    border: 1px solid var(--border-default);
    background: var(--surface-1);
    border-radius: var(--r-md);
    font-size: 12px; font-weight: 500;
    color: var(--text-primary);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    transition: all var(--dur-fast);
}
.app-header .topbar-pill:hover { background: var(--surface-hover); border-color: var(--border-medium); }
.app-header .topbar-pill .icon { width: 14px; height: 14px; }

/* ─────────────────── REPORT CARD ─────────────────── */
.lw-report-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--dur-fast);
    height: 100%;
    min-height: 84px;
    position: relative;
}
.lw-report-card:hover {
    text-decoration: none;
    border-color: var(--brand);
    box-shadow: var(--sh-md);
    transform: translateY(-1px);
}
.lw-report-card:hover .lw-report-arrow { color: var(--brand); transform: translateX(2px); }

.lw-report-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lw-report-icon i { width: 22px; height: 22px; }
.lw-report-icon.accent-success  { background: var(--success-bg); color: var(--success-text); }
.lw-report-icon.accent-warning  { background: var(--warning-bg); color: var(--warning-text); }
.lw-report-icon.accent-danger   { background: var(--danger-bg);  color: var(--danger-text); }
.lw-report-icon.accent-info     { background: var(--info-bg);    color: var(--info-text); }
.lw-report-icon.accent-brand    { background: var(--brand-light);color: var(--brand-active); }
.lw-report-icon.accent-neutral  { background: var(--neutral-bg); color: var(--neutral-text); }

.lw-report-body { flex: 1 1 auto; min-width: 0; }
.lw-report-title {
    font-weight: 600; font-size: 13px;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 2px;
}
.lw-report-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lw-report-arrow {
    width: 16px; height: 16px;
    color: var(--text-subtle);
    flex-shrink: 0;
    transition: all var(--dur-fast);
}

/* ─────────────────── DASHBOARD POLISH ───────────────────
 * Metric strip is a fixed-width horizontal slider at every breakpoint —
 * see the canonical rules near .metric-strip earlier in this file. The
 * old override that stretched cards to 50%/100% on small screens has
 * been removed. */
.lw-section h6 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.lw-section { background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: 16px; }
.lw-section.h-100 { display: flex; flex-direction: column; }

/* ─────────────────── MOBILE HEADER LOGO ─────────────────── */
.app-header-logo {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 8px;
    text-decoration: none;
}
.app-header-logo img { height: 28px; width: auto; }

/* ─────────────────── MOBILE SEARCH OVERLAY ─────────────────── */
.mobile-search-overlay {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    z-index: calc(var(--z-header) + 10);
}
.mobile-search-overlay.show { display: flex; }
.mobile-search-overlay .form-control { flex: 1; }

/* ─────────────────── METRIC STRIP — MOBILE CAROUSEL ─────────────────── */
/* Metric strip is now always a slider — phone-specific tweaks live with the base rule. */

/* ─────────────────── DRAWER TABS — SCROLLABLE ─────────────────── */
.lw-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.lw-tabs::-webkit-scrollbar { display: none; }
.lw-tabs .tab { flex-shrink: 0; }
@media (max-width: 575.98px) {
    .lw-tabs { padding: 0 12px; }
    .lw-tabs .tab { padding: 10px 12px; font-size: 12px; }
}

/* ─────────────────── HEADER MOBILE TIGHTEN ─────────────────── */
@media (max-width: 767.98px) {
    .app-header { padding: 0 12px; }
    .app-header .header-actions { gap: 4px; }
    .app-header .header-actions .topbar-pill .icon { margin: 0; }
    .app-header .header-actions .topbar-pill > span { display: none; }
}

/* ═════════════════ ACTIVITY FEED ═════════════════ */
.lw-activity-list {
    display: flex; flex-direction: column;
}
.lw-activity-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--dur-fast);
}
.lw-activity-item:hover { background: var(--surface-2); }
.lw-activity-item:last-child { border-bottom: 0; }
.lw-activity-icon {
    width: 28px; height: 28px;
    border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.lw-activity-icon.success { background: var(--success); }
.lw-activity-icon.info    { background: var(--info); }
.lw-activity-icon.danger  { background: var(--danger); }
.lw-activity-icon.warning { background: var(--warning); }
.lw-activity-icon.brand   { background: var(--brand); }
.lw-activity-icon.neutral { background: var(--neutral); }
.lw-activity-body { flex: 1; min-width: 0; }
.lw-activity-body .badge-pill { font-size: 10px; padding: 1px 6px; }
.lw-act-avatar {
    width: 22px; height: 22px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}

/* ═════════════════ FILTER ACCORDION ═════════════════ */
.lw-more-toggle {
    height: var(--input-height);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    background: var(--surface-1);
    border-radius: var(--r-md);
    color: var(--text-primary); font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.lw-more-toggle .icon { width: 14px; height: 14px; }
.lw-more-toggle .badge-pill { font-size: 10px; padding: 0 6px; }
.lw-more-toggle.open { background: var(--brand-light); border-color: var(--brand); color: var(--brand-active); }

/* When accordion is open, kill the rounded bottom of the filter-bar */
.filter-bar.has-more-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ─────────────────── MULTI-SELECT WIDGET ─────────────────── */
.lw-msel { position: relative; display: inline-block; }
.lw-msel-toggle {
    width: 100%;
    height: var(--input-height);
    padding: 0 12px 0 var(--input-padding-x);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    color: var(--input-text);
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.lw-msel-toggle:hover { border-color: var(--border-medium); }
.lw-msel.is-open .lw-msel-toggle {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--brand-light);
}
.lw-msel-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
    color: var(--text-primary);
}
.lw-msel:not(.has-value) .lw-msel-label { color: var(--input-placeholder); }
.lw-msel-caret { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; transition: transform var(--dur-fast); }
.lw-msel.is-open .lw-msel-caret { transform: rotate(180deg); }
.lw-msel-count {
    background: var(--brand);
    color: #fff;
    font-size: 10px; font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--r-full);
    margin-right: 4px;
}

.lw-msel-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px); left: 0;
    min-width: 100%;
    max-width: 320px;
    width: max-content;
    max-height: 320px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    z-index: 1000;
    overflow: hidden;
    flex-direction: column;
}
.lw-msel.is-open .lw-msel-menu { display: flex; }
.lw-msel-actions {
    display: flex; gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-2);
}
.lw-msel-actions button {
    flex: 1;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--brand);
    font-size: 11px; font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.lw-msel-actions button:hover { background: var(--brand-light); }
.lw-msel-options {
    overflow-y: auto;
    max-height: 270px;
    padding: 4px;
}
.lw-msel-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--r-sm);
}
.lw-msel-option:hover { background: var(--surface-2); }
.lw-msel-option input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--brand);
    flex-shrink: 0;
    margin: 0;
}
.lw-msel-option span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-msel-sm .lw-msel-toggle { height: 30px; font-size: 12px; }
@media (max-width: 575.98px) {
    .lw-msel { width: 100%; }
    .lw-msel-menu { max-width: calc(100vw - 24px); }
}