/* ── Reset & layout ───────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: #1a1a18; color: #e8e0d0; font-family: Georgia, serif; }

/* ── Split container ──────────────────────────── */
#split { display: flex; flex: 1; overflow: hidden; }
#map-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
#booking-panel { width: 760px; flex-shrink: 0; overflow: hidden; border-left: 1px solid #2a2a28; }

/* ── Map panel styles ─────────────────────────── */

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Georgia, serif; background: #1a1a18; color: #e8e0d0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  #header { background: #111110; border-bottom: 1px solid #3a3a30; padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: wrap; }
  #header h1 { font-size: 16px; font-weight: normal; letter-spacing: 1.5px; text-transform: uppercase; color: #c8b870; white-space: nowrap; }
  #header .subtitle { font-size: 11px; color: #888; }
  .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
  .ctrl-btn { background: #2a2a28; border: 1px solid #4a4a38; color: #c8c0a8; font-size: 11px; padding: 5px 10px; cursor: pointer; border-radius: 3px; transition: all 0.2s; }
  .ctrl-btn:hover, .ctrl-btn.active { background: #3a5a3a; border-color: #6a9a5a; color: #a8d890; }
  #map { flex: 1; min-height: 0; }
  .grayscale-tiles { filter: grayscale(1) brightness(1.05); }
  #legend { position: absolute; bottom: 30px; left: 10px; background: rgba(20,20,18,0.92); border: 1px solid #3a3a30; padding: 10px 12px; z-index: 999; font-size: 11px; border-radius: 4px; }
  .leg-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: #c0b8a0; }
  .leg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .leg-line { width: 20px; height: 3px; flex-shrink: 0; }
  .stop-label-end { background: rgba(20,20,18,0.92) !important; border: 1px solid #4a4a38 !important; border-radius: 3px !important; box-shadow: none !important; font-size: 11px; font-weight: 600; color: #e0d8c0 !important; padding: 2px 6px !important; }
  .leaflet-tooltip { background: rgba(20,20,18,0.92) !important; color: #e0d8c0 !important; border: 1px solid #4a4a38 !important; border-radius: 3px !important; font-size: 12px; }
  .leaflet-popup-content-wrapper { background: #1a1a18; color: #e0d8c0; border: 1px solid #4a4a38; border-radius: 4px; }
  .leaflet-popup-tip { background: #1a1a18; }
  .leaflet-paneRadius-pane, .leaflet-paneRadius-pane * { pointer-events: none !important; }


/* ── Booking panel styles ─────────────────────── */

  .booking-panel { display: flex; flex-direction: column; height: 100vh; background: #111110; color: #e8e0d0; font-family: Georgia, serif; padding: 10px 16px; overflow: hidden; }
  .booking-panel h1 { font-size: 16px; font-weight: normal; letter-spacing: 1.5px; text-transform: uppercase; color: #c8b870; margin-bottom: 2px; flex-shrink: 0; }
  .booking-panel .subtitle { font-size: 11px; color: #888; margin-bottom: 0; padding-bottom: 10px; flex-shrink: 0; border-bottom: 1px solid #3a3a30; margin-bottom: 8px; }
  #b-status { font-size: 11px; color: #888; margin-bottom: 8px; min-height: 16px; flex-shrink: 0; }
  .global-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
  .global-controls .shift-btn { font-size: 13px; padding: 3px 10px; }
  .global-date-label { font-size: 12px; color: #c8b870; min-width: 150px; }
  .table-wrap { flex: 1; overflow: auto; border-radius: 6px; border: 1px solid #3a3a30; display: block; }
  table { border-collapse: collapse; white-space: nowrap; }
  th.camp-col, td.camp-col { position: sticky; left: 0; z-index: 2; background: #1e1e1c; border-right: 2px solid #4a4a38; padding: 5px 8px; text-align: left; font-size: 11px; min-width: 155px; }
  th.camp-col { background: #222220; }
  td.camp-col { color: #e0d8c0; }
  td.camp-col.loading { color: #555; font-style: italic; }
  td.camp-col.errored { color: #e06060; font-style: italic; }
  .col-inner { display: flex; align-items: center; gap: 4px; }
  .camp-name { flex: 1; }
  .shift-btn { background: #2a2a28; border: 1px solid #4a4a38; color: #c8c0a8; font-size: 10px; padding: 1px 5px; cursor: pointer; border-radius: 3px; line-height: 1.4; flex-shrink: 0; }
  .shift-btn:hover { background: #3a5a3a; border-color: #6a9a5a; color: #a8d890; }
  .shift-btn:disabled { opacity: 0.3; cursor: default; }
  .row-offset-label { font-size: 9px; color: #666; min-width: 18px; text-align: center; }
  th.day { background: #222220; padding: 4px; border-right: 1px solid #2a2a28; min-width: 50px; width: 50px; max-width: 50px; }
  td.day { padding: 4px; border-right: 1px solid #2a2a28; text-align: center; vertical-align: middle; min-width: 50px; width: 50px; max-width: 50px; }
  .cell-date { font-size: 9px; color: #666; display: block; margin-bottom: 1px; white-space: nowrap; }
  .avail { font-size: 13px; font-weight: bold; display: block; }
  .avail-0    { color: #383838; }
  .avail-1    { color: #e07050; }
  .avail-2    { color: #c8a820; }
  .avail-3    { color: #5ab050; }
  .avail-oos  { color: #2a2a2a; font-size: 10px; }
  .avail-load { color: #2a2a2a; font-size: 11px; }
  .b-legend { display: flex; gap: 12px; font-size: 10px; flex-wrap: wrap; color: #888; margin-top: 8px; flex-shrink: 0; }
  .leg { display: flex; align-items: center; gap: 4px; }
  .leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }