/* ============================================================
   OTIS Off-Peak Roadway Safety Explorer
   Design system follows Philadelphia Digital Standards:
   https://standards.phila.gov/

   Colors:  Ben Franklin Blue family (#0f4d90, #2176d2, #96c9ff)
            Bell Yellow (#f3c613), Flyers Orange (#f99300)
            Love Park Red (#cc3000), Kelly Drive Green (#58c04d)
   Fonts:   Montserrat (headings), Open Sans (body)
   ============================================================ */

/* === Design Tokens === */
:root {
  /* Purple/indigo palette (replaces Ben Franklin blue family) */
  --dark-ben-franklin:  #3d2280;
  --ben-franklin:       #6544c0;
  --light-ben-franklin: #c0aef5;
  --light-blue:         #ece8fb;

  /* Philadelphia Brand — Accents */
  --bell-yellow:    #f3c613;
  --light-bell:     #ffefa2;
  --flyers-orange:  #f99300;
  --kelly-green:    #58c04d;
  --phanatic-green: #3a833c;
  --love-park-red:  #cc3000;
  --light-red:      #fed0d0;

  /* Neutrals */
  --black:       #000000;
  --dark-gray:   #444444;
  --medium-gray: #a1a1a1;
  --sidewalk:    #cfcfcf;
  --ghost-gray:  #f0f0f0;
  --white:       #ffffff;

  /* Layout */
  --header-height:   74px;
  --controls-width:  340px;

  /* Component */
  --panel-bg:      #ffffff;
  --panel-border:  #e4e4e4;
  --section-pad:   20px;
  --radius-sm:     4px;
  --radius-md:     8px;

  /* Risk colors */
  --risk-very-high: #cc3000;
  --risk-high:      #f99300;
  --risk-moderate:  #f3c613;
  --risk-low:       #58c04d;
  --risk-none:      #a1a1a1;
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-gray);
  background: var(--ghost-gray);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  height: var(--header-height);
  background: var(--dark-ben-franklin);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  z-index: 1100;
  position: relative;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.city-seal {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-seal img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

.header-dept {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.92;
  line-height: 1.05;
}

.header-app-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.02;
  margin: 0;
  white-space: nowrap;
}

/* Header Nav */
.header-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.nav-link--icon {
  padding: 7px 10px;
  display: flex;
  align-items: center;
}

.nav-link--icon:hover {
  color: var(--white);
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   CONTROLS PANEL (left sidebar)
   ============================================================ */
.controls-panel {
  width: var(--controls-width);
  min-width: var(--controls-width);
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}

.controls-panel::-webkit-scrollbar { width: 5px; }
.controls-panel::-webkit-scrollbar-track { background: var(--ghost-gray); }
.controls-panel::-webkit-scrollbar-thumb { background: var(--sidewalk); border-radius: 3px; }
.controls-panel::-webkit-scrollbar-thumb:hover { background: var(--medium-gray); }

/* Panel Sections */
.panel-section {
  padding: var(--section-pad);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.panel-section:last-child {
  border-bottom: none;
  flex: 1;
}

.panel-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--dark-ben-franklin);
  margin-bottom: 14px;
}

.panel-subtitle {
  font-size: 12px;
  color: var(--medium-gray);
  line-height: 1.6;
  margin-bottom: 18px;
  margin-top: -6px;
}

/* ============================================================
   SEGMENT INFO
   ============================================================ */
.placeholder-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px 8px 4px;
  color: var(--medium-gray);
}

.placeholder-icon {
  width: 32px;
  height: 32px;
  stroke: var(--sidewalk);
}

.placeholder-text p {
  font-size: 13px;
  line-height: 1.6;
}

.segment-info-content {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ghost-gray);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 12px;
  color: var(--medium-gray);
  white-space: nowrap;
  flex-shrink: 0;
}

.info-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-gray);
  text-align: right;
}

.info-value.mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

/* ============================================================
   PREDICTION SECTION
   ============================================================ */
.prediction-section {
  background: linear-gradient(135deg, var(--light-blue) 0%, #f0f7ff 100%);
}

.prediction-section .panel-title {
  color: var(--dark-ben-franklin);
}

.prediction-cards {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

.prediction-card {
  flex: 1;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.prediction-card.current {
  border-top: 3px solid var(--sidewalk);
}

.prediction-card.projected {
  border-top: 3px solid var(--kelly-green);
}

.prediction-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--medium-gray);
  margin-bottom: 6px;
}

.prediction-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--dark-gray);
  line-height: 1;
  margin-bottom: 4px;
  transition: color 0.3s;
}

.prediction-sublabel {
  font-size: 10px;
  color: var(--medium-gray);
  line-height: 1.3;
}

.prediction-arrow {
  font-size: 18px;
  color: var(--medium-gray);
  flex-shrink: 0;
  align-self: center;
}

.prediction-delta {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--medium-gray);
  margin-bottom: 8px;
  transition: all 0.3s;
}

.prediction-delta.positive {
  background: rgba(88, 192, 77, 0.12);
  color: var(--phanatic-green);
}

.prediction-delta.negative {
  background: rgba(204, 48, 0, 0.1);
  color: var(--love-park-red);
}

.prediction-note {
  font-size: 10px;
  color: var(--medium-gray);
  line-height: 1.5;
  font-style: italic;
}

/* ============================================================
   CONTROL GROUPS
   ============================================================ */
.control-group {
  margin-bottom: 18px;
}

.control-group:last-of-type {
  margin-bottom: 4px;
}

.control-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-gray);
  margin-bottom: 8px;
}

.control-sublabel {
  font-size: 12px;
  color: var(--medium-gray);
}

.control-hint {
  font-size: 11px;
  color: var(--medium-gray);
  margin-top: 5px;
}

.control-hint-inline {
  font-size: 11px;
  color: var(--medium-gray);
  margin-top: 1px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Range inputs */
.range-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--sidewalk);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--ben-franklin);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.15s, transform 0.1s;
}

.range-input::-webkit-slider-thumb:hover {
  background: var(--dark-ben-franklin);
  transform: scale(1.1);
}

.range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--ben-franklin);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.range-input.range-wide {
  width: 100%;
  flex: none;
}

.range-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-ben-franklin);
  min-width: 34px;
  text-align: right;
}

/* Segmented control (speed limit) */
.segmented-control {
  display: flex;
  background: var(--ghost-gray);
  border-radius: 6px;
  padding: 3px;
  gap: 3px;
}

.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 7px 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--medium-gray);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg-btn.active {
  background: var(--ben-franklin);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.seg-btn:hover:not(.active) {
  background: var(--sidewalk);
  color: var(--dark-gray);
}

/* Toggle switch */
.toggle-control {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.toggle-labels {
  flex: 1;
  min-width: 0;
}

.toggle-labels .control-label {
  margin-bottom: 2px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--sidewalk);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--ben-franklin);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
  outline: 2px solid var(--ben-franklin);
  outline-offset: 2px;
}

/* Calming count row */
.calming-count-row {
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* Select inputs */
.select-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  background: var(--white);
  border: 1px solid var(--sidewalk);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--dark-gray);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a1a1a1' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.select-input:focus {
  border-color: var(--ben-franklin);
  box-shadow: 0 0 0 3px rgba(33, 118, 210, 0.15);
}

/* Number input */
.number-input {
  width: 72px;
  padding: 6px 10px;
  border: 1px solid var(--sidewalk);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--dark-gray);
  outline: none;
  transition: border-color 0.15s;
  text-align: center;
}

.number-input:focus {
  border-color: var(--ben-franklin);
  box-shadow: 0 0 0 3px rgba(33, 118, 210, 0.15);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  border: 2px solid transparent;
  width: 100%;
  margin-top: 16px;
}

.btn-primary {
  background: var(--ben-franklin);
  color: var(--white);
  border-color: var(--ben-franklin);
}

.btn-primary:hover {
  background: var(--dark-ben-franklin);
  border-color: var(--dark-ben-franklin);
}

.btn-outline {
  background: transparent;
  color: var(--ben-franklin);
  border-color: var(--ben-franklin);
}

.btn-outline:hover {
  background: var(--light-blue);
}

/* ============================================================
   MAP LEGEND
   ============================================================ */
.legend {
  margin-top: 14px;
}

.legend-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--medium-gray);
  margin-bottom: 8px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dark-gray);
}

.legend-swatch {
  width: 18px;
  height: 5px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================================
   MAP AREA
   ============================================================ */
.map-area {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Map Banner */
.map-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--ben-franklin);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-width: 500px;
  width: calc(100% - 32px);
}

.banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--dark-gray);
  line-height: 1.5;
}

.banner-icon {
  color: var(--ben-franklin);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.banner-inner code {
  background: var(--ghost-gray);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.banner-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--medium-gray);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
}

.banner-close:hover {
  color: var(--dark-gray);
}

/* Hour filter panel */
.hour-filter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 20px 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  width: 320px;
}

.hour-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-gray);
  text-align: center;
  margin-bottom: 8px;
}

.hour-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--medium-gray);
  margin-top: 4px;
}

.hour-offpeak-note {
  font-size: 10px;
  color: var(--ben-franklin);
  text-align: center;
  margin-top: 4px;
  font-style: italic;
}

/* ============================================================
   LEAFLET POPUP CUSTOMISATION
   ============================================================ */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--panel-border);
  padding: 0;
}

.leaflet-popup-content {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: var(--dark-gray);
  margin: 0;
}

.leaflet-popup-close-button {
  top: 8px !important;
  right: 10px !important;
  font-size: 18px !important;
  color: var(--medium-gray) !important;
}

.popup-inner {
  padding: 14px 16px;
}

.popup-road-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-ben-franklin);
  margin-bottom: 10px;
  padding-right: 16px;
  line-height: 1.3;
}

.popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 10px;
}

.popup-item-label {
  font-size: 10px;
  color: var(--medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.popup-item-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-gray);
}

.popup-risk-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.popup-risk-badge.very-high { background: var(--light-red); color: var(--love-park-red); }
.popup-risk-badge.high      { background: rgba(249,147,0,0.14); color: #b06000; }
.popup-risk-badge.moderate  { background: var(--light-bell); color: #7a5e00; }
.popup-risk-badge.low       { background: #b9f2b1; color: var(--phanatic-green); }

/* Road tooltip */
.leaflet-tooltip.road-tooltip {
  background: rgba(61, 34, 128, 0.92);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}

.leaflet-tooltip.road-tooltip::before {
  display: none;
}

/* ============================================================
   UTILITY
   ============================================================ */
.hidden {
  display: none !important;
}

/* ============================================================
   HEADER — Mobile Responsive
   ============================================================ */
@media (max-width: 680px) {
  .app-header { padding: 0 14px; gap: 8px; }
  .header-dept { font-size: 10px; }
  .header-app-name { font-size: 15px; }
  .city-seal,
  .city-seal img { width: 44px; height: 44px; }
  .nav-link { padding: 6px 10px; font-size: 13px; }
}

@media (max-width: 460px) {
  .app-header { padding: 0 10px; }
  .header-brand { gap: 8px; }
  .header-dept { font-size: 9px; }
  .header-app-name { font-size: 13px; white-space: normal; }
  .city-seal,
  .city-seal img { width: 34px; height: 34px; }
  .nav-link { padding: 5px 7px; font-size: 12px; }
}

/* ============================================================
   DISCLAIMER MODAL
   ============================================================ */
.otis-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in 0.2s ease;
}

.otis-modal-overlay.hidden { display: none !important; }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.otis-modal {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.30);
  max-width: 500px;
  width: calc(100% - 40px);
  overflow: hidden;
  animation: modal-slide-in 0.22s ease;
}

@keyframes modal-slide-in {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.otis-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--dark-ben-franklin);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.otis-modal-body {
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dark-gray);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.otis-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: flex-end;
}

.otis-modal-btn {
  background: var(--dark-ben-franklin);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}

.otis-modal-btn:hover { filter: brightness(1.15); }