@import url('bc/tokens.css');
@import url('bc/tokens-dark.css');
@import url('bc/fonts.css');
@import url('legacy-bridge.css');

:root {
    /* Colors - Core (legacy names bridged to --bc-* via legacy-bridge.css) */
    --white: #ffffff;
    --secondary-color: var(--gold);
    --accent-color: var(--gold);
    --success-color: #28a745;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg: #F6F7F9;
    --background-light: #f9fafb;
    --line: #E6E7EA;
    --color-2: #5C5C5C;
    --color-16: #f8f9fa;
    --color-66: #374151;
    --color-67: #B45309;
    --color-68: #7A8593;
    --black: #000;
    --rgba-green-012: rgba(46, 125, 50, 0.12);
    --rgba-green-03: rgba(46, 125, 50, 0.3);
    --rgba-red-012: rgba(220, 38, 38, 0.12);
    --rgba-red-03: rgba(220, 38, 38, 0.3);
    --rgba-gray-012: rgba(107, 114, 128, 0.12);
    --rgba-gray-03: rgba(107, 114, 128, 0.3);
    --rgba-orange-012: rgba(180, 83, 9, 0.12);
    --rgba-orange-03: rgba(180, 83, 9, 0.3);
    --rgba-blue-012: rgba(59, 130, 246, 0.12);
    --rgba-blue-03: rgba(59, 130, 246, 0.3);
    --rgba-black-002: rgba(16, 24, 40, 0.02);
    --rgba-black-005: rgba(0, 0, 0, 0.05);
    --rgba-black-006: rgba(16, 24, 40, 0.06);
    --rgba-black-01: rgba(0, 0, 0, 0.1);
    --rgba-primary-025: rgba(44, 62, 80, 0.25);
    --rgba-shadow-md: rgba(0, 0, 0, 0.15);
    --bc-btn-radius: var(--border-radius-md);
    --bc-btn-font-weight: 600;
    --bc-btn-focus-ring: 0 0 0 0.2rem var(--rgba-gold-025);
    --bc-btn-neutral-focus-ring: 0 0 0 0.2rem var(--rgba-primary-025);
    --bc-btn-neutral-bg: var(--primary-color);
    --bc-btn-neutral-hover-bg: var(--color-2);
    --border-radius-md: 0.5rem;

    /* Legacy aliases */
    --base-color: var(--primary-color);
    --links-color: var(--gold);
    --primary-btn-bg: var(--primary-color);
    --primary-btn-hover: var(--color-2);
    --primary-btn-text: #FFFFFF;
    --secondary-btn-bg: var(--gold);
    --secondary-btn-hover: var(--color-18);
    --secondary-btn-text: #FFFFFF;

    /* Bootstrap Override */
    --bs-btn-disabled-opacity: 0.65;
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(0, 0, 0, 0.125);
    /* Additional variables needed for the login form */
    --body-bg-color: 255, 255, 255;
    --body-text-color: 18, 17, 16;
    --base-font-family: var(--bc-font-body);
    --base-font-weight: 400;
    --base-text-size: 16px;
    --base-line-height: 1.5;

    --heading-color: 18, 17, 16;
    --heading-font-family: var(--bc-font-display);
    --heading-font-weight: 600;
    --larger-text-size: 24px;

    --text-color: 107, 114, 128;
    --link-color: 151, 131, 101;

    --input-border-color: #d1d5db;
    --input-border-color-active: var(--bc-accent-9);
    --input-background-color: 255, 255, 255;
    --input-text-color: 18, 17, 16;
    --input-text-size: 16px;

    --btn-bg-color: 18, 17, 16;
    --btn-bg-hover-color: 92, 92, 92;
    --btn-text-color: 255, 255, 255;
    --btn-text-hover-color: 255, 255, 255;
    --btn-border-radius: 8px;
    --btn-letter-spacing: 0.025em;
    --btn-text-transform: none;
    --button-text-size: 16px;

    --gutter-desktop: 24px;
    --gutter-mobile: 16px;
    --gutter-large: 32px;
    --section-padding: 32px;
    --input-btn-padding-top: 16px;

    --smaller-text-size-1: 14px;
    --smaller-text-size-2: 14px;

    --maxw: 1600px;
    --maxw-xs: 576px;
    --maxw-sm: 768px;
    --maxw-md: 992px;
    --maxw-lg: 1200px;
    --maxw-xl: 1400px;
    --maxw-2xl: 1500px;
    --maxw-3xl: 1800px;
    --maxw-4xl: 2100px;
    --gutter-large: 30px;
    --gutter-desktop: 20px;
    --gutter-mobile: 16px;
    --section-padding: 50px;
    --larger-section-padding: 80px;
    --larger-section-padding-mobile: 60px;
    --largest-section-padding: 110px;
}

.order-card {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-4);
    box-shadow: var(--bc-shadow-1);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.order-card:hover {
    border-color: var(--bc-neutral-7);
    box-shadow: var(--bc-shadow-2);
    transform: none;
}

.status-badge {
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    padding: 2px 8px;
    border-radius: var(--bc-radius-full);
    background: var(--bc-neutral-4);
    color: var(--bc-neutral-11);
}

.customer-info {
    max-width: 200px;
}

.item-badge {
    font-size: 0.7rem;
    margin: 0.1rem;
}

.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.stats-card {
    background: linear-gradient(135deg, var(--bc-neutral-12) 0%, var(--bc-neutral-11) 100%);
    color: var(--bc-bg-surface);
    border-radius: var(--bc-radius-4);
    border: 1px solid var(--bc-border-subtle);
}

.table-responsive {
    border-radius: var(--bc-radius-4);
    overflow: hidden;
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-bg-surface);
}

.btn-generate-label {
    transition: all 0.2s ease;
    background-color: var(--gold) !important;
    color: white !important;
    border-color: var(--gold) !important;
}

.btn-generate-label:hover {
    transform: scale(1.05);
    background-color: var(--color-23) !important;
    border-color: var(--color-23) !important;
}

/* Primary button styling */
.btn-primary {
    background-color: var(--bc-accent-9) !important;
    border-color: var(--bc-accent-10) !important;
    color: var(--bc-accent-contrast) !important;
    font-family: var(--bc-font-body);
    font-weight: var(--bc-font-weight-semibold);
    border-radius: var(--bc-radius-3);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bc-accent-10) !important;
    border-color: var(--bc-accent-11) !important;
}

/* --- BagCaddie ops UI primitives (Bootstrap-free) --- */

.bc-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.bc-center-block {
    text-align: center;
    padding: var(--bc-space-8) var(--bc-space-4);
}

.bc-alert {
    padding: var(--bc-space-4);
    border-radius: var(--bc-radius-4);
    border: 1px solid var(--bc-border-subtle);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    text-align: left;
}

.bc-alert--warning {
    background: var(--bc-warning-3);
    border-color: var(--bc-warning-7);
    color: var(--bc-warning-11);
}

.bc-alert--danger {
    background: var(--bc-error-3);
    border-color: var(--bc-error-7);
    color: var(--bc-error-11);
}

.bc-alert__title {
    margin: 0 0 var(--bc-space-2);
    font-size: var(--bc-font-size-lg);
    font-weight: var(--bc-font-weight-semibold);
}

.bc-alert__body {
    margin: 0 0 var(--bc-space-3);
}

.bc-ops-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-bg-surface);
    color: var(--bc-text-primary);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-semibold);
    border-radius: var(--bc-radius-3);
    padding: 0 var(--bc-space-3);
    height: var(--bc-btn-height-md);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bc-ops-btn:hover,
.bc-ops-btn:focus-visible {
    background: var(--bc-neutral-3);
    border-color: var(--bc-neutral-12);
    outline: none;
}

.bc-ops-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.bc-ops-btn--sm {
    height: var(--bc-btn-height-sm);
    font-size: var(--bc-font-size-xs);
    padding: 0 var(--bc-space-3);
}

.bc-ops-btn--primary {
    background: var(--bc-accent-9);
    border-color: var(--bc-accent-10);
    color: var(--bc-accent-contrast);
}

.bc-ops-btn--primary:hover,
.bc-ops-btn--primary:focus-visible {
    background: var(--bc-accent-10);
    border-color: var(--bc-accent-11);
    color: var(--bc-accent-contrast);
}

.bc-ops-btn__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bc-border-subtle);
    border-top-color: var(--bc-text-primary);
    border-radius: 50%;
    animation: bc-ops-spin 0.7s linear infinite;
}

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

.btn-secondary-custom {
    background-color: var(--bc-neutral-12) !important;
    color: var(--bc-bg-surface) !important;
    border-color: var(--bc-neutral-12) !important;
}

.btn-secondary-custom:hover {
    background-color: var(--bc-neutral-11) !important;
    color: var(--bc-bg-surface) !important;
    border-color: var(--bc-neutral-11) !important;
}

/* ── CaddieTrack app shell ── */
:root {
    --bc-sidebar-width: 240px;
    --bc-sidebar-collapsed-width: 72px;
    --bc-shell-header-height: 56px;
    --bc-shell-brand-logo-height: calc(var(--bc-shell-header-height) * 0.78);
    --bc-shell-product-font-size: calc(var(--bc-shell-header-height) * 0.32);
}

.bc-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--bc-space-2);
    z-index: 1000;
    padding: var(--bc-space-2) var(--bc-space-3);
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
    border-radius: var(--bc-radius-2);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    text-decoration: none;
}

.bc-skip-link:focus {
    left: var(--bc-space-2);
    color: var(--bc-text-on-dark);
}

.bc-caddietrack-shell {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bc-bg-page);
    font-family: var(--bc-font-body);
    color: var(--bc-text-primary);
    overflow: hidden;
}

.bc-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--bc-shell-header-height);
    min-height: var(--bc-shell-header-height);
    padding: 0 var(--bc-space-4);
    background: var(--bc-bg-surface);
    border-bottom: 1px solid var(--bc-border-subtle);
    position: sticky;
    top: 0;
    z-index: 200;
}

.bc-shell-header__start {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
    min-width: 0;
}

.bc-shell-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-2);
    background: var(--bc-bg-surface);
    color: var(--bc-text-primary);
    cursor: pointer;
    padding: 0;
}

.bc-shell-header__menu-btn:hover {
    background: var(--bc-neutral-3);
}

.bc-shell-header__brand {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
    min-width: 0;
    height: 100%;
}

.bc-shell-header__brand-logo {
    flex-shrink: 0;
    display: block;
    width: auto;
    max-width: min(220px, 42vw);
    object-fit: contain;
    object-position: left center;
}

.bc-shell-header__brand-logo.is-wordmark {
    height: var(--bc-shell-brand-logo-height);
    max-height: calc(var(--bc-shell-header-height) - var(--bc-space-2));
}

/* Badge crest: gold shield on black — screen drops the black plate */
.bc-shell-header__brand-logo.is-badge {
    height: min(var(--bc-shell-brand-logo-height), calc(var(--bc-shell-header-height) * 0.85));
    max-height: calc(var(--bc-shell-header-height) - var(--bc-space-2));
    mix-blend-mode: screen;
}

.bc-shell-header__product {
    font-family: var(--bc-font-body);
    font-size: var(--bc-shell-product-font-size);
    font-weight: var(--bc-font-weight-bold);
    color: var(--bc-text-primary);
    letter-spacing: var(--bc-letter-spacing-tight);
    line-height: 1;
    white-space: nowrap;
}

.bc-shell-header__utilities {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    min-width: 120px;
    justify-content: flex-end;
}

.bc-shell-body {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.bc-shell-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--bc-shell-header-height);
    z-index: 150;
    border: 0;
    padding: 0;
    background: var(--bc-overlay-scrim);
    cursor: pointer;
}

.bc-shell-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--bc-sidebar-width);
    flex-shrink: 0;
    background: var(--bc-neutral-2);
    border-right: 1px solid var(--bc-border-subtle);
    min-height: calc(100vh - var(--bc-shell-header-height));
    position: sticky;
    top: var(--bc-shell-header-height);
    align-self: flex-start;
    max-height: calc(100vh - var(--bc-shell-header-height));
    transition: width 0.2s ease;
}

.bc-caddietrack-shell.is-sidebar-collapsed .bc-shell-sidebar {
    width: var(--bc-sidebar-collapsed-width);
}

.bc-shell-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--bc-space-3) var(--bc-space-2);
}

.bc-shell-sidebar__group {
    margin-bottom: var(--bc-space-4);
}

.bc-shell-sidebar__group:last-child {
    margin-bottom: 0;
}

.bc-shell-sidebar__group-label {
    margin: 0 0 var(--bc-space-2);
    padding: 0 var(--bc-space-2);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    letter-spacing: var(--bc-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--bc-text-muted);
}

.bc-shell-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bc-shell-sidebar__item {
    margin-bottom: 2px;
}

.bc-shell-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
    padding: 10px var(--bc-space-2);
    border-radius: var(--bc-radius-2);
    color: var(--bc-text-secondary);
    text-decoration: none;
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-medium);
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 40px;
}

.bc-shell-sidebar__link:hover {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.bc-shell-sidebar__link.is-active {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
    border-left-color: var(--bc-neutral-12);
    font-weight: var(--bc-font-weight-semibold);
}

.bc-shell-sidebar__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--bc-neutral-9);
    line-height: 0;
}

.bc-shell-sidebar__link.is-active .bc-shell-sidebar__icon {
    color: var(--bc-neutral-12);
}

.bc-shell-sidebar__label {
    flex: 1;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-shell-sidebar__external {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--bc-text-muted);
    opacity: 0.7;
}

.bc-caddietrack-shell.is-sidebar-collapsed .bc-shell-sidebar__label,
.bc-caddietrack-shell.is-sidebar-collapsed .bc-shell-sidebar__external,
.bc-caddietrack-shell.is-sidebar-collapsed .bc-shell-sidebar__group-label {
    display: none;
}

.bc-caddietrack-shell.is-sidebar-collapsed .bc-shell-sidebar__link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.bc-shell-sidebar__footer {
    padding: var(--bc-space-2);
    border-top: 1px solid var(--bc-border-subtle);
}

.bc-shell-sidebar__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    width: 100%;
    padding: 8px var(--bc-space-2);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-2);
    background: var(--bc-bg-surface);
    color: var(--bc-text-secondary);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-medium);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bc-shell-sidebar__collapse-btn:hover {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.bc-shell-sidebar__collapse-icon.is-flipped {
    transform: rotate(180deg);
}

.bc-app-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bc-app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bc-bg-page);
}

.bc-app-loading__spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--bc-neutral-5);
    border-top-color: var(--bc-accent-9);
    border-radius: 50%;
    animation: bc-spin 0.7s linear infinite;
}

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

@media (max-width: 1023px) {
    .bc-caddietrack-shell:not(.is-mobile-nav-open) {
        --bc-sidebar-collapsed-width: 72px;
    }

    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar {
        width: var(--bc-sidebar-collapsed-width);
    }

    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar__label,
    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar__external,
    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar__group-label,
    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar__collapse-btn span {
        display: none;
    }

    .bc-caddietrack-shell:not(.is-mobile-nav-open) .bc-shell-sidebar__link {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .bc-shell-header__menu-btn {
        display: inline-flex;
    }

    .bc-shell-sidebar {
        position: fixed;
        left: 0;
        top: var(--bc-shell-header-height);
        bottom: 0;
        z-index: 160;
        width: var(--bc-sidebar-width);
        max-height: none;
        min-height: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--bc-shadow-2);
    }

    .bc-shell-sidebar.is-mobile-open {
        transform: translateX(0);
    }

    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-drawer-backdrop {
        display: block;
    }

    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar {
        width: var(--bc-sidebar-width);
    }

    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar__label,
    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar__external,
    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar__group-label,
    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar__collapse-btn span {
        display: inline;
    }

    .bc-caddietrack-shell.is-mobile-nav-open .bc-shell-sidebar__link {
        justify-content: flex-start;
    }

    .bc-shell-sidebar__collapse-btn {
        display: none;
    }
}

/* Legacy horizontal nav — superseded by CaddieTrack shell */

/* Orders table surfaces */
.table {
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    color: var(--bc-text-primary);
    margin-bottom: 0;
}

.table thead th {
    background: var(--bc-neutral-2);
    color: var(--bc-text-secondary);
    font-weight: var(--bc-font-weight-semibold);
    font-size: var(--bc-font-size-xs);
    letter-spacing: var(--bc-letter-spacing-label);
    text-transform: uppercase;
    border-bottom: 1px solid var(--bc-border-subtle);
    padding: var(--bc-space-3) var(--bc-space-3);
}

.table tbody td {
    border-bottom: 1px solid var(--bc-neutral-3);
    padding: var(--bc-space-3);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--bc-neutral-2);
}

.table-dark {
    background-color: var(--bc-neutral-12) !important;
}

.navbar-dark {
    background-color: var(--bc-bg-surface) !important;
}

.card-header.bg-primary {
    background-color: var(--bc-neutral-2) !important;
    color: var(--bc-text-primary) !important;
    border-bottom: 1px solid var(--bc-border-subtle) !important;
    font-family: var(--bc-font-body);
    font-weight: var(--bc-font-weight-semibold);
}

.btn-outline-light:hover {
    background-color: var(--links-color) !important;
    border-color: var(--links-color) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--bc-accent-9) !important;
    border-color: var(--bc-accent-9) !important;
    color: var(--bc-accent-contrast) !important;
}

.pagination .page-link {
    color: var(--bc-text-primary) !important;
    border-color: var(--bc-border-subtle) !important;
}

.pagination .page-link:hover {
    background-color: var(--bc-neutral-2) !important;
    color: var(--bc-accent-11) !important;
}

.table-dark {
    background-color: var(--base-color) !important;
}

.badge.bg-primary {
    background-color: var(--bc-info-3) !important;
    color: var(--bc-info-11) !important;
}

.badge.bg-success {
    background-color: var(--bc-success-3) !important;
    color: var(--bc-success-11) !important;
}

.badge.bg-warning {
    background-color: var(--bc-warning-3) !important;
    color: var(--bc-warning-11) !important;
}

.badge.bg-info {
    background-color: var(--bc-info-3) !important;
    color: var(--bc-info-11) !important;
}

.text-primary {
    color: var(--bc-accent-11) !important;
}

.link-primary {
    color: var(--bc-accent-11) !important;
}

.link-primary:hover {
    color: var(--bc-accent-9) !important;
}

/* Error display styles */
.error-details {
    max-width: 300px;
    word-wrap: break-word;
}

.error-details .small {
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.error-details .small:last-child {
    margin-bottom: 0;
}

/* Labels column width for better error display */
.table th:nth-child(4),
.table td:nth-child(4) {
    min-width: 250px;
    max-width: 350px;
}

/* Shipping addresses display */
.shipping-addresses {
    max-width: 300px;
    font-size: 0.8rem;
}

.shipping-addresses .small {
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.shipping-addresses .small div {
    margin-bottom: 0.1rem;
}

.shipping-addresses .small div:last-child {
    margin-bottom: 0;
}

/* Enhanced table responsiveness */
.table-responsive {
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--base-color);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--links-color);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.85rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }

    .table th:nth-child(4),
    .table td:nth-child(4) {
        min-width: 200px;
        max-width: 250px;
    }

    .shipping-addresses {
        max-width: 200px;
        font-size: 0.75rem;
    }

    .error-details {
        max-width: 200px;
    }

    .customer-info {
        max-width: 150px;
    }

    .item-badge {
        font-size: 0.65rem;
        margin: 0.05rem;
    }

    .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 576px) {
    .table-responsive {
        font-size: 0.8rem;
    }

    .table th,
    .table td {
        padding: 0.25rem 0.15rem;
    }

    .table th:nth-child(4),
    .table td:nth-child(4) {
        min-width: 180px;
        max-width: 220px;
    }

    .shipping-addresses {
        max-width: 180px;
        font-size: 0.7rem;
    }

    .error-details {
        max-width: 180px;
    }

    .customer-info {
        max-width: 120px;
    }

    .item-badge {
        font-size: 0.6rem;
        margin: 0.03rem;
    }

    .badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }

    .btn-sm {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
}

/* BagCaddie Login Form Styling using CSS Variables */
.bagcaddie-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bc-bg-page);
    font-family: var(--bc-font-body);
}

.bagcaddie-login-wrapper {
    width: 100%;
    max-width: 450px;
    padding: var(--bc-space-5);
}

.bagcaddie-login-form {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-5);
    padding: var(--bc-space-8) var(--bc-space-6);
    box-shadow: var(--bc-shadow-3);
}

.bagcaddie-login-title {
    color: var(--bc-text-primary);
    font-size: var(--bc-font-size-2xl);
    font-weight: var(--bc-font-weight-semibold);
    font-family: var(--bc-font-body);
    margin: 0 0 var(--bc-space-3) 0;
    line-height: var(--bc-line-height-tight);
}

.bagcaddie-login-subtitle {
    color: var(--bc-text-muted);
    font-size: var(--bc-font-size-sm);
    margin: 0;
    line-height: var(--bc-line-height-normal);
}

.bagcaddie-login-header {
    text-align: center;
    margin-bottom: var(--bc-space-6);
}

.bagcaddie-form {
    width: 100%;
}

.bagcaddie-form-field {
    margin-bottom: var(--gutter-desktop);
}

.bagcaddie-label {
    display: block;
    color: rgb(var(--heading-color));
    font-size: var(--smaller-text-size-2);
    font-weight: 500;
    font-family: var(--base-font-family);
    margin-bottom: 8px;
    line-height: var(--base-line-height);
}

.login-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-icon {
    position: absolute;
    left: 15px;
    color: rgb(var(--text-color));
    font-size: var(--base-text-size);
    z-index: 2;
}

.bagcaddie-input {
    width: 100% !important;
    padding: var(--input-btn-padding-top) var(--input-btn-padding-top) var(--input-btn-padding-top) 45px !important;
    border: 2px solid var(--input-border-color) !important;
    border-radius: var(--btn-border-radius) !important;
    font-size: var(--input-text-size) !important;
    font-weight: 400;
    color: rgb(var(--input-text-color)) !important;
    background: rgb(var(--input-background-color)) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: var(--base-line-height) !important;
    height: auto !important;
    min-height: 50px !important;
    font-family: var(--base-font-family) !important;
    outline: none !important;
}

.bagcaddie-input:focus {
    outline: none !important;
    border-color: var(--input-border-color-active) !important;
    box-shadow: 0 0 0 3px rgba(179, 128, 43, 0.1) !important;
    background: rgb(var(--input-background-color)) !important;
}

.bagcaddie-input::placeholder {
    color: rgb(var(--text-color));
    opacity: 0.7;
}

.bagcaddie-input-error {
    border-color: #dc3545;
}

.bagcaddie-input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.bagcaddie-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--btn-border-radius);
    padding: 12px;
    margin-bottom: 20px;
    color: #721c24;
    font-size: var(--smaller-text-size-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bagcaddie-error i {
    font-size: 16px;
    flex-shrink: 0;
}

.bagcaddie-button {
    width: 100%;
    background: var(--bc-accent-9);
    color: var(--bc-accent-contrast);
    border: 1px solid var(--bc-accent-10);
    padding: var(--bc-space-3) var(--bc-space-5);
    border-radius: var(--bc-radius-3);
    font-size: var(--bc-font-size-base);
    font-weight: var(--bc-font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bc-space-2);
    text-decoration: none;
    font-family: var(--bc-font-body);
    min-height: 48px;
}

.bagcaddie-button:hover {
    background: var(--bc-accent-10);
    border-color: var(--bc-accent-11);
    color: var(--bc-accent-contrast);
    transform: none;
    box-shadow: none;
}

.bagcaddie-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bagcaddie-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.login-footer {
    text-align: center;
    margin-top: 20px;
}

.login-footer-text {
    color: rgb(var(--text-color));
    font-size: var(--smaller-text-size-1);
    opacity: 0.7;
}

/* Tracking Modal Timeline Styles */
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 50px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: white;
    border: 3px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.timeline-marker i {
    font-size: 14px;
}

.timeline-content {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-content h6 {
    margin-bottom: 8px;
    color: #333;
}

.timeline-content p {
    margin-bottom: 5px;
    color: #666;
}

.timeline-content small {
    color: #999;
}

/* Timeline status colors */
.timeline-marker .text-success {
    color: #28a745 !important;
}

.timeline-marker .text-info {
    color: #17a2b8 !important;
}

.timeline-marker .text-warning {
    color: #ffc107 !important;
}

.timeline-marker .text-secondary {
    color: #6c757d !important;
}

.timeline-marker .text-primary {
    color: var(--base-color) !important;
}

/* Modal enhancements */
.modal-xl {
    max-width: 90%;
}

.tracking-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.tracking-item .card {
    border: none;
    border-radius: 0;
}

.tracking-item .card:first-child {
    border-radius: 8px 8px 0 0;
}

.tracking-item .card:last-child {
    border-radius: 0 0 8px 8px;
}

/* Responsive timeline */
@media (max-width: 768px) {
    .timeline::before {
        left: 15px;
    }

    .timeline-item {
        padding-left: 40px;
    }

    .timeline-marker {
        width: 30px;
        height: 30px;
    }

    .timeline-marker i {
        font-size: 12px;
    }

    .timeline-content {
        padding: 10px;
    }

    .modal-xl {
        max-width: 95%;
        margin: 10px;
    }
}

/* Button spacing in actions column */
.d-flex.flex-column.gap-1 .btn {
    margin-bottom: 0.25rem;
}

.d-flex.flex-column.gap-1 .btn:last-child {
    margin-bottom: 0;
}

/* BC Tracking Modal Styles */
.bc-tracking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.bc-tracking-modal-container {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid #e9ecef;
}

.bc-tracking-modal-header {
    background-color: var(--base-color);
    color: white;
    padding: 1rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bc-tracking-modal-title {
    margin: 0;
    color: #ffffff;
}

.bc-tracking-modal-subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
}

.bc-tracking-modal-close-btn {
    border: none;
    background: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: auto;
    height: auto;
    transition: opacity 0.2s ease;
}

.bc-tracking-modal-close-btn:hover {
    opacity: 0.8;
    color: var(--links-color);
}

.bc-tracking-modal-body {
    padding: 1rem;
}

.bc-tracking-modal-footer {
    padding: 1rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    background-color: #f8f9fa;
}

/* Theme-consistent button styling within modal */
.bc-tracking-modal-body .btn-outline-primary {
    color: var(--base-color) !important;
    border-color: var(--base-color) !important;
    background: transparent !important;
}

.bc-tracking-modal-body .btn-outline-primary:hover {
    background-color: var(--base-color) !important;
    color: white !important;
}

.bc-tracking-modal-body .btn-secondary {
    background-color: var(--base-color) !important;
    border-color: var(--base-color) !important;
    color: white !important;
}

.bc-tracking-modal-body .btn-secondary:hover {
    background-color: var(--primary-btn-hover) !important;
    border-color: var(--primary-btn-hover) !important;
}

/* Track Details button styling */
.bc-track-details-btn {
    background-color: var(--secondary-btn-bg) !important;
    border-color: var(--secondary-btn-bg) !important;
    color: var(--secondary-btn-text) !important;
}

.bc-track-details-btn:hover {
    background-color: var(--secondary-btn-hover) !important;
    border-color: var(--secondary-btn-hover) !important;
    color: var(--base-color) !important;
}

/* External Track button styling */
.bc-external-track-btn {
    color: var(--secondary-btn-bg) !important;
    border-color: var(--secondary-btn-bg) !important;
    background-color: transparent !important;
}

.bc-external-track-btn:hover {
    background-color: var(--secondary-btn-bg) !important;
    border-color: var(--secondary-btn-bg) !important;
    color: var(--secondary-btn-text) !important;
}

/* Modal debugging and fixes */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal-dialog {
    z-index: 1060 !important;
}

/* Ensure modal is visible */
.modal.show {
    display: block !important;
}

.modal-backdrop.show {
    display: block !important;
}


/* ActiveTrips Component Styles — Figma ops tier (docs/design-system) */
.active-trips-container {
    padding: var(--bc-space-5) var(--bc-space-4);
    background: transparent;
    font-family: var(--bc-font-body);
    color: var(--bc-text-primary);
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.active-trips-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ops-command-center {
    flex-shrink: 0;
    z-index: 2;
    background: var(--bc-bg-page);
    padding-bottom: var(--bc-space-2);
    margin-bottom: var(--bc-space-3);
    border-bottom: 1px solid var(--bc-border-subtle);
}

.ops-board-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.ops-board-scroll--table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ops-board-scroll--table .ops-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.active-trips-content .filter-summary,
.active-trips-content .search-summary {
    flex-shrink: 0;
}

.ops-command-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--bc-space-3);
    align-items: start;
    margin-bottom: var(--bc-space-3);
}

.ops-command-header__intro {
    grid-column: 1;
    grid-row: 1;
}

.ops-command-header__actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ops-command-header .ops-kpi-strip {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-bottom: 0;
}

.ops-page-eyebrow {
    margin: 0;
    color: var(--bc-text-primary);
    font-family: var(--bc-font-display);
    font-size: var(--bc-font-size-lg);
    font-weight: var(--bc-font-weight-semibold);
    line-height: var(--bc-line-height-tight);
}

.ops-page-desc,
.active-trips-updated {
    color: var(--bc-text-muted);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-normal);
}

.ops-page-desc {
    margin: 2px 0 0;
}

.active-trips-updated {
    white-space: nowrap;
}

.active-trips-content .board {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: var(--bc-space-4);
    margin-top: var(--bc-space-3);
}

.active-trips-content .board.board--delivered-only {
    grid-template-columns: minmax(280px, 1fr);
    max-width: 480px;
}

.active-trips-content .board.list-mode {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.active-trips-content .column {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.active-trips-content .column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bc-space-3) var(--bc-space-3) var(--bc-space-2);
    background: var(--bc-neutral-2);
    border-bottom: 1px solid var(--bc-border-subtle);
    position: sticky;
    top: 0;
    z-index: 1;
}

.active-trips-content .col-title {
    margin: 0;
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-text-primary);
}

.active-trips-content .col-count {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    color: var(--bc-text-muted);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-medium);
    padding: 2px 8px;
    border-radius: var(--bc-radius-full);
    min-width: 1.5rem;
    text-align: center;
}

.active-trips-content .col-body {
    padding: var(--bc-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--bc-space-3);
    min-height: 120px;
    background: var(--bc-bg-surface);
}

.active-trips-content .col-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 80px;
    padding: 16px 12px;
    text-align: center;
}

.active-trips-content .column.list-mode {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.active-trips-content .column.list-mode:first-child {
    border-top: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-5) var(--bc-radius-5) 0 0;
}

.active-trips-content .column.list-mode:last-child {
    border-radius: 0 0 var(--bc-radius-5) var(--bc-radius-5);
}

.active-trips-content .col-empty p {
    margin: 0;
    font-size: var(--bc-font-size-sm);
    color: var(--bc-text-muted);
    line-height: var(--bc-line-height-normal);
}

.active-trips-content .card {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-4);
    padding: var(--bc-space-3);
    box-shadow: var(--bc-shadow-1);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.active-trips-content .card:hover {
    border-color: var(--bc-neutral-7);
    box-shadow: var(--bc-shadow-2);
}

.active-trips-content .card-head {
    display: flex;
    flex-direction: column;
    gap: var(--bc-space-2);
    align-items: stretch;
    margin-bottom: var(--bc-space-2);
}

.active-trips-content .card-head__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bc-space-2);
}

.ops-badge-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-1);
    padding: var(--bc-space-2);
    background: var(--bc-neutral-2);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
}

.ops-badge-rail .status-pill {
    margin: 0;
}

.active-trips-content .card-head__top + .ops-badge-rail {
    margin-top: var(--bc-space-1);
}

.ops-badge-rail + .ops-profile-row {
    margin-top: var(--bc-space-2);
    padding-top: var(--bc-space-2);
    border-top: 1px solid var(--bc-border-subtle);
}

.active-trips-content .card-head__top + .ops-profile-row {
    margin-top: 0;
    padding-top: var(--bc-space-2);
    border-top: 1px solid var(--bc-border-subtle);
}

.active-trips-content .card-head__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-2);
}

.active-trips-content .card--clickable {
    cursor: pointer;
}

.active-trips-content .card--clickable:focus-visible {
    outline: 2px solid var(--bc-accent-8);
    outline-offset: 2px;
}

.active-trips-content .card--booked {
    /* Stage cue handled by channel stripe (.ops-row-channel--*) */
}

.card--compact .meta-details {
    margin-top: var(--bc-space-2);
    padding-top: var(--bc-space-2);
    border-top: 1px dashed var(--bc-border-subtle);
}

.row--anchor {
    margin-bottom: 0;
}

.row--anchor .ops-anchor-meta {
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-medium);
    color: var(--bc-text-primary);
}

.ops-anchor-meta {
    display: block;
    line-height: 1.4;
}

.ops-card-expand {
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-neutral-1);
    color: var(--bc-text-secondary);
    border-radius: var(--bc-radius-2);
    padding: var(--bc-card-expand-padding-y) var(--bc-card-expand-padding-x);
    font-size: var(--bc-font-size-xs);
    cursor: pointer;
}

.ops-card-expand:hover,
.ops-card-expand:focus-visible {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bc-space-2);
    margin-top: var(--bc-space-2);
}

.status-pill--context,
.ops-context-pill {
    background: transparent;
    border: 1px solid var(--bc-border-subtle);
    color: var(--bc-text-secondary);
    font-weight: var(--bc-font-weight-medium);
}

.status-pill--context.context-info,
.ops-context-pill {
    border-color: var(--bc-accent-7);
    color: var(--bc-accent-11);
    background: var(--bc-accent-2);
}

.status-pill--overflow {
    background: var(--bc-neutral-3);
    color: var(--bc-text-muted);
    border: 1px solid var(--bc-border-subtle);
}

.ops-hide-reviewed {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    font-size: var(--bc-font-size-sm);
    color: var(--bc-text-secondary);
    white-space: nowrap;
}

.segmented--compact .seg {
    font-size: var(--bc-font-size-xs);
    padding: var(--bc-space-1) var(--bc-space-2);
}

.segmented-toolbar {
    flex-wrap: wrap;
}

.active-trips-content .card-head .status-pills--info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-1);
    align-items: center;
}

.active-trips-content .card-head .status-pill--timeliness {
    flex-shrink: 0;
    margin-left: auto;
}

.active-trips-content .card-head .status-pill,
.active-trips-content .card-head .chip {
    margin-left: 0;
    font-size: var(--bc-font-size-xs);
    padding: 2px 8px;
}

.active-trips-content .order-id {
    font-family: var(--bc-font-body);
    font-weight: var(--bc-font-weight-semibold);
    font-size: var(--bc-font-size-sm);
    text-decoration: none;
    color: var(--bc-text-primary);
}

.active-trips-content .order-id:hover,
.active-trips-content .order-id:focus-visible {
    color: var(--bc-accent-9);
    text-decoration: none;
}

.active-trips-content .card .order-id--primary {
    display: block;
    font-size: var(--bc-font-size-base);
}

.active-trips-content .ops-table .order-id {
    white-space: nowrap;
}

/* BagCaddie ops text links — warm accent, not default browser blue */
.active-trips-content a.tracking-link,
.active-trips-content .dest a {
    font-family: var(--bc-font-body);
    font-weight: var(--bc-font-weight-semibold);
    font-size: inherit;
    color: var(--bc-accent-11);
    text-decoration: none;
    border-bottom: 1px solid var(--bc-accent-6);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.active-trips-content a.tracking-link:hover,
.active-trips-content a.tracking-link:focus-visible,
.active-trips-content .dest a:hover,
.active-trips-content .dest a:focus-visible {
    color: var(--bc-accent-9);
    border-bottom-color: var(--bc-accent-9);
    text-decoration: none;
    outline: none;
}

.active-trips-content a.tracking-link:focus-visible {
    box-shadow: var(--bc-focus-ring);
    border-radius: var(--bc-radius-1);
}

.active-trips-content .ops-table a.tracking-link {
    font-size: var(--bc-font-size-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.active-trips-content a.tracking-link--external {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-1);
    max-width: 100%;
}

.tracking-link__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tracking-link__external-icon {
    flex-shrink: 0;
    opacity: 0.75;
}

.active-trips-content .meta .row .v.truncate a.tracking-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ops-profile-row {
    display: flex;
    align-items: flex-start;
    gap: var(--bc-space-2);
}

.ops-profile-row__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--bc-text-muted);
}

.ops-profile-row__avatar--vip {
    color: var(--bc-accent-9);
}

.ops-profile-row__icon {
    flex-shrink: 0;
    display: block;
}

.ops-profile-row__bc-club-badge,
.ops-profile-row__bc-club-icon,
.ops-profile-cell__bc-club-icon {
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.ops-profile-row__bc-club-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.ops-profile-cell__bc-club-icon {
    width: 16px;
    height: 16px;
}

.ops-profile-row__text {
    min-width: 0;
    flex: 1;
}

.ops-profile-row__primary,
.ops-profile-row__secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-1);
}

.ops-profile-row__primary {
    align-items: center;
    min-height: 18px;
}

.ops-profile-row__secondary {
    align-items: baseline;
    margin-top: 2px;
    color: var(--bc-text-muted);
    font-size: var(--bc-font-size-sm);
}

.ops-profile-row__bc-club-badge {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
}

.ops-profile-row__kind {
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bc-text-muted);
}

.ops-profile-row__name,
.ops-profile-row__secondary-name,
.ops-profile-link {
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-accent-11);
    text-decoration: none;
}

.ops-profile-row__name:hover,
.ops-profile-row__secondary-name:hover,
.ops-profile-link:hover,
.ops-member-meta__name:hover {
    text-decoration: underline;
    color: var(--bc-accent-9);
}

.ops-member-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-space-2);
}

.ops-member-meta__name {
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-accent-11);
    text-decoration: none;
}

.ops-vip-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--bc-vip-badge-padding-y) var(--bc-vip-badge-padding-x);
    border-radius: var(--bc-radius-full);
    background: var(--bc-accent-9);
    color: var(--bc-accent-1);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-bold);
    letter-spacing: var(--bc-letter-spacing-caps);
    line-height: 1.4;
    text-transform: uppercase;
}

.ops-profile-cell {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--bc-space-2);
    min-width: 0;
    max-width: 100%;
}

.ops-profile-cell__kind {
    flex-shrink: 0;
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--bc-letter-spacing-caps);
}

.ops-profile-link,
.ops-profile-cell__name {
    font-family: var(--bc-font-body);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-profile-cell__name {
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-accent-11);
}

.ops-profile-cell__secondary {
    font-size: var(--bc-font-size-sm);
    color: var(--bc-text-muted);
}

.active-trips-content .status-pill {
    border-radius: var(--bc-radius-full);
    padding: var(--bc-badge-padding-y) var(--bc-badge-padding-x);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    border: 1px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}

.active-trips-content .status-ok,
.active-trips-content .status-early {
    background: var(--bc-success-3);
    color: var(--bc-success-11);
}

.active-trips-content .status-late {
    background: var(--bc-error-3);
    color: var(--bc-error-11);
}

.active-trips-content .status-pill--primary {
    font-weight: var(--bc-font-weight-bold);
}

.active-trips-content .status-pill--secondary {
    background: transparent;
    border: 1px solid var(--bc-border-subtle);
    color: var(--bc-text-muted);
    font-weight: var(--bc-font-weight-medium);
}

.active-trips-content .status-pill--secondary.status-late,
.active-trips-content .status-pill--secondary.status-early,
.active-trips-content .status-pill--secondary.status-ok {
    background: transparent;
    color: var(--bc-text-muted);
}

.ops-channel-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--bc-radius-full);
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-neutral-2);
    color: var(--bc-text-secondary);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-channel-chip--club {
    border-color: var(--bc-accent-7);
    color: var(--bc-accent-11);
    background: var(--bc-accent-2);
}

.ops-channel-chip--member {
    color: var(--bc-text-muted);
    border-color: var(--bc-neutral-6);
}

.schedule-status--confirmed {
    color: var(--bc-success-11);
    font-weight: var(--bc-font-weight-semibold);
}

.schedule-status--pending {
    color: var(--bc-warning-11);
    font-weight: var(--bc-font-weight-semibold);
}

.schedule-status--scheduled {
    color: var(--bc-text-primary);
}

.schedule-status--none {
    color: var(--bc-text-muted);
}

.status-pills--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.active-trips-content .status-na {
    background: var(--bc-neutral-4);
    color: var(--bc-neutral-11);
}

.active-trips-content .status-main,
.active-trips-content .status-info {
    background: var(--bc-info-3);
    color: var(--bc-info-11);
}

.active-trips-content .status-sub {
    background: var(--bc-neutral-4);
    color: var(--bc-neutral-11);
}

.active-trips-content .status-exception,
.active-trips-content .status-danger {
    background: var(--bc-error-3);
    color: var(--bc-error-11);
}

.active-trips-content .status-expired,
.active-trips-content .status-warning {
    background: var(--bc-warning-3);
    color: var(--bc-warning-11);
}

.active-trips-content .meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bc-space-1);
    color: var(--bc-text-primary);
    font-size: var(--bc-font-size-sm);
    margin-bottom: var(--bc-space-2);
}

.active-trips-content .meta .row {
    display: flex;
    gap: var(--bc-space-2);
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.active-trips-content .k {
    color: var(--bc-text-muted);
    min-width: var(--bc-meta-label-min-width);
    font-weight: var(--bc-font-weight-normal);
}

.active-trips-content .v {
    font-weight: var(--bc-font-weight-medium);
    color: var(--bc-text-primary);
}

.active-trips-content .meta .row.meta-secondary {
    font-size: var(--bc-font-size-xs);
}

.active-trips-content .meta .row.meta-secondary .k,
.active-trips-content .meta .row.meta-secondary .v {
    color: var(--bc-text-muted);
    font-weight: var(--bc-font-weight-normal);
}

.active-trips-content .card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--bc-space-2);
    padding-top: var(--bc-space-2);
    border-top: 1px solid var(--bc-neutral-3);
}

.active-trips-content .chip {
    margin: 0;
    border-radius: var(--bc-radius-full);
    padding: 2px 8px;
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    align-self: flex-start;
}

.active-trips-content .chip-warn {
    background: var(--bc-error-3);
    color: var(--bc-error-11);
    border: 1px solid transparent;
}

.active-trips-content .quick-actions .qa {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-full);
    background: var(--bc-bg-surface);
    color: var(--bc-text-secondary);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.active-trips-content .quick-actions .qa:hover {
    border-color: var(--bc-accent-9);
    color: var(--bc-accent-11);
    box-shadow: var(--bc-shadow-1);
}

.active-trips-content .list-mode .col-body {
    flex-direction: row;
    overflow-x: auto;
}

.active-trips-content .list-mode .card {
    min-width: 310px;
}

.active-trips-content .row>* {
    padding: 0;
    width: auto;
    max-width: auto;
    flex-shrink: 1;
}

.active-trips-content .meta .row .v.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.active-trips-content .card-actions .left,
.active-trips-content .card-actions .right {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
}

.ops-filter-bar {
    display: flex;
    gap: var(--bc-space-3);
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: var(--bc-space-3);
}

.ops-filter-bar .segmented-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--bc-space-2);
    flex: 1;
    min-width: 0;
}

.ops-filter-bar__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    align-items: center;
}

.ops-filter-bar__row--advanced {
    padding: var(--bc-space-2) var(--bc-space-3);
    background: var(--bc-neutral-2);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
}

.ops-filter-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-space-2);
    margin-left: auto;
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-bg-surface);
    color: var(--bc-text-secondary);
    border-radius: var(--bc-radius-full);
    padding: var(--bc-seg-segment-padding-y) var(--bc-seg-segment-padding-x);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ops-filter-bar__toggle:hover,
.ops-filter-bar__toggle:focus-visible {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
    outline: none;
}

.ops-filter-bar__toggle:focus-visible {
    box-shadow: var(--bc-focus-ring);
}

.ops-filter-bar__toggle.is-open {
    background: var(--bc-neutral-3);
    border-color: var(--bc-neutral-8);
    color: var(--bc-text-primary);
}

.ops-filter-bar__toggle.has-active:not(.is-open) {
    border-color: var(--bc-accent-8);
    color: var(--bc-accent-11);
}

.ops-filter-bar__toggle-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--bc-radius-full);
    background: var(--bc-accent-9);
}

.ops-filter-bar .segmented {
    display: flex;
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-full);
    padding: var(--bc-seg-track-padding);
    background: var(--bc-neutral-3);
    margin-right: var(--bc-space-2);
    gap: var(--bc-space-1);
}

.ops-filter-bar .segmented .seg {
    border: 0;
    background: transparent;
    padding: var(--bc-seg-segment-padding-y) var(--bc-seg-segment-padding-x);
    border-radius: var(--bc-radius-full);
    cursor: pointer;
    color: var(--bc-text-secondary);
    font-family: var(--bc-font-body);
    font-weight: var(--bc-font-weight-semibold);
    font-size: var(--bc-font-size-sm);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ops-filter-bar .segmented .seg:hover:not(.active) {
    background: var(--bc-neutral-4);
    color: var(--bc-text-primary);
}

.ops-filter-bar .segmented .seg.active {
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
    box-shadow: var(--bc-shadow-1);
}

.ops-filter-bar .segmented .seg.active:hover {
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
}

.ops-filter-bar .segmented .seg:focus {
    outline: none;
}

.ops-filter-bar .segmented .seg:focus-visible {
    box-shadow: var(--bc-focus-ring);
}

.ops-filter-bar .segmented .seg.active:focus-visible {
    box-shadow: var(--bc-focus-ring);
}

.ops-filter-bar .search {
    margin-left: auto;
}

.ops-filter-bar .search-icon {
    position: absolute;
    left: var(--bc-search-icon-inset);
    color: var(--bc-text-muted);
    pointer-events: none;
}

.ops-filter-bar .search input[type="text"] {
    border-radius: var(--bc-radius-4);
    background: var(--bc-bg-surface);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    padding: var(--bc-search-input-padding-y) var(--bc-space-2) var(--bc-search-input-padding-y) var(--bc-search-input-padding-left);
    border: 1px solid var(--bc-border-subtle);
    min-width: var(--bc-search-min-width);
    color: var(--bc-text-primary);
}

.ops-filter-bar .search input[type="text"]:focus {
    outline: none;
    border-color: var(--bc-accent-9);
    box-shadow: var(--bc-focus-ring);
}

.ops-filter-bar .search input[type="text"].has-content {
    border-color: var(--bc-neutral-8);
}

.ops-filter-bar .clear-search-input {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--bc-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--bc-radius-2);
    font-size: var(--bc-font-size-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.ops-filter-bar .clear-search-input:hover {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.active-trips-content .filter-summary,
.active-trips-content .search-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bc-neutral-2);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-4);
    padding: var(--bc-space-3) var(--bc-space-4);
    margin-bottom: var(--bc-space-3);
}

.active-trips-content .filter-label,
.active-trips-content .search-label,
.active-trips-content .filter-count,
.active-trips-content .search-count {
    color: var(--bc-text-muted);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-medium);
}

.active-trips-content .filter-value,
.active-trips-content .search-value {
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
    padding: var(--bc-space-1) var(--bc-space-2);
    border-radius: var(--bc-radius-3);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-semibold);
}

.active-trips-content .clear-filter,
.active-trips-content .clear-search {
    background: var(--bc-bg-surface);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
    padding: var(--bc-seg-segment-padding-y) var(--bc-seg-segment-padding-x);
    color: var(--bc-text-muted);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-medium);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.active-trips-content .clear-filter:hover,
.active-trips-content .clear-search:hover {
    background: var(--bc-neutral-3);
    border-color: var(--bc-neutral-7);
    color: var(--bc-text-primary);
}

.active-trips-content .filter-info,
.active-trips-content .search-info {
    display: flex;
    align-items: center;
    gap: var(--bc-space-3);
    flex-wrap: wrap;
}

.ops-filter-bar .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.active-trips-content .board.list-mode .column-head {
    background: var(--bc-neutral-2);
    border-bottom: 1px solid var(--bc-border-subtle);
}

@media (min-width: 1200px) {
    .active-trips-container {
        max-width: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 900px) {
    .active-trips-content .board:not(.list-mode) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ops-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ops-filter-bar .segmented-toolbar {
        width: 100%;
    }

    .ops-filter-bar .search {
        margin-left: 0;
        width: 100%;
    }

    .ops-filter-bar .search input[type="text"] {
        min-width: 100%;
        width: 100%;
    }

    .ops-filter-bar__toggle {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .ops-kpi--summary {
        margin-left: 0;
        width: 100%;
    }

    .ops-command-header {
        grid-template-columns: 1fr;
    }

    .ops-command-header__actions {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .ops-command-header .ops-kpi-strip {
        grid-row: 3;
    }
}

@media (max-width: 640px) {
    .active-trips-content .board:not(.list-mode) {
        grid-template-columns: 1fr;
    }

    .active-trips-content .k {
        min-width: 72px;
    }
}

.active-trips-content .no-data-message {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--bc-space-9) var(--bc-space-5);
    background: var(--bc-bg-surface);
    border: 1px dashed var(--bc-border-subtle);
    border-radius: var(--bc-radius-5);
    margin: var(--bc-space-5) 0;
}

.active-trips-content .no-data-content {
    text-align: center;
    max-width: 400px;
}

.active-trips-content .no-data-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--bc-space-4);
    color: var(--bc-accent-9);
    opacity: 0.85;
}

.active-trips-content .no-data-title {
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xl);
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-text-primary);
    margin: 0 0 var(--bc-space-3) 0;
}

.active-trips-content .no-data-description {
    font-size: var(--bc-font-size-sm);
    color: var(--bc-text-muted);
    line-height: var(--bc-line-height-normal);
    margin: 0 0 var(--bc-space-5) 0;
}

.active-trips-content .clear-all-filters,
.active-trips-content .clear-filter-btn,
.active-trips-content .refresh-btn {
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
    font-weight: var(--bc-font-weight-semibold);
    padding: 8px 16px;
    border-radius: var(--bc-radius-3);
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-bg-surface);
    color: var(--bc-text-primary);
    cursor: pointer;
}

.active-trips-content .clear-all-filters:hover,
.active-trips-content .clear-filter-btn:hover,
.active-trips-content .refresh-btn:hover {
    background: var(--bc-neutral-3);
}

/* --- Operational command center --- */

.ops-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-bottom: var(--bc-space-3);
    padding: var(--bc-space-2) var(--bc-space-3);
    background: var(--bc-neutral-2);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
}

.ops-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: var(--bc-kpi-min-width);
    padding: var(--bc-kpi-padding-y) var(--bc-kpi-padding-x);
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
    background: var(--bc-bg-surface);
    cursor: default;
    text-align: left;
}

button.ops-kpi {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

button.ops-kpi:hover {
    border-color: var(--bc-neutral-8);
}

button.ops-kpi.active {
    border-color: var(--bc-neutral-12);
    box-shadow: var(--bc-shadow-1);
}

.ops-kpi.kpi-critical {
    border-left: 3px solid var(--bc-error-9);
}

.ops-kpi.kpi-warning {
    border-left: 3px solid var(--bc-warning-9);
}

.ops-kpi--summary {
    margin-left: auto;
    background: transparent;
    border-color: transparent;
    min-width: auto;
    padding-left: var(--bc-space-4);
}

button.ops-kpi.is-related:not(.active) {
    border-color: var(--bc-warning-9);
    background: var(--bc-warning-2);
}

.ops-active-filter {
    display: flex;
    align-items: center;
    gap: var(--bc-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--bc-space-3);
}

.ops-active-filter__label {
    font-size: var(--bc-font-size-xs);
    color: var(--bc-text-muted);
    font-weight: var(--bc-font-weight-medium);
}

.ops-active-filter__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--bc-space-1) var(--bc-space-2);
    border-radius: var(--bc-radius-full);
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
}

.ops-active-filter__clear {
    border: 0;
    background: transparent;
    color: var(--bc-text-muted);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    cursor: pointer;
    padding: 4px 8px;
}

.ops-active-filter__clear:hover {
    color: var(--bc-text-primary);
}

.ops-kpi-value {
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xl);
    font-weight: var(--bc-font-weight-bold);
    line-height: 1.2;
    color: var(--bc-text-primary);
}

.ops-kpi-label {
    font-size: var(--bc-font-size-xs);
    color: var(--bc-text-muted);
    margin-top: 2px;
}

.ops-kpi.kpi-critical .ops-kpi-value { color: var(--bc-error-11); }
.ops-kpi.kpi-warning .ops-kpi-value { color: var(--bc-warning-11); }
.ops-kpi.kpi-muted .ops-kpi-value { color: var(--bc-text-secondary); }

.ops-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bc-space-2);
    margin-bottom: var(--bc-space-4);
    align-items: center;
}

.ops-chip {
    border: 1px solid var(--bc-border-subtle);
    background: var(--bc-bg-surface);
    color: var(--bc-text-secondary);
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-xs);
    font-weight: var(--bc-font-weight-semibold);
    padding: 6px 12px;
    border-radius: var(--bc-radius-full);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ops-chip:hover {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.ops-chip.active {
    background: var(--bc-neutral-12);
    color: var(--bc-text-on-dark);
    border-color: var(--bc-neutral-12);
}

.ops-chip-clear {
    color: var(--bc-text-muted);
}

.ops-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bc-border-subtle);
    border-radius: var(--bc-radius-3);
    background: var(--bc-bg-surface);
    margin-top: 0;
}

.ops-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    font-family: var(--bc-font-body);
    font-size: var(--bc-font-size-sm);
}

.ops-table tr.ops-row-channel--club,
.ops-table tr.ops-row-channel--member {
    box-shadow: none;
}

@media (max-width: 1024px) {
    .ops-table {
        min-width: 880px;
    }

    .ops-table-col--optional {
        display: none;
    }
}

.ops-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bc-neutral-2);
    border-bottom: 1px solid var(--bc-border-subtle);
    padding: 10px 12px;
    text-align: left;
    font-weight: var(--bc-font-weight-semibold);
    color: var(--bc-text-secondary);
    white-space: nowrap;
}

.ops-sort-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
}

.ops-sort-btn.active {
    color: var(--bc-text-primary);
}

.ops-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bc-border-subtle);
    vertical-align: middle;
    color: var(--bc-text-primary);
}

.ops-table-col--profile {
    min-width: 10rem;
    white-space: nowrap;
}

.ops-table tbody tr:last-child td {
    border-bottom: 0;
}

.ops-table-empty {
    text-align: center;
    color: var(--bc-text-muted);
    padding: var(--bc-space-6) !important;
}

.ops-cell-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ops-row-channel--club,
.card.ops-row-channel--club,
.ops-table tr.ops-row-channel--club {
    box-shadow: inset 4px 0 0 var(--bc-accent-9);
}

.ops-row-channel--member,
.card.ops-row-channel--member,
.ops-table tr.ops-row-channel--member {
    box-shadow: inset 4px 0 0 var(--bc-neutral-8);
}

.ops-row-critical,
.card.ops-row-critical {
    box-shadow: none;
}

.ops-row-warning,
.card.ops-row-warning {
    box-shadow: none;
}

.ops-row-acked {
    opacity: 0.72;
}

.ops-actions {
    display: flex;
    gap: 6px;
}

.ops-actions .qa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--bc-radius-full);
    border: 1px solid var(--bc-border-subtle);
    color: var(--bc-text-secondary);
    text-decoration: none;
}

.ops-actions .qa:hover {
    background: var(--bc-neutral-3);
    color: var(--bc-text-primary);
}

.ops-ack-checkbox {
    width: var(--bc-ack-checkbox-size);
    height: var(--bc-ack-checkbox-size);
    cursor: pointer;
}

.ops-ack-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--bc-font-size-xs);
    color: var(--bc-text-muted);
    cursor: pointer;
    margin: 0;
}

.active-trips-content .attention-critical {
    background: var(--bc-error-3);
    color: var(--bc-error-11);
}

.active-trips-content .attention-warning {
    background: var(--bc-warning-3);
    color: var(--bc-warning-11);
}

.active-trips-content .attention-healthy {
    background: var(--bc-success-3);
    color: var(--bc-success-11);
}

.active-trips-content .attention-info {
    background: var(--bc-neutral-4);
    color: var(--bc-neutral-11);
}

.active-trips-content .status-workflow {
    background: var(--bc-neutral-4);
    color: var(--bc-neutral-11);
}

.active-trips-content .status-readiness {
    background: var(--bc-info-3);
    color: var(--bc-info-11);
}

.active-trips-content .column-delivered {
    opacity: 0.85;
}

.active-trips-content .column-delivered .column-head {
    background: var(--bc-neutral-2);
}