/* ===========================================================================
   CM SKIPS OPERATIONS DASHBOARD - COMPLETE STYLESHEET
   =========================================================================== */

/* --- THEME VARIABLES --- */
:root {
    --primary-color: #fdd835; /* Bright Yellow from logo */
    --secondary-color: #37474f; /* Dark Charcoal from logo */
    --light-gray: #f5f7fa;
    --text-color: #333;
    --border-color: #e2e8f0;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --warning-color: #ffc107;
}

/* ===========================================================================
   GENERAL & BASE STYLES
   =========================================================================== */

body, html {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-gray);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

/* ===========================================================================
   FULLCALENDAR TAILWIND CONFLICT FIX
   =========================================================================== */
/* This forces FullCalendar's tables to render correctly, overriding Tailwind's CSS reset */
.fc table {
    display: table !important;
    border-collapse: collapse !important;
    width: 100% !important;
}
.fc th, .fc td {
    vertical-align: middle !important;
    padding: 0.4rem !important;
}
.fc .fc-scrollgrid {
    width: 100% !important;
    border: 1px solid var(--border-color) !important;
}
.fc .fc-scrollgrid-sync-table {
    width: 100% !important;
}
.fc-daygrid-day-frame {
    min-height: 100px;
}
/* --- END CALENDAR FIX --- */


/* ===========================================================================
   CARD STYLES
   =========================================================================== */

.card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.card-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background-color: #f8f9fa;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}

/* ===========================================================================
   STAT CARD STYLES
   =========================================================================== */

.stat-card {
    background: linear-gradient(145deg, #ffffff, #f9f9f9);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.stat-title {
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* ===========================================================================
   FULLCALENDAR CUSTOMIZATIONS
   =========================================================================== */

.fc .fc-button-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transition: background-color 0.3s;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.fc .fc-button-primary:hover {
    background-color: #263238;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #fffde7;
}

.fc-event {
    border-radius: 6px !important;
    padding: 4px 8px !important;
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
}

/* ===========================================================================
   LOADING SPINNER
   =========================================================================== */

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-left-color: var(--primary-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===========================================================================
   MODAL STYLES
   =========================================================================== */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.modal-input {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    width: 100%;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
}

.modal-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(253, 216, 53, 0.3);
    background-color: #fff;
}

/* ===========================================================================
   FILTER INPUT
   =========================================================================== */

.filter-input {
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    width: 250px;
    transition: all 0.2s ease-in-out;
}

.filter-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(253, 216, 53, 0.3);
}

/* ===========================================================================
   ACTION BUTTONS
   =========================================================================== */

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.action-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.action-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.primary-button { 
    background-color: var(--primary-color); 
    color: var(--secondary-color); 
    border-color: var(--primary-color); 
}

.primary-button:hover { 
    background-color: #fbc02d; 
    border-color: #fbc02d;
}

.secondary-button { 
    background-color: var(--secondary-color); 
    color: white; 
    border-color: var(--secondary-color); 
}

.secondary-button:hover { 
    background-color: #263238; 
    border-color: #263238;
}

.red-button { 
    background-color: var(--danger-color); 
    color: white; 
    border-color: var(--danger-color); 
}

.red-button:hover { 
    background-color: #c82333; 
    border-color: #bd2130;
}

.green-button { 
    background-color: var(--success-color); 
    color: white; 
    border-color: var(--success-color); 
}

.green-button:hover { 
    background-color: #218838; 
    border-color: #1e7e34;
}

.yellow-button { 
    background-color: var(--warning-color); 
    color: var(--secondary-color); 
    border-color: var(--warning-color); 
}

.yellow-button:hover { 
    background-color: #e0a800; 
    border-color: #d39e00;
}

.purple-button { 
    background-color: #6f42c1; 
    color: white; 
    border-color: #6f42c1; 
}

.purple-button:hover { 
    background-color: #5a32a3; 
    border-color: #542f99;
}

.whatsapp-button { 
    background-color: #25D366; 
    color: white; 
    border-color: #25D366; 
}

.whatsapp-button:hover { 
    background-color: #1DA851; 
    border-color: #1DA851;
}

.blue-button { 
    background-color: #007bff; 
    color: white; 
    border-color: #007bff; 
}

.blue-button:hover { 
    background-color: #0056b3; 
    border-color: #0056b3;
}

/* ===========================================================================
   TOAST NOTIFICATION
   =========================================================================== */

#toast-notification {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
}

#toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================================
   TABLE STYLES
   =========================================================================== */

.table-header {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f8f9fa;
}

.table-cell {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #495057;
    white-space: nowrap;
    border-bottom: 1px solid #dee2e6;
}

.table-cell-wrap {
    white-space: normal;
}

tr:hover {
    background-color: #f1f5f9;
}

/* ===========================================================================
   NAVIGATION STYLES
   =========================================================================== */

nav {
    background-color: var(--secondary-color) !important;
}

.nav-button {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s;
    color: #eceff1;
    display: inline-flex;
    align-items: center;
}

.nav-button:hover {
    background-color: #455a64;
    color: white;
}

.nav-button.active {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.mobile-nav-button {
    display: flex;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1.25rem;
}

#sign-out-button {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
}

#sign-out-button:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* === Sign Out Buttons – Bigger, easier tap targets & above overlays === */
/* === Make sign-out buttons fully clickable and above overlaps === */
#sign-out-button,
#mobile-sign-out-button {
    position: relative;
    z-index: 50;                 /* Make sure nothing covers it */
    display: inline-flex;        /* Whole pill is clickable */
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    min-height: 44px;            /* Good touch target */
    border-radius: 9999px;
    pointer-events: auto;        /* In case parent has pointer-events: none */
}

/* Desktop hover – keep it clearly red */
#sign-out-button:hover {
    background-color: #b91c1c !important;  /* darker red */
    color: #fff !important;
}


/* ===========================================================================
   STATUS BADGE STYLES
   =========================================================================== */

.status-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
}

/* ===========================================================================
   MAP STYLES
   =========================================================================== */

#skips-map {
    height: 600px;
    width: 100%;
    border-radius: 8px;
}

.skip-marker {
    background-color: #ffc107;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
    color: #37474f;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.skip-marker.office {
    background-color: #28a745;
    color: white;
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
}

.leaflet-popup-content {
    margin: 10px;
}

/* ===========================================================================
   TOGGLE SWITCH
   =========================================================================== */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.toggle-label:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: var(--primary-color);
}

.toggle-checkbox:checked + .toggle-label:before {
    transform: translateX(16px);
}

/* ===========================================================================
   ROUTE PLANNER STYLES
   =========================================================================== */

.skip-scheduler-card {
    background-color: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    cursor: move;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skip-scheduler-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.skip-scheduler-card[draggable="true"]:active {
    cursor: grabbing;
}

.skip-number-badge {
    background: linear-gradient(135deg, var(--primary-color), #fbc02d);
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.remove-card-btn {
    background-color: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remove-card-btn:hover {
    background-color: #c82333;
    transform: scale(1.1);
}

.action-select, .customer-select {
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: white;
}

.action-select:focus, .customer-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(253, 216, 53, 0.2);
    outline: none;
}

#agent-route-list {
    min-height: 400px;
    border: 2px dashed #cbd5e0;
}

#agent-route-list:empty::after {
    content: 'Drag skip cards here to build the route';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #a0aec0;
    font-size: 1rem;
}

#available-skips-pool {
    min-height: 200px;
}

.skip-scheduler-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.route-stop-card {
    transition: all 0.3s ease;
}

.route-stop-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* ===========================================================================
   AGENT DASHBOARD STYLES
   =========================================================================== */

.skip-number-badge-agent {
    background: linear-gradient(135deg, #fdd835, #fbc02d);
    color: #37474f;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-badge {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    letter-spacing: 0.5px;
    border: 2px solid currentColor;
}

.job-card {
    background-color: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.job-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.agent-nav-button {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    color: #6b7280;
}

.agent-nav-button:hover {
    color: #111827;
    background-color: #f3f4f6;
}

.agent-nav-button.active {
    color: #111827;
    border-bottom-color: #fdd835;
    background-color: #f9fafb;
}

.agent-view-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================================
   SEARCHABLE CUSTOMER DROPDOWN
   =========================================================================== */

.customer-select-wrapper {
    position: relative;
    width: 100%;
}

.customer-select-wrapper input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: white;
    font-size: 0.875rem;
}

.customer-select-wrapper input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(253, 216, 53, 0.2);
    outline: none;
}

.customer-select-wrapper .customer-option {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.customer-select-wrapper .customer-option:hover {
    background-color: #f3f4f6;
}

.customer-select-wrapper .customer-option:last-child {
    border-bottom: none;
}

.customer-select-wrapper > div:last-child {
    z-index: 100;
}

.skip-scheduler-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.job-card.completed-stop {
    opacity: 0.7;
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
}

.route-preview-updating {
    position: relative;
}

.route-preview-updating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ===========================================================================
   MOBILE RESPONSIVE STYLES - COMPREHENSIVE IMPROVEMENTS
   =========================================================================== */

@media (max-width: 768px) {
    /* Base improvements */
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Larger touch targets */
    .action-button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Better navigation */
    .nav-button {
        padding: 0.75rem;
        font-size: 0.8rem;
        min-height: 44px;
    }
    
    /* Card improvements */
    .card {
        margin-bottom: 1rem;
        border-radius: 12px;
    }
    
    .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
    
    /* Better stat cards */
    .stat-card {
        padding: 1.25rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    /* Form inputs - larger for touch */
    .modal-input, .filter-input {
        min-height: 44px;
        font-size: 16px; /* Prevent zoom */
        padding: 0.75rem;
    }
    
    /* ======================================= */
    /* === MODAL FIX V3 - START === */
    /* ======================================= */

    /* 1. Force modal to be tall and use flexbox */
    .modal-backdrop > div {
        height: 95vh !important;
        max-height: 95vh !important;
        margin: 0.5rem;
        width: calc(100% - 1rem);
        max-width: none;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 2. Make header sticky */
    .modal-backdrop > div > div:first-child {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        border-bottom: 2px solid #e5e7eb;
        flex-shrink: 0; /* Don't let header shrink */
    }
    
    /* 3. Make THE MAIN CONTENT container grow and scroll (THE KEY FIX) */
    /* This targets the div that holds the form, contacts, history etc. */
    .modal-backdrop > div > .flex-grow {
        flex-grow: 1 !important;
        overflow-y: auto !important; /* This div scrolls */
        -webkit-overflow-scrolling: touch;
        flex-direction: column !important; /* Stack its children */
    }
    
    /* 4. Disable scrolling on the *children* of the content container */
    /* This stops the "tiny scrollable windows" bug */
    .modal-backdrop > div > .flex-grow > * {
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        flex-shrink: 0; /* Stop them from shrinking */
    }

    /* 5. Make footer sticky */
    .modal-backdrop > div > div:last-child {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
        border-top: 2px solid #e5e7eb;
        flex-shrink: 0; /* Don't let footer shrink */
    }
    
    /* 6. Fix modal footer buttons to be a wrapping grid */
    .p-6.bg-gray-50.border-t,
    .p-6.bg-gray-100.border-t {
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important; /* Stack the two button groups */
        gap: 0.75rem !important;
    }
    
    /* Target the two button groups directly (e.g., in Customer modal) */
    .p-6.bg-gray-50.border-t > div,
    .p-6.bg-gray-100.border-t > div {
        display: flex !important;
        flex-wrap: wrap !important; /* Let buttons wrap */
        justify-content: center !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    /* Target the buttons themselves */
    .p-6.bg-gray-50.border-t .action-button,
    .p-6.bg-gray-100.border-t .action-button {
        flex-grow: 1; /* Let them grow to fill space */
        min-width: 130px; /* Set a minimum tappable size */
        margin: 0 !important;
        justify-content: center !important;
    }

    /* === MODAL FIX V3 - END === */
    /* ======================================= */

    
    /* Better table cards on mobile - IMPROVED */
    table, thead, tbody, th, td, tr {
        display: block !important;
    }
    
    thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    tr {
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        margin-bottom: 1.25rem;
        background-color: white;
        padding: 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: block !important;
    }
    
    td {
        border: none;
        border-bottom: 1px solid #f3f4f6;
        padding: 0.875rem 0 0.875rem 0;
        position: relative;
        min-height: 44px;
        display: block !important;
        text-align: left !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    td:last-child {
        border-bottom: none;
        padding-bottom: 0;
        padding-top: 1.25rem;
        margin-top: 0.5rem;
    }
    
    td:before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 0.35rem;
        letter-spacing: 0.5px;
    }
    
    td:last-child:before {
        margin-bottom: 0.75rem;
    }
    
    /* Actual content in td */
    td > * {
        display: block !important;
        width: 100%;
    }
    
    /* Inline elements in td cells */
    td .status-badge,
    td .skip-number-badge {
        display: inline-block !important;
        width: auto;
        margin: 0.25rem 0;
    }
    
    /* Text content in td cells */
    td span:not([class]),
    td div:not([class]) {
        display: block !important;
        width: 100%;
        word-break: break-word;
    }
    
    /* Table labels for mobile - SKIP TABLE */
    #skips-table-body tr td:nth-of-type(1):before { content: "Skip ID"; }
    #skips-table-body tr td:nth-of-type(2):before { content: "Size"; }
    #skips-table-body tr td:nth-of-type(3):before { content: "Status"; }
    #skips-table-body tr td:nth-of-type(4):before { content: "Customer"; }
    #skips-table-body tr td:nth-of-type(5):before { content: "Notes"; }
    #skips-table-body tr td:nth-of-type(6):before { content: "Damaged"; }
    #skips-table-body tr td:nth-of-type(7):before { content: "Actions"; }

    /* Table labels for mobile - CUSTOMER TABLE - SHOW ONLY NAME & ACTIONS */
    #customers-table-body td:nth-of-type(1),  /* ID - HIDE */
    #customers-table-body td:nth-of-type(3),  /* Company - HIDE */
    #customers-table-body td:nth-of-type(4)   /* Cell Phone - HIDE */
    {
        display: none !important;
    }
    
    #customers-table-body tr td:nth-of-type(2):before { content: "Customer Name"; }
    #customers-table-body tr td:nth-of-type(5):before { content: "Actions"; }

    /* Table labels for mobile - ORDER HISTORY TABLE */
    #order-history-table-body tr td:nth-of-type(1):before { content: "Order"; }
    #order-history-table-body tr td:nth-of-type(2):before { content: "Customer"; }
    #order-history-table-body tr td:nth-of-type(3):before { content: "Skip"; }
    #order-history-table-body tr td:nth-of-type(4):before { content: "Delivered"; }
    #order-history-table-body tr td:nth-of-type(5):before { content: "Collected"; }
    #order-history-table-body tr td:nth-of-type(6):before { content: "Address"; }
    #order-history-table-body tr td:nth-of-type(7):before { content: "Status"; }

    /* Table labels for mobile - INVOICE TABLE - SHOW ONLY INVOICE#, CUSTOMER, ACTIONS */
    #invoices-table-body td:nth-of-type(3),  /* Date - HIDE */
    #invoices-table-body td:nth-of-type(4),  /* Total - HIDE */
    #invoices-table-body td:nth-of-type(5),  /* Due - HIDE */
    #invoices-table-body td:nth-of-type(6)   /* Status - HIDE */
    {
        display: none !important;
    }
    
    #invoices-table-body tr td:nth-of-type(1):before { content: "Invoice #"; }
    #invoices-table-body tr td:nth-of-type(2):before { content: "Customer"; }
    #invoices-table-body tr td:nth-of-type(7):before { content: "Actions"; }

    /* Table labels for mobile - USER TABLE */
    #users-table-body tr td:nth-of-type(1):before { content: "Name"; }
    #users-table-body tr td:nth-of-type(2):before { content: "Email"; }
    #users-table-body tr td:nth-of-type(3):before { content: "Role"; }
    #users-table-body tr td:nth-of-type(4):before { content: "Actions"; }
    
    /* Action buttons in table cells - FULL WIDTH */
    td .action-button {
        width: 100% !important;
        justify-content: center;
        margin: 0.25rem 0;
        display: block !important;
    }
    
    /* Multiple buttons in a cell */
    td > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem;
        width: 100%;
    }
    
    td > div .action-button {
        width: 100% !important;
    }
    
    /* Filter inputs full width */
    .filter-input {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    
    /* Mobile navigation improvements - STICKY AND VISIBLE */
    #mobile-static-menu {
        display: flex !important;
        position: sticky;
        top: 64px; /* Height of main header */
        z-index: 30;
        background: linear-gradient(135deg, #37474f 0%, #263238 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        scroll-behavior: smooth;
        border-bottom: 2px solid rgba(253, 216, 53, 0.2);
    }
    
    /* Show scrollbar for better UX */
    #mobile-static-menu::-webkit-scrollbar {
        height: 3px;
    }
    
    #mobile-static-menu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }
    
    #mobile-static-menu::-webkit-scrollbar-thumb {
        background: rgba(253, 216, 53, 0.6);
        border-radius: 2px;
    }
    
    #mobile-static-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(253, 216, 53, 0.8);
    }
    
    /* Mobile menu buttons - IMPROVED VISIBILITY */
    .mobile-static-button {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        min-width: 70px;
        max-width: 90px;
        min-height: 60px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.6);
        background-color: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.3s ease;
        white-space: normal;
        text-align: center;
    }
    
    .mobile-static-button i {
        display: inline-block !important;
        margin-bottom: 0.25rem;
        transition: all 0.3s ease;
    }
    
    /* Mobile menu button text */
    .mobile-static-button span {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.1;
    }
    
    /* Mobile menu button hover state */
    .mobile-static-button:hover {
        color: rgba(255, 255, 255, 0.9);
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    /* Mobile menu button ACTIVE state - BRIGHT YELLOW */
    .mobile-static-button.active {
        color: #fdd835 !important;
        background-color: rgba(253, 216, 53, 0.1);
        border-bottom-color: #fdd835;
        text-shadow: 0 0 10px rgba(253, 216, 53, 0.5);
    }
    
    .mobile-static-button.active i {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(253, 216, 53, 0.6));
    }
    
    /* Mobile Sign out button - RED TINTED */
/* Mobile Sign out button - RED TINTED */
#mobile-sign-out-button i {
    color: rgba(239, 68, 68, 0.95);
}

#mobile-sign-out-button:hover {
    background-color: rgba(239, 68, 68, 0.12);
}


    
    /* Customer form improvements */
    #customer-form .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Invoice modal improvements */
    #invoice-modal-backdrop .flex.flex-col.md\\:flex-row {
        flex-direction: column !important;
    }
    
    #invoice-modal-backdrop .w-full.md\\:w-2\\/3,
    #invoice-modal-backdrop .w-full.md\\:w-1\\/3 {
        width: 100% !important;
    }
    
    /* Better spacing for invoice items */
    #invoice-items-table-container table {
        font-size: 0.85rem;
    }
    
    /* Route planner on mobile */
    #routes-view .grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    
    .skip-scheduler-card {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .route-stop-card {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    /* Map improvements */
    #skips-map {
        height: 400px;
        border-radius: 8px;
        margin: 0.5rem 0;
    }
    
    /* Contact and address lists */
    #contacts-list > div,
    #addresses-list > div {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    /* Better button groups */
    .flex.gap-2,
    .flex.gap-3,
    .flex.gap-4 {
        flex-wrap: wrap;
    }
    
    /* Calendar improvements */
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    
    /* Hide less critical columns on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Settings form improvements */
    #settings-form .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Statement modal improvements */
    #statement-customer-list {
        height: 200px;
    }
    
    /* Invoiceable view improvements */
    #invoiceable-list .bg-white {
        padding: 0.75rem;
    }
    
    /* Dashboard grid improvements */
    #dashboard-view .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Reports grid improvements */
    #reports-view .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Skip number badges on mobile */
    .skip-number-badge {
        font-size: 0.875rem;
        padding: 0.4rem 0.8rem;
    }
    
    .skip-number-badge-agent {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .action-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.6rem;
    }
    
    /* Main content padding */
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===========================================================================
   EXTRA SMALL DEVICES (phones in portrait, less than 375px)
   =========================================================================== */

@media (max-width: 374px) {
    .action-button {
        font-size: 0.8rem;
        padding: 0.6rem 0.8rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    td:before {
        font-size: 0.65rem;
    }
    
    .mobile-static-button {
        min-width: 60px;
        font-size: 1.25rem;
        padding: 0.6rem 0.75rem;
    }
    
    .mobile-static-button span {
        font-size: 0.55rem;
    }
    
    tr {
        padding: 1rem;
    }
    
    td {
        padding: 0.75rem 0;
    }
}

/* ===========================================================================
   LANDSCAPE ORIENTATION IMPROVEMENTS
   =========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .modal-backdrop > div {
        max-height: 90vh;
        height: 90vh !important;
    }
    
    #skips-map {
        height: 300px;
    }
    
    @media (max-width: 768px) {
    #mobile-static-menu {
        top: 64px;            /* matches nav h-16 (4rem) */
    }
}

/* ===========================================================================
   UTILITY CLASSES
   =========================================================================== */

.mobile-full-width {
    width: 100%;
}

@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column !important;
    }
    
    .mobile-center {
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
}

/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    font-size: 16px !important;
}

/* Better touch feedback */
.action-button:active {
    transform: scale(0.98);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
/* ========================================
   QUOTE SECTION STYLING
   ======================================== */

/* Quote Status Badges */
.quote-status-draft {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.quote-status-finalized {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.quote-status-finalized::before {
    content: "✓";
    font-weight: bold;
}


/* Mobile Responsive Adjustments for Quotes */
@media (max-width: 768px) {
    .btn-add-quick-quote-item {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    #quote-editor-section {
        padding: 1rem;
    }
    
    .quote-details-section {
        padding: 1rem;
    }
}
/* === ADD THIS CSS TO YOUR <style> BLOCK === */
.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px; /* Make space for icon */
}
.sortable-header:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}
.sort-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; /* text-gray-400 */
    font-size: 0.8em;
}
.sort-icon::after {
    content: '\f0dc'; /* Font Awesome up-down icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
/* Active sorting direction */
.sortable-header[data-sort-dir="asc"] .sort-icon::after {
    content: '\f0de'; /* Font Awesome sort-up */
    color: #2563eb; /* text-blue-600 */
}
.sortable-header[data-sort-dir="desc"] .sort-icon::after {
    content: '\f0dd'; /* Font Awesome sort-down */
    color: #2563eb; /* text-blue-600 */
}

@media (max-width: 768px) {
    .action-button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .nav-button {
        padding: 0.75rem;
        font-size: 0.8rem;
        min-height: 44px;
    }

/* Stronger card styling for skips on mobile */
@media (max-width: 768px) {
    /* Each skip row becomes a clear card */
    #skips-table-body tr {
        display: block;
        background-color: #ffffff;
        border-radius: 0.75rem;
        border: 1px solid #e5e7eb;    /* gray-200 */
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
        overflow: hidden;
    }

    /* Subtle zebra effect for faster scanning */
    #skips-table-body tr:nth-child(odd) {
        background-color: #f9fafb;    /* slightly darker */
    }

    #skips-table-body td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0.75rem;
        border-bottom: 1px solid #e5e7eb;
    }

    #skips-table-body td:last-child {
        border-bottom: none;
    }
}
/* Top navigation pills */
.navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;               /* space between icon and text */
    padding: 10px 18px;     /* equal padding left/right */
}

/* Active tab (Skip Inventory) */
.navbar-nav > li.active > a {
    background-color: #f0d411;  /* your yellow */
    color: #3a4c4c;             /* your greenish text */
    border-radius: 999px;       /* nice pill */
}

/* Make sure icon doesn’t push content off-centre */
.navbar-nav > li > a i {
    margin-right: 4px;
}

}