/* Route page layout and components */

:root {
    --sidebar-width: 500px;
    --bg-dark: #212529;
    --panel-dark: #343a40;
    --panel-border: #495057;
    --panel-accent: #2b3035;
    --text-light: #f8f9fa;
    --scroll-track: #2b3035;
    --scroll-thumb: #495057;
    --scroll-thumb-hover: #6c757d;

    /* safe area (iOS) */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Leaflet popup styling to match dark theme */
.leaflet-popup-content-wrapper {
    min-width: 200px;
    background-color: var(--panel-dark);
    color: var(--text-light);
}

.leaflet-popup-tip {
    background-color: var(--panel-dark);
}

/* Dark theme for overlapping marker selection popups */
.dark-popup .leaflet-popup-content-wrapper {
    background-color: #343a40;
    color: #f8f9fa;
}

.dark-popup .leaflet-popup-tip {
    background-color: #343a40;
}

.dark-popup .leaflet-popup-close-button {
    color: #f8f9fa !important;
}

.dark-popup .leaflet-popup-close-button:hover {
    color: #adb5bd !important;
}

html, body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    overflow: hidden;
}

/* Prefer dynamic viewport height when supported (fixes iOS toolbar overlap) */
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* Navbar stays in normal flow, main fills the rest */
#appNavbar {
    flex: 0 0 auto;
    position: relative;
    z-index: 2000;
}

#appNavbar.navbar {
    position: static;
}


/* Ensure Leaflet controls never draw above the navbar */
.leaflet-control-container {
    z-index: 500;
}

.leaflet-top,
.leaflet-bottom {
    z-index: 500;
}

/* Move Leaflet attribution to top left */
#map .leaflet-control-attribution {
    float: left;
}

#map .leaflet-bottom.leaflet-right {
    right: auto;
    left: 0;
    bottom: auto;
    top: 0;
}

/* Main container below fixed navbar */
#main-container {
    flex: 1 1 auto;
    min-height: 0; /* critical: allows children to scroll instead of overflowing */
    display: flex;
    flex-direction: row;
}

/* Sidebar with sticky header and scrollable list */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--panel-dark);
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

/* Sticky header */
#sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--panel-dark);
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-border);
}

/* Inline selects row for Route & Day (equal width, fit panel) */
#sidebar-header .select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
#sidebar-header .select-row .form-select {
    background-color: var(--panel-accent);
    color: var(--text-light);
    border-color: var(--panel-border);
    height: 32px;
    font-size: 0.875rem;
    padding: 4px 8px;
    flex: 1 1 0;            /* make both selects equal width */
    min-width: 0;           /* allow them to shrink within the row */
}

/* Reorder switch */
#reorderSwitch:disabled + .form-check-label { opacity: 0.65; }

/* Progress bar container */
.progress-container {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
}

/* Scroll only the list area; avoid overlay scrollbar */
#sidebar-list {
    flex: 1 1 auto;
    min-height: 0; /* critical for nested scrolling in flex layouts */
    overflow-y: auto;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    padding-right: 5px; /* Prevent scrollbar from overlapping content */
    /*padding: 12px 0 15px 0; /* normal/default */
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

/* Dark themed custom scrollbars */
/* WebKit */
#sidebar-list::-webkit-scrollbar { width: 10px; }
#sidebar-list::-webkit-scrollbar-track { background: var(--scroll-track); }
#sidebar-list::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 8px;
    border: 2px solid var(--scroll-track);
}
#sidebar-list::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
/* Firefox */
#sidebar-list {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* Map area */
#map-container {
    order: 0;
    flex-grow: 1;
    height: 100%;
    position: relative;
}
#map { height: 100%; width: 100%; }

/* Hide resize handle by default (desktop/tablet) */
#mobile-resize-handle {
    display: none;
}

/* Sortable list styling */
.sortable-list { list-style: none; margin: 0; padding: 0; }
.sortable-item {
    background-color: #495057;
    margin-bottom: 6px;
    padding: 6px 8px;
    cursor: grab;
    border: 1px solid #6c757d;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
    font-size: 0.9rem;
}
.sortable-item .badge {
    border: 1px solid #000;
}
.sortable-item .order-number {
    display: inline-block;
    min-width: 2ch;
    text-align: right;
}
.sortable-item.dumped-today {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}
.sortable-item.has-issue {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.sortable-item.dumped-with-issue {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
}
.sortable-item.disabled-frequency {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #adb5bd;
    opacity: 0.7;
}
.sortable-item.multi-selected {
    background-color: #0d6efd;
    border-color: #0a58ca;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.5);
}
.point-menu {
    margin-left: auto;
}

.point-menu .dropdown-menu {
    z-index: 1050; /* keep above list + map */
}

.point-menu-toggle {
    padding: 2px 4px;
    font-size: 0.85rem;
    line-height: 1;
}

.sortable-item a.focus-marker-link {
    text-align: left;
    margin-right: 5px;
}

.custom-focus-btn {
    font-size: 0.75rem; /* Smaller text/icon size */
    padding: 2px 6px; /* Reduced padding for smaller size */
    margin-left: 10px; /* Optional spacing from content */
}

/* Hide drag handles by default; shown when reordering is enabled */
#sidebar .sortable-handle { display: none; }
.reordering-on #sidebar .sortable-handle { display: inline-flex; }
/* Touch-friendly handle */
.sortable-handle {
    margin-right: 6px;
    cursor: grab;
    touch-action: none; -ms-touch-action: none;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

/* Numbered marker */
.marker-num {
    background: #2b3035;
    color: #fff;
    border: 2px solid #0d6efd;
    border-radius: 14px;
    width: 28px;
    height: 28px;
    line-height: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
}
.marker-num.shadow {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.marker-num-disabled {
    background: #495057;
    color: #adb5bd;
    border-color: #6c757d;
    opacity: 0.7;
}
.marker-num-dumped-today {
    background: #198754;
    border-color: #198754;
    color: #fff;
}
.marker-num-has-issue {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.marker-num-dumped-with-issue {
    background: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
}
.marker-num-disabled-frequency {
    background: #6c757d;
    border-color: #6c757d;
    color: #adb5bd;
    opacity: 0.7;
}

/* Special marker (requested dumps, called in missed) */
.special-marker {
    background: #2b3035;
    border: 2px solid #6c757d;
    border-radius: 14px;
    width: 28px;
    height: 28px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.special-marker.shadow {
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

/* Animated no-schedule pins cycling through day colors */
.pin-no-schedule path,
.legend-no-schedule {
    animation: cycleColors 5s infinite;
}

@keyframes cycleColors {
    0% { fill: #FF6384; }    /* Monday - red/pink */
    20% { fill: #36A2EB; }   /* Tuesday - blue */
    40% { fill: #FFCE56; }   /* Wednesday - yellow */
    60% { fill: #4BC0C0; }   /* Thursday - teal */
    80% { fill: #9966FF; }   /* Friday - purple */
    100% { fill: #FF6384; }  /* Back to Monday */
}

.zoom-display {
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    pointer-events: none; /* don’t block map interactions */
}

.focus-marker-link {
    color: #0d6efd;
    text-decoration: underline;
    cursor: pointer;
    text-align: right;
}
.focus-marker-link:hover {
    color: #4dabf7;
    text-decoration: none;
}

/* Mobile Portrait: map above sidebar; header stays sticky; list scrolls */
@media (max-width: 768px) and (orientation: portrait) {
    #main-container {
        flex-direction: column;
        overflow: hidden;
    }
    #map-container {
        order: 0;
        flex: 1 1 auto; /* Map takes remaining space */
        height: auto;
    }

    /* On mobile, add more padding to prevent overlay scrollbar from covering content */
    #sidebar-list {
        padding-right: 10px;
    }
    #sidebar {
        order: 1;
        width: 100%;
        height: 60vh; /* Increased default height */
        min-height: 150px;
        max-height: 85vh;
        border-right: none;
        border-top: 1px solid var(--panel-border);
        transition: height 0.1s ease-out;
        padding-bottom: var(--safe-bottom);
    }

    /* Resize Handle Styling */
    #mobile-resize-handle {
        height: 24px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: ns-resize;
        background: var(--panel-dark);
        border-bottom: 1px solid var(--panel-border);
        touch-action: none;
    }
    .handle-bar {
        width: 40px;
        height: 4px;
        background: var(--panel-border);
        border-radius: 2px;
    }

    #sidebar-header { top: 0; }
    /* Keep selects on one line; allow horizontal scroll if extremely narrow */
    #sidebar-header .select-row { overflow-x: auto; }
    #printButton { display: none; }
}

/* Mobile Landscape: sidebar on left, map on right with vertical divider */
@media (max-width: 768px) and (orientation: landscape) {
    #main-container {
        flex-direction: row;
        overflow: hidden;
    }

    #sidebar {
        order: 0;
        position: relative; /* For absolute positioning of resize handle */
        width: 45vw; /* Default to 45% of viewport width */
        min-width: 250px;
        max-width: 70vw;
        height: 100%;
        border-right: 1px solid var(--panel-border);
        border-top: none;
        transition: width 0.1s ease-out;
        padding-bottom: var(--safe-bottom);
    }

    #map-container {
        order: 1;
        flex: 1 1 auto;
        height: 100%;
    }

    /* Vertical Resize Handle for Landscape */
    #mobile-resize-handle {
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: ew-resize;
        background: var(--panel-dark);
        border-right: 1px solid var(--panel-border);
        touch-action: none;
        z-index: 10;
    }

    .handle-bar {
        width: 4px;
        height: 40px;
        background: var(--panel-border);
        border-radius: 2px;
    }

    #sidebar-list {
        padding-right: 30px; /* Account for resize handle */
    }

    #sidebar-header { top: 0; }

    /* Smaller font sizes in landscape to fit more content */
    #sidebar-header h5 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    #sidebar-header .select-row .form-select {
        font-size: 0.8rem;
        height: 28px;
    }

    .sortable-item {
        font-size: 0.85rem;
        padding: 5px 6px;
    }

    .form-check-label {
        font-size: 0.85rem;
    }

    #printButton { display: none; }
}

/* Touch devices (Android Chrome + iPhone): give a little extra bottom room for browser UI */
@media (hover: none) and (pointer: coarse) {
    #sidebar-list {
        padding-bottom: calc(15px + 40px + var(--safe-bottom));
    }
}