/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root{
  --bg: #14171a; --panel: #1c2023; --panel-2: #22262a; --border: #2c3136;
  --text: #eef0ec; --muted: #9aa2a8;
  --route: #4f9d69; --amber: #e2a640; --red: #d1495b;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}


/* ==========================================================================
   2. HEADER
   ========================================================================== */
header{
  padding:20px 24px 16px;
  border-bottom:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:16px 28px;
}
header h1{ font-size:19px; font-weight:700; margin:0; letter-spacing:-0.01em; flex: 1 1 260px; }
header h1 span{ color:var(--muted); font-weight:500; }

/* -- 2.1 Controls (inputs) -- */
.controls{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:11.5px; color:var(--muted); }
.field input{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:15px; padding:6px 8px; border-radius:6px; width:88px;
}
.field input:focus{ outline:2px solid var(--route); outline-offset:1px; }

/* -- 2.1.1 Champ date agrandi (plus large + police plus grande) -- */
#startDate{
  width:160px;
  font-size:17px;
  padding:8px 10px;
}

/* -- 2.2 GPX import / reset buttons -- */
.gpx-import{ display:flex; flex-direction:column; gap:4px; }
.gpx-import label.btn{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:13px; padding:7px 12px; border-radius:6px;
  cursor:pointer; white-space:nowrap; text-align:center;
}
.gpx-import label.btn:hover{ border-color:var(--route); }
.gpx-import input[type="file"]{ display:none; }

.gpx-reset{
  background:none; border:1px solid var(--border); color:var(--muted);
  font-family:var(--mono); font-size:12px; padding:4px 8px; border-radius:6px; cursor:pointer;
}
.gpx-reset:hover{ color:var(--text); border-color:var(--route); }

/* -- 2.3 Summary stats + badge -- */
.summary{ display:flex; gap:22px; flex-wrap:wrap; }
.summary .stat{ display:flex; flex-direction:column; gap:2px; }
.summary .stat .v{ font-family:var(--mono); font-size:17px; font-weight:600; }
.summary .stat .l{ font-size:11px; color:var(--muted); }

.badge{
  font-size:11px; color:var(--route); border:1px solid var(--route);
  border-radius:20px; padding:2px 9px; align-self:center;
}


/* ==========================================================================
   3. MAIN LAYOUT (map + sidebar)
   ========================================================================== */
main{ display:flex; height:calc(100vh - 92px); min-height:520px; }
#map{ flex:1 1 60%; background:#0e1012; }
aside{ flex:0 0 400px; max-width:44%; border-left:1px solid var(--border); overflow-y:auto; background:var(--panel); }

.status{ padding:14px 18px; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); }

.empty{ padding:24px 18px; color:var(--muted); font-size:13.5px; line-height:1.5; }


/* ==========================================================================
   4. POINT / NOTIFICATION LIST ITEMS (.pn-item)
   ========================================================================== */
.pn-item{ padding:14px 18px; border-bottom:1px solid var(--border); cursor:pointer; border-left:3px solid transparent; }
.pn-item:hover{ background:var(--panel-2); }

/* -- 4.1 Risk level variants -- */
.pn-item.risk-watch{ border-left-color:var(--red); background:rgba(209,73,91,0.06); }
.pn-item.risk-watchlo{ border-left-color:var(--amber); background:rgba(226,166,64,0.05); }
.pn-item.risk-low{ border-left-color:var(--route); }

/* -- 4.2 Item content -- */
.pn-item .row1{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pn-item .time{ font-family:var(--mono); font-size:22px; font-weight:700; }
.pn-item .line{
  font-family:var(--mono); font-size:12px; color:var(--amber);
  background:rgba(226,166,64,0.12); padding:2px 8px; border-radius:20px; white-space:nowrap;
}
.pn-item .km{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:4px; }
.pn-item .meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.pn-item .note{
  font-size:11.5px; color:var(--muted); margin-top:6px;
  padding-top:6px; border-top:1px dashed var(--border);
}

/* -- 4.3 Train status tag (color variants) -- */
.pn-item .train{ font-size:13px; margin-top:8px; padding:6px 10px; border-radius:6px; }
.pn-item .train.watch{ background:rgba(209,73,91,0.15); color:#f2a3ac; }
.pn-item .train.watchlo{ background:rgba(226,166,64,0.15); color:var(--amber); }
.pn-item .train.low{ background:rgba(79,157,105,0.12); color:var(--route); }


/* ==========================================================================
   5. LEAFLET MAP POPUP OVERRIDES
   ========================================================================== */
.leaflet-popup-content-wrapper{ background:var(--panel-2); color:var(--text); }
.leaflet-popup-tip{ background:var(--panel-2); }
.popup-time{ font-family:var(--mono); font-size:18px; font-weight:700; }
.popup-line{ font-family:var(--mono); font-size:12px; color:var(--amber); }


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 780px){
  main{ flex-direction:column; height:auto; }
  #map{ height:46vh; }
  aside{ max-width:100%; flex:1 1 auto; }
}