:root{
  --ink:#1B1F23;
  --paper:#F7F4EC;
  --paper-2:#EFEAE0;
  --route:#2D5C4D;
  --route-soft:#bcd3c8;
  --stop:#C8602F;
  --stop-soft:#ecd2c2;
  --muted:#8A8578;
  --line:#dcd6c6;
  --white:#FFFEFB;
  --danger:#B23A2E;
  --shadow: 0 6px 24px rgba(27,31,35,0.18);
  --radius: 2px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--ink);overflow:hidden;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
}

/* ---------- TRIP STATUS BANNER ---------- */
.status-banner{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  flex-shrink:0;
  z-index:51;
  border-bottom:1px solid #000;
}
.status-banner.show{display:flex;}
.status-banner.upcoming{background:#2b3a4a;color:#cfe0ee;}
.status-banner.ontrack{background:#1f3d33;color:#cdebd9;}
.status-banner.atstop{background:#3a3220;color:#f0e0b8;}
.status-banner.delayed{background:#4a221d;color:#f5cfc6;}
.status-banner.finished{background:#2a2a2a;color:#cfcfcf;}
.status-banner .dot{
  width:8px;height:8px;border-radius:50%;
  background:currentColor;
  flex-shrink:0;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.status-banner b{font-weight:700;}
.status-banner .sb-action{
  margin-left:auto;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  color:inherit;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  padding:4px 9px;
  border-radius:var(--radius);
  cursor:pointer;
  flex-shrink:0;
}
.status-banner .sb-action:hover{background:rgba(255,255,255,0.22);}

.sim-panel{
  display:none;
  position:absolute;
  top:48px;
  right:16px;
  z-index:1200;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  width:260px;
}
.sim-panel.open{display:block;}
.sim-panel h4{
  font-family:'Fraunces',serif;
  font-size:13px;
  margin:0 0 10px;
}
.sim-panel label{
  display:block;
  font-size:10.5px;
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.sim-panel input[type="range"]{width:100%;margin-bottom:4px;}
.sim-panel .sim-value{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  margin-bottom:10px;
  color:var(--ink);
}
.sim-panel .sim-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.sim-toggle{
  position:relative;
  width:36px;height:20px;
  background:var(--line);
  border-radius:10px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease;
}
.sim-toggle.on{background:var(--danger);}
.sim-toggle .knob{
  position:absolute;
  top:2px;left:2px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--white);
  transition:left .15s ease;
}
.sim-toggle.on .knob{left:18px;}
.sim-panel .sim-reset{
  width:100%;
  margin-top:2px;
}
.budget-field{margin-bottom:9px;}
.budget-field input[type="number"]{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--ink);
}
.budget-summary{
  margin-top:4px;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.budget-summary .bs-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:11.5px;
  color:var(--muted);
  margin-bottom:5px;
}
.budget-summary .bs-row span:last-child{
  font-family:'JetBrains Mono',monospace;
  color:var(--ink);
}
.budget-summary .bs-total{
  font-size:13px;
  color:var(--ink);
  font-weight:600;
  margin-top:8px;
  margin-bottom:0;
}
.budget-summary .bs-total span:last-child{font-size:15px;}
.budget-summary .bs-note{
  font-size:9.5px;
  color:var(--muted);
  margin-top:8px;
  line-height:1.3;
}

/* ---------- TOP BAR ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:var(--ink);
  color:var(--paper);
  z-index:50;
  flex-shrink:0;
  border-bottom:1px solid #000;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:8px;
}
/* ⬇️ NUOVO (Step 2): impila .brand + .status-banner in colonna,
   cosi' il banner di stato appare sotto il titolo invece che come
   riga a piena larghezza sopra la topbar. */
.brand-col{
  display:flex;
  flex-direction:column;
  gap:4px;
}
/* Il banner, annidato qui sotto al titolo, non deve piu' comportarsi
   da barra a piena larghezza: via bordo e padding laterale pensati
   per l'header intero. */
.brand-col .status-banner{
  padding:2px 0;
  border-bottom:none;
}
.brand .mark{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:-0.02em;
}
.brand .sub{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.topbar-actions{display:flex;gap:8px;align-items:center;}
.icon-btn{
  background:transparent;
  border:1px solid #3a3f44;
  color:var(--paper);
  width:36px;height:36px;
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:16px;
  transition:background .15s ease;
}
.icon-btn:hover{background:#2a2f34;}
.icon-btn.active{background:var(--route);border-color:var(--route);}

/* ---------- LAYOUT BODY ---------- */
.body-area{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  overflow:hidden;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:340px;
  max-width:88vw;
  background:var(--white);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  z-index:40;
  transform:translateX(0);
  transition:transform .25s ease;
  flex-shrink:0;
}
.sidebar.collapsed{
  transform:translateX(-100%);
  position:absolute;
  height:100%;
}
.sidebar-header{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--line);
}
.sidebar-header h2{
  font-family:'Fraunces',serif;
  font-size:18px;
  margin:0 0 4px;
  font-weight:600;
}
.trip-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--muted);
}
.add-stop-form{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.add-stop-form .row{display:flex;gap:6px;}
.add-stop-form input{
  flex:1;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-size:13px;
  background:var(--white);
}
.add-stop-form input:focus{outline:2px solid var(--route);outline-offset:1px;}
.btn{
  border:none;
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  padding:9px 14px;
  transition:filter .15s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--route);color:var(--white);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--paper-2);}
.btn-danger-text{background:transparent;color:var(--danger);border:none;font-size:12px;padding:4px 6px;}
.geo-status{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
  min-height:14px;
}
.geo-suggestions{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  max-height:160px;
  overflow-y:auto;
}
.geo-suggestion{
  text-align:left;
  background:var(--white);
  border:1px solid var(--line);
  padding:7px 9px;
  font-size:12px;
  border-radius:var(--radius);
  cursor:pointer;
}
.geo-suggestion:hover{background:var(--stop-soft);}

.stops-list{
  flex:1;
  overflow-y:auto;
  padding:8px 0 90px;
}
.stop-card{
  position:relative;
  margin:0 12px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.stop-card.selected{
  border-color:var(--stop);
  box-shadow:0 0 0 1px var(--stop);
}
.stop-card.is-current{
  border-color:#2D5C4D;
  box-shadow:0 0 0 1px #2D5C4D;
}
.stop-card.is-current .stop-num{background:#2D5C4D;}
.current-flag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  background:var(--route);
  color:var(--white);
  padding:1px 6px;
  border-radius:8px;
  margin-left:6px;
  vertical-align:middle;
}
.delay-flag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  background:var(--danger);
  color:var(--white);
  padding:1px 6px;
  border-radius:8px;
  margin-left:6px;
  vertical-align:middle;
}
.stop-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
}
.stop-num{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:13px;
  color:var(--white);
  background:var(--stop);
  width:24px;height:24px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.stop-info{flex:1;min-width:0;}
.stop-name{font-weight:600;font-size:13.5px;line-height:1.25;}
.stop-dates{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  color:var(--muted);
  margin-top:2px;
}
.stop-remove{
  background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:16px;padding:4px;line-height:1;
  flex-shrink:0;
}
.stop-remove:hover{color:var(--danger);}
.transfer-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 46px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--route);
  background:var(--paper-2);
  border-top:1px dashed var(--line);
}
.transfer-row .dot{width:5px;height:5px;border-radius:50%;background:var(--route);}
.transfer-row.loading{color:var(--muted);}

/* expanded panel inside a stop */
.stop-detail{
  border-top:1px solid var(--line);
  background:var(--paper-2);
  padding:10px 12px 12px;
  display:none;
}
.stop-card.open .stop-detail{display:block;}
.cat-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:8px;
}
.cat-tab{
  flex:0 0 auto;
  text-align:center;
  font-size:11px;
  font-weight:600;
  padding:6px 8px;
  border-radius:var(--radius);
  background:var(--white);
  border:1px solid var(--line);
  cursor:pointer;
  color:var(--muted);
}
.cat-tab.active{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.cat-panel{display:none;}
.cat-panel.active{display:block;}
.poi-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 9px;
  margin-bottom:6px;
}
.poi-icon{font-size:14px;margin-top:1px;}
.poi-body{flex:1;min-width:0;}
.poi-name{font-size:12.5px;font-weight:600;}
.poi-sub{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px;}
.poi-source{
  display:inline-block;
  margin-top:3px;
  font-size:9.5px;
  font-family:'JetBrains Mono',monospace;
  padding:1px 5px;
  border-radius:8px;
  letter-spacing:.04em;
}
.poi-source.mine{background:var(--route-soft);color:var(--route);}
.poi-source.suggested{background:var(--stop-soft);color:var(--stop);}
.poi-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;}
.poi-add-row{display:flex;gap:5px;margin-top:4px;}
.poi-add-row input{
  flex:1;
  font-size:12px;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.poi-add-row button{
  background:var(--ink);color:var(--paper);border:none;
  border-radius:var(--radius);padding:0 10px;font-size:13px;cursor:pointer;
}
.suggest-btn{
  width:100%;
  margin-top:2px;
  background:transparent;
  border:1px dashed var(--muted);
  color:var(--muted);
  font-size:11.5px;
  padding:7px;
  border-radius:var(--radius);
  cursor:pointer;
}
.suggest-btn:hover{border-color:var(--ink);color:var(--ink);}
.diary-box{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.diary-label{
  display:block;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:5px;
}
.diary-input{
  width:100%;
  box-sizing:border-box;
  min-height:64px;
  resize:vertical;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:12.5px;
  color:var(--ink);
  line-height:1.4;
}
.diary-input:focus{outline:none;border-color:var(--route);}
.diary-flag{
  font-size:11px;
  margin-left:6px;
}

.photo-box{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.photo-preview{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.photo-preview img{width:72px;height:72px;object-fit:cover;border:1px solid var(--line);border-radius:8px;}
.dates-row{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}
.dates-row .field{flex:1;}
.dates-row label{
  display:block;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.dates-row input{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px 7px;
  font-size:12px;
  font-family:'JetBrains Mono',monospace;
}

.sidebar-footer{
  border-top:1px solid var(--line);
  padding:10px 16px;
  display:flex;
  gap:8px;
}
.sidebar-footer .btn{flex:1;}

/* ---------- MAP ---------- */
.map-wrap{
  position:relative;
  flex:1;
  min-width:0;
}
#map{
  width:100%;
  height:100%;
  background:#dfe7e1;
}
.leaflet-popup-content-wrapper{
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{background:var(--white);}

.map-toggle-mobile{
  position:absolute;
  top:12px;
  left:12px;
  z-index:30;
  background:var(--ink);
  color:var(--paper);
  border:none;
  width:38px;height:38px;
  border-radius:var(--radius);
  font-size:17px;
  cursor:pointer;
  box-shadow:var(--shadow);
  display:none;
}

/* ---------- TIMELINE (signature element) ---------- */
.timeline-wrap{
  flex-shrink:0;
  background:var(--ink);
  border-top:1px solid #000;
  padding:10px 18px 12px;
  position:relative;
  z-index:35;
}
.timeline-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.timeline-head h3{
  font-family:'Fraunces',serif;
  color:var(--paper);
  font-size:13px;
  margin:0;
  font-weight:600;
  letter-spacing:.01em;
}
.timeline-head .totals{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  color:var(--muted);
}
.timeline-track{
  position:relative;
  height:64px;
  overflow-x:auto;
  overflow-y:hidden;
  display:flex;
  align-items:center;
  scrollbar-width:thin;
}
.timeline-track::-webkit-scrollbar{height:5px;}
.timeline-track::-webkit-scrollbar-thumb{background:#3a3f44;border-radius:4px;}
.timeline-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  min-width:max-content;
  padding:0 10px;
}
.tl-segment{
  display:flex;
  align-items:center;
  height:100%;
  flex-shrink:0;
}
.tl-station{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  cursor:pointer;
  min-width:78px;
}
.tl-station .dot{
  width:13px;height:13px;
  border-radius:50%;
  background:var(--stop);
  border:2px solid var(--ink);
  box-shadow:0 0 0 1px #4a4f54;
  z-index:2;
}
.tl-station.active .dot{background:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,0.3);}
.tl-station.current .dot{
  background:#5ec98f;
  box-shadow:0 0 0 4px rgba(94,201,143,0.35);
  animation:pulse 2s infinite;
}
.tl-station.delayed .dot{
  background:var(--danger);
  box-shadow:0 0 0 4px rgba(178,58,46,0.3);
}
.tl-station .label{
  font-size:10.5px;
  color:var(--paper);
  font-weight:600;
  margin-top:5px;
  white-space:nowrap;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tl-station .days{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  color:var(--muted);
  margin-top:1px;
}
.tl-connector{
  flex-shrink:0;
  height:2px;
  background:repeating-linear-gradient(90deg, var(--route) 0 6px, transparent 6px 11px);
  position:relative;
  margin:0 2px;
}
.tl-connector .time-chip{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  background:#23282d;
  color:var(--route-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  padding:2px 6px;
  border-radius:8px;
  white-space:nowrap;
  border:1px solid #3a3f44;
}
.tl-empty{
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  font-size:11px;
  padding:18px 4px;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .sidebar{
    position:absolute;
    height:100%;
    width:86vw;
    box-shadow:var(--shadow);
  }
  .sidebar.collapsed{transform:translateX(-100%);}
  .sidebar:not(.collapsed){transform:translateX(0);}
  .map-toggle-mobile{display:flex;align-items:center;justify-content:center;}
  .topbar .brand .sub{display:none;}
  .timeline-wrap{padding:8px 10px 10px;}
  .tl-station{min-width:64px;}
  .tl-station .label{max-width:64px;font-size:9.5px;}
}

.empty-state{
  padding:28px 18px;
  text-align:center;
  color:var(--muted);
}
.empty-state .mark{
  font-family:'Fraunces',serif;
  font-size:15px;
  color:var(--ink);
  margin-bottom:4px;
  display:block;
}
.empty-state p{font-size:12px;line-height:1.5;margin:6px 0 0;}

/* leaflet custom marker */
.stop-pin{
  width:28px;height:28px;
  border-radius:50% 50% 50% 0;
  background:var(--stop);
  transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--white);
  box-shadow:0 2px 5px rgba(0,0,0,0.35);
}
.stop-pin .pin-num{
  transform:rotate(45deg);
  color:var(--white);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
}
.live-pin{
  width:20px;height:20px;
  border-radius:50%;
  background:#5ec98f;
  border:3px solid var(--white);
  box-shadow:0 0 0 4px rgba(94,201,143,0.35), 0 2px 6px rgba(0,0,0,0.4);
  animation:pulse 1.8s infinite;
}
.poi-pin{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;
}
.poi-legend{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:500;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:8px;
  max-width:200px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.poi-legend .legend-title{
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin:0 2px 3px;
}
.poi-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 5px;
  border-radius:8px;
  cursor:pointer;
  font-size:11.5px;
  color:var(--ink);
  user-select:none;
  transition:background .12s ease, opacity .12s ease;
}
.poi-legend-item:hover{background:var(--paper);}
.poi-legend-item .lg-icon{font-size:13px;line-height:1;width:16px;text-align:center;}
.poi-legend-item .lg-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.poi-legend-item .lg-count{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--muted);
}
.poi-legend-item.off{opacity:.4;}
.poi-legend-item.off .lg-label{text-decoration:line-through;}
.poi-legend-hint{
  font-size:9.5px;
  color:var(--muted);
  margin:3px 2px 0;
  line-height:1.3;
}
@media (max-width:760px){
  .poi-legend{max-width:150px;bottom:8px;left:8px;padding:6px;}
}

.gps-panel{position:absolute;top:60px;right:15px;z-index:900;background:#fff;padding:8px 10px;border:1px solid #dcd6c6;border-radius:8px;font-size:12px;box-shadow:0 6px 24px rgba(0,0,0,.15);}