/* Dashboard - V18.55 */
/* FILE: styles.css */
/* Changes: */
/* 1. Updated .map-overlay-btns to default to top: 15px in manager view. */
/* 2. Added dynamic rule body.view-manager.manager-single-inspector .map-overlay-btns to drop the buttons to top: 75px only when the Routing Controls are active, eliminating the gap. */

:root { 
    /* Base / Accent */
    --accent: #4E764D;
    --accent-hover: #60845F;
    --fade-accent: rgba(78, 118, 77, 0.15); /* Non-editable overlay */
    --bg-base: #171717;
    --bg-panel: #1E1E1E;
    --bg-hover: #2A2A2A;
    --bg-header: #171717;
    --text-main: #FFFFFF;
    --text-muted: #A0A0A0;
    --border-color: #242424;
    
    --red: #e74c3c; 
    --green: #4E764D; 
    --purple: #8e44ad; 
    --orange: #f39c12; 

    /* Global Header */
    --global-hdr-bg: #171717;
    --global-hdr-icon: #344E41;
    --global-hdr-text: #FFE0D8;

    /* Sidebar Shell */
    --sidebar-bg: #171717;

    /* Summary Bar */
    --summary-bg: #344E41;
    --summary-border: #242424;
    --summary-text-main: #FAFAFA;

    /* Routing Controls */
    --route-mod-bg: #151515;
    --route-mod-border: #242424;
    --route-mod-text: #FAFAFA;

    /* List Header */
    --list-hdr-bg: #151515;
    --list-hdr-border: #242424;
    --list-hdr-text: #FAFAFA;

    /* Address Search */
    --list-search-bg: transparent; 
    --list-search-text: #FAFAFA;

    /* List Subheading */
    --list-sub-bg: var(--list-hdr-bg);
    --list-sub-text: var(--list-hdr-text);

    /* List Rows */
    --row-bg: #171717;
    --row-bg-hover: #15201A;
    --row-bg-selected: #21332A;
    --row-border: #242424;
    --row-text-main: #FAFAFA;
    --row-text-muted: #897874; 
}

* { box-sizing: border-box; font-family: Calibri, 'Candara', 'Segoe UI', sans-serif; }

html { 
    height: 100%; 
    width: 100%;
    margin: 0; padding: 0;
}

body { 
    margin: 0; padding: 0; 
    height: calc(100vh - 320px);
    height: calc(100dvh - 320px);
    width: 100%; 
    position: fixed; 
    display: flex; flex-direction: column; 
    background: var(--bg-base); color: var(--text-main); overflow: hidden; 
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
#stop-list::-webkit-scrollbar-thumb { background: transparent; }
#stop-list:hover::-webkit-scrollbar-thumb { background: var(--row-border); }

#empty-state-container { display: none; }
body.empty-state-active #empty-state-container,
body.drag-override-empty #empty-state-container { 
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-base); z-index: 50; 
}

#main-dropzone { padding: 32px 20px; box-sizing: border-box; text-align: center; }

/* Hide unneeded header controls during empty state */
body.empty-state-active #inspector-dropdown-wrapper,
body.empty-state-active #contextual-rocker-wrapper {
    display: none !important;
}

body.empty-state-active #map-wrapper, body.drag-override-empty #map-wrapper,
body.empty-state-active #sidebar, body.drag-override-empty #sidebar,
body.empty-state-active #resizer, body.drag-override-empty #resizer,
body.empty-state-active #mobile-fab-toggle, body.drag-override-empty #mobile-fab-toggle { display: none !important; }

.stop-item, .glide-row, .marker, .glide-table-header { user-select: none; -webkit-user-select: none; }

body.view-inspector { flex-direction: column; }
body.view-inspector #map-wrapper { height: 35%; min-height: 35%; width: 100%; border-bottom: 2px solid var(--row-border); }
body.view-inspector #sidebar { height: 65%; min-height: 65%; width: 100%; background: var(--sidebar-bg); }

body.view-inspector .map-overlay-btns {
    top: auto !important; left: auto !important; bottom: 20px !important; right: 20px !important; align-items: flex-end;
}

body.view-manager #map-wrapper { flex: 1; height: 100%; width: auto; position: relative; }
body.view-manager #sidebar { width: 50%; min-width: 10%; height: 100%; border-left: none; flex: none; background: var(--sidebar-bg); }

/* Map Overlay Buttons Default - Manager View */
.map-overlay-btns { 
    position: absolute; 
    top: 15px; 
    left: auto; 
    right: 15px;
    z-index: 2000; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    align-items: flex-end; 
    transition: top 0.2s ease-in-out;
}

/* Drop down 60px to clear the routing controls when in Single Inspector mode */
body.view-manager.manager-single-inspector .map-overlay-btns {
    top: 75px;
}

/* Map Overlay Buttons Override - ManagerSmall View */
body.view-managersmall .map-overlay-btns {
    top: 15px !important; left: auto !important; bottom: auto !important; right: 20px !important; align-items: flex-end;
}

/* Hide normal map FABs on mobile when actively selecting */
body.view-managersmall.mobile-selection-active .map-overlay-btns { 
    display: none !important; 
}


/* --- Managersmall Header Grid --- */
body.view-managersmall #global-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    height: auto !important;
    padding: 10px 0 !important; 
    gap: 10px 8px; 
}
body.view-managersmall #header-map-zone,
body.view-managersmall #header-list-zone {
    display: contents !important;
}

body.view-managersmall #global-summary-stats {
    grid-column: 1; 
    grid-row: 1; 
    justify-self: start; 
    justify-content: flex-start;
    width: 100%;
    container-type: inline-size; 
    min-width: 0;
    gap: 1.5cqi !important; 
    flex-wrap: nowrap;
    overflow: hidden;
}
body.view-managersmall #global-summary-stats > div,
body.view-managersmall #global-summary-stats span {
    font-size: clamp(10px, 5.8cqi, 18px) !important; 
    white-space: nowrap;
    line-height: 1.2;
}

body.view-managersmall .hide-mobile-text { display: block !important; }
@media (max-width: 450px) { body:not(.view-managersmall) .hide-mobile-text { display: none !important; } }

body.view-managersmall #header-action-container {
    grid-column: 2; 
    grid-row: 1; 
    justify-self: end;
}
body.view-managersmall #header-right-controls {
    grid-column: 3; 
    grid-row: 1; 
    justify-self: end; 
    display: flex; 
    align-items: center;
}
body.view-managersmall #header-list-zone > div:first-child {
    grid-column: 1 / span 3; 
    grid-row: 2; 
    display: flex !important; 
    justify-content: space-between !important; 
    width: 100%; 
    height: auto !important;
}
body.view-managersmall #header-resizer-gap { display: none !important; }


/* Mobile Selection Contextual Header Integration */
body.view-managersmall.mobile-selection-active #global-header {
    background-color: #171C22 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    height: auto !important;
    padding: 12px 8px !important;
    transition: background-color 0.2s;
}

/* Completely remove the normal elements and routing module from the layout when selecting */
body.view-managersmall.mobile-selection-active #header-map-zone,
body.view-managersmall.mobile-selection-active #header-list-zone,
body.view-managersmall.mobile-selection-active #header-resizer-gap,
body.view-managersmall.mobile-selection-active #routing-controls {
    display: none !important;
}

/* Expose the new 2-row layout header */
#mobile-selection-header {
    display: none;
    width: 100%;
    flex-direction: column;
}
body.view-managersmall.mobile-selection-active #mobile-selection-header {
    display: flex !important;
}

/* Style the buttons inside the new mobile header */
#mobile-selection-header .floating-btn {
    display: none; 
    align-items: center;
    gap: 6px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: opacity 0.2s;
    height: 32px;
}

/* If ui.js enables the button, force flex so the icons align properly */
#mobile-selection-header .floating-btn[style*="display: block"] {
    display: flex !important;
}

#mobile-selection-header .manual-move {
    font-size: 13px !important; 
    font-weight: 500 !important; 
    border: 1px solid var(--sidebar-bg);
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-radius: 4px !important; 
    padding: 0 10px !important;
    background: var(--summary-border) !important;
    color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    height: 32px !important;
}

/* Flex rules for dropdown in managersmall */
body.view-managersmall #inspector-dropdown-wrapper {
    flex: 1;
    min-width: 0;
}
body.view-managersmall .insp-select {
    width: 100% !important;
}

/* Managersmall Shell Layout */
body.view-managersmall { 
    overflow: hidden; 
    position: absolute !important; 
    top: 0 !important; 
    
    /* ---> ADJUST THE 60px BELOW TO FIND THE PERFECT MOBILE FIT <--- */
    bottom: 400px !important; 
    
    height: auto !important; 
    width: 100% !important;
}
body.view-managersmall #app-body-wrapper { display: contents !important; }
body.view-managersmall #map-wrapper, body.view-managersmall #sidebar { display: contents !important; }
body.view-managersmall #sidebar-brand { order: 2; border-bottom: 1px solid var(--summary-border); }
body.view-managersmall #mobile-view-toggle { order: 4; display: flex !important; }
body.view-managersmall #routing-controls { order: 5; }
body.view-managersmall #route-view-toggles { order: 6; }
body.view-managersmall #list-header-container { order: 7; }
body.view-managersmall #stop-list { order: 8; overflow-y: auto; flex: 1; min-height: 0; background: var(--sidebar-bg); padding-bottom: 85px !important; }
body.view-managersmall #map-container { order: 9; flex: 1; min-height: 0; position: relative; }
body.view-managersmall #resizer { display: none; }

/* Managersmall Split View Display Logic */
body.view-managersmall.split-show-map #stop-list,
body.view-managersmall.split-show-map #list-header-container { display: none !important; }
body.view-managersmall.split-show-map #map-container { display: flex !important; flex-direction: column; }

body.view-managersmall.split-show-list #map-container { display: none !important; }
body.view-managersmall.split-show-list #stop-list { display: block !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100%; }

body.view-managersmall #map-hint, body.view-inspector #map-hint { display: none !important; }
body.view-managersmall #header-list-zone { width: auto !important; flex: 1; }

body.view-managersmall .col-eta { width: 55px; font-size: 12px; }
body.view-managersmall .col-due { width: 45px; font-size: 12px; }
body.view-managersmall .col-insp { width: 85px; font-size: 12px; padding-right: 2px; }
body.view-managersmall .insp-select { font-size: 12px; padding: 4px 14px 4px 4px; background-size: 8px auto; background-position: right 4px center; }
body.view-managersmall .addr-text { font-size: 13px; }
body.view-managersmall .glide-row { padding: 8px 2px; }
body.view-managersmall .col-num { margin-left: 2px; width: 26px; }
body.view-managersmall .num-badge { width: 22px; height: 22px; font-size: 11px; }
body.view-managersmall .endpoint-controls-wrapper { padding-left: 4px; }
body.view-managersmall .endpoint-label-text { display: none !important; }

/* Dynamically hide the client column on managersmall when the user toggles into compact mode */
body.view-managersmall.display-compact .col-client { 
    display: none !important; 
}

#mobile-fab-toggle {
    position: absolute; bottom: 20px; right: 20px;
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--accent); color: white;
    display: none; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    z-index: 2000; border: none; transition: background 0.2s, transform 0.2s;
}
#mobile-fab-toggle:hover { background: var(--accent-hover); transform: scale(1.05); }
#mobile-fab-toggle:active { transform: scale(0.95); }
body.view-managersmall.has-orders #mobile-fab-toggle { display: flex !important; }
body.view-managersmall:not(.has-orders) #mobile-fab-toggle { display: none !important; }

body.view-managersmall .header-action-btn { padding: 6px 10px; font-size: 12px; height: 32px; gap: 6px; }
@media (max-width: 380px) {
    body.view-managersmall .header-action-btn span {
        display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55px; vertical-align: middle;
    }
    body.view-managersmall .header-action-btn { padding: 6px 8px; }
}

@container sidebar (max-width: 600px) { .col-client { display: none !important; } }
@container sidebar (max-width: 500px) { .col-app { display: none !important; } }

body.tier-individual .col-insp { display: none !important; }
body.manager-all-inspectors #routing-controls { display: none !important; }

#add-menu-wrapper:hover .add-dropdown-menu { display: flex; }
.add-dropdown-menu {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 0;
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 6px; flex-direction: column; min-width: 180px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1000; overflow: hidden;
}
.add-dropdown-menu::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; }
.add-dropdown-item {
    padding: 12px 15px; color: var(--text-main); font-size: 14px; font-weight: 400;
    display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s;
}
.add-dropdown-item:hover { background: var(--accent); color: white; }

.list-subheading {
    padding: 6px 12px; background: var(--list-sub-bg); color: var(--list-sub-text);
    font-weight: 400; font-size: 11px; text-transform: uppercase; border-bottom: none;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; z-index: 15; top: 0; margin-top: -1px;
}
.route-summary-text { font-weight: 400; font-size: 11px; text-transform: none; color: var(--row-text-muted); }

/* ROUTING MODULE (Dark Workspace) */
#routing-controls { background: var(--route-mod-bg) !important; border-bottom: 1px solid var(--route-mod-border) !important; }
#routing-controls label, #routing-controls span { color: var(--route-mod-text) !important; font-weight: 400; }
.routing-module-wrapper { position: relative; display: flex; flex: 1; gap: 20px; height: 100%; align-items: center; }
.routing-module-core { display: flex; flex: 1; gap: 20px; width: 100%; align-items: center; transition: opacity 0.2s, filter 0.2s; height: 100%; }
.routing-module-core.staging-locked { opacity: 0.5; pointer-events: none; filter: grayscale(80%); }

/* Managersmall 2-Row Routing Controls Grid */
body.view-managersmall #routing-controls { 
    height: auto !important; 
    padding: 8px !important; 
    background-color: rgba(78, 118, 77, 0.15) !important; 
    border-bottom: none !important; 
}

body.view-managersmall #route-view-toggles {
    background-color: rgba(78, 118, 77, 0.15) !important;
    padding: 4px 8px 8px 8px !important; 
    border-top: none !important;
    border-bottom: 1px solid var(--route-mod-border) !important;
}

/* Pending State (2-Row Grid) */
body.view-managersmall #routing-controls[data-state="Pending"] .routing-module-core {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0px 8px; 
    width: 100%;
}
body.view-managersmall #routing-controls[data-state="Pending"] #parameters-container { display: contents !important; }
body.view-managersmall #routing-controls[data-state="Pending"] #route-divider-group { grid-column: 1 / span 2; grid-row: 1; }
body.view-managersmall #routing-controls[data-state="Pending"] #priority-container { grid-column: 1; grid-row: 2; justify-content: center; }
body.view-managersmall #routing-controls[data-state="Pending"] #routing-action-buttons { grid-column: 2; grid-row: 2; width: 100% !important; border-left: none !important; }

/* Non-Pending State (1-Row Flex) */
body.view-managersmall #routing-controls:not([data-state="Pending"]) .routing-module-core {
    display: flex !important;
    width: 100%;
    align-items: center;
}
body.view-managersmall #routing-controls:not([data-state="Pending"]) #parameters-container { display: none !important; }
body.view-managersmall #routing-controls:not([data-state="Pending"]) #routing-action-buttons { width: 100% !important; border-left: none !important; }

/* Override inline paddings and margins for extreme vertical compression */
body.view-managersmall #routing-action-buttons > div { padding: 0 !important; gap: 8px !important; }
body.view-managersmall #routing-controls[data-state="Pending"] #routing-action-buttons > div { justify-content: flex-end !important; }
body.view-managersmall #routing-controls:not([data-state="Pending"]) #routing-action-buttons > div { justify-content: center !important; }

/* Lock the left action button (Start Over) to exactly match the width of a toggle button in a 3-button layout */
body.view-managersmall #routing-action-buttons > div > .module-action-btn:first-child:not(:last-child) {
    flex: 0 0 calc((100% - 16px) / 3) !important;
}

body.view-managersmall #priority-container label { margin-bottom: 0px !important; line-height: 1 !important; }
body.view-managersmall #priority-container input[type=range] { margin-bottom: 0px !important; margin-top: 2px !important; }

body.view-managersmall .module-action-btn { min-height: 38px; }

.start-over-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: 0; background: rgba(23,23,23,0.8); backdrop-filter: blur(2px); border-radius: 6px;
    transition: 0.2s; z-index: 5; pointer-events: none;
}
.routing-module-wrapper:hover .start-over-overlay.active { opacity: 1; pointer-events: auto; }

.module-action-btn {
    width: 100%; height: 100%; border: none; border-radius: 0; position: relative;
    font-size: 13px; font-weight: 400; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; text-align: center;
}
.module-action-btn:active { opacity: 0.8; }
.module-action-btn:hover { filter: brightness(1.1); }
.module-action-btn.outline-btn { border: 1px solid rgba(255,255,255,0.25) !important; color: white; background: rgba(255,255,255,0.1); }
.module-action-btn.danger-btn { border: 1px solid var(--red) !important; color: var(--red); background: transparent; }
.module-action-btn.danger-btn:hover { background: rgba(231, 76, 60, 0.1) !important; color: var(--red) !important; }
.module-action-btn.filled-green { border: 1px solid var(--accent) !important; background: var(--accent); color: white; }
.module-action-btn.filled-green:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }

/* MODAL ACTION BUTTONS */
.modal-box { max-height: 90%; overflow-y: auto; margin: auto; }
.modal-box input::placeholder { color: rgba(160, 160, 160, 0.3) !important; font-weight: 400; }
.modal-primary-btn {
    background: var(--accent) !important; color: white !important; border: none; border-radius: 6px; 
    padding: 10px 24px; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; cursor: pointer; transition: 0.2s;
}
.modal-primary-btn:hover:not(:disabled) { background: var(--accent-hover) !important; }
.modal-primary-btn:disabled { background: var(--row-border) !important; color: var(--row-text-muted) !important; cursor: not-allowed; }

.route-btn { 
    flex: 1; border: 1px solid transparent; background: rgba(255,255,255,0.05); 
    border-radius: 6px; padding: 6px 10px; cursor: pointer; min-width: 85px;
    transition: 0.2s; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 500; letter-spacing: 0.3px;
}
.route-btn.active { border-color: var(--accent); opacity: 1; background: rgba(255,255,255,0.15); }
.rbtn-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.rbtn-indicator { display: flex; flex-direction: column; gap: 3px; }
.rbtn-circle { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.rbtn-title { font-size: 13px; font-weight: 400; color: var(--route-mod-text); pointer-events: none; white-space: nowrap; }
.rbtn-time { font-size: 11px; color: var(--row-text-muted); pointer-events: none; margin-top: 2px; white-space: nowrap; }

.route-view-btn {
    flex: 1; border: 1px solid var(--route-mod-border); background: var(--route-mod-bg);
    color: var(--route-mod-text); border-radius: 4px; padding: 6px 10px; cursor: pointer;
    font-size: 13px; font-weight: 500; letter-spacing: 0.3px; transition: 0.2s opacity, 0.2s background, 0.2s border-color; opacity: 0.7;
}
.route-view-btn:hover { opacity: 1; background: var(--route-mod-border); }
.route-view-btn.active { opacity: 1; border-color: var(--accent); background: rgba(78, 118, 77, 0.15); color: var(--accent); }

/* Global Header Light Dropdowns */
.insp-select {
    background-color: var(--bg-panel); color: var(--global-hdr-text); border: 1px solid var(--global-hdr-icon) !important; border-radius: 6px; font-size: 13px; font-weight: 400; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23344E41%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
    background-repeat: no-repeat; background-position: right 10px center; background-size: 10px auto;
}
.insp-select:focus { outline: none; border-color: var(--accent) !important; }
.insp-select option { background: var(--bg-panel); color: var(--text-main); font-weight: 400; }
.insp-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Dark Row Inspector Dropdown Override */
.glide-row .insp-select {
    background-color: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 4px;
    padding: 4px 24px 4px 8px; color: var(--row-text-main); font-weight: 400; font-size: 13px; height: 28px; background-position: right 6px center;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23DAD7CD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); 
}
.glide-row .insp-select option { background-color: var(--sidebar-bg); color: var(--row-text-main); }
body.manager-all-inspectors .glide-row .insp-select { background-color: transparent !important; border: none !important; padding: 0 16px 0 0 !important; height: auto !important; }

/* -- Contextual Rocker Switches -- */
.rocker-switch { display: flex; background: transparent; border: 1px solid var(--global-hdr-icon) !important; border-radius: 6px; overflow: hidden; height: 30px; width: 100%; }
.rocker-switch input { display: none; }
.rocker-switch label { flex: 1; padding: 0 10px; font-size: 13px; font-weight: 400; color: var(--global-hdr-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s background, 0.2s color; text-align: center; white-space: nowrap; }
.rocker-switch input:checked + label { background-color: var(--global-hdr-icon); color: #FFFFFF !important; }

#map-mode-rocker { display: none; }

/* In managersmall, swap the rockers when switching views */
body.view-managersmall.split-show-map #list-mode-rocker { display: none !important; }
body.view-managersmall.split-show-map #map-mode-rocker { display: flex !important; }


input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; margin-top: -6px; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: rgba(255,255,255,0.2); border-radius: 2px; }

#resizer { width: 6px; background-color: var(--sidebar-bg); border-left: 1px solid var(--row-border); border-right: 1px solid var(--row-border); cursor: col-resize; display: none; flex: none; z-index: 100; transition: background-color 0.2s; background-clip: padding-box; }
#resizer:hover, #resizer.active { background-color: var(--accent); }
body.view-manager #resizer { display: block; border-top: none; }

#map-wrapper { display: flex; flex-direction: column; position: relative; background-color: #191A1A; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background: #191A1A !important; }

#map-hint { position: absolute; top: 10px; left: 10px; background: rgba(23, 23, 23, 0.85); backdrop-filter: blur(4px); color: #ffffff; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 400; z-index: 1000; pointer-events: none; border: 1px solid var(--summary-border); transition: opacity 0.2s; }

#map-wrapper.shift-down .mapboxgl-canvas-container, #map-wrapper.shift-down .mapboxgl-canvas-container.mapboxgl-interactive, #map-wrapper.shift-down .mapboxgl-canvas-container.mapboxgl-interactive:active { cursor: crosshair !important; }
#map-wrapper.shift-down .marker, #map-wrapper.shift-down .marker .pin-visual { cursor: pointer !important; }

.header-action-btn { height: 38px; padding: 0 16px; width: auto; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; border-radius: 6px; cursor: pointer; border: none; transition: opacity 0.2s; box-sizing: border-box; }
.header-action-btn:active { opacity: 0.7; }
.header-action-btn:hover:not(:disabled) { opacity: 0.9; }

.header-action-btn.primary-btn { background: var(--accent) !important; color: white !important; }
.header-action-btn.primary-btn:hover { background: var(--accent-hover) !important; }

#btn-undo-incremental { border: 1px solid var(--global-hdr-icon) !important; color: var(--global-hdr-text) !important; }
#btn-undo-incremental:disabled { color: var(--text-muted) !important; border-color: var(--border-color) !important; opacity: 0.5; cursor: not-allowed; }
#btn-undo-incremental:hover:not(:disabled) { background: rgba(255,255,255,0.05) !important; }

.floating-btn { border-radius: 8px; padding: 10px 14px; font-weight: 400; font-size: 13px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); display: none; transition: opacity 0.2s; background: var(--summary-border); color: #ffffff; border: 1px solid var(--sidebar-bg); }
.floating-btn i { margin-right: 6px; }
.floating-btn:active { opacity: 0.7; }
.floating-btn:hover { filter: brightness(1.1); }
#bulk-delete-btn { background: var(--red); color: white; border: none; }
#bulk-unroute-btn { background: var(--orange); color: white; border: none; }
#move-r1-btn, #move-r2-btn, #move-r3-btn { border-left: 4px solid transparent; }

#sidebar { display: flex; flex-direction: column; background: var(--sidebar-bg); z-index: 10; container-type: inline-size; container-name: sidebar; overflow-x: hidden; }
#route-view-toggles { padding: 10px 15px; background: var(--route-mod-bg); border-bottom: 1px solid var(--route-mod-border); flex-direction: row; gap: 8px; flex-shrink: 0; }
#list-header-container { flex: none; z-index: 20; background: var(--list-hdr-bg); }
#stop-list { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }

/* DARK WORKSPACE ROWS */
.stop-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--row-border); background: var(--row-bg); min-height: 60px; cursor: pointer; position: relative; }
.stop-item.completed { opacity: 0.5; background: rgba(21,32,26,0.5); }
.stop-item.selected { background: var(--row-bg-selected) !important; border-left: 4px solid var(--accent); }

.sortable-chosen { transform: scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.4) !important; border: 2px solid var(--accent) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: 1000; background: var(--row-bg) !important; }
.sortable-drag { opacity: 0.8 !important; }
.hidden-unrouted { display: none !important; }

.stop-item.compact { min-height: 32px; }
.stop-item.compact .stop-content { padding: 2px 0; }
.glide-row.compact { padding: 2px 4px; min-height: 32px; }

.stop-sidebar { width: 35px; background-color: var(--purple); color: white; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 16px; flex-shrink: 0; }
.stop-sidebar.due-today { background-color: var(--orange); }
.stop-sidebar.past-due { background-color: var(--red); }

.col-handle { display: none !important; visibility: hidden !important; }

.csv-box { align-self: center; width: 28px; height: 28px; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 10px; border-radius: 4px; margin: 0 8px; }
.stop-content { flex: 1; padding: 5px 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.stop-addr-title { font-weight: 400 !important; font-size: 15px; color: var(--row-text-main); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.compact .row-meta, .compact .row-details { display: none; }
.row-meta { font-size: 12px; color: var(--row-text-muted); }
.row-details { font-size: 11px; color: var(--row-text-muted); }

.type-text { font-size: 11px; font-weight: 400; color: var(--row-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.due-date-container { display: flex; align-items: center; padding: 0 10px; font-weight: 400; font-size: 18px; color: var(--row-text-main); margin-left: auto; }
.due-date-container.due-today { color: var(--orange) !important; }
.due-date-container.past-due { color: var(--red) !important; font-weight: 400; }

.stop-actions { display: flex; align-items: center; padding-right: 8px; gap: 4px; }
.icon-btn { font-size: 28px; cursor: pointer; padding: 4px; }

/* TABLE HEADERS (Dark) */
.glide-table-header { display: flex; height: 38px; box-sizing: border-box; align-items: center; padding: 0 4px; font-weight: 400; border-bottom: 2px solid var(--list-hdr-border); color: var(--list-hdr-text); font-size: 12px; text-transform: uppercase; background: var(--list-hdr-bg); margin-top: -1px; }

.col-eta, .col-due, .col-addr, .col-app, .col-client { border-right: 1px solid var(--row-border); box-sizing: border-box; }
.static-endpoint .col-eta, .static-endpoint .col-due, .static-endpoint .col-addr, .static-endpoint .col-app, .static-endpoint .col-client { border-right: none !important; }

/* GLIDE ROWS (Dark) */
.glide-row { display: flex; padding: 10px 4px; border-bottom: 1px solid var(--row-border); font-size: 14px; color: var(--row-text-main); align-items: center; cursor: pointer; background: var(--row-bg); transition: background 0.2s; }
.glide-row:hover { background: var(--row-bg-hover); }
.glide-row.selected { background: var(--row-bg-selected) !important; border-left: 4px solid var(--accent); }
.glide-row.completed { opacity: 0.5; }

.sortable { cursor: pointer; transition: color 0.2s; display: flex; align-items: center; }
.sortable:hover { color: var(--accent); }
.col-num { width: 30px; margin-left: 12px; color: var(--row-text-muted); font-size: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.num-badge { width: 26px; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 13px; color: var(--row-text-main) !important; }
.glide-row.completed .num-badge { background-color: var(--row-border) !important; color: var(--row-text-muted) !important; border-color: var(--row-border) !important; }

.col-eta { width: 75px; font-weight: 400; color: var(--row-text-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.col-due { width: 65px; display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 400; color: var(--row-text-muted); flex-shrink: 0;}
.col-due.due-today { color: var(--orange) !important; }
.col-due.past-due { color: var(--red) !important; font-weight: 400; }

.col-insp { width: 120px; color: var(--row-text-muted); padding-left: 8px; padding-right: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }
.col-addr { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 6px; font-weight: 400; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.addr-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; font-weight: 400; color: var(--row-text-main); }

.meta-text { font-size: 11px; font-weight: 400; color: var(--row-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.compact .meta-text { display: none !important; }

/* RE-ADDED FONT WEIGHTS & BLOCK DISPLAY FOR COMPACT MODE ADDRESSES */
.glide-row.compact .type-text, .stop-item.compact .type-text, .compact .type-text { display: none !important; }
.compact .stop-content b, .compact .stop-addr-title, .glide-row.compact .addr-text { font-weight: 400 !important; display: block !important; }

.col-app { width: 55px; color: var(--row-text-muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.col-client { width: 80px; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start; color: var(--row-text-muted); box-sizing: border-box; }

/* Address Input Header styling */
.address-header-input {
    background: var(--list-search-bg) !important; border: 1px solid transparent !important; color: var(--list-search-text) !important;
    font-weight: 400; font-size: 12px; text-transform: uppercase; width: 100%; padding: 0 24px 0 6px; margin: 0; height: 30px;
    border-radius: 4px; transition: 0.2s background-color, 0.2s border-color, 0.2s filter; outline: none; text-align: left; box-sizing: border-box; min-width: 0;
    user-select: text !important; pointer-events: auto !important;
}
.glide-table-header .address-header-input { height: 30px; }
.address-header-input::placeholder { color: var(--row-text-muted) !important; font-weight: 400; }
.address-header-input:hover { background-color: rgba(47, 71, 59, 0.5) !important; filter: none !important; }
.address-header-input:focus, .address-header-input:active { background-color: rgba(47, 71, 59, 0.8) !important; border-color: var(--accent) !important; filter: none !important; }

.clear-search-icon, .search-icon { position: absolute; right: 8px; cursor: pointer; color: var(--row-text-muted); font-size: 12px; transition: 0.2s color; }
.clear-search-icon:hover { color: var(--row-text-main); }

.custom-tooltip {
    position: absolute; top: -28px; right: 0; background: #333; color: #fff;
    padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.1s; z-index: 1000;
    font-weight: 400; text-transform: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.address-search-wrapper:hover .custom-tooltip { opacity: 1; }

.marker { position: absolute !important; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; z-index: 1; }
.marker.bulk-selected { z-index: 1000 !important; }

.pin-visual { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 400; color: white; transition: transform 0.1s, box-shadow 0.1s, background-color 0.2s; box-sizing: border-box; }
.marker.bulk-selected .pin-visual { background-color: var(--accent) !important; color: #ffffff !important; box-shadow: 0 0 15px rgba(96, 132, 95, 0.6) !important; transform: scale(1.15); border-color: var(--accent) !important; }
.marker.completed .pin-visual { background-color: #999 !important; color: white !important; border-color: #999 !important; }
.marker-warning { position: absolute; top: -10px; right: -10px; font-size: 16px; pointer-events: none; z-index: 5; }

.boxdraw { background: rgba(96, 132, 95, 0.3); border: 1px solid var(--accent); position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 999; }

#modal-overlay { 
    display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.6); z-index: 100000; align-items: center; justify-content: center; 
}
.modal-box { max-height: 90%; overflow-y: auto; margin: auto; }
.modal-box input { background: var(--bg-base); color: var(--text-main); border: 1px solid var(--border-color); }

.grey-checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; background-color: transparent; border: 2px solid var(--row-text-muted); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0; transition: 0.2s; }
.grey-checkbox:checked { background-color: var(--accent); border-color: var(--accent); }
.grey-checkbox:checked::after { content: '✔'; color: white; font-size: 10px; }

.static-endpoint { background-color: var(--row-bg); border-bottom: 1px solid var(--row-border); font-weight: 400; height: 38px !important; min-height: 38px !important; box-sizing: border-box; }
.static-endpoint .col-app, .static-endpoint .col-client, .static-endpoint .col-insp { display: none !important; }
.endpoint-input { width: 100%; padding: 0 24px 0 6px; border: 1px solid transparent !important; border-radius: 4px; font-weight: 400; font-size: 12px; color: var(--row-text-main) !important; background-color: #151515 !important; transition: all 0.2s ease; height: 30px; box-sizing: border-box; outline: none; text-align: left; min-width: 0; }
.endpoint-input:focus { border-color: var(--accent) !important; }
.endpoint-input::placeholder { color: var(--row-text-muted); font-weight: 400; }
.static-endpoint.compact { background: var(--row-bg); min-height: 40px; }

.pill-btn { padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 20px; cursor: pointer; color: var(--text-muted); font-size: 14px; background: transparent; transition: all 0.2s ease; font-weight: 400; }
.pill-btn.active { background: var(--fade-accent); color: var(--accent); border-color: var(--accent); font-weight: 400; }
.pill-btn:hover:not(.active) { background: var(--bg-hover); }

.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; font-weight: 400; }
.form-control { width: 100%; padding: 10px 12px; background: var(--bg-base) !important; border: 1px solid var(--border-color) !important; color: var(--text-main) !important; border-radius: 6px; font-size: 14px; font-weight: 400; box-sizing: border-box; }
.form-control:focus { outline: none; border-color: var(--accent); }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

#processing-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(23, 23, 23, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 99999; }
.spinner-container { display: flex; flex-direction: column; align-items: center; background: var(--bg-panel); padding: 40px 60px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); border: 1px solid var(--border-color); }
.loader { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(78, 118, 77, 0.2); border-top-color: var(--accent); border-bottom-color: var(--accent); animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite; margin-bottom: 24px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-text { color: var(--text-main); font-size: 18px; font-weight: 400; font-family: sans-serif; letter-spacing: 0.5px; margin-bottom: 8px; animation: pulse-text 2s infinite ease-in-out; }
.loading-subtext { color: var(--text-muted); font-size: 13px; font-family: sans-serif; font-weight: 400; }
@keyframes pulse-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

#unmatched-modal {
    display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center;
}
.mapboxgl-touch-pan-blocker { color: transparent !important; }