/* ── Bus 360 Hub — FEAT-247-P2/P2b ──────────────────────────────────────── */
/* Prefix: b360- */

/* Page wrapper */
.b360-page {
    padding: 16px 20px;
    max-width: 1200px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.b360-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.b360-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.b360-page-title {
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
}

.b360-plate-badge {
    min-height: 28px;
}

/* BUG-355: back-to-list link in per-bus view */
.b360-back-link {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text, #8b949e);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.b360-back-link:hover {
    background: rgba(255,255,255,0.07);
    color: var(--sidebar-hover, #c9d1d9);
    text-decoration: none;
}

.b360-badge-text {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

body[data-theme="light"] .b360-badge-text {
    background: #e8f0fe;
    color: #1a56db;
}

body[data-theme="dark"] .b360-badge-text {
    background: #1e3a6e;
    color: #7eb3f7;
}

/* ── Plate search bar ────────────────────────────────────────────────────── */
.b360-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.b360-search-input {
    width: 240px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #555;
    font-size: 0.88rem;
    text-transform: uppercase;
    min-width: 0;
    box-sizing: border-box;
}

body[data-theme="light"] .b360-search-input {
    background: #fff;
    color: #1a1a2e;
    border-color: #ccc;
}

body[data-theme="dark"] .b360-search-input {
    background: #1e2030;
    color: #e0e6ef;
    border-color: #444;
}

/* Placeholder text — themed and not cut off */
.b360-search-input::placeholder {
    font-size: 0.82rem;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-theme="light"] .b360-search-input::placeholder { color: #9ca3af; }
body[data-theme="dark"]  .b360-search-input::placeholder { color: #5a6480; }

.b360-search-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    background: #1a56db;
    color: #fff;
    transition: background 0.15s;
    flex-shrink: 0;
}

.b360-search-btn:hover {
    background: #1344b0;
}

/* ── Status filter dropdown ──────────────────────────────────────────────── */
.b360-status-filter-select {
    width: 120px;
    font-size: 0.88rem;
    flex-shrink: 0;
}

body[data-theme="light"] .b360-status-filter-select .Select-control {
    background: #fff;
    border-color: #ccc;
    color: #1a1a2e;
}

body[data-theme="dark"] .b360-status-filter-select .Select-control {
    background: #1e2030;
    border-color: #444;
    color: #e0e6ef;
}

/* ── Tabs — themed to match puspakom-results pattern ─────────────────────── */
.b360-tab {
    background: #1e2537 !important;
    color: #9aa3b5 !important;
    border: 1px solid #2d3548 !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 8px 18px !important;
    font-size: 0.88rem !important;
}

.b360-tab--active {
    background: #252b3b !important;
    color: #e8eaf0 !important;
    border-bottom-color: #252b3b !important;
    font-weight: 600 !important;
}

body[data-theme="light"] .b360-tab {
    background: #f0f2f5 !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
}

body[data-theme="light"] .b360-tab--active {
    background: #ffffff !important;
    color: #1a202c !important;
    border-bottom-color: #ffffff !important;
    font-weight: 600 !important;
}

.b360-tab-content {
    padding: 16px 0;
    min-height: 120px;
}

/* ── Tab inner (table wrapper) ───────────────────────────────────────────── */
.b360-tab-inner {
    overflow-x: auto;
}

/* ── Overview hero — PLATE as hero + status chip ─────────────────────────── */
.b360-overview-card {
    padding: 20px 24px;
    border-radius: 10px;
    margin-bottom: 12px;
    max-width: 700px;
}

body[data-theme="light"] .b360-overview-card { background: #f7f8fc; }
body[data-theme="dark"]  .b360-overview-card { background: #1a1d2e; }

.b360-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.b360-hero-plate {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
}

body[data-theme="light"] .b360-hero-plate { color: #1a1a2e; }
body[data-theme="dark"]  .b360-hero-plate { color: #e8eaf0; }

/* ── Stat card grid ──────────────────────────────────────────────────────── */
.b360-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 12px;
}

.b360-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
}

body[data-theme="light"] .b360-stat-card { background: #edf0f7; }
body[data-theme="dark"]  .b360-stat-card { background: #13162a; }

.b360-field-label {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.b360-field-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* ── Not-found / error card ──────────────────────────────────────────────── */
.b360-notfound-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    max-width: 480px;
    margin-top: 8px;
}

body[data-theme="light"] .b360-notfound-card { background: #fff3cd; }
body[data-theme="dark"]  .b360-notfound-card { background: #3d2e00; }

.b360-notfound-icon { font-size: 1.4rem; }

.b360-notfound-msg {
    margin: 0;
    font-weight: 600;
}

.b360-error-strip {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
}

body[data-theme="light"] .b360-error-strip { background: #fee2e2; color: #b91c1c; }
body[data-theme="dark"]  .b360-error-strip { background: #3b0000; color: #fca5a5; }

.b360-intro {
    opacity: 0.6;
    padding: 20px 0;
    font-size: 0.95rem;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.b360-empty-state {
    padding: 24px 0;
    opacity: 0.55;
    font-size: 0.93rem;
}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.b360-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Status chip for hero (neutral blue-green) */
.b360-chip--status { background: #d1fae5; color: #065f46; }
body[data-theme="dark"] .b360-chip--status { background: #064e3b; color: #6ee7b7; }

.b360-chip--critical { background: #fee2e2; color: #b91c1c; }
.b360-chip--major    { background: #fff7ed; color: #c2410c; }
.b360-chip--minor    { background: #fef9c3; color: #854d0e; }
.b360-chip--open     { background: #dbeafe; color: #1d4ed8; }
.b360-chip--ack      { background: #e0f2fe; color: #0369a1; }
.b360-chip--ro       { background: #f0fdf4; color: #166534; }
.b360-chip--closed   { background: #f3f4f6; color: #6b7280; }
.b360-chip--cancelled{ background: #fce7f3; color: #9d174d; }
.b360-chip--pass     { background: #d1fae5; color: #065f46; }
.b360-chip--fail     { background: #fee2e2; color: #991b1b; }
.b360-chip--linked   { background: #ede9fe; color: #5b21b6; }

body[data-theme="dark"] .b360-chip--critical { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-chip--major    { background: #431407; color: #fdba74; }
body[data-theme="dark"] .b360-chip--minor    { background: #422006; color: #fcd34d; }
body[data-theme="dark"] .b360-chip--open     { background: #1e3a5f; color: #93c5fd; }
body[data-theme="dark"] .b360-chip--ack      { background: #0c4a6e; color: #7dd3fc; }
body[data-theme="dark"] .b360-chip--ro       { background: #14532d; color: #86efac; }
body[data-theme="dark"] .b360-chip--closed   { background: #1f2937; color: #9ca3af; }
body[data-theme="dark"] .b360-chip--cancelled{ background: #500724; color: #f9a8d4; }
body[data-theme="dark"] .b360-chip--pass     { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-chip--fail     { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-chip--linked   { background: #2e1065; color: #c4b5fd; }

/* ── Linked RO button (cross-link to RO tab) ─────────────────────────────── */
.b360-ro-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
    color: #4a9eff;
}

.b360-ro-link-btn:hover { color: #2272d8; }

/* ── PnL current-owner highlight ─────────────────────────────────────────── */
body[data-theme="light"] .b360-pnl-row--current { background: #e8f4ff; font-weight: 600; }
body[data-theme="dark"]  .b360-pnl-row--current { background: #0f2a4a; font-weight: 600; }

/* ── Capped / expiry banners ─────────────────────────────────────────────── */
.b360-capped-banner {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.83rem;
    margin-bottom: 8px;
}

body[data-theme="light"] .b360-capped-banner { background: #fff7cd; color: #7a5700; }
body[data-theme="dark"]  .b360-capped-banner { background: #3d2e00; color: #fcd34d; }

.b360-expiry-banner {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

body[data-theme="light"] .b360-expiry-banner { background: #e0f2fe; color: #075985; }
body[data-theme="dark"]  .b360-expiry-banner { background: #0c3049; color: #7dd3fc; }

/* ── Fleet summary table ─────────────────────────────────────────────────── */
.b360-summary-table {
    width: 100%;
    min-width: 700px;
}

/* Sticky header row */
.b360-summary-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

body[data-theme="light"] .b360-summary-table thead th { background: #f7f8fc; }
body[data-theme="dark"]  .b360-summary-table thead th { background: #1a1d2e; }

/* Sticky Plate column (first col) */
.b360-summary-table th:first-child,
.b360-summary-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

body[data-theme="light"] .b360-summary-table td:first-child { background: #fff; }
body[data-theme="dark"]  .b360-summary-table td:first-child { background: #12151e; }

/* First-col header must stack above other sticky headers */
.b360-summary-table th:first-child { z-index: 3; }

.b360-summary-plate-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #4a9eff;
    text-decoration: underline;
    text-align: left;
}

.b360-summary-plate-btn:hover { color: #2272d8; }

body[data-theme="light"] .b360-summary-row:hover { background: #f0f4ff; }
body[data-theme="dark"]  .b360-summary-row:hover { background: #1a2040; }

/* ── Summary section top margin ──────────────────────────────────────────── */
#b360-summary-section {
    margin-top: 4px;
}

/* ── FEAT-256: Compliance circles column ─────────────────────────────────── */
.b360-compliance-th,
.b360-compliance-td {
    white-space: nowrap;
    width: 90px;
    min-width: 80px;
}

.b360-compliance-col {
    display: flex;
    gap: 3px;
    align-items: center;
}

.b360-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: default;
}

.b360-circle--green { background: #d1fae5; color: #065f46; }
.b360-circle--amber { background: #fff7ed; color: #c2410c; }
.b360-circle--red   { background: #fee2e2; color: #991b1b; }
.b360-circle--grey  { background: #f3f4f6; color: #6b7280; }

body[data-theme="dark"] .b360-circle--green { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-circle--amber { background: #431407; color: #fdba74; }
body[data-theme="dark"] .b360-circle--red   { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-circle--grey  { background: #1f2937; color: #9ca3af; }

/* ── FEAT-256B: Service due-date line ────────────────────────────────────── */
.b360-service-date {
    display: block;
    font-size: 0.82rem;
    margin-top: 4px;
    opacity: 0.75;
}

.b360-service-date--overdue {
    color: #ef4444;
    font-weight: 700;
    opacity: 1;
}

/* ── FEAT-252: Expiry chips row ──────────────────────────────────────────── */
.b360-section-heading {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.55;
    margin-bottom: 8px;
    margin-top: 16px;
}

.b360-expiry-section,
.b360-service-section {
    margin-top: 4px;
}

.b360-expiry-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.b360-expiry-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 130px;
}

.b360-expiry-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.55;
}

.b360-expiry-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.b360-expiry-chip--green  { background: #d1fae5; color: #065f46; }
.b360-expiry-chip--amber  { background: #fff7ed; color: #c2410c; }
.b360-expiry-chip--red    { background: #fee2e2; color: #991b1b; }
.b360-expiry-chip--null   { background: #f3f4f6; color: #6b7280; }

body[data-theme="dark"] .b360-expiry-chip--green  { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-expiry-chip--amber  { background: #431407; color: #fdba74; }
body[data-theme="dark"] .b360-expiry-chip--red    { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-expiry-chip--null   { background: #1f2937; color: #9ca3af; }

/* ── FEAT-252: Next-service progress bar ─────────────────────────────────── */
.b360-service-bar {
    margin-top: 4px;
}

.b360-service-bar-track {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    max-width: 480px;
}

body[data-theme="light"] .b360-service-bar-track { background: #e5e7eb; }
body[data-theme="dark"]  .b360-service-bar-track { background: #374151; }

.b360-service-bar-fill {
    height: 100%;
    border-radius: 5px;
    background: #22c55e;
    transition: width 0.3s ease;
}

.b360-service-bar-fill--red { background: #ef4444; }

.b360-service-bar-labels {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.b360-service-bar-km {
    font-size: 0.82rem;
    opacity: 0.7;
}

.b360-service-overdue {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #fee2e2;
    color: #991b1b;
    letter-spacing: 0.4px;
}

body[data-theme="dark"] .b360-service-overdue {
    background: #450a0a;
    color: #fca5a5;
}

/* ── Responsive: 390px mobile must not overflow ──────────────────────────── */
@media (max-width: 480px) {
    .b360-page {
        padding: 10px 10px;
    }

    .b360-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .b360-search-bar {
        width: 100%;
    }

    .b360-search-input {
        width: 100%;
        flex: 1;
        min-width: 0;
    }

    /* Touch targets ≥40px for controls */
    .b360-search-btn {
        min-height: 40px;
    }

    .b360-status-filter-select .Select-control {
        min-height: 40px !important;
        height: 40px !important;
    }

    /* Export buttons */
    .b360-tab-toolbar .tk-btn-export {
        min-height: 40px;
    }

    /* Pagination controls */
    .tk-pg-btn,
    [class*="tk-first"],
    [class*="tk-prev"],
    [class*="tk-next"],
    [class*="tk-last"] {
        min-height: 40px;
        padding: 8px 12px;
    }

    .b360-hero-plate {
        font-size: 1.5rem;
    }

    .b360-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .b360-tab-inner {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .b360-summary-table {
        min-width: 600px;
    }

    .b360-expiry-row {
        gap: 6px;
    }

    .b360-expiry-item {
        min-width: 110px;
        flex: 1 1 110px;
    }

    .b360-service-bar-track {
        max-width: 100%;
    }
}

/* FEAT-261: RO substatus stacked display */
.b360-ro-status { display: flex; flex-direction: column; gap: 2px; }
.b360-ro-substatus {
    font-size: 11px;
    color: #9ca3af;
    font-style: italic;
}
body[data-theme="light"] .b360-ro-substatus { color: #6b7280; }

/* FEAT-347: Services cell — truncate with hover tooltip; wrap at 390px */
.b360-ro-services {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
@media (max-width: 390px) {
    .b360-ro-services { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
}

/* FEAT-293-P4b: Fitness verdict chip + section ─────────────────────────────── */
.b360-fitness-container {
    margin: 6px 0 4px 0;
}
.b360-fitness-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0;
}
.b360-fitness-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body[data-theme="light"] .b360-fitness-label { color: #6b7280; }

.b360-fitness-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    cursor: default;
}
.b360-fitness-chip--allow  { background: #d1fae5; color: #065f46; }
.b360-fitness-chip--warn   { background: #fff7ed; color: #c2410c; }
.b360-fitness-chip--block  { background: #fee2e2; color: #991b1b; }
.b360-fitness-chip--nodata { background: #f3f4f6; color: #6b7280; }

body[data-theme="dark"] .b360-fitness-chip--allow  { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-fitness-chip--warn   { background: #431407; color: #fdba74; }
body[data-theme="dark"] .b360-fitness-chip--block  { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-fitness-chip--nodata { background: #1f2937; color: #9ca3af; }

.b360-fitness-reasons {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.b360-fitness-reason {
    font-size: 0.72rem;
    padding: 1px 8px;
    border-radius: 4px;
    background: rgba(128,128,128,0.08);
}
.b360-fitness-reason--block { color: #991b1b; }
.b360-fitness-reason--warn  { color: #c2410c; }
body[data-theme="dark"] .b360-fitness-reason--block { color: #fca5a5; }
body[data-theme="dark"] .b360-fitness-reason--warn  { color: #fdba74; }

.b360-fitness-error {
    padding: 6px 10px;
    background: rgba(231,76,60,0.1);
    border-radius: 6px;
    font-size: 0.8rem;
}
.b360-error-text   { font-weight: 600; color: #e74c3c; }
.b360-error-detail { color: #9ca3af; }
body[data-theme="light"] .b360-error-detail { color: #6b7280; }

/* FEAT-302: ERP Sync chip + section ─────────────────────────────────────────── */
.b360-header-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: flex-start;
}
.b360-erp-container { margin: 6px 0 4px 0; }

.b360-erp-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    cursor: default;
}
.b360-erp-chip--synced { background: #d1fae5; color: #065f46; }
.b360-erp-chip--failed { background: #fee2e2; color: #991b1b; }
.b360-erp-chip--never  { background: #f3f4f6; color: #6b7280; }

body[data-theme="dark"] .b360-erp-chip--synced { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-erp-chip--failed { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-erp-chip--never  { background: #1f2937; color: #9ca3af; }

.b360-erp-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.b360-erp-detail {
    font-size: 0.72rem;
    color: #9ca3af;
}
body[data-theme="light"] .b360-erp-detail { color: #6b7280; }
.b360-erp-detail--reason { color: #c2410c; }
body[data-theme="dark"] .b360-erp-detail--reason { color: #fdba74; }

/* FEAT-304 correction: ERP section card in Overview tab */
.b360-erp-section-card { margin-top: 0; margin-bottom: 16px; }

.b360-erp-section-caption {
    font-size: 0.75rem;
    opacity: 0.6;
    margin: 0 0 10px;
    font-style: italic;
}

/* FEAT-304: Resync button section in Overview tab */
.b360-erp-resync-section {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0 4px;
}

@media (max-width: 480px) {
    .b360-erp-resync-section {
        justify-content: stretch;
    }
    .b360-erp-resync-section .ak-btn {
        width: 100%;
        min-height: 40px;
    }
}

/* FEAT-306: ERP collapse (html.Details, collapsed by default) */
.b360-erp-collapse { margin-top: 16px; }
.b360-erp-collapse-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: #6b7280;
    user-select: none;
    padding: 4px 0;
    list-style: none;
}

/* FEAT-308: Sync-all-to-ERP admin bar */
.b360-sync-all-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 4px 0;
}
.b360-sync-all-btn { flex-shrink: 0; }
.b360-sync-all-status {
    font-size: 0.85rem;
    color: #6b7280;
}
body[data-theme="dark"] .b360-sync-all-status { color: #9ca3af; }
body[data-theme="dark"] .b360-erp-collapse-summary { color: #9ca3af; }

/* ── ERP Push Log (FEAT-325) ─────────────────────────────────────────────── */
.b360-push-log-collapse {
    margin: 8px 0;
}
.b360-push-log-summary {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: #6b7280;
    padding: 6px 0;
    user-select: none;
}
.b360-push-log-body {
    padding: 12px 0 4px;
}
.b360-push-log-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.b360-push-log-plate-input {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 0.88rem;
    width: 140px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111);
}
.b360-push-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin-top: 4px;
}
.b360-push-log-th {
    text-align: left;
    padding: 6px 8px;
    background: var(--table-header-bg, #f9fafb);
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    white-space: nowrap;
}
.b360-push-log-td {
    padding: 5px 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
    word-break: break-word;
}
.b360-push-log-tr:hover .b360-push-log-td {
    background: var(--table-hover-bg, #f9fafb);
}
.b360-push-log-ok   { color: #16a34a; font-weight: 700; }
.b360-push-log-fail { color: #dc2626; font-weight: 700; }
.b360-push-log-json-btn { background: #1e40af; color: #fff; border-color: #1e40af; }
.b360-push-log-truncated-banner {
    margin: 6px 0 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 500;
}

body[data-theme="dark"] .b360-push-log-summary     { color: #9ca3af; }
body[data-theme="dark"] .b360-push-log-plate-input { background: #1f2937; border-color: #374151; color: #e5e7eb; }
body[data-theme="dark"] .b360-push-log-th          { background: #1f2937; border-color: #374151; }
body[data-theme="dark"] .b360-push-log-td          { border-color: #1f2937; }
body[data-theme="dark"] .b360-push-log-tr:hover .b360-push-log-td { background: #1f2937; }
body[data-theme="dark"] .b360-push-log-truncated-banner { background: #451a03; color: #fbbf24; }
body[data-theme="dark"] .b360-push-log-json-btn    { background: #1d4ed8; border-color: #1d4ed8; }

@media (max-width: 480px) {
    .b360-push-log-filters { flex-direction: column; align-items: flex-start; }
    .b360-push-log-plate-input { width: 100%; }
    .b360-push-log-table { font-size: 0.78rem; }
}

/* ── FEAT-331: Odometer overlay card ──────────────────────────────────────── */
.b360-odo-divider {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.12;
    margin: 16px 0 0;
}
.b360-odo-card {
    margin-top: 12px;
}
.b360-odo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.b360-odo-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
}
.b360-odo-badge--ok          { background: #dcfce7; color: #15803d; }
.b360-odo-badge--drift       { background: #fef3c7; color: #92400e; }
.b360-odo-badge--implausible { background: #fee2e2; color: #991b1b; }
/* BUG-415: stat-card odometer hints */
.b360-odo-live-hint {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
    vertical-align: middle;
}
.b360-odo-snap-hint {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
    vertical-align: middle;
}
.b360-odo-no-reading {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 4px 0 10px;
    font-style: italic;
}
.b360-odo-meta-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.b360-odo-meta {
    font-size: 0.8rem;
    color: #6b7280;
}
.b360-odo-card--error {
    border-left: 3px solid #dc2626;
}

/* ── FEAT-331: Diesel & Usage tab ─────────────────────────────────────────── */
.b360-diesel-tiles {
    margin-bottom: 16px;
}
.b360-diesel-tile-value {
    font-size: 1.15rem;
    font-weight: 700;
}
.b360-diesel-table {
    width: 100%;
}

/* ── FEAT-331: Odometer exception list ────────────────────────────────────── */
.b360-exceptions-card {
    margin-bottom: 16px;
}
.b360-exceptions-card--error {
    border-left: 3px solid #dc2626;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 20px;
}
/* Collapsible panel (FEAT-331 polish) */
.b360-exceptions-panel {
    margin-top: 24px;
}
.b360-exceptions-summary {
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: #6b7280;
    padding: 6px 0;
    user-select: none;
    list-style: none;
}
.b360-exceptions-body {
    padding: 8px 0 4px;
}
.b360-exceptions-heading {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin: 14px 0 6px;
    color: #374151;
}
.b360-exceptions-table {
    width: 100%;
    margin-bottom: 12px;
}

/* Dark theme — FEAT-331 */
body[data-theme="dark"] .b360-odo-badge--ok          { background: #14532d; color: #86efac; }
body[data-theme="dark"] .b360-odo-badge--drift        { background: #451a03; color: #fcd34d; }
body[data-theme="dark"] .b360-odo-badge--implausible  { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-odo-no-reading          { color: #9ca3af; }
body[data-theme="dark"] .b360-odo-meta                { color: #9ca3af; }
body[data-theme="dark"] .b360-odo-live-hint           { background: #14532d; color: #86efac; }
body[data-theme="dark"] .b360-odo-snap-hint           { background: #374151; color: #9ca3af; }
body[data-theme="dark"] .b360-exceptions-heading      { color: #d1d5db; }
body[data-theme="dark"] .b360-exceptions-summary      { color: #9ca3af; }

@media (max-width: 480px) {
    .b360-odo-header     { flex-wrap: wrap; }
    .b360-diesel-table   { font-size: 0.78rem; }
    .b360-exceptions-table { font-size: 0.78rem; }
}

/* ── FEAT-336: Activity timeline tab ─────────────────────────────────────────── */
/* Prefix: b360-act- */

.b360-act-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 4px;
}

.b360-act-summary {
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 12px;
}

body[data-theme="light"] .b360-act-summary { background: #f0fdf4; color: #166534; }
body[data-theme="dark"]  .b360-act-summary { background: #14532d; color: #86efac; }

.b360-act-summary--alert {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
body[data-theme="dark"] .b360-act-summary--alert {
    background: #450a0a !important;
    color: #fca5a5 !important;
}

/* Timeline scroll wrapper — horizontal scroll on narrow screens */
.b360-act-timeline-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
}

.b360-act-timeline-table {
    border-collapse: collapse;
    min-width: 480px;
    width: 100%;
}

/* Lane label column (sticky left) */
.b360-act-lane-label {
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px 4px 0;
    min-width: 72px;
    position: sticky;
    left: 0;
    z-index: 1;
}
body[data-theme="light"] .b360-act-lane-label { background: #fff; color: #6b7280; }
body[data-theme="dark"]  .b360-act-lane-label { background: #0f1117; color: #9ca3af; }

/* Day header cells */
.b360-act-day-th {
    font-size: 0.7rem;
    text-align: center;
    padding: 2px 2px 6px;
    white-space: nowrap;
    min-width: 32px;
    font-weight: 600;
}
body[data-theme="light"] .b360-act-day-th { color: #6b7280; }
body[data-theme="dark"]  .b360-act-day-th { color: #9ca3af; }

/* Day cells — baseline */
.b360-act-cell {
    text-align: center;
    font-size: 0.78rem;
    padding: 2px 2px;
    height: 28px;
    border-right: 1px solid transparent;
}
body[data-theme="light"] .b360-act-cell { border-right-color: #f3f4f6; }
body[data-theme="dark"]  .b360-act-cell { border-right-color: #1f2937; }

/* RO cells */
.b360-act-ro--open   { background: #fff7ed; color: #c2410c; }
.b360-act-ro--sameday { background: #f0fdf4; color: #166534; }
.b360-act-ro--closed  { background: #f3f4f6; color: #6b7280; }
body[data-theme="dark"] .b360-act-ro--open    { background: #431407; color: #fdba74; }
body[data-theme="dark"] .b360-act-ro--sameday { background: #14532d; color: #86efac; }
body[data-theme="dark"] .b360-act-ro--closed  { background: #1f2937; color: #9ca3af; }

/* Dispatch cells */
.b360-act-dispatch--conflict { background: #fee2e2; color: #991b1b; }
.b360-act-dispatch--ok       { background: #e0f2fe; color: #0369a1; }
body[data-theme="dark"] .b360-act-dispatch--conflict { background: #450a0a; color: #fca5a5; }
body[data-theme="dark"] .b360-act-dispatch--ok       { background: #0c4a6e; color: #7dd3fc; }

/* PRS cells */
.b360-act-prs--ok     { background: #d1fae5; color: #065f46; }
.b360-act-prs--zero   { background: #fee2e2; color: #991b1b; }
.b360-act-prs--nodata { background: transparent; }
body[data-theme="dark"] .b360-act-prs--ok     { background: #064e3b; color: #6ee7b7; }
body[data-theme="dark"] .b360-act-prs--zero   { background: #450a0a; color: #fca5a5; }

/* Legend */
.b360-act-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 16px;
    font-size: 0.77rem;
}
.b360-act-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.b360-act-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.b360-act-dot--amber   { background: #fff7ed; border: 1px solid #c2410c; }
.b360-act-dot--neutral { background: #f0fdf4; border: 1px solid #166534; }
.b360-act-dot--red     { background: #fee2e2; border: 1px solid #991b1b; }
.b360-act-dot--ok      { background: #e0f2fe; border: 1px solid #0369a1; }
.b360-act-dot--green   { background: #d1fae5; border: 1px solid #065f46; }
.b360-act-dot--prs-zero { background: #fee2e2; border: 1px solid #991b1b; }
body[data-theme="dark"] .b360-act-dot--amber   { background: #431407; border-color: #fdba74; }
body[data-theme="dark"] .b360-act-dot--neutral { background: #14532d; border-color: #86efac; }
body[data-theme="dark"] .b360-act-dot--red     { background: #450a0a; border-color: #fca5a5; }
body[data-theme="dark"] .b360-act-dot--ok      { background: #0c4a6e; border-color: #7dd3fc; }
body[data-theme="dark"] .b360-act-dot--green   { background: #064e3b; border-color: #6ee7b7; }
body[data-theme="dark"] .b360-act-dot--prs-zero { background: #450a0a; border-color: #fca5a5; }

/* Event list */
.b360-act-ev-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.b360-act-ev {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
}
body[data-theme="light"] .b360-act-ev { background: #f9fafb; }
body[data-theme="dark"]  .b360-act-ev { background: #1a1d2e; }

.b360-act-ev--conflict {
    border-left: 3px solid #dc2626;
}
body[data-theme="light"] .b360-act-ev--conflict { background: #fef2f2; }
body[data-theme="dark"]  .b360-act-ev--conflict { background: #2d0a0a; }

.b360-act-ev--prs-zero {
    opacity: 0.65;
}

.b360-act-ev-date {
    font-weight: 700;
    white-space: nowrap;
    min-width: 100px;
    font-size: 0.82rem;
}
.b360-act-ev-meta {
    font-size: 0.82rem;
    white-space: nowrap;
}
body[data-theme="light"] .b360-act-ev-meta { color: #4b5563; }
body[data-theme="dark"]  .b360-act-ev-meta { color: #9ca3af; }

.b360-act-ev-reason {
    font-size: 0.82rem;
    font-weight: 600;
    flex-basis: 100%;
    padding-top: 2px;
}
body[data-theme="light"] .b360-act-ev-reason { color: #991b1b; }
body[data-theme="dark"]  .b360-act-ev-reason { color: #fca5a5; }

.b360-act-ev-note {
    font-size: 0.8rem;
    font-style: italic;
}
body[data-theme="light"] .b360-act-ev-note { color: #6b7280; }
body[data-theme="dark"]  .b360-act-ev-note { color: #9ca3af; }

@media (max-width: 480px) {
    .b360-act-filters { flex-direction: column; align-items: flex-start; }
    .b360-act-filters .b360-search-btn { width: 100%; min-height: 40px; }
    .b360-act-ev { flex-direction: column; gap: 3px; }
    .b360-act-ev-date { min-width: unset; }
    .b360-act-legend { gap: 8px; }
}

/* FEAT-336 event table (Jack UAT: table feel + driver ID) */
.b360-act-ev-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.b360-act-th { text-align: left; padding: 7px 10px; border-bottom: 2px solid var(--b360-border,#d0d5dd); font-weight: 600; white-space: nowrap; }
.b360-act-td { padding: 6px 10px; border-bottom: 1px solid var(--b360-border,#eaecf0); vertical-align: top; }
.b360-act-td--num { text-align: right; }
.b360-act-row--conflict { background: rgba(220,53,69,0.08); }
.b360-act-row--prs-zero { background: rgba(220,53,69,0.04); }
.b360-act-td--conflict { color: #dc3545; font-weight: 600; }
.b360-act-drv-id { font-weight: 600; font-family: monospace; }
.b360-act-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; color: #fff; }
.b360-act-badge--disp   { background: #4a6cf7; }
.b360-act-badge--ro     { background: #fd7e14; }
.b360-act-badge--prs    { background: #12b76a; }
/* FEAT-340: RO open while in service — amber, CVD-safe (distinct from red conflict) */
.b360-act-badge--ro-open { background: #b45309; }
body[data-theme="dark"] .b360-act-badge--ro-open { background: #d97706; }
/* FEAT-340: legend dot */
.b360-act-dot--ro-open { background: #fffbeb; border: 1px solid #b45309; }
body[data-theme="dark"] .b360-act-dot--ro-open { background: #451a03; border-color: #fbbf24; }
body[data-theme="dark"] .b360-act-th { border-bottom-color: #3a3f4b; }
body[data-theme="dark"] .b360-act-td { border-bottom-color: #2a2f3b; }