/* ===== PANEL COMPONENTS STYLES ===== */

/* ===== COMMON PANEL STYLES ===== */
.panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px; /* tighter */
    border-bottom: 1px solid var(--panel-border);
    background: var(--dashboard-bg);
    flex-shrink: 0;
    gap: 12px;
    min-height: 32px;
}

.panel-content {
    min-height: 0;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orders-icon {
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="white" d="M624 352h-16V275.9c0-17-6.7-33.3-18.7-45.3L494.6 136.9c-12-12-28.3-18.7-45.3-18.7H416V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96v256c0 35.3 28.7 64 64 64h24.8c7 28 32.2 48 62.1 48s55.1-20 62.1-48H427c7 28 32.2 48 62.1 48s55.1-20 62.1-48H624c8.8 0 16-7.2 16-16s-7.2-16-16-16zM128 416c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm288-224h33.4c8.5 0 16.6 3.4 22.6 9.4l94.7 94.7c6 6 9.4 14.1 9.4 22.6V352h-24.8c-7-28-32.2-48-62.1-48s-55.1 20-62.1 48H192.9c-7-28-32.2-48-62.1-48s-55.1 20-62.1 48H64V96h288c17.6 0 32 14.4 32 32v64zm108.1 224c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="white" d="M624 352h-16V275.9c0-17-6.7-33.3-18.7-45.3L494.6 136.9c-12-12-28.3-18.7-45.3-18.7H416V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96v256c0 35.3 28.7 64 64 64h24.8c7 28 32.2 48 62.1 48s55.1-20 62.1-48H427c7 28 32.2 48 62.1 48s55.1-20 62.1-48H624c8.8 0 16-7.2 16-16s-7.2-16-16-16zM128 416c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zm288-224h33.4c8.5 0 16.6 3.4 22.6 9.4l94.7 94.7c6 6 9.4 14.1 9.4 22.6V352h-24.8c-7-28-32.2-48-62.1-48s-55.1 20-62.1 48H192.9c-7-28-32.2-48-62.1-48s-55.1 20-62.1 48H64V96h288c17.6 0 32 14.4 32 32v64zm108.1 224c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32z"/></svg>') center / contain no-repeat;
}

.panel-body {
    flex: 1;
    overflow: auto; /* make the panel itself the scroll container */
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to scroll instead of expanding page */
}

.view-toggle {
    display: flex;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    overflow: hidden;
}

.btn-view {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

    .btn-view:hover {
        background: var(--panel-bg);
    }

    .btn-view.active {
        background: var(--accent-blue);
        color: white;
    }

.panel-actions {
    display: flex;
    gap: 4px;
}

.btn-action {
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 28px;
    min-width: 28px;
}

    .btn-action:hover {
        background: var(--panel-bg);
        color: var(--text-primary);
    }

/* Settings page/editor */
.settings-page .data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    max-width: 25vw !important;
}

.settings-page .modal-content {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* When a full-screen settings page opens a modal overlay as a sibling (e.g. Working Sets editor),

   reduce outer padding and allow the modal to span nearly the full viewport width. */

.settings-page + .modal-overlay {
    padding: 8px;
}



    .settings-page + .modal-overlay .ws-editor-modal {
        /* Popup-style editor: centered panel with max width/height */


        width: 100%;
        max-width: 1500px; 
        max-height: calc(100vh - 40px);
        box-shadow: var(--shadow-3d-lg);
    }



/* Working Sets editor overlay: ensure it sits above the list as a true modal */

.ws-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    /* Dim the background slightly while keeping the default dark theme visible */

    background: rgba(0, 0, 0, 0.30);
    display: flex;
    align-items: center; /* center popup vertically */

    justify-content: center; /* center popup horizontally */

    padding: 10px; /* 10px padding from all sides */
}



/* Editor header close button: ensure white icon for contrast on dark header */

.ws-editor-header .btn-close {
    border: 0;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}



    .ws-editor-header .btn-close i {
        color: #ffffff;
    }



/* Ensure all blocks inside the Working Set editor modal use a solid panel background */

.ws-editor-modal {
    background: var(--panel-bg);
    border-radius: var(--border-radius);
    overflow: hidden; /* ensure header/body/footer respect rounded corners */
}



    .ws-editor-modal .config-header,
    .ws-editor-modal .config-body,
    .ws-editor-modal .config-footer,
    .ws-editor-modal .form-section,
    .ws-editor-modal .ws-schedule-section {
        background: var(--panel-bg);
    }

.settings-page.drivers-page .modal-overlay:not(.small-modal-overlay) {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.settings-page.drivers-page .modal-overlay.small-modal-overlay,
.settings-page.vehicles-page .modal-overlay.small-modal-overlay {
    position: absolute;
    top: 0;
    z-index: 12;
    margin: auto;
    display: flex;
    /* justify-self: center; */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    background: rgba(0, 0, 0, 0.3);
}

.settings-page.drivers-page :is(p, div, h1, h2, h3, h4, h5, h6),
.settings-page.vehicles-page :is(h1, h2, h3, h4, h5, h6) {
    color: #fff !important;
}

.settings-page.vehicles-page .vehicle-modal div strong {
    color: #fff;
    font-size: 14px;
}

.settings-page.vehicles-page .vehicle-modal div:not(strong) {
    color: #aaaaaa;
    font-size: 12px;
    white-space: nowrap;
}

.btn-outline-secondary:hover {
    color: rgb(255, 255, 255);
    background-color: transparent;
    border-color: rgb(108, 117, 125);
}

.settings-page.drivers-page .btn-close, .settings-page.vehicles-page .btn-close {
    background: transparent;
    box-shadow: unset;
    border: unset;
    color: #fff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-page.drivers-page :is(span, label) {
    color: var(--text-secondary) !important;
}

.settings-page.drivers-page span span {
    color: red !important;
}


.settings-page .modal-overlay {
    padding: 8px;
    overflow: hidden;
}

.settings-page .config-header {
    border-bottom: 1px solid var(--panel-border);
    padding: 12px;
}

.settings-page .config-body {
    padding: 12px;
    flex: 1 1 auto;
    overflow: auto;
}


.settings-page label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.settings-page .form-section label > span:first-child {
    color: var(--text-primary);
    font-weight: 600;
}

.settings-page .config-footer {
    border-top: 1px solid var(--panel-border);
    padding: 12px;
}

.settings-page .form-section {
    background: var(--dashboard-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px;
}

.settings-page label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.settings-page input, .settings-page select {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 10px;
    height: fit-content;
}

.settings-page select {
    height: 36px;
}

.settings-page .icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-page .icon-preview {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
}

    .settings-page .icon-preview i {
        color: var(--text-secondary);
    }

.settings-page .icon-select {
    flex: 1;
}

.settings-page .icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow: auto;
    padding-top: 8px;
}

.settings-page .icon-choice {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .settings-page .icon-choice.selected, .settings-page .icon-choice:hover {
        outline: 2px solid var(--accent-blue);
    }

/* Compartments designer */
.settings-page .cmp-designer {
    display: flex;
    gap: 0;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
    height: 48px;
}

.settings-page .cmp-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--panel-bg) 94%, #000 6%);
    color: var(--text-secondary);
    font-size: 13px;
}

.settings-page .cmp-divider {
    width: 6px;
    cursor: col-resize;
    background: color-mix(in srgb, var(--panel-bg) 88%, #000 12%);
    border-left: 1px solid var(--panel-border);
    border-right: 1px solid var(--panel-border);
}

.settings-page .cmp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.settings-page .cmp-row {
    display: contents;
}

.settings-page .cmp-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.settings-page .cmp-subrow {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Toggle switch */
.settings-page .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}

    .settings-page .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.settings-page .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #6b7280;
    transition: .2s;
    border-radius: 22px;
}

    .settings-page .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background: white;
        transition: .2s;
        border-radius: 50%;
    }

.settings-page .switch input:checked + .slider {
    background: var(--accent-blue);
}

    .settings-page .switch input:checked + .slider:before {
        transform: translateX(16px);
    }

/* ===== TABLE VIEW STYLES ===== */
.table-view {
    flex: unset;
    overflow: visible; /* avoid nested scrollbars */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .data-table th {
        background: var(--dashboard-bg);
        color: var(--text-secondary);
        font-weight: 600;
        text-align: left;
        padding: 12px 16px;
        border-bottom: 1px solid var(--panel-border);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .data-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--panel-border);
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 25vw;
    }

.vehicles-page .data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16vw;
}

.data-table tr:hover {
    background: var(--dashboard-bg);
}

/*        .data-table tr:hover td {
            color: var(--text-primary);
        }*/

/* ===== CARD VIEW STYLES ===== */
.card-view {
    flex: unset;
    overflow: visible; /* avoid nested scrollbars */
    padding: 16px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Configurator lists */
.dual-list .available-pane .list-box {
    width: 320px;
    font-size: 14px;
}

/* Trips card configurator layout and sizing */
.card-designer-layout {
    display: flex;
    gap: 16px;
}

    .card-designer-layout .available-fields-panel {
        flex: 0 0 260px;
    }

    .card-designer-layout .available-fields {
        width: 100%;
        font-size: 14px;
    }

    .card-designer-layout .card-designer {
        flex: 1;
    }

/* Align card preview top with the top of the available fields list content */
.card-designer .card-preview {
    margin-top: 0;
}

/* Icons when header uses icon-only chips */
.zone-item .icon-only {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.order-card,
.working-set-card,
.trip-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

    /* Stronger unified hover effect for both order and trip cards */
    .order-card:hover,
    .trip-card:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,0.35);
        transform: translateY(-1px);
        border-color: var(--accent-blue);
    }

/* Map dark base tint: make standard tiles dark blue rather than pure black */
.map-dark-base .leaflet-tile {
    filter: brightness(0.45) saturate(1.25) hue-rotate(205deg);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 14px; /* match order card */
    font-weight: 600;
}

.card-body {
    display: block; /* was grid; let .card-body-columns manage columns */
    font-size: 12px; /* match order card detail size */
}

/* Left / Right columns stack of fields */
.working-set-card .card-zone.left,
.working-set-card .card-zone.right,
.trip-card .card-zone.left,
.trip-card .card-zone.right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Footer spans across both columns with subtle divider */
.working-set-card .card-zone.footer,
.trip-card .card-zone.footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

    /* Trip card item rows like order rows (no boxed cells) */
    .trip-card .card-zone.left > div,
    .trip-card .card-zone.right > div,
    .trip-card .card-zone.footer > div {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
        background: transparent; /* no section highlight boxes */
        border: 0;
    }

        /* Tighten inner text and allow truncation */
        .trip-card .card-zone.left > div span,
        .trip-card .card-zone.right > div span,
        .trip-card .card-zone.footer > div span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* ===== STATUS BADGES ===== */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .status-badge.pending {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .status-badge.in-transit,
    .status-badge.in-progress {
        background: rgba(59, 130, 246, 0.1);
        color: #2563eb;
    }

    .status-badge.delivered,
    .status-badge.completed {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .status-badge.active {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
    }

    .status-badge.planned {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .status-badge.delayed {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
    }

/* ===== ORDERS & SHIPMENTS PANEL ===== */
.orders-shipments-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.order-id {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--accent-blue);
}

.route {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.weight {
    font-weight: 600;
}

/* ===== WORKING SETS & TRIPS PANEL ===== */
.working-sets-trips-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Sticky trips header for table view */
.trips-header-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

.trips-header-table {
    border-bottom: 1px solid var(--panel-border);
    table-layout: fixed;
}

.trips-table thead {
    display: none;
}

.trips-table {
    table-layout: fixed;
}

    /* Cells ellipsis so they fit widths from colgroup */
    .trips-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Grab-handle resizer like orders */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

    .col-resizer:hover {
        background: rgba(59,130,246,0.35);
    }

/* Simple inline resizer control inside sticky header */
.trip-col-resizer {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}

    .trip-col-resizer input[type="range"] {
        width: 60px;
        height: 16px;
    }

/* Prevent left/right borders on ws-container so widths match header table */
.ws-container {
    border-left: 0;
    border-right: 0;
}

.ws-container {
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius);
    background: var(--panel-bg);
    box-shadow: var(--shadow-sm);
}

.ws-header {
    background: var(--dashboard-bg);
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0; /* stick to top of container while inner list scrolls */
    z-index: 2;
}

.ws-header-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    margin-right: 12px;
    white-space: nowrap;
}

    .ws-header-item .ws-icon {
        color: var(--text-secondary);
    }

    .ws-header-item .ws-value {
        max-width: 120px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Allow WS header to wrap and avoid overflow */
.ws-header {
    flex-wrap: wrap;
}

/* vertical spacing between containers without relying on page margins */
.ws-container + .ws-container {
    margin-top: 12px;
}

.data-toggle {
    display: flex;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    overflow: hidden;
}

.btn-data {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

    .btn-data:hover {
        background: var(--panel-bg);
    }

    .btn-data.active {
        background: var(--accent-blue);
        color: white;
    }

.ws-id,
.trip-id {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--accent-blue);
}

.trip-count {
    background: var(--accent-blue);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.business-case {
    color: var(--text-secondary);
    font-size: 14px;
}

.main-resource {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.settings-page .trip-info {
    font-size: 12px;
    color: var(--text-secondary);
}

.resources {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.driver,
.vehicle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.trip-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== TRIPS TIMELINE PANEL ===== */
.trips-timeline-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.time-range select {
    padding: 6px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-bg);
    color: var(--text-primary);
    font-size: 12px;
}

/* Gantt Chart Styles */
.gantt-view {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.gantt-header {
    display: flex;
    background: var(--dashboard-bg);
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.trip-column {
    width: 150px;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    border-right: 1px solid var(--panel-border);
}

.timeline-column {
    flex: 1;
    padding: 12px 16px;
}

.time-labels {
    display: flex;
    justify-content: space-between;
}

.time-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.gantt-body {
    flex: 1;
}

.gantt-row {
    display: flex;
    border-bottom: 1px solid var(--panel-border);
    min-height: 50px;
}

.settings-page .trip-info {
    width: 150px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.trip-id {
    font-weight: 600;
    color: var(--accent-blue);
    font-size: 12px;
}

.settings-page .trip-driver,
.settings-page .trip-vehicle {
    font-size: 11px;
    color: var(--text-secondary);
}

.timeline-bars {
    flex: 1;
    position: relative;
    padding: 8px 16px;
    display: flex;
    align-items: center;
}

.trip-bar {
    height: 20px;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

    .trip-bar.active {
        background: var(--accent-blue);
    }

    .trip-bar.completed {
        background: var(--accent-green);
    }

    .trip-bar.planned {
        background: var(--accent-yellow);
    }

.bar-label {
    color: white;
    font-size: 11px;
    font-weight: 600;
}

/* Timescale View Styles */
.timescale-view {
    flex: 1;
    overflow: auto;
    position: relative;
    padding: 16px;
}

.timeline-axis {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.time-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-line {
    width: 2px;
    height: 20px;
    background: var(--panel-border);
}

.time-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.timeline-events {
    position: relative;
}

.timeline-event {
    position: absolute;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    min-width: 120px;
    box-shadow: var(--shadow-sm);
}

    .timeline-event.active {
        border-color: var(--accent-blue);
        background: rgba(59, 130, 246, 0.05);
    }

    .timeline-event.completed {
        border-color: var(--accent-green);
        background: rgba(16, 185, 129, 0.05);
    }

    .timeline-event.planned {
        border-color: var(--accent-yellow);
        background: rgba(245, 158, 11, 0.05);
    }

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.event-details {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===== MAP PANEL ===== */
.map-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.map-controls {
    display: flex;
    gap: 4px;
}

.btn-map {
    padding: 6px 12px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

    .btn-map:hover {
        background: var(--panel-bg);
    }

    .btn-map.active {
        background: var(--accent-blue);
        color: white;
        border-color: var(--accent-blue);
    }

.map-options {
    display: flex;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

    .checkbox-label input[type="checkbox"]:checked + .checkmark {
        background: var(--accent-blue);
        border-color: var(--accent-blue);
    }

        .checkbox-label input[type="checkbox"]:checked + .checkmark::after {
            content: "✓";
            color: white;
            font-size: 10px;
        }

.map-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0; /* Allow flex child to shrink */
    background: transparent; /* Ensure no background covers map */
}

.map-panel .panel-body {
    overflow: hidden; /* Maps don't need scrolling, they handle their own pan/zoom */
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent; /* Ensure no background covers map */
}

/* Override dashboard-panel background when it contains a map panel */
.dashboard-panel:has(.map-panel) {
    background: transparent !important;
}

/* Override panel-content background for map panel */
.dashboard-panel:has(.map-panel) {
    display: flex;
    flex-direction: column;
}

    .dashboard-panel:has(.map-panel) .panel-content {
        flex: 1;
        overflow: hidden !important;
        background: transparent !important;
    }

.map-panel .panel-content {
    overflow: hidden !important; /* Override default overflow for map panel */
    background: transparent !important; /* Ensure no background covers map */
}

.map-panel {
    background: transparent !important; /* Ensure map panel itself is transparent */
}

/* Ensure map div fills container and is above any backgrounds */
.map-container > div[id^="osm-map-"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    background: transparent;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--dashboard-bg);
}

.map-background {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--panel-border) 1px, transparent 1px), linear-gradient(var(--panel-border) 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
}

.mock-map {
    width: 100%;
    height: 100%;
    position: relative;
}

.route-line {
    position: absolute;
    border: 3px solid;
    border-radius: 2px;
}

    .route-line.active {
        border-color: var(--accent-blue);
    }

    .route-line.completed {
        border-color: var(--accent-green);
    }

    .route-line.delayed {
        border-color: var(--accent-red);
    }

.route-label {
    background: var(--panel-bg);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-sm);
}

.vehicle-marker,
.location-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transform: translate(-50%, -50%);
}

    .vehicle-marker.active {
        background: var(--accent-blue);
    }

    .vehicle-marker.idle {
        background: var(--text-secondary);
    }

    .vehicle-marker.maintenance {
        background: var(--accent-red);
    }

    .location-marker.warehouse {
        background: var(--accent-green);
    }

    .location-marker.delivery {
        background: var(--accent-yellow);
    }

.marker-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    margin-top: 4px;
}

.map-legend {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    min-width: 120px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

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

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

    .legend-color.active {
        background: var(--accent-blue);
    }

    .legend-color.completed {
        background: var(--accent-green);
    }

    .legend-color.delayed {
        background: var(--accent-red);
    }

.legend-icon {
    width: 12px;
    font-size: 12px;
}

    .legend-icon.active {
        color: var(--accent-blue);
    }

    .legend-icon.idle {
        color: var(--text-secondary);
    }

    .legend-icon.maintenance {
        color: var(--accent-red);
    }

/* ===== KPIs RIBBON PANEL ===== */
.kpis-ribbon-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kpi-categories {
    display: flex;
    gap: 4px;
}

.btn-category {
    padding: 6px 12px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 12px;
}

    .btn-category:hover {
        background: var(--panel-bg);
    }

    .btn-category.active {
        background: var(--accent-blue);
        color: white;
        border-color: var(--accent-blue);
    }

.kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
    overflow: auto;
}

.kpi-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--border-radius);
    padding: 16px;
    transition: all 0.2s ease;
}

    .kpi-card:hover {
        box-shadow: var(--shadow-md);
    }

    .kpi-card.good {
        border-left: 4px solid var(--accent-green);
    }

    .kpi-card.warning {
        border-left: 4px solid var(--accent-yellow);
    }

    .kpi-card.error {
        border-left: 4px solid var(--accent-red);
    }

.kpi-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.kpi-icon {
    width: 32px;
    height: 32px;
    background: var(--dashboard-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-size: 14px;
}

.kpi-title {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.unit {
    font-size: 14px;
    color: var(--text-secondary);
}

.kpi-trend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.trend-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

    .trend-indicator.up {
        color: var(--accent-green);
    }

    .trend-indicator.down {
        color: var(--accent-red);
    }

    .trend-indicator.stable {
        color: var(--text-secondary);
    }

.trend-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.kpi-chart {
    margin-bottom: 8px;
}

.mini-chart {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 32px;
}

.chart-bar {
    flex: 1;
    background: var(--accent-blue);
    border-radius: 1px;
    min-height: 2px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .chart-bar:hover {
        opacity: 1;
    }

.kpi-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 4px;
    color: #d97706;
    font-size: 12px;
}

/* ===== RESPONSIVE PANELS ===== */
@media (max-width: 768px) {
    .panel-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .kpis-grid {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }

    .gantt-row {
        min-height: 40px;
    }

    .trip-column {
        width: 120px;
    }

    .settings-page .trip-info {
        width: 120px;
    }
}

/* Grouping UI for WS/Trips - styled like Orders */
.group-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0; /* tighter like Orders */
    justify-content: flex-start;
    min-height: 28px; /* approximate orders row height */
}

.group-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.group-chip {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dashboard-bg) 100%, #000 0%), color-mix(in srgb, var(--dashboard-bg) 92%, #000 8%));
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--panel-border) 80%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    box-shadow: var(--shadow-3d-sm);
}

    .group-chip .btn-x {
        border: 0;
        background: transparent;
        margin-left: 8px;
        cursor: pointer;
        color: var(--text-secondary);
        font-weight: 600;
    }

.group-hint {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
    padding: 4px 8px;
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
}

/* Group rows */
.group-row td {
    padding: 8px 12px;
    font-size: 12px;
}

.group-row.level-1 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dashboard-bg) 85%, #ffffff 15%), color-mix(in srgb, var(--dashboard-bg) 80%, #ffffff 20%));
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 60%, #ffffff 10%);
    border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 60%, #ffffff 10%);
}

.group-row.level-2 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dashboard-bg) 88%, #ffffff 12%), color-mix(in srgb, var(--dashboard-bg) 83%, #ffffff 17%));
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 50%, #ffffff 10%);
    border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 50%, #ffffff 10%);
}

.group-row .caret {
    display: inline-block;
    width: 14px;
    color: var(--text-secondary);
}

.group-clear {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
}

    .group-clear:hover {
        color: var(--text-primary);
    }

/* Orders grouping class aliases (ensure identical look) */
.group-placeholder {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
    padding: 4px 8px;
    border: 1px dashed var(--panel-border);
    border-radius: 8px;
}

.chip-x {
    border: 0;
    background: transparent;
    margin-left: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

    .chip-x i {
        font-size: 12px;
    }

.btn-clear-groups {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

    .btn-clear-groups i {
        font-size: 12px;
    }

    .btn-clear-groups:hover, .chip-x:hover {
        color: var(--text-primary);
    }

/* WS/Trips overrides to mirror Orders exactly */
.working-sets-trips-panel .panel-toolbar .toolbar-left {
    gap: 2px;
}

.working-sets-trips-panel .group-bar {
    padding: 0 6px;
    border-radius: 8px;
}

.working-sets-trips-panel .group-chip {
    padding: 2px 10px;
}

.working-sets-trips-panel .group-chip {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dashboard-bg) 100%, #000 0%), color-mix(in srgb, var(--dashboard-bg) 92%, #000 8%));
}

.working-sets-trips-panel .btn-clear-groups {
    color: var(--accent-red);
}

    .working-sets-trips-panel .btn-clear-groups:hover {
        color: #ff6b6b;
    }

.orders-shipments-panel .view-toggle .btn-view:not(.btn-clear-filters) {
    width: auto;
    height: auto;
    padding: 6px 12px;
    border-radius: 0; /* inherit rounded from container like WS/Trips */
}

.working-sets-trips-panel .panel-actions {
    display: flex;
    gap: 4px;
    padding: 0; /* inherit Orders look (no group border) */
    border: 0;
    background: transparent;
}

    .working-sets-trips-panel .panel-actions .btn-action {
        /* inherit exactly from .btn-action (Orders) */
        background: transparent;
        border: 0;
    }

/* Runtime Trip Card zone resets (avoid designer styles leaking) */
.trip-card .card-zone {
    border: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
}

    .trip-card .card-zone.header {
        border: 0;
    }

    .trip-card .card-zone.left {
        border: 0;
    }

    .trip-card .card-zone.right {
        border: 0;
    }

    .trip-card .card-zone.footer {
        border: 0;
        padding: 8px 12px 12px 12px;
        border-top: 1px solid var(--panel-border);
    }

.card-body-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .field-row.value-only .field-label {
        display: none;
    }

.card-footer {
    border-top: 1px solid var(--panel-border);
    padding: 8px 12px 12px 12px;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Set icons to Orders blue */
.order-card .field-row i,
.trip-card .field-row i {
    color: #94a3b8;
    font-size: 12px;
    width: 12px;
}

.order-card .field-row, .trip-card .field-row {
    gap: 8px;
    line-height: 1.4;
}

.btn-expand {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    margin-left: auto;
}

    .btn-expand:hover {
        color: var(--text-primary);
    }

.working-sets-trips-panel .panel-actions {
    gap: 4px;
}

    .working-sets-trips-panel .panel-actions .btn-action {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #0a1124; /* specified color */
    }

        .working-sets-trips-panel .panel-actions .btn-action:hover {
            background: var(--panel-bg);
        }

.orders-shipments-panel .panel-actions {
    gap: 4px;
}

    .orders-shipments-panel .panel-actions .btn-action {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #0a1124;
        color: #cbd5e1; /* requested icon color */
    }

        .orders-shipments-panel .panel-actions .btn-action:hover {
            background: var(--panel-bg);
        }

.working-sets-trips-panel .panel-body {
    scrollbar-gutter: stable both-edges;
}

.trips-header-sticky {
    background: var(--dashboard-bg);
    padding-right: 12px;
}

.orders-shipments-panel {
    position: relative;
}

    .orders-shipments-panel .filter-modal {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        top: 8px !important;
        margin: 0 !important;
        max-height: calc(100% - 16px) !important;
        overflow: auto !important;
        transform: none !important;
    }
/* Provide variables for expanded/collapsed sidebar widths */
:root {
    --sidebar-width: 260px;
}

body.sidebar-narrow :root, .sidebar-narrow :root {
    --sidebar-width: 72px;
}

.table-modern th, .table-modern td {
    padding: 12px 16px;
}

.table-tight th, .table-tight td {
    padding: 6px 10px;
    font-size: 12px;
}

.card-compact .card-body-columns {
    gap: 8px;
}

.card-compact .field-row {
    gap: 6px;
    font-size: 12px;
}

.card-large .card-body-columns {
    gap: 16px;
}

.card-large .field-row {
    gap: 10px;
    font-size: 14px;
}

.group-row td {
    color: var(--text-primary);
    font-weight: 600;
}

/* Shared date/time input styling in WS/Trips (match orders filter) */
.working-sets-trips-panel input[type="datetime-local"],
.working-sets-trips-panel input[type="date"],
.working-sets-trips-panel input[type="time"] {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
}

    .working-sets-trips-panel input[type="datetime-local"]:focus,
    .working-sets-trips-panel input[type="date"]:focus,
    .working-sets-trips-panel input[type="time"]:focus {
        outline: none;
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 30%, transparent);
    }

/* Hide year in date inputs within WS/Trips grid (Chrome/WebKit) */
.working-sets-trips-panel input.date-no-year::-webkit-datetime-edit-year-field {
    display: none; /* hide year segment */
}

.working-sets-trips-panel input.date-no-year::-webkit-datetime-edit-text:last-child {
    display: none; /* hide trailing separator */
}
/* Also clamp the width so no extra space remains */
.working-sets-trips-panel input.date-no-year {
    width: 76px;
    overflow: hidden;
    text-overflow: clip;
    padding-right: 6px;
}

/* Force 24h time without AM/PM and clamp width */
.working-sets-trips-panel input.time-24::-webkit-datetime-edit-ampm-field {
    display: none;
}

.working-sets-trips-panel input.time-24 {
    width: auto;
    min-width: 86px;
}

/* Combined dt field with hidden year and no trailing slash */
.working-sets-trips-panel input.dt-combined::-webkit-datetime-edit-year-field {
    display: none;
}

.working-sets-trips-panel input.dt-combined::-webkit-datetime-edit-text:last-child {
    display: none;
}

.working-sets-trips-panel input.dt-combined {
    width: 160px;
}

/* Inline pair layout without separator slash */
.working-sets-trips-panel .dt-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.working-sets-trips-panel .dt-wrap {
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-bg);
    padding: 4px 6px;
}

    .working-sets-trips-panel .dt-wrap .dt-date {
        width: 64px;
        border: 0;
        background: transparent;
        padding: 0;
        overflow: hidden;
        text-overflow: clip;
    }

    .working-sets-trips-panel .dt-wrap .dt-time {
        min-width: 86px;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .working-sets-trips-panel .dt-wrap input:focus {
        outline: none;
        box-shadow: none;
    }

.list-wrapper {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

/*.settings-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.settings-page {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.settings-page--no-top-padding {
    padding-top: 0;
}*/

.ws-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 20px;
}



.ws-section-header-title {
    padding-left: 12px;
    font-weight: 600;
    opacity: 0.9;
}



.ws-editor-header {
    padding-right: 0;
}



.ws-editor-title {
    margin: 0;
}



/* Match unified popup header title style (font size is driven by .config-header h3 in dashboard.css) */

.ws-editor-modal .config-header {
    padding: 6px 12px; /* align with other config/popup headers */
}



.ws-editor-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-items: start;
    overflow: hidden;
}



.ws-editor-right {
    grid-column: 2;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}



.ws-schedule-range-label {
    white-space: nowrap;
}



/* Working Sets schedule grid wrapper */

.ws-schedule-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    padding: 0;
}



.ws-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px 0;
    padding-right: 6px;
}



.ws-schedule-title {
    margin: 0;
    padding-left: 12px;
}



.ws-schedule-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}



.ws-week-grid-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 240px);
    overflow: auto;
    padding: 0 0 18px 0;
}



.ws-week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    /* Make the day-of-week header row as short as reasonably possible */
    /*    grid-template-rows: 24px 64px repeat(48, minmax(20px, 1fr));*/
    grid-template-rows: 24px 64px repeat(48, 20px);
    gap: 0;
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--panel-bg, #232b3b);
    min-width: 960px; /* ensure day columns and resource blocks are wide enough; allow horizontal scroll if needed */
}



.ws-week-grid-corner {
    grid-column: 1; 
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 8;
    background: var(--panel-bg, #232b3b);
}



.ws-week-day-header {
    grid-row: 1;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
    position: sticky;
    top: 0;
    z-index: 7;
    font-size: 12px;
    line-height: 24px;
    padding: 5px 6px;
}



.ws-week-day-working {
    /* Softer highlight for working days, blended with the panel background */
    min-height: 25px;
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel-bg, #232b3b) 82%);
}



.ws-week-day-weekend {
    /* Keep weekends on a neutral darker strip */

    background: #3f4753;
}



.ws-week-resource-header-row {
    grid-row: 2;
    height: 64px;
    position: sticky;
    /* Match the (reduced) height of the day-of-week header row above */

    top: 24px;
    z-index: 6;
    background: var(--panel-bg, #232b3b);
}



.ws-week-resource-header-inner {
    height: 64px;
    display: grid;
    padding-top: 8px; /* push complementary headers down so they start at the lane top, not at the very top bar */

    box-sizing: border-box;
}



.ws-week-resource-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



.ws-week-resource-pill-active {
    background: rgba(88,147,255,0.08);
    border-radius: 4px;
}



.ws-week-resource-pill-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    line-height: 1;
    font-size: 12px;
    opacity: 0.95;
    max-height: 56px;
    overflow: hidden;
}



.ws-week-time-label {
    grid-column: 1;
    text-align: right;
    padding-right: 6px;
    font-size: 12px;
    z-index: 3;
    position: sticky;
    left: 0;
    background: var(--panel-bg, #232b3b);
}



.ws-week-allowed-cell {
    border: 1px dashed var(--border-color,#2b3240);
    border-radius: 4px;
    height: 100%;
    position: relative;
    z-index: 1;
    /* must remain hit-testable so drag selection can start on these cells */
}



.ws-week-layer {
    grid-row: 3 / 51;
    position: relative;
    height: 100%;
}



    .ws-week-layer.no-events {
        pointer-events: none;
    }



.ws-week-block-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0 2px;
}



.ws-week-intersect-block {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(168,85,247,0.18);
    border: 1px solid rgba(168,85,247,0.45);
    border-radius: 6px;
}



.ws-week-main-block {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(88,147,255,0.15);
    border: 1px solid rgba(88,147,255,0.35);
    border-radius: 6px;
}



.ws-week-assignment-block {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
    pointer-events: none; /* ✅ Let clicks pass through to cells underneath */
    cursor: grab;
    background: rgba(34,197,94,0.25);
    border: 1px solid rgba(34,197,94,0.6);
    border-radius: 6px;
    z-index: 5; /* above allowed cells and lane backgrounds */
}



.ws-week-assignment-remove {
    position: absolute;
    pointer-events: auto; /* ✅ Re-enable for buttons */
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.ws-week-grip {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 6px;
    pointer-events: auto; /* ✅ Re-enable for grips */
    cursor: ns-resize;
}



.ws-week-grip-top {
    top: -4px;
    cursor: n-resize;
}



.ws-week-grip-bottom {
    bottom: -4px;
    cursor: s-resize;
}



.ws-week-weekend-band {
    grid-row: 3 / 51;
    background: rgba(63,71,83,0.35);
    pointer-events: none;
    z-index: 0;
    border-left: 1px solid rgba(63,71,83,0.55);
    border-right: 1px solid rgba(63,71,83,0.55);
}



.ws-week-lane-overlay {
    grid-row: 3 / 51;
    position: relative;
    pointer-events: none;
}



.ws-week-lane-alt {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.02);
}



.ws-week-lane-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(88,147,255,0.35);
}



.ws-week-day-separator {
    grid-row: 1 / 51;
    position: relative;
    z-index: 8;
    border-left: 1px solid rgba(88,147,255,0.9);
    pointer-events: none;
}



.ws-week-top-left-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 40px;
    background: var(--panel-bg, #232b3b);
    pointer-events: none;
    z-index: 10;
}



/* ===== Generic month calendar (Vehicles / Drivers / shared) ===== */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}



.cal-header {
    text-align: center;
    font-weight: 600;
    opacity: 0.8;
    font-size: 12px;
}



.cal-cell {
    border: 1px solid rgba(88,147,255,0.45);
    border-radius: 6px;
    padding: 6px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 1;
}



    .cal-cell.muted {
        opacity: 0.55;
    }



.cal-date {
    font-size: 12px;
    opacity: 0.8;
}



.cal-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.calendar-availability .cal-cell {
    background: transparent;
}



.calendar-absence .cal-cell {
    background: transparent;
}



.calendar-availability .cal-cell.cal-selected {
    background: rgba(88,147,255,0.12);
}



.calendar-absence .cal-cell.cal-selected {
    background: rgba(255,88,88,0.12);
}



.calendar-availability .cal-cell.cal-nonworking,
.calendar-absence .cal-cell.cal-nonworking {
    background: rgba(255,255,255,0.03);
}



.cal-chip {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}



.calendar-availability .cal-chip {
    background: rgba(88,147,255,0.15);
    border: 1px solid rgba(88,147,255,0.35);
}



.calendar-absence .cal-chip {
    background: rgba(255,88,88,0.15);
    border: 1px solid rgba(255,88,88,0.35);
}



/* ===== Generic week grid (single-lane, Vehicles / Drivers) ===== */

.simple-week-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    grid-template-rows: 40px repeat(48, 20px);
    gap: 0;
    position: relative;
}



.simple-week-grid-corner {
    grid-column: 1;
    grid-row: 1;
}



.week-day-header {
    grid-row: 1;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}



.week-day-working {
    background: transparent;
}



.week-day-weekend {
    background: rgba(255,255,255,0.03);
}



.week-day-has {
    background: rgba(88,147,255,0.12);
}



.simple-week-grid .week-time-label {
    grid-column: 1;
    text-align: right;
    padding-right: 6px;
    font-size: 12px;
}



.simple-week-grid .week-cell {
    border-left: 1px solid rgba(88,147,255,0.45);
    border-top: 1px solid rgba(88,147,255,0.35);
    height: 100%;
    position: relative;
    z-index: 1;
}



.simple-week-grid .week-layer {
    grid-row: 2 / 50;
    position: relative;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}



.week-block {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
    pointer-events: auto;
    border-radius: 6px;
}



.week-availability .week-block {
    background: rgba(88,147,255,0.25);
    border: 1px solid rgba(88,147,255,0.6);
}



.week-absence .week-block {
    background: rgba(255,88,88,0.25);
    border: 1px solid rgba(255,88,88,0.6);
}



.week-block-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.ws-editor-modal {
    /* Shared modal sizing for Working Sets, Vehicles, and Drivers editors */

    width: 100%;
    max-width: 1500px; /* UPDATED */
    max-height: calc(100vh - 40px);
    overflow-x: hidden;
}



.ws-editor-footer {
    border-top: 1px solid rgba(88,147,255,0.45);
    margin-bottom: 0;
    padding-right: 20px;
}



.ws-editor-footer-error {
    min-height: 18px;
    font-size: 12px;
    color: #ef4444;
}



.ws-editor-footer-save {
    margin-right: 0;
    border-radius: 8px;
    padding: 6px 16px;
    border: 1px solid var(--panel-border);
    /* Default: darker primary button */

    background: color-mix(in srgb, var(--accent-blue) 70%, #000 30%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px; /* match block title size */
}



    .ws-editor-footer-save:hover:not(:disabled) {
        /* On hover: slightly lighter overlay of the primary color */

        background: color-mix(in srgb, var(--accent-blue) 85%, #000 15%);
    }



    .ws-editor-footer-save:disabled {
        opacity: 0.5;
        cursor: default;
    }



.ws-editor-footer-save-label {
    margin-left: 4px;
}


/* Working Sets shared helpers */

.ws-hide-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .ws-hide-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

.ws-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 50px;
    box-sizing: border-box;
    gap: 8px;
}



/* Working Sets header + filters */

.ws-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 0 12px;
}

    .ws-header h2 {
        font-size: 26px;
        margin: 0;
        color: #fff;
    }

.ws-filters-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-right: 12px;
}



.ws-filter-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.ws-filter-caption {
    font-size: 12px;
    opacity: 0.9;
}



.ws-status-select {
    min-width: 200px;
    min-height: 35px;
}



.ws-range-input {
    min-width: 260px;
}



.ws-funnel-icon {
    font-size: 18px;
    margin-top: 18px;
}



.ws-funnel-active {
    color: #5893ff;
    opacity: 1;
}



.ws-funnel-inactive {
    color: var(--text-secondary);
    opacity: 0.9;
}



/* Working Sets editor layout */

.ws-left-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 1;
}



.ws-section-title {
    margin: 0 0 8px 0;
}



.ws-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr; /* give extra width to the Main Resource column */

    gap: 12px;
}



.ws-role-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    width: 100%;
}



.ws-role-row {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}



.ws-role-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}



.ws-role-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}



.ws-name-input {
    width: 100%;
    min-width: 260px;
}

.ws-role-input-wide {
    min-height: 35px;
}

.ws-editor-select,
.ws-role-input-wide {
    width: 100%;
    min-width: 260px;
    background: color-mix(in srgb, var(--panel-bg) 98%, #000 2%);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 10px;
}



.ws-chips-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}



.ws-main-resource-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}



.ws-main-resource-icon {
    width: 18px;
    text-align: center;
}



/* Working Sets page layout helpers */

/* Driver Availability Row */
.driver-availability-row {
    margin-bottom: 8px;
}

.driver-availability-row:last-child {
    margin-bottom: 0;
}

.driver-availability-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.driver-availability-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.expand-icon {
    width: 16px;
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.driver-name {
    min-width: 80px;
    font-weight: 500;
    color: #e5e7eb;
}

.schedule-count {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}

/* Status Badges */
.status-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-full {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-partial {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-none {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* Expanded Calendar */
/*.driver-availability-expanded {
    margin-top: 8px;
    margin-left: 24px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-scroll-container {
    overflow-x: auto;
    padding-bottom: 8px;
}

.calendar-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.calendar-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.calendar-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.calendar-grid {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: max-content;
}

.calendar-header-row,
.calendar-icons-row {
    display: flex;
    gap: 4px;
}

.calendar-day-header {
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
}

.day-abbrev {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
}

.day-date {
    font-size: 13px;
    color: #e5e7eb;
    font-weight: 500;
}

.calendar-day-icon {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
    transition: transform 0.1s ease, background 0.15s ease;
    cursor: default;
}

.calendar-day-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
}

.icon-available {
    color: #22c55e;
}

.icon-unavailable {
    color: #6b7280;
}

.complementary-cell {
    padding: 8px 12px;
    vertical-align: top;
}*/



/* Expanded Calendar */
/* Complementary Cell in Table */
.complementary-cell {
    padding: 8px 12px;
    vertical-align: top;
    min-width: 400px;
}

/* Driver Availability Row */
.driver-availability-row {
    margin-bottom: 8px;
}

    .driver-availability-row:last-child {
        margin-bottom: 0;
    }

.driver-availability-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

    .driver-availability-header:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.expand-icon {
    width: 16px;
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.driver-name {
    min-width: 80px;
    font-weight: 500;
    color: #e5e7eb;
}

.schedule-count {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}

/* Expanded Calendar */
.driver-availability-expanded {
    margin-top: 8px;
    margin-left: 24px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.calendar-scroll-container {
    padding-bottom: 8px;
    width: 100%;
}

    .calendar-scroll-container.has-scroll {
        overflow-x: auto;
    }

    .calendar-scroll-container:not(.has-scroll) {
        overflow-x: visible;
    }

    .calendar-scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .calendar-scroll-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .calendar-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 3px;
    }

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.has-scroll .calendar-grid {
    display: inline-flex;
    min-width: max-content;
    width: auto;
}

.calendar-header-row,
.calendar-icons-row {
    display: flex;
    gap: 4px;
    width: 100%;
}

.has-scroll .calendar-header-row,
.has-scroll .calendar-icons-row {
    width: auto;
}

/* When no scroll, days should distribute evenly */
.calendar-scroll-container:not(.has-scroll) .calendar-day-header,
.calendar-scroll-container:not(.has-scroll) .calendar-day-icon {
    flex: 1;
    min-width: 40px;
    max-width: 60px;
}

/* When scroll, days have fixed width */
.calendar-scroll-container.has-scroll .calendar-day-header,
.calendar-scroll-container.has-scroll .calendar-day-icon {
    width: 48px;
    flex-shrink: 0;
}

.calendar-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
}

.day-abbrev {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
}

.day-date {
    font-size: 13px;
    color: #e5e7eb;
    font-weight: 500;
}

.calendar-day-icon {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 16px;
    transition: transform 0.1s ease, background 0.15s ease;
    cursor: default;
}

    .calendar-day-icon:hover {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.1);
    }

.icon-available {
    color: #22c55e;
}

.icon-unavailable {
    color: #6b7280;
}