/* ===== CSS VARIABLES (Filter Heights) ===== */
:root {
  --filter-height-default: 72px;  /* Full height for date/number range filters */
  --filter-height-compact: 40px;  /* Compact height for narrow filters */
  --filter-height-medium: 56px;   /* Medium height option */
}

/* Global */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { display: flex; height: 100vh; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; }

/* ===== SIDEBAR (Filters Panel) ===== */
#sidebar { width: 260px; min-width: 260px; display: flex; flex-direction: column; border-right: 1px solid #ccc; background: #fafafa; transition: width .2s; } /* Main filter sidebar container */
#sidebar.collapsed { width: 0; min-width: 0; overflow: hidden; } /* Sidebar when hidden */
#sidebar-head { padding: 12px 14px; background: #1a3a5c; color: #fff; flex-shrink: 0; display: flex; flex-direction: column; } /* Header section of sidebar (title, toggles) */
#sidebar-head-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; } /* Title + close button row */
#sidebar-head h2 { font-size: 14px; margin: 0; } /* "Thruway Bridge Inspections" title */
#sidebar-collapse { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; } /* X button to close sidebar */
#sidebar-show { position: fixed; top: 10px; left: calc(50% - 140px); z-index: 9000; background: #1a3a5c; color: #fff; border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 14px; display: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); } /* "Filters" button shown when sidebar collapsed */
#list-show { position: fixed; top: 10px; left: calc(50% + 10px); z-index: 9000; background: #243f60; color: #fff; border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 14px; display: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); } /* "Results" button shown when list panel collapsed */
#sidebar-body { flex: 1; overflow-y: auto; padding: 10px 12px; } /* Scrollable area containing legend & filters */

/* ===== FILTER GROUP (.fg) ===== */
.fg { margin-bottom: 10px; } /* Filter group wrapper (one filter section) */
.fg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } /* Filter label + clear button row */
.fg-head label { font-weight: 600; font-size: 11px; color: #444; text-transform: uppercase; letter-spacing: .4px; } /* Filter label text (e.g., "Program") */
.fg-clear { background: none; border: none; color: #aaa; cursor: pointer; font-size: 10px; line-height: 1; padding: 0; text-decoration: underline; } /* "clear" button */
.fg-clear:hover { color: #e74c3c; } /* "clear" button on hover */
.fg label { display: block; font-weight: 600; font-size: 11px; color: #444; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; } /* Alternative label styling */

/* Select/dropdown filters */
.fg select { width: 100%; height: var(--filter-height-default); border: 1px solid #ccc; border-radius: 3px; } /* Default select dropdown (full height) */
.fg select.narrow { height: var(--filter-height-compact); } /* Narrow select for compact filters (Program, Flag, GTMS) */
.fg select.short { height: var(--filter-height-medium); } /* Short select variant */

/* Checkbox filters (unused in current setup) */
.fg-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 8px; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; } /* Checkbox filter item */
.fg-check input { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* Checkbox input */
.fg-check label { font-size: 12px; font-weight: 600; cursor: pointer; } /* Checkbox label */

/* Text and date/number filters */
.fg input[type=text] { width: 100%; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; } /* Text search input (Carried, Crossed, Remarks) */
.fg input[type=date], .fg input[type=number] { flex: 1; min-width: 0; padding: 4px 2px; border: 1px solid #ccc; border-radius: 3px; min-width: 110px; } /* Date range & number range inputs */

/* Range row (for date/number min-max pairs) */
.rrow { display: flex; align-items: center; gap: 4px; } /* Container for min/max input pairs */
.rrow span { color: #999; flex-shrink: 0; } /* Dash between min/max inputs */

/* ===== LEGEND ===== */
#legend { margin-bottom: 12px; padding: 8px 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 11px; } /* Legend container */
#legend strong { display: block; margin-bottom: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; } /* "Legend" title */
.leg { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } /* Single legend item (dot + label) */
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.15); flex-shrink: 0; } /* Colored dot indicator */

/* ===== CUSTOM FILTER BOXES ===== */
/* Adjust these to use different heights from CSS variables above */
#f_program { height: var(--filter-height-default) !important; } /* Program filter - full height */
#f_Flag { height: var(--filter-height-compact) !important; } /* Flag filter - full height */

/* ===== RESET BUTTON ===== */
#reset { width: 100%; padding: 7px; margin-top: 8px; background: #1a3a5c; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; } /* Reset All Filters button */
#reset:hover { background: #2456a4; } /* Reset button hover state */

/* ===== BRIDGE LIST PANEL ===== */
#list-panel { width: 270px; min-width: 270px; display: flex; flex-direction: column; border-right: 1px solid #ccc; background: #fff; transition: width .2s; } /* Results panel container */
#list-panel.collapsed { width: 0; min-width: 0; overflow: hidden; } /* Results panel when hidden */
#list-head { padding: 10px 12px; background: #243f60; color: #fff; flex-shrink: 0; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; } /* Results panel header (count + close) */
#list-toggle { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 0 0 0 8px; line-height: 1; } /* X button to close results panel */
#list-body { flex: 1; overflow-y: auto; } /* Scrollable bridge list */

/* Bridge list items */
.bridge-item { padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; } /* Single bridge row in results list */
.bridge-item:hover { background: #f0f4fa; } /* Bridge item on hover */
.bridge-item.active { background: #dce8f7; border-left: 3px solid #1a3a5c; } /* Selected/active bridge item */
.bi-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } /* BIN/SIN + MP row in list item */
.bi-bin { font-size: 15px; font-weight: 700; color: #1a3a5c; } /* Bridge ID (BIN/SIN/CIN) in list */
.bi-mp { font-size: 13px; font-weight: 700; color: #c0392b; } /* Mile Post in list */
.bi-sub { font-size: 11px; color: #555; margin-bottom: 2px; } /* Carried/Crossed subtitle */
.bi-dates { font-size: 11px; color: #777; } /* Due date and distance info */
.bi-flag { display: inline-block; background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; } /* "FLAG" badge for flagged bridges */

/* ===== MAP ===== */
#map { flex: 1; } /* Leaflet map container (takes remaining space) */

/* ===== POPUP (Click on marker) ===== */
.ptbl { border-collapse: collapse; min-width: 260px; } /* Popup info table */
.ptbl td { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; } /* Table cells */
.ptbl td:first-child { font-weight: 600; color: #555; white-space: nowrap; width: 48%; } /* Label column (Section, BIN, Due Date, etc.) */
.ptbl .hi td { background: #f5f8ff; } /* Highlighted rows (BIN/SIN/CIN/Mile Post) */
.ptbl .hi td:first-child { color: #1a3a5c; } /* Highlighted label text */

/* ===== MAP LABELS & TOGGLES ===== */
.hide-labels .bridge-label { display: none !important; } /* Hide labels when Labels toggle unchecked */
.toggle-row { display: flex; gap: 10px; margin-top: 8px; } /* Row with Labels/Markers/Cluster checkboxes */
.tog { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; cursor: pointer; color: rgba(255,255,255,.9); } /* Single toggle checkbox + label */
.tog input { cursor: pointer; } /* Toggle checkbox */
.bridge-label { background: rgba(255,255,255,.92); border: 1px solid #aaa; border-radius: 3px; padding: 2px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; line-height: 1.5; } /* Bridge label tooltip on map (BIN + MP) */
.bridge-label::before { display: none; } /* Hide default Leaflet tooltip arrow */

/* ===== PASSWORD GATE ===== */
#gate { position: fixed; inset: 0; background: #1a3a5c; display: flex; align-items: center; justify-content: center; z-index: 9999; } /* Full-screen overlay modal */
#gate-box { background: #fff; padding: 36px 40px; border-radius: 8px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.3); min-width: 280px; } /* Password dialog box */
#gate-box h2 { margin-bottom: 6px; color: #1a3a5c; font-size: 18px; } /* Dialog title */
#gate-box p { color: #666; font-size: 13px; margin-bottom: 20px; } /* Dialog subtitle */
#gate-box input { width: 100%; padding: 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 12px; box-sizing: border-box; } /* Password input field */
#gate-box button { width: 100%; padding: 10px; background: #1a3a5c; color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; } /* Enter button */
#gate-box button:hover { background: #2456a4; } /* Enter button hover */
#gate-error { color: #e74c3c; font-size: 12px; margin-top: 8px; display: none; } /* "Incorrect password" error message */