.driver-timeline-event.status-customer-picked-up .driver-timeline-marker {
    background-color: #4CAF50 !important; /* Green for customer picked up */
}
/* style.css (Material 3 Redesign) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
:root {
    /* M3 Neutral Color Theme */
    --md-sys-color-primary: #3d3d3d; /* A neutral, dark slate blue */
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-surface: #F9F9F9; /* A slightly off-white background */
    --md-sys-color-on-surface: #1C1B1F; /* Primary text color */
    --md-sys-color-on-surface-variant: #49454F; /* Secondary text color */
    --md-sys-color-surface-container: #F3F4F6; /* Left pane background */
    --md-sys-color-surface-container-high: #E8E8E8; /* Subtle hover/active states */
    --md-sys-color-outline: #D1D5DB; /* Borders and dividers */
    --md-sys-color-chip-bg: #E5E7EB;
    --md-sys-color-chip-text: #374151;
    /* Semantic Colors for Statuses */
    --md-sys-color-info-container: #D6E3FF; /* For 'new' status */
    --md-sys-color-on-info-container: #001B3E;
    --md-sys-color-secondary-container: #E8DEF8; /* For 'tagged' status */
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-warning-container: #FFDDB9; /* For 'preparing' status */
    --md-sys-color-on-warning-container: #2C1600;
    --md-sys-color-attention-container: #FEF0C7; /* For 'unfulfilled' status (Yellow) */
    --md-sys-color-on-attention-container: #4D2F00;
    --md-sys-color-success-container: #D2E7D2; /* For 'ready_for_delivery' status */
    --md-sys-color-on-success-container: #0F1F0F;
    --md-sys-color-error-container: #F8D7DA; /* For 'flagged_on_hold' status */
    --md-sys-color-on-error-container: #58151C;
    --md-sys-color-delayed-bg: #FFDDB9; /* Orange/Warning */
    --md-sys-color-delayed-text: #2C1600;
    --md-sys-color-failure-bg: #F8D7DA; /* Red/Error */
    --md-sys-color-failure-text: #58151C;
    /* Delivery Status Colors */
    --delivery-open-bg: #FEF0C7; /* Yellow */
    --delivery-open-text: #4D2F00;
    --delivery-out-bg: #D6E3FF; /* Blue */
    --delivery-out-text: #001B3E;
    --delivery-delivered-bg: #D2E7D2; /* Green */
    --delivery-delivered-text: #0F1F0F;
    --delivery-failed-bg: #F8D7DA; /* Red */
    --delivery-failed-text: #58151C;
    /* Shopify Fulfillment Status Colors */
    --shopify-fulfilled-bg: #e3e3e3;
    --shopify-fulfilled-text: #616161;
    --shopify-partial-bg: #ffd6a4;
    --shopify-partial-text: #5e4200;
    --shopify-unfulfilled-bg: #ffeb78;
    --shopify-unfulfilled-text: #4f4700;
    --shopify-cancelled-bg: #ffd6a4; /* Same as partial as per request */
    --shopify-cancelled-text: #5e4200; /* Same as partial as per request */
    /* M3 Typography */
    --md-sys-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --md-sys-typescale-headline-small-font-size: 1.5rem; /* 24px */
    --md-sys-typescale-title-large-font-size: 1.375rem; /* 22px */
    --md-sys-typescale-title-medium-font-size: 1rem; /* 16px */
    --md-sys-typescale-body-large-font-size: 1rem; /* 16px */
    --md-sys-typescale-body-medium-font-size: 0.875rem; /* 14px */
    --md-sys-typescale-label-large-font-size: 0.875rem; /* 14px */
    /* M3 Shape */
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 9999px;
}
* { box-sizing: border-box; }
body {
    font-family: var(--md-sys-font-family);
    background-color: #FFFFFF; /* White background for everyone */
    color: var(--md-sys-color-on-surface);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* --- Layout --- */
.main-container { display: flex; width: 100%; height: 100%; }
.order-list-pane { 
    width: 360px; 
    min-width: 280px; /* Minimum width when dragging */
    max-width: 600px; /* Maximum width when dragging */
    background-color: #FFFFFF; 
    border-right: 1px solid var(--md-sys-color-outline); 
    display: flex; 
    flex-direction: column;
    position: relative; /* Position FAB relative to this pane */
}
/* Draggable Divider (Desktop/Tablet only) */
.pane-divider {
    width: 4px;
    background-color: var(--md-sys-color-outline);
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.pane-divider:hover,
.pane-divider.dragging {
    background-color: #0b57d0; /* Dark blue when hovering or dragging */
}
/* Hide divider on mobile */
@media (max-width: 767px) {
    .pane-divider {
        display: none;
    }
}
.order-details-pane {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
#order-details-pane {
    background: #f1f1f1;
}
#main-header {
    padding: 16px 32px;
    border-bottom: 1px solid var(--md-sys-color-outline);
    display: none; /* Hidden by default on desktop */
    position: sticky;
    top: 0;
    background-color: var(--md-sys-color-surface);
    z-index: 100; /* Above content, below modals */
}
.back-button {
    text-decoration: none;
    color: var(--md-sys-color-primary);
    font-weight: 500;
    font-size: 16px;
}
.details-intro {
    max-width: 1000px;
    width: 100%;
    text-align: center;
    align-self: center;
}
#order-details-container {
    padding: 16px;
    overflow-y: visible;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: min-content;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
#order-details-container > div:nth-child(3) {
    background: white;
}
/* Standalone section headings (outside cards) */
#order-details-container > div > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--md-sys-typescale-title-medium-font-size);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-top: 0; /* Reduced from 16px for tighter spacing */
    margin-bottom: 8px; /* Reduced from 12px for tighter spacing */
}
.pane-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to the top */
    margin-bottom: 12px;
}
.pane-header-top h2 {
    margin: 0;
}
.user-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-info #user-display-name {
    display: block;
    font-weight: 500;
    font-size: var(--md-sys-typescale-body-medium-font-size);
}
.user-info #sign-out-btn {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}
/* View As Controls (Admin Only) */
#view-as-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    justify-content: flex-end;
}
#view-as-role {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}
/* View As Warning Banner */
#view-as-banner {
    position: fixed;
    bottom: 80px; /* Above FAB */
    left: 50%;
    transform: translateX(-50%);
    background: #d32f2f; /* Dark red */
    color: white;
    padding: 8px 20px; /* Thinner padding */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1500;
    border-radius: 20px; /* Smaller border radius */
    min-width: 280px;
    max-width: 90%;
}
#view-as-banner-text {
    font-size: 13px; /* Slightly smaller text */
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
#view-as-banner-text::before {
    content: '⚠️';
    font-size: 16px; /* Smaller emoji */
}
#exit-view-as-btn {
    background: white;
    color: #d32f2f; /* Matching dark red */
    border: none;
    padding: 5px 14px; /* Smaller padding */
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px; /* Smaller text */
    transition: transform 0.2s;
    white-space: nowrap;
}
#exit-view-as-btn:hover {
    transform: scale(1.05);
}
/* View As User List in Modal */
#view-as-user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}
.view-as-user-item {
    padding: 12px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.view-as-user-item:hover {
    background-color: var(--md-sys-color-surface-variant);
    border-color: var(--md-sys-color-primary);
}
.view-as-user-item-name {
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}
.view-as-user-item-email {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}
.pane-header { padding: 16px 10px 12px; border-bottom: 1px solid var(--md-sys-color-outline); }
.pane-header h2 { font-size: var(--md-sys-typescale-title-large-font-size); font-weight: 500; }
.order-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.order-detail-header h1 {
    font-size: var(--md-sys-typescale-title-large-font-size);
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--md-sys-color-on-surface);
}
/* Ensure chips in the detail header have a consistent width */
.order-detail-header .status-chip {
    min-width: 90px;
    text-align: center;
}
.customer-name-subtitle {
    font-size: var(--md-sys-typescale-body-large-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 24px 0;
}
.scroll-container { overflow-y: auto; flex-grow: 1; }
/* --- Order List Specifics --- */
#order-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.no-results {
    padding: 16px;
    color: var(--md-sys-color-on-surface-variant);
}
/* --- Search Bar --- */
.search-bar-container {
    margin-top: 12px;
}
#search-input {
    width: 100%;
    padding: 8px 12px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 8px;
    background-color: var(--md-sys-color-surface);
}
/* --- Filter Chip Group --- */
.filter-chip-group {
    display: flex;
    margin-top: 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    overflow: hidden; /* Ensures the border-radius is respected by children */
    visibility: hidden; /* Hide until role is determined to prevent flash */
}
.filter-chip-group .filter-chip {
    flex-grow: 1;
    padding: 8px 12px;
    border: none;
    background-color: transparent;
    border-radius: 0; /* Remove the radius from the general button style */
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}
.filter-chip-group .filter-chip:not(:last-child) {
    border-right: 1px solid var(--md-sys-color-outline);
}
.filter-chip-group .filter-chip.active {
    background-color: #00b4d8;
    color: #ffffff;
}
/* --- Role-based visibility: Hide new driver tabs from non-drivers --- */
body:not([data-user-role="driver"]) .filter-chip[data-filter="unassigned-deliveries"],
body:not([data-user-role="driver"]) .filter-chip[data-filter="my-active-deliveries"],
body:not([data-user-role="driver"]) .filter-chip[data-filter="my-completed-deliveries"] {
    display: none;
}
/* --- Role-based visibility: Hide Open, VIP, All, and old delivery tabs for drivers --- */
body[data-user-role="driver"] .filter-chip[data-filter="open"],
body[data-user-role="driver"] .filter-chip[data-filter="vip"],
body[data-user-role="driver"] .filter-chip[data-filter="all"],
body[data-user-role="driver"] .filter-chip[data-filter="open-deliveries"],
body[data-user-role="driver"] .filter-chip[data-filter="completed-deliveries"],
body[data-user-role="driver"] .filter-chip[data-filter="on-hold"] {
    display: none;
}
/* --- Role-based visibility: Hide driver tabs from packers --- */
body[data-user-role="packer"] .filter-chip[data-filter="unassigned-deliveries"],
body[data-user-role="packer"] .filter-chip[data-filter="my-active-deliveries"],
body[data-user-role="packer"] .filter-chip[data-filter="my-completed-deliveries"] {
    display: none;
}
/* --- Role-based visibility: Hide specific elements for packer role --- */
body[data-user-role="packer"] #view-as-controls {
    display: none !important;
}
body[data-user-role="packer"] .hold-fulfillment-btn {
    display: none !important;
}
body[data-user-role="packer"] .driver-notes-card {
    display: none !important;
}
body[data-user-role="packer"] .card-actions-inline {
    display: none !important;
}

/* --- Role-based visibility: Hide specific elements for CS role --- */
body[data-user-role="cs"] #view-as-controls {
    display: none !important;
}
body[data-user-role="cs"] .label-generator-section {
    display: none !important;
}
body[data-user-role="cs"] .fulfillment-order-group .checkbox-field {
    display: none !important;
}
body[data-user-role="cs"] .card-footer-actions {
    display: none !important;
}
body[data-user-role="cs"] .card-actions-inline {
    display: none !important;
}
/* Hide driver tabs from CS role */
body[data-user-role="cs"] .filter-chip[data-filter="unassigned-deliveries"],
body[data-user-role="cs"] .filter-chip[data-filter="my-active-deliveries"],
body[data-user-role="cs"] .filter-chip[data-filter="my-completed-deliveries"] {
    display: none;
}
/* Hide tracking update button and driver assignment dropdown */
body[data-user-role="cs"] .open-tracking-modal-btn {
    display: none !important;
}
body[data-user-role="cs"] .tracking-info-section {
    margin-bottom: 0 !important;
}
body[data-user-role="cs"] select[id^="assigned-driver-"] {
    display: none !important;
}
body[data-user-role="cs"] label[for^="assigned-driver-"] {
    display: none !important;
}
body[data-user-role="cs"] .form-field:has(select[id^="assigned-driver-"]) {
    display: none !important;
}
/* Hide Delivered By dropdown in fulfillment wizard */
body[data-user-role="cs"] .delivered-by-select {
    display: none !important;
}
body[data-user-role="cs"] .form-field:has(.delivered-by-select) {
    display: none !important;
}
/* --- Components --- */
.order-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px; /* Adds space between text and chip if they get close */
    padding: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline);
    cursor: pointer;
}
/* Hover state - only apply to non-selected items */
.order-list-item:hover:not(.selected) { 
    background-color: var(--md-sys-color-surface-container-high); 
}
/* Selected items should keep their blue background even on hover */
.order-list-item.selected:hover {
    background-color: #ecf3fe !important;
}
.order-list-item.active { 
    background-color: var(--md-sys-color-surface-container-high); 
    border-left: 3px solid var(--md-sys-color-primary); 
    padding-left: 13px; 
} /* 16px padding - 3px border */
.order-list-item .headline {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    font-size: var(--md-sys-typescale-body-large-font-size); font-weight: 500; color: var(--md-sys-color-on-surface); margin-bottom: 4px;
}
.headline .date-in-headline {
    font-size: 0.8rem; /* Make the date smaller */
    font-weight: 400; /* Normal weight */
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}
.list-item-statuses {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
/* Make all chips in the list view status column have the same width */
.list-item-statuses > .status-chip {
    width: 100%;
    text-align: center;
}
.order-list-item .supporting-text { font-size: var(--md-sys-typescale-body-medium-font-size); color: var(--md-sys-color-on-surface-variant); }
.assigned-to-text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #2e7d32;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    font-weight: 500;
    margin-bottom: 4px;
}
.assigned-to-text .material-symbols-outlined {
    font-size: 18px;
    color: #2e7d32;
}
.status-chip {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--md-sys-shape-corner-full);
    text-transform: capitalize;
    background-color: var(--md-sys-color-chip-bg);
    white-space: nowrap; /* Prevents the chip text from wrapping */
    color: var(--md-sys-color-chip-text);
}
.status-chip .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 6px;
    opacity: 0.7;
}
/* Status-specific chip colors */
.status-chip.new {
    background-color: var(--md-sys-color-info-container);
    color: var(--md-sys-color-on-info-container);
}
.status-chip.tagged {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.status-chip.preparing {
    background-color: var(--md-sys-color-warning-container);
    color: var(--md-sys-color-on-warning-container);
}
.status-chip.ready_for_delivery {
    background-color: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}
.status-chip.flagged_on_hold {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
/* VIP customer chip color */
.status-chip.vip {
    background-color: #16A34A; /* A vibrant, high-contrast orange */
    color: #FFFFFF; /* White text for maximum readability */
}
/* Express order chip color */
.status-chip.express {
    background-color: #DC2626; /* Red for urgency */
    color: #FFFFFF; /* White text for maximum readability */
}
/* Cancelled order chip color - Shopify orange */
.status-chip.cancelled {
    background-color: #fed6a5; /* Light orange background */
    color: #5f4200; /* Dark brown text */
}
/* Replacement order chip color - Red for high visibility */
.status-chip.replacement {
    background-color: #DC2626; /* Red background */
    color: #FFFFFF; /* White text */
}
/* Maintenance order chip color - Lilac for technical status */
.status-chip.maintenance {
    background-color: #cfbccc; /* Soft lilac background */
    color: #342e33; /* Dark purple text */
}
/* B2B order chip color - Same as maintenance */
.status-chip.b2b {
    background-color: #cfbccc; /* Soft lilac background */
    color: #342e33; /* Dark purple text */
}
/* Shopify Fulfillment Status Colors */
.status-chip.fulfilled {
    background-color: var(--shopify-fulfilled-bg);
    color: var(--shopify-fulfilled-text);
}
.status-chip.unfulfilled {
    background-color: var(--shopify-unfulfilled-bg);
    color: var(--shopify-unfulfilled-text);
}
.status-chip.partial {
    background-color: var(--shopify-partial-bg);
    color: var(--shopify-partial-text);
}
/* Delivery Status Chip Colors */
.status-chip.open {
    background-color: var(--md-sys-color-success-container);
    color: var(--md-sys-color-on-success-container);
}
.status-chip.out_for_delivery {
    background-color: var(--delivery-out-bg);
    color: var(--delivery-out-text);
}
.status-chip.delivered {
    background-color: var(--delivery-delivered-bg);
    color: var(--delivery-delivered-text);
}
.status-chip.failed_delivery {
    background-color: var(--delivery-failed-bg);
    color: var(--delivery-failed-text);
}
.status-chip.delayed, .status-chip.attempted_delivery {
    background-color: var(--md-sys-color-delayed-bg);
    color: var(--md-sys-color-delayed-text);
}
.status-chip.failure {
    background-color: var(--md-sys-color-failure-bg);
    color: var(--md-sys-color-failure-text);
}
/* Definitive Status Chip Colors */
/* Semantic status chip colors - aligned with timeline dots */
.status-chip.green {
    background-color: #E8F5E9; /* Light green background */
    color: #2E7D32; /* Dark green text */
}
.status-chip.orange {
    background-color: #FFF3E0; /* Light orange background */
    color: #E65100; /* Dark orange text */
}
.status-chip.amber {
    background-color: #FFF8E1; /* Light amber background */
    color: #F57C00; /* Dark amber text */
}
.status-chip.red {
    background-color: #FFEBEE; /* Light red background */
    color: #C62828; /* Dark red text */
}
.status-chip.gray {
    background-color: var(--shopify-cancelled-bg);
    color: var(--shopify-cancelled-text);
}
/* Legacy color classes for backward compatibility */
.status-chip.blue {
    background-color: var(--shopify-partial-bg);
    color: var(--shopify-partial-text);
}
.status-chip.purple {
    background-color: #E9D5FF;
    color: #6B21A8;
}
/* Other Fulfillment Order Statuses */
.status-chip.scheduled, .status-chip.rescheduled, .status-chip.in_progress, .status-chip.unsubmitted {
    background-color: var(--md-sys-color-attention-container);
    color: var(--md-sys-color-on-attention-container);
}
.status-chip.incomplete, .status-chip.on_hold {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
button[title]:disabled {
    cursor: help;
}
.card {
    background-color: #FFFFFF;
    border-radius: var(--md-sys-shape-corner-large);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--md-sys-color-outline);
    position: relative; /* Required for the loading overlay */
}
/* Remove bottom margin from last card in container */
#order-details-container > .card:last-child,
#shipments-list > .card:last-of-type {
    margin-bottom: 0;
}
/* Empty state card - no border */
.empty-state-card {
    border: none;
}
.reference-card {
    /* Remove card-like appearance */
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0; /* Remove padding from the container */
    margin-top: 32px; /* Add more space above this card */
    /* Add a top divider for separation */
}
/* Override the default h4 style for reference cards */
.reference-card h4 {
    border-bottom: none; /* Remove the line */
    font-size: var(--md-sys-typescale-label-large-font-size); /* Make it smaller (14px) */
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant); /* Mute the color */
    margin: 0 !important; /* Force override of any other margin rules */
    padding-bottom: 0;
}
/* Style the list items within the reference card */
.reference-card ul li {
    font-size: var(--md-sys-typescale-body-medium-font-size); /* 14px */
    color: var(--md-sys-color-on-surface-variant);
    padding: 4px 0; /* Add a little vertical space */
}
/* Compact Info Cards - Shopify-style with edit icon */
.info-card-compact {
    background-color: #FFFFFF;
    padding: 14px !important;
}
.card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px !important;
}
.card-header-with-action h4 {
    margin: 0 !important;
}
.icon-action-btn {
    background: none;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--md-sys-shape-corner-full);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-action-btn:hover {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}
.icon-action-btn .material-symbols-outlined {
    font-size: 20px;
}
/* Sync progress indicator */
.sync-progress {
    --md-circular-progress-size: 24px;
    --md-circular-progress-active-indicator-width: 10;
    margin-left: 8px;
    opacity: 0.8;
}
.card-content-text {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface);
    line-height: 1.5;
    margin: 0 0 6px 0;
}
.card-content-text .placeholder-text {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
}
/* Bottom action section for cards */
.card-bottom-action {
    display: flex;
    justify-content: flex-end;
    margin: 12px -14px 0 -14px;
    padding: 12px 14px 0 14px;
    border-top: 1px solid var(--md-sys-color-outline);
}
.card-bottom-action--with-toggle {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-right: 14px;
}
.card-bottom-action--with-toggle .note-toggle {
    margin-top: 0;
    align-self: flex-end;
}
.fulfillment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}
.fulfillment-card-title {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.fulfillment-card-title h4 {
    flex-basis: 100%;
}
.fulfillment-card-title .status-chip,
.fulfillment-card-title .pickup-chip {
    flex-shrink: 0;
}
.hold-info {
    flex-basis: 100%;
    font-size: 16px;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 8px;
    line-height: 1.5;
}
.fulfillment-card-statuses {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.fulfillment-card-statuses .status-chip {
    text-transform: none;
}
/* Filled tonal button - for important recurring actions like Print */
.btn-outlined-secondary {
    background-color: var(--md-sys-color-primary-container, #D3E3FD) !important;
    border: none !important;
    color: var(--md-sys-color-on-primary-container, #00569c) !important;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: var(--md-sys-shape-corner-full);
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-outlined-secondary:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.btn-outlined-secondary .material-symbols-outlined {
    font-size: 18px;
}
/* Style for the new Notes/Message cards */
.info-card {
    background-color: var(--md-sys-color-surface-container);
    /* Keep parent padding, but remove bottom padding to avoid double-spacing */
    padding-bottom: 16px;
}
.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Use negative horizontal margin to break out of the parent's padding */
    margin: -16px -16px 0 -16px;
    padding: 16px 16px 12px 16px; /* Add padding back to the content inside */
    margin-bottom: 12px; /* Add space below the line */
    gap: 12px; /* Add a gap between the title and the icon */
}
.pending-icon {
    width: 10px;
    height: 10px;
    background-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
/* --- Replacement Reason Card --- */
/* Replacement Reason Card - Normal styling with warning icon emphasis */
.replacement-reason-card {
    background-color: var(--md-sys-color-surface-container-low);
    border-left: 3px solid #DC2626; /* Red accent border on left for emphasis */
}
.replacement-reason-card h4 {
    color: var(--md-sys-color-on-surface);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}
.replacement-reason-card .warning-icon {
    color: #DC2626; /* Red warning icon */
    font-size: 20px;
}
.replacement-reason-card p {
    color: var(--md-sys-color-on-surface);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.info-card h4 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
}
.info-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.placeholder-text {
    font-style: italic;
    color: var(--md-sys-color-on-surface-variant);
}
/* --- Collapsible Card Styles --- */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    position: relative;
}
.collapsible-card.is-open .collapsible-content {
    max-height: 1000px; /* A large value to allow full expansion */
}
.collapsible-card:not(.is-open) .collapsible-content .card-content-text {
    margin: 0;
}
.collapsible-toggle {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    font-weight: 500;
    margin-top: 0;
    cursor: pointer;
    width: auto;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: var(--md-sys-shape-corner-full);
}
.collapsible-toggle::before {
    content: 'add';
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    vertical-align: middle;
}
.collapsible-card.is-open .collapsible-toggle::before {
    content: 'remove';
}
/* --- Sync collapsible-toggle text with <details> state --- */
.shipment-card-container .collapsible-toggle::before {
    content: 'add';
    font-family: 'Material Symbols Outlined';
}
.shipment-card-container .shipment-card-details[open] + .card-footer-actions .collapsible-toggle::before {
    content: 'remove';
}
/* Hide the original accordion icon in the header */
.shipment-card-container .accordion-icon {
    display: none;
}
.note-toggle {
    align-self: flex-start;
    margin-top: 12px;
    padding: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    color: #005bd3;
    font-weight: 400;
}
.note-toggle::before {
    content: 'Show';
    font-family: inherit;
    font-size: var(--md-sys-typescale-label-medium-font-size);
    font-weight: 400;
    line-height: 1;
    color: inherit;
    text-decoration: underline;
}
.collapsible-card.is-open .note-toggle::before {
    content: 'Hide';
}
.card-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    /* Apply negative margin to make the border full-width */
    margin: 0px -16px -16px -16px;
    padding: 12px 16px 16px 16px;
}
.card-action-btn {
    height: 38px; /* Set consistent height */
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center;
    justify-content: center;
    padding: 0 16px !important; /* Adjust padding for flex layout */
    font-size: 0.8rem !important;
    /* --- Style as a secondary/outlined button --- */
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline);
    color: var(--md-sys-color-primary);
    min-width: 130px; /* Ensure both buttons have the same width */
}
#fulfill-items-card .card-footer-actions .card-action-btn {
    background-color: var(--md-sys-color-primary-container, #D3E3FD);
    border: none;
    color: var(--md-sys-color-on-primary-container, #00569c);
    gap: 6px;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-large-font-size) !important;
    font-weight: 500;
    padding: 0 20px !important;
}

#fulfill-items-card .card-footer-actions .hold-fulfillment-btn {
    background-color: transparent;
    color: var(--md-sys-color-on-primary-container, #00569c);
    border: 1px solid var(--md-sys-color-on-primary-container, #00569c);
    box-shadow: none;
}

#fulfill-items-card .card-footer-actions .hold-fulfillment-btn:hover {
    background-color: var(--md-sys-color-on-primary-container, #00569c);
    color: var(--md-sys-color-primary-container, #D3E3FD);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

#fulfill-items-card .card-footer-actions .hold-fulfillment-btn .material-symbols-outlined {
    font-size: 18px;
}
#fulfill-items-card .card-footer-actions .card-action-btn .material-symbols-outlined {
    font-size: 18px;
}



}
/* --- Print Card Styles --- */
.print-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.print-card h4 {
    margin: 0;
    border: none;
    padding: 0;
}
.print-card .card-action-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
}
.card h3 { font-size: var(--md-sys-typescale-headline-small-font-size); font-weight: 400; margin-bottom: 1rem; }
.primary-card {
    background-color: #FFFFFF;
    border-radius: var(--md-sys-shape-corner-large);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--md-sys-color-outline);
}
.primary-card p {
    font-size: var(--md-sys-typescale-body-large-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 16px 0;
}
.primary-card hr {
    border: none;
    border-top: 1px solid var(--md-sys-color-outline);
    margin: 16px 0;
}
.primary-card .fulfill-item {
    padding: 8px 0;
}
.primary-card .item-quantity {
    font-weight: 500;
    margin-right: 8px;
}
.primary-card .button-primary {
    width: 100%;
    margin-top: 24px;
}
.card h4 { 
    font-size: var(--md-sys-typescale-title-medium-font-size); 
    font-weight: 500; 
    margin-top: 0;
    margin-bottom: 8px; /* Reduced from 12px for tighter spacing */
    color: var(--md-sys-color-on-surface);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pickup-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #e4e4e4;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.pickup-chip .material-symbols-outlined {
    font-size: 16px;
}
/* Section heading icons */
.section-icon {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
}
/* Shipments Section Spacing */
.shipments-section {
    margin-top: 32px; /* Add breathing room between fulfill items and shipments */
}
/* Card elevation levels for depth */
.card {
    box-shadow: none;
}
/* Elevated card for History section */
.driver-history-card {
    box-shadow: none;
    border: 1px solid var(--md-sys-color-outline-variant);
}
/* Driver Action Buttons - Icon buttons for Call and Navigate */
.driver-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--md-sys-color-outline);
}
.driver-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    text-decoration: none;
    border: none;
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.driver-action-btn:hover {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.driver-action-btn .material-symbols-outlined {
    font-size: 20px;
}
button {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    padding: 10px 24px;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
button:hover { }
.button-primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
button:disabled { background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); cursor: not-allowed; }
.form-field { margin-bottom: 16px; display: flex; align-items: center; }
.form-field label { display: block; margin-bottom: 0; font-weight: 500; white-space: nowrap; margin-right: 16px; }
.form-field select, .form-field input, .form-field textarea, .fulfill-item input { font-size: 1rem; padding: 8px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-family: var(--md-sys-font-family); }
.form-field select {
    flex-grow: 1; /* Allow the select box to fill remaining space */
}
.outlined-field input[type="text"] {
    width: 100%;
    padding: 14px 12px;
    background-color: transparent;
}
.checkbox-field {
    margin: 16px -16px 0 -16px;
    padding: 16px 16px 0 16px;
    border-top: 1px solid var(--md-sys-color-outline);
}
.checkbox-field label {
    white-space: normal;
    margin-right: 0;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer; /* Make the label clickable */
}
.checkbox-field input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--md-sys-color-outline);
    cursor: pointer;
    position: relative;
    margin-right: 12px; /* Space between box and label */
    flex-shrink: 0; /* Prevent the box from shrinking */
}
.checkbox-field input[type="checkbox"]:checked {
    background-color: var(--md-sys-color-on-surface); /* Dark grey background */
    border-color: var(--md-sys-color-on-surface);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
}
/* Outlined Field Style */
.outlined-field {
    position: relative;
    margin-top: 24px; /* Add space above the field */
}
.outlined-field label {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    background-color: #FFFFFF; /* Match card background to create "cutout" effect */
    padding: 0 4px;
    margin: 0;
}
.outlined-field select {
    width: 100%;
    padding: 14px 12px;
    background-color: transparent;
    border-radius: 8px;
    appearance: none; /* Remove default browser arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}
.outlined-field textarea {
    width: 100%;
    padding: 14px 12px;
    background-color: transpare nt;
    border-radius: 8px;
}
.fulfillment-items-list {
    max-width: 100%; /* Ensure it doesn't overflow on mobile */
    margin-bottom: 16px; /* Reduced from 24px */
    margin-top: 12px; /* Add small space after heading */
}
.fulfill-item {
    display: grid;
    grid-template-columns: 1fr auto; /* Let the first column grow, but only within the fit-content parent */
    align-items: center;
    gap: 12px; /* Reduced from 16px */
    padding: 10px 0; /* Reduced from 16px */
    border-bottom: 1px solid #E5E7EB; /* Light gray border */
}
.fulfill-item:last-child {
    border-bottom: none; /* Remove border from last item */
}
.item-text {
    display: flex;
    flex-direction: column;
}
.item-title {
    font-size: 16px;
}
.item-variant {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
}
.item-sku {
    font-size: 14px;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.7;
    margin-top: 2px;
}
.fulfillment-box { border-top: 1px solid var(--md-sys-color-outline); padding-top: 16px; margin-top: 16px; }
.fulfillment-box p { margin: 0 0 8px 0; }
.shipping-address-summary {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 12px 0; /* Reduced from 16px */
    line-height: 1.5;
}
/* --- Shipment Cards --- */
.shipment-card-container {
    padding: 0; /* Remove padding from the details element itself */
}
/* Simplified shipment card content (no accordion) */
.shipment-card-content {
    padding: 16px;
}
.shipment-card-content .card-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--md-sys-color-outline);
    display: flex;
    justify-content: flex-end;
}
/* Driver view: no divider above button */
/* Driver view: no divider above button, make it prominent */
.driver-card-actions {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 16px;
}
.driver-card-actions .card-action-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.driver-card-actions .card-action-btn::before {
    content: "edit";
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
}
/* Driver Fixed Action Button - Fixed to bottom right like FAB */
.driver-fixed-action {
    position: fixed;
    bottom: max(80px, calc(64px + env(safe-area-inset-bottom))); /* Extra space for Android nav bars */
    right: 16px;
    z-index: 1000; /* Same as assignment FAB, below modals (9999) */
}
.driver-update-btn {
    padding: 14px 24px;
    background-color: #ecf3fe;
    color: #0b57d0;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.14);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 160px;
}
.driver-update-btn:hover {
    background-color: #d3e3fd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.19);
}
.driver-update-btn .material-symbols-outlined {
    font-size: 20px;
}
.shipment-card-content .card-action-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
}
.shipment-card-content .card-action-btn:hover {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
/* Legacy accordion styles (for admin view) */
.shipment-card-details {
    /* This is now the details element inside the card */
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.5s linear;
}
.shipment-card-details summary {
    list-style: none; /* Remove default arrow */
    cursor: pointer;
    padding: 16px; /* Add padding to the summary header */
}
.shipment-card-details summary::-webkit-details-marker { display: none; } /* Hide arrow in Chrome/Safari */
.shipment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between left and right sections */
    width: 100%; /* Ensure it takes full width */
}
.shipment-card > p { margin: 0 0 6px 0; } /* Target only direct children to not affect header */
.card-timestamp {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
    white-space: nowrap; /* Prevent the timestamp from wrapping */
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 9px;
}
.header-right {
    flex-shrink: 0; /* Prevent shrinking */
}
/* Style the collapsible toggle when in header */
.shipment-card-header .collapsible-toggle {
    background: none;
    border: none;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}
.shipment-card-header .collapsible-toggle::before,
.shipment-card-header .collapsible-toggle::after {
    content: '';
    position: absolute;
    background-color: var(--md-sys-color-primary);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Horizontal line (always visible) */
.shipment-card-header .collapsible-toggle::before {
    width: 14px;
    height: 2px;
    border-radius: 1px;
}
/* Vertical line (hidden when open) */
.shipment-card-header .collapsible-toggle::after {
    width: 2px;
    height: 14px;
    border-radius: 1px;
}
/* When open, rotate vertical line to horizontal (making it disappear into horizontal line) */
.shipment-card-details[open] .shipment-card-header .collapsible-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
}
.accordion-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2349454F'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3e%3c/svg%3e");
    background-size: contain;
}
.shipment-card-details[open] .accordion-icon {
    transform: rotate(180deg);
}
.accordion-content {
    padding: 0 16px 20px 16px;
    overflow: hidden; /* This is crucial for the grid animation */
}
.shipment-card-details[open] .accordion-content {
    grid-template-rows: auto 1fr;
}
.shipment-card-details[open] .accordion-content {
}
/* Override footer for shipment cards */
.shipment-card-container .card-footer-actions {
    justify-content: space-between; /* Align items to edges */
    justify-content: flex-start; /* Align toggle to the left */
    padding: 12px 16px 16px 16px;
    margin: 0; /* Reset margins */
}
.shipment-card-container .card-footer-actions {
    justify-content: space-between; /* Align items to edges */
}
/* Give the Create Event button a primary style */
.shipment-card-container .open-create-event-modal-btn {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
}
.accordion-content > p {
    margin: 0px 0 10px 0;
}
.tracking-info-section {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    flex-direction: row;
    align-items: center;
}
.tracking-info-section .card-action-btn {
    flex-shrink: 0; /* Prevent the button from shrinking */
    background-color: transparent;
    color: var(--md-sys-color-on-primary-container, #00569c);
    border: 1px solid var(--md-sys-color-on-primary-container, #00569c);
    box-shadow: none;
}
.tracking-details p {
    margin-top: 5px; /* Remove the default top margin */
    margin-bottom: 10px; /* Add default margin for spacing */
}
.tracking-details p:last-child {
    margin-bottom: 0; /* Remove margin from the last item for alignment */
}
/* --- Inline Action Buttons (inside accordion content) --- */
.card-actions-inline {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--md-sys-color-outline);
}
.card-actions-inline .card-action-btn {
    background-color: var(--md-sys-color-primary-container, #D3E3FD) !important;
    border: none !important;
    color: var(--md-sys-color-on-primary-container, #00569c) !important;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: var(--md-sys-shape-corner-full);
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* --- Event History Styles --- */
.event-history {
    /* Base styles, if any, go here. For now, it's empty. */
}
.event-history:not(:empty) {
    border-top: 1px solid var(--md-sys-color-outline);
    margin-top: 16px;
    padding-top: 16px;
}
.event-history h4 {
    margin: 0 0 8px 0;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    border: none;
    padding: 0;
}
.event-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.event-history-item {
    padding: 8px 0;
}
.event-status-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--md-sys-typescale-body-medium-font-size);
}
.event-status-line .status-text {
    font-weight: 500;
    text-transform: none; /* Explicitly prevent capitalization */
}
.event-status-line .event-timestamp { color: var(--md-sys-color-on-surface-variant); font-size: 0.8rem; }
.event-message {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 4px 0 0 0;
}
.event-photos {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.event-photo-link {
    display: block;
    border-radius: var(--md-sys-shape-corner-small);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
    transition: transform 0.2s, box-shadow 0.2s;
}
.event-photo-link:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.event-photo-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
}
.shipment-items {
    /* Default admin view has divider */
    margin-top: 5px;
    padding-top: 16px;
}
/* Driver view: clean layout without dividers */
.driver-shipment-items {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}
/* Driver Photos Section */
.driver-photos-container {
    margin-top: 16px;
}
.driver-photos-section {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    padding-top: 16px;
}
.driver-photos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.driver-photos-header strong {
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}
.driver-photos-status {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
}
.driver-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
}
.driver-photo-link {
    display: block;
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    transition: transform 0.2s, box-shadow 0.2s;
    aspect-ratio: 1;
}
.driver-photo-link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.driver-photo-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shipment-items strong {
    display: block; /* Behave like a heading */
    font-style: normal; /* Remove italics */
    margin: 0 0 8px 0;
    font-size: var(--md-sys-typescale-label-large-font-size);
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
}
.shipment-items ul {
    margin-top: 12px;
}
.shipment-items ul li {
    padding: 4px 0;
}
/* Driver Event History Timeline */
.driver-event-history {
    margin-top: 12px;
}
.driver-timeline {
    position: relative;
    padding-left: 0;
    margin: 0;
}
.driver-timeline-event {
    position: relative;
    padding-left: 24px;
    padding-bottom: 16px;
    display: block;
}
.driver-timeline-event:last-child {
    padding-bottom: 0;
}
.driver-timeline-event:last-child .driver-timeline-marker::after {
    display: none;
}
.driver-timeline-marker {
    position: absolute;
    left: 2px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--md-sys-color-outline);
    border: 2px solid var(--md-sys-color-surface-container-highest);
    z-index: 2;
    transition: all 0.2s ease;
}
/* Status-based marker colors */
.driver-timeline-event.status-delivered .driver-timeline-marker {
    background-color: #4CAF50 !important; /* Green for delivered */
}
.driver-timeline-event.status-in-transit .driver-timeline-marker {
    background-color: #FF9800 !important; /* Orange for out for delivery */
}
.driver-timeline-event.status-warning .driver-timeline-marker {
    background-color: #F44336 !important; /* Red for attempted/failed */
}
.driver-timeline-event.status-historical .driver-timeline-marker {
    background-color: var(--md-sys-color-outline) !important; /* Gray for historical */
}
.driver-timeline-marker::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--md-sys-color-outline-variant) 0px,
        var(--md-sys-color-outline-variant) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.4;
    height: calc(100% + 16px);
}
/* Make first event more prominent */
.driver-timeline-event.first-event {
    padding-bottom: 24px; /* Extra spacing after first event */
}
.driver-timeline-event.first-event .driver-timeline-content {
    background-color: var(--md-sys-color-surface-container-high);
    border: 1px solid var(--md-sys-color-outline-variant);
}
.driver-timeline-event.first-event .driver-timeline-status {
    font-size: 15px;
    font-weight: 600;
}
.driver-timeline-event.first-event .driver-timeline-marker {
    width: 10px;
    height: 10px;
    border-width: 3px;
}
/* Fade older events - adjusted to 75% opacity for better readability */
.driver-timeline-event.older-event {
    opacity: 0.75;
}
.driver-timeline-event.older-event .driver-timeline-marker::after {
    opacity: 0.25;
}
.driver-timeline-content {
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 12px 16px;
    display: block;
    margin-bottom: 0;
}
.driver-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.driver-timeline-status {
    font-size: 14px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    text-transform: capitalize;
    flex: 1;
}
.driver-timeline-time {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}
.event-note {
    margin: 0 0 12px 0;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.5;
}
.event-note:last-child {
    margin-bottom: 0;
}
/* Photo label */
.event-photo-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 8px;
    margin-bottom: 8px;
}
/* Event photos in timeline */
.driver-timeline-content .event-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
/* Larger photos when there's only one */
.driver-timeline-content .event-photos:has(:only-child) {
    grid-template-columns: 140px;
    max-width: 180px;
}
.driver-timeline-content .event-photo-thumbnail {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    aspect-ratio: 1;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100% !important;
    height: 100% !important;
    min-width: 120px;
    min-height: 120px;
}
.driver-timeline-content .event-photo-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.driver-timeline-content .event-photo-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.no-events-message {
    text-align: center;
    padding: 24px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-body-medium-font-size);
}
.error-message {
    text-align: center;
    padding: 24px;
    color: var(--md-sys-color-error);
    font-size: var(--md-sys-typescale-body-medium-font-size);
}
.card ul {
    list-style-type: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}
.label-generator-section {
    border-top: 1px solid var(--md-sys-color-outline);
    margin-top: 16px;
    padding-top: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; /* Reduced from 16px */
    display: flex;
}
/* Styles for the label generator inside the fulfillment wizard */
.fulfillment-order-group .label-generator-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 12px; /* Reduced from 16px */
    display: none; /* Hidden by default, shown by JS */
}
.label-generator-section label {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: bold;
}
.label-generator-controls {
    display: flex;
    gap: 12px; /* Reduced from 16px */
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* Make the print labels button match the height of the quantity stepper */
/* Tracking Update Form */
.tracking-update-form {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline);
}
.tracking-update-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
/* --- Modal Styles --- */
.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; /* High z-index to appear above FAB and other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    width: 90%;
    max-width: 500px;
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}
.modal-overlay.visible .modal-content {
    transform: scale(1);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--md-sys-color-outline);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.modal-header h3 {
    margin: 0;
    font-size: var(--md-sys-typescale-title-large-font-size);
}
.icon-button {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    padding: 0;
}
.modal-body button {
    width: 100%;
}
/* Photo Upload Section in Modal */
.photo-upload-section {
    margin: 20px 0;
    padding: 16px;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-medium);
}
.photo-upload-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.photo-upload-header label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin: 0;
}
.required-badge {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}
.photo-hint {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    margin: 0 0 12px 0;
}
.photo-upload-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.photo-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-medium);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.photo-btn:hover {
    background-color: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-primary);
}
.photo-btn .material-symbols-outlined {
    font-size: 20px;
}
.photo-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}
.photo-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--md-sys-shape-corner-small);
    overflow: hidden;
    background-color: var(--md-sys-color-surface-container);
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background-color 0.2s;
}
.photo-delete-btn:hover {
    background-color: rgba(211, 47, 47, 0.9);
}
/* --- Status Dashboard --- */
.status-dashboard {
    padding: 16px 0;
    margin-bottom: 16px;
    border-top: 1px solid var(--md-sys-color-outline);
    border-bottom: 1px solid var(--md-sys-color-outline);
}
.status-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 16px;
}
.status-item + .status-item {
    margin-top: 16px;
}
.status-item label {
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
}
.save-indicator {
    grid-column-start: 2;
    color: var(--md-sys-color-on-success-container);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.save-indicator.visible { opacity: 1; }
/* --- Responsive Design --- */
.group-title {
    font-size: 0.8rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 0;
    font-weight: 500;
}
.group-separator {
    display: none; /* Remove the hr separator */
}
.group-status {
    margin-bottom: 16px;
    font-size: var(--md-sys-typescale-body-medium-font-size);
    color: var(--md-sys-color-on-surface-variant);
}
/* Override footer for the fulfillment group to align the button right */
.fulfillment-order-group .card-footer-actions {
    justify-content: flex-end;
}
/* Remove top and bottom margin from the "Fulfill items" title for tighter spacing */
.card > h4:first-child {
    margin-top: 0;
    margin-bottom: 8px; /* Reduced from 12px for tighter spacing */
}
.fulfillment-complete-message {
    margin-top: 16px;
    margin-bottom: 0;
}
/* --- Quantity Stepper --- */
.quantity-stepper {
    display: flex;
    align-items: center;
}
.quantity-stepper input[type="number"] {
    width: 50px;
    height: 36px; /* Reduced from 38px for compactness */
    text-align: center;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--md-sys-color-outline);
    border-bottom: 1px solid var(--md-sys-color-outline);
    border-radius: 0;
    -moz-appearance: textfield; /* Firefox */
}
.quantity-stepper input[type="number"]::-webkit-inner-spin-button,
.quantity-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity-display {
    display: inline-block;
    min-width: 60px; /* Changed to min-width for flexibility */
    height: 36px; /* Reduced from 38px */
    line-height: 36px;
    text-align: center;
    border-top: 1px solid var(--md-sys-color-outline);
    border-bottom: 1px solid var(--md-sys-color-outline);
    padding: 0 8px; /* Add horizontal padding for better text spacing */
    font-size: 14px; /* Slightly smaller for compactness */
}
.quantity-btn {
    width: 36px; /* Reduced from 38px - still mobile-friendly */
    height: 36px; /* Reduced from 38px */
    padding: 0;
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    font-size: 1.25rem; /* Slightly smaller from 1.5rem */
    line-height: 1;
    cursor: pointer;
}
.quantity-btn.minus {
    border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full);
}
.quantity-btn.plus {
    border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
}
.quantity-btn:disabled {
    background-color: var(--md-sys-color-surface-container); /* Keep original background */
    opacity: 0.5; /* Lighten the button and its content */
    cursor: not-allowed;
}

/* --- Simple Quantity Display (for CS role) --- */
.quantity-simple-display {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    padding: 8px 16px;
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-small);
    min-width: 48px;
    text-align: center;
}

@media (max-width: 768px) {
    .main-container {
        position: relative;
        overflow: hidden;
    }
    .order-list-pane {
        width: 100%;
        transition: transform 0.3s ease-in-out;
    }
    .order-details-pane {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.2s ease-in-out; 
        background-color: var(--md-sys-color-surface);
    }
    .order-details-pane.details-pane--visible { transform: translateX(0); }
    .order-details-pane.details-pane--visible { transform: translateX(0); }
    #main-header {
        display: block;
        padding: 16px;
    }
    .card-header-flex {
        margin: -15px -15px 0px -15px;
        padding: 15px 15px 12px 15px;
    }
    .card-footer-actions {
        margin: 12px -15px -15px -15px;
        padding: 12px 15px 15px 15px;
    }
    .card {
        padding: 15px 15px; /* Keep some padding on general cards */
        margin-bottom: 16px;
    }
    .shipment-card-container {
        padding: 0; /* Remove padding from the accordion container itself */
    }
    .shipment-card summary {
        padding: 16px; /* Control padding on the header */
    }
    .accordion-content {
        padding: 0 16px 20px 16px; /* Match desktop bottom padding */
    }
    .fulfill-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 0; /* Updated to match desktop - reduced from 16px */
        border-bottom: 1px solid #E5E7EB !important; /* Light gray border */
    }
    .fulfill-item:last-child {
        border-bottom: none !important; /* Remove border from last item */
    }
    #order-details-container {
        padding: 16px;
        padding-bottom: 80px; /* Add space for fixed button at bottom */
    }
    .label-generator-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    /* Ensure driver update button is fixed to viewport, not parent */
    .driver-fixed-action {
        position: fixed !important;
        bottom: 16px;
        right: 16px;
        z-index: 1000;
    }
}
/* --- Loading Spinner --- */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--md-sys-shape-corner-large); /* Match the card's border-radius */
    backdrop-filter: blur(2px);
}
.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid var(--md-sys-color-surface-container-high);
    border-bottom-color: var(--md-sys-color-primary);
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
}
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* --- Inline Spinner for content loading --- */
.inline-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
}
.inline-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--md-sys-color-surface-container-high);
    border-bottom-color: var(--md-sys-color-primary);
    border-radius: 50%;
    display: inline-block;
    animation: rotation 0.8s linear infinite;
}
/* --- Toast Notifications --- */
#toast-container {
    position: fixed;
    bottom: 32px;
    left: 32px;
    right: 32px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Make toasts fill the container width */
    gap: 10px;
}
.toast {
    background-color: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
    padding: 14px 24px;
    border-radius: var(--md-sys-shape-corner-medium); /* A more subtle corner for a wider element */
    text-align: center; /* Keep the text centered */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: toast-fade-in-out 3s ease-in-out forwards;
    font-size: var(--md-sys-typescale-body-medium-font-size);
}
@keyframes toast-fade-in-out {
    0% { transform: translateY(20px); opacity: 0; }
    15% { transform: translateY(0); opacity: 1; }
    85% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}
/* --- Material Web Components Styling --- */
/* Material Design 3 FAB Custom Properties - Blue Theme */
#assignment-fab {
    position: absolute; /* Position relative to .order-list-pane */
    bottom: max(80px, calc(64px + env(safe-area-inset-bottom))); /* Extra space for Android nav bars */
    right: 16px;
    z-index: 1000;
    --md-fab-container-color: #ecf3fe !important; /* Light blue background */
    --md-fab-label-text-color: #0b57d0 !important; /* Dark blue text */
    --md-fab-icon-color: #0b57d0 !important; /* Dark blue icon */
    --md-fab-container-shape: 16px;
    /* Override Material's primary container color */
    --md-sys-color-primary-container: #ecf3fe !important;
    --md-sys-color-on-primary-container: #0b57d0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Force FAB colors with higher specificity */
#assignment-fab::part(button) {
    background-color: #ecf3fe !important;
    color: #0b57d0 !important;
}
#assignment-fab::part(icon) {
    color: #0b57d0 !important;
}
/* FAB disabled state (when nothing selected) - greyed out but visible */
#assignment-fab[data-disabled="true"] {
    --md-fab-container-color: var(--md-sys-color-surface-variant);
    --md-fab-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-fab-icon-color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    pointer-events: none;
}
/* Material Design 3 Checkbox - Large mobile-friendly circular style */
md-checkbox {
    /* Unselected/deselected state outline colors */
    --md-checkbox-outline-color: rgba(0, 0, 0, 0.38);
    --md-checkbox-hover-outline-color: rgba(0, 0, 0, 0.38);
    --md-checkbox-focus-outline-color: rgba(0, 0, 0, 0.38);
    --md-checkbox-pressed-outline-color: rgba(0, 0, 0, 0.38);
    --md-checkbox-outline-width: 1px;
    --md-checkbox-hover-outline-width: 1px;
    --md-checkbox-focus-outline-width: 1px;
    --md-checkbox-pressed-outline-width: 1px;
    /* Selected state colors */
    --md-checkbox-selected-container-color: #0b57d0; /* Dark blue */
    --md-checkbox-selected-hover-container-color: #0b57d0; /* Dark blue on hover */
    --md-checkbox-selected-focus-container-color: #0b57d0; /* Dark blue on focus */
    --md-checkbox-selected-pressed-container-color: #0b57d0; /* Dark blue when pressed */
    --md-checkbox-selected-icon-color: #FFFFFF;
    --md-checkbox-container-shape: 50%; /* Circular like Gmail mobile */
    --md-checkbox-state-layer-size: 48px; /* Large touch target (M3 standard) */
    --md-checkbox-icon-size: 18px; /* Icon size for the checkmark */
    --md-checkbox-container-size: 32px; /* Container size */
    /* Disable hover/focus/pressed state layers (ripple effects) */
    --md-checkbox-hover-state-layer-color: transparent;
    --md-checkbox-hover-state-layer-opacity: 0;
    --md-checkbox-focus-state-layer-color: transparent;
    --md-checkbox-focus-state-layer-opacity: 0;
    --md-checkbox-pressed-state-layer-color: transparent;
    --md-checkbox-pressed-state-layer-opacity: 0;
    --md-checkbox-selected-hover-state-layer-color: transparent;
    --md-checkbox-selected-hover-state-layer-opacity: 0;
    --md-checkbox-selected-focus-state-layer-color: transparent;
    --md-checkbox-selected-focus-state-layer-opacity: 0;
    --md-checkbox-selected-pressed-state-layer-color: transparent;
    --md-checkbox-selected-pressed-state-layer-opacity: 0;
    /* Override Material system color to prevent purple */
    --md-sys-color-primary: #0b57d0;
    --md-sys-color-on-surface: rgba(0, 0, 0, 0.6);
}
/* Ensure checkmark SVG is properly centered and sized */
md-checkbox .icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Multi-select mode for list items */
.order-list-item.selectable {
    padding-left: 12px; /* Left margin for breathing room */
    padding-right: 8px;
    min-height: 72px; /* Taller for better mobile touch */
    transition: background-color 0.2s ease;
}
/* Highlight selected rows with light blue */
.order-list-item.selectable.selected {
    background-color: #ecf3fe !important; /* Light blue background - important to override hover */
}
.order-list-item md-checkbox {
    flex-shrink: 0;
    margin-right: 16px; /* More space from content */
    margin-left: 0;
    /* Ensure large touch target and proper centering */
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Show checkboxes only in driver tabs during multi-select mode */
body:not([data-user-role="driver"]) .order-list-item md-checkbox {
    display: none;
}
/* Hide FAB in non-driver views */
body:not([data-user-role="driver"]) #assignment-fab {
    display: none !important;
}
/* Hide FAB in "My Completed" tab where assignment isn't possible */
body[data-active-filter="my-completed-deliveries"] #assignment-fab {
    display: none !important;
}
/* Material Symbols Icon font */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Drag and Drop (Route Planning) === */
.drag-handle {
    touch-action: none;
    user-select: none;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: var(--md-sys-color-surface-container-high);
}

.sortable-drag {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.draggable-item {
    transition: transform 0.2s ease, background-color 0.2s ease;
}