/* ============================================================
   TEMA OCEANO — Travel Plan (layer di override)
   Caricato DOPO app.css: per disattivarlo basta rimuovere il link.
   Nota: fissa l'app in modalità chiara (il vecchio dark auto è sospeso).
   ============================================================ */
:root{
  --bg:#F6F8FB; --panel:#FFFFFF; --ink:#10151C; --muted:#7C8694;
  --line:#E2E7EE; --line-soft:#EDF1F6;
  --accent:#2563EB; --accent-soft:#EAF0FB;
  --danger:#9B3535; --danger-soft:#F5E1E1;
  --ok:#3F6224; --ok-soft:#E4EEDD;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,21,28,.05);
  --serif:'Space Grotesk','Inter',sans-serif; /* i titoli passano a Grotesk */

  /* Giorni "nebbia": distinti ma armonizzati con la palette fredda */
  --c-gray:#49545F;   --l-gray:#ECEFF2;
  --c-purple:#46408C; --l-purple:#E7E5F6;
  --c-teal:#1A574B;   --l-teal:#DCEDE8;
  --c-amber:#7A5A1F;  --l-amber:#F4EBD8;
  --c-pink:#83365B;   --l-pink:#F4E2EA;
  --c-blue:#23508F;   --l-blue:#E0E9F7;
  --c-coral:#7C3A23;  --l-coral:#F5E3DC;
  --c-green:#3F6224;  --l-green:#E4EEDD;
  --c-red:#893030;    --l-red:#F5E1E1;
}

/* Titoli leggermente più stretti, da mockup */
h1,h2,h3{ letter-spacing:-.3px; }

/* Card: bordo netto, micro-lift in hover sugli elementi cliccabili */
.trip-card, .plan-card{ border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .18s, border-color .18s; }
.trip-card:hover, .plan-card:hover{ transform:translateY(-2px); border-color:var(--ink); }

/* Bottoni: angoli Oceano */
button, .btn{ border-radius:var(--radius-sm); }

/* Logo nella login (immagine caricata dalle Impostazioni di Stopazzo) */
.login-logo-img{ max-width:200px; max-height:72px; display:block; margin:0 auto 10px; }

/* ============================================================
   Rifiniture MOBILE (richieste post-test)
   ============================================================ */
@media (max-width: 700px){
  /* Riga tappa — riga 1: drag, numero, tag tipo + menu ⋯ a destra;
     riga 2: freccetta + titolo */
  .stop{ display:flex; flex-wrap:wrap; align-items:center; }
  .stop .drag-handle{ order:1; }
  .stop .stop-bullet{ order:2; }
  .stop .stop-type-mobile{ order:3; }
  .stop .stop-menu{ order:4; margin-left:auto; }
  .stop .stop-toggle{ order:5; flex:0 0 24px; }
  .stop .stop-main{ order:6; flex:1 1 calc(100% - 40px); min-width:0; align-self:flex-start; }

  /* Filtri tipo tappa: una sola riga scorrevole, niente wrap confuso */
  .filter-bar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:4px; margin-left:-16px; margin-right:-16px;
    padding-left:16px; padding-right:16px; }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .filter-bar .filter-btn{ flex:0 0 auto; white-space:nowrap; }
}

/* Separatore nel menu Strumenti + cestino giorno leggibile */
.tools-sep{ height:1px; background:var(--line); margin:6px 0; }
.del-day{ color:var(--danger); }
.del-day svg{ display:block; }

/* ---- Card giorno MOBILE: freccetta + data + azioni / titolo / sottotitolo / tag ---- */
@media (max-width: 700px){
  .day-head{ display:flex; flex-wrap:wrap; align-items:center; row-gap:6px; }
  .day-head .day-collapse{ order:1; }
  .day-head .day-badge{ order:2; display:inline-flex; flex-direction:row; align-items:baseline;
    gap:4px; padding:3px 9px; border-radius:7px; width:auto; height:auto; }
  .day-head .day-badge .n{ font-size:13px; }
  .day-head .day-badge .m{ font-size:10px; }
  .day-head .day-actions{ order:3; margin-left:auto; }
  .day-head .day-titles{ order:4; flex:1 1 100%; min-width:0; }
  .day-head .day-loc{ order:5; }
}

/* ============================================================
   Lista tappe: fondi alternati SOLO sulle tappe-attività;
   hotel / trasferimenti / avvisi mantengono i loro colori.
   Niente bordi sulle righe: solo colore di fondo.
   ============================================================ */
.stops > .stop.k-stop:nth-of-type(odd){ background:#FAFAFA; }
.stops > .stop.k-stop:nth-of-type(even){ background:#FFFFFF; }

.stop{ border-bottom:none; border-radius:8px; }
.stop.k-stop, .stop.k-hotel, .stop.k-transfer, .stop.k-alert{ border:none; }
.stop{ padding-left:9px; padding-right:9px; }

/* ============================================================
   Toolbar piano su DESKTOP: come la versione mobile
   Strumenti ▾ + Mappa + Chiudi tutto + Giorno su una riga piena;
   filtri centrati nella riga sotto
   ============================================================ */
@media (min-width: 701px){
  .page-head{ flex-wrap:wrap; }
  .plan-toolbar{ position:relative; width:100%; flex-wrap:nowrap; justify-content:stretch; }
  .tools-toggle{ display:inline-flex; align-items:center; justify-content:center; flex:1; }
  .plan-tools{ display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:6px; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:10px; min-width:240px;
    box-shadow:0 8px 24px rgba(16,21,28,.10); }
  .plan-tools.open{ display:flex; }
  .plan-tools .btn, .plan-tools .history-toggle{ width:100%; justify-content:center; }
  .plan-primary{ flex:3; display:flex; gap:9px; }
  .plan-primary .btn{ flex:1; justify-content:center; text-align:center; }
  .filter-bar{ justify-content:center; }
}

/* Schermata "Accesso non consentito" */
.blocked-screen{ max-width:430px; margin:14vh auto 0; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:36px 30px; }
.blocked-screen .blocked-icon{ font-size:2.4rem; margin-bottom:10px; }
.blocked-screen p{ color:var(--muted); margin:8px 0 20px; }

/* ============================================================
   Azioni riga tappa: menu ⋯ unico anche su DESKTOP
   (i pulsanti inline ⧉ ✎ 🗑 vengono nascosti ovunque)
   ============================================================ */
.stop-menu{ display:block; }
.stop-edit{ display:none; }

/* ============================================================
   Modali: mai tagliati — altezza massima e scroll interno
   ============================================================ */
.overlay{ align-items:center; padding:14px; z-index:200; }
.modal{ max-height:calc(100dvh - 28px); display:flex; flex-direction:column; width:min(560px, 100%); }
.modal-head{ flex-shrink:0; }
.modal-body{ overflow-y:auto; flex:1 1 auto; min-height:0; }
.modal-foot{ flex-shrink:0; }
@media (max-width:700px){
  .overlay{ align-items:flex-end; padding:0; }
  /* lascio spazio in alto e tengo conto della safe-area inferiore (notch/barra) */
  .modal{ max-height:92dvh; border-radius:16px 16px 0 0; }
  /* modello flex pulito: header e footer fissi, solo il corpo scorre.
     Annullo il position:sticky ereditato che su alcuni browser mobile tagliava i pulsanti. */
  .modal-head{ position:static; }
  .modal-foot{
    position:static;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    background:var(--panel);
  }
  .modal-foot .btn{ flex:1; justify-content:center; }
}

/* Desktop: pulsante Modifica inline accanto al menu ⋯ */
@media (min-width:701px){
  .stop-edit{ display:flex; }
  .stop-edit .dup-stop, .stop-edit .del-stop{ display:none; }
}

/* ============================================================
   Vista condivisa (#share/...): sola lettura, niente azioni
   ============================================================ */
.share-view .stop-menu, .share-view .stop-edit, .share-view .drag-handle,
.share-view .mynote-add, .share-view .mynote-edit, .share-view .stop-mynote{ display:none !important; }
.share-view .wrap{ max-width:880px; }

/* ============================================================
   Mappa del giorno (Leaflet incorporata)
   ============================================================ */
.day-map-panel{ margin:0 14px 12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--mist); }
.daymap-msg{ padding:14px 16px; font-size:13px; color:var(--muted); line-height:1.5; }
.daymap-canvas{ width:100%; height:300px; }
.day-map-panel .leaflet-container{ font-family:var(--font-b); }
@media (max-width:700px){ .daymap-canvas{ height:240px; } }

/* Barra strumenti mappa del giorno */
.daymap-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.daymap-legend{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.daymap-legend i{ display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; }
.daymap-legend .lg-stop{ background:#2563EB; }
.daymap-legend .lg-hotel{ background:#1A574B; }
.daymap-recalc{ font-size:12px; padding:5px 10px; border:1px solid var(--line); border-radius:8px; background:var(--mist); color:var(--ink); cursor:pointer; }
.daymap-recalc:hover{ border-color:var(--accent); color:var(--accent); }

/* Mappa del giorno: tieni i layer Leaflet sotto le modal/overlay */
.day-map-panel{ position:relative; z-index:0; }
.day-map-panel .leaflet-pane,
.day-map-panel .leaflet-top,
.day-map-panel .leaflet-bottom{ z-index:1 !important; }
.day-map-panel .leaflet-control{ z-index:2 !important; }

/* Wizard generatore AI: righe a due colonne */
.ai-row{ display:flex; gap:12px; }
.ai-row .field{ flex:1; }
@media (max-width:600px){ .ai-row{ flex-direction:column; gap:0; } }

/* Spinner per la generazione AI */
.ai-spin{
  display:inline-block; width:16px; height:16px; flex:none;
  border:2px solid var(--border, #d0d7e2); border-top-color:var(--c-blue, #2563EB);
  border-radius:50%; animation:ai-spin .8s linear infinite;
}
@keyframes ai-spin{ to{ transform:rotate(360deg); } }

/* Selettore lingua nel menu utente */
.menu-lang{ display:flex; gap:6px; padding:6px 10px; }
.menu-lang-btn{
  flex:1; padding:6px 8px; border:1px solid var(--border,#e6e9ef); background:transparent;
  border-radius:8px; cursor:pointer; font-size:12.5px; transition:all .15s;
}
.menu-lang-btn:hover{ background:var(--mist,#f3f6fb); }
.menu-lang-btn.on{ border-color:var(--c-blue,#2563EB); background:var(--l-blue,#eef3ff); font-weight:600; }

/* Tipo tappa: Ristorante */
/* Ristorante: layout identico a tappa, sfondo leggero ambra per distinguerlo */
.stop.k-restaurant{ border:none; }
.stops > .stop.k-restaurant{ background:#FFFaf3; }
.kind-tag.k-restaurant{ background:#FFF3E0; color:#E65100; }

/* Badge spesa AI */
.ai-cost-badge{
  display:inline-block; font-weight:600; color:var(--c-blue,#2563EB);
  background:var(--l-blue,#eef3ff); padding:1px 8px; border-radius:8px; font-size:12px;
}

/* Badge stato traduzione (cliccabili per modifica manuale) */
.tr-badge{
  display:inline-block; font-size:10.5px; font-weight:600; vertical-align:middle;
  padding:1px 6px; border-radius:6px; margin-left:4px; cursor:pointer; white-space:nowrap;
}
.tr-badge.tr-missing{ background:#FFF3E0; color:#E65100; }
.tr-badge.tr-stale{ background:#FFFDE7; color:#F9A825; }
.tr-badge:hover{ filter:brightness(0.95); }

/* Banner avviso giorni mancanti rispetto alle date del viaggio */
.date-warn{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#FFF8E1; border:1px solid #FFE082; color:#8D6E00;
  border-radius:12px; padding:11px 14px; margin:8px 0 14px;
}
.date-warn-txt{ flex:1; font-size:13px; line-height:1.45; min-width:200px; }
.date-warn-list{ color:#A57C00; font-weight:600; }
.date-warn .btn{ flex-shrink:0; }