/* Il dashboard: uno stile solo, semplice. Le variabili sono in cima perche' cambiare i colori
   non deve voler dire cercare sedici valori sparsi nel foglio. */
:root {
  --green: #0a7c3e;
  --green-dark: #085c2e;
  --gray-1: #f7f8fa;
  --gray-2: #eceef1;
  --gray-3: #d9dde2;
  --text: #1c2126;
  --text-muted: #61707d;
  --red: #a71d2a;
  --radius: 10px;
  --sidebar: 232px;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); background: var(--gray-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--gray-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ── guscio ─────────────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar); background: #fff;
  border-right: 1px solid var(--gray-3); display: flex; flex-direction: column;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 18px 18px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.brand-name { font-weight: 700; letter-spacing: -.2px; }

.org { padding: 0 18px 14px; }
.org-name { font-size: 12px; color: var(--text-muted); margin-bottom: 6px;
            text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.org-switch {
  width: 100%; padding: 7px 9px; border: 1px solid var(--gray-3); border-radius: 8px;
  background: #fff; font-size: 13px;
}

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; flex: 1; }
.nav-item {
  display: block; padding: 8px 10px; border-radius: 8px; color: var(--text);
  font-size: 13.5px; border: none; background: none; text-align: left; width: 100%;
  cursor: pointer; font-family: inherit;
}
.nav-item:hover { background: var(--gray-2); text-decoration: none; }
.nav-item.active { background: #e6f4ea; color: var(--green-dark); font-weight: 600; }
.nav-exit { color: var(--text-muted); }
.nav-soon { color: #9aa4ad; cursor: default; display: flex;
              justify-content: space-between; align-items: center; }
.nav-soon-note { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
                   background: var(--gray-2); padding: 1px 6px; border-radius: 20px; }
.sidebar-foot { padding: 10px; border-top: 1px solid var(--gray-2); margin-top: 10px; }

/* ── content ──────────────────────────────────────────────────────────── */
.content { flex: 1; padding: 30px 34px; max-width: 1000px; min-width: 0; }

/* Una pagina che vuole tutta la larghezza (la pianificazione, con la mappa a destra). Il
   `max-width` del contenuto esiste per le pagine di lettura, dove una riga di 1000 px è già
   lunga; una mappa no. Senza questa variante il pannello si mangia 430 px e la mappa resta una
   colonnina in mezzo al vuoto. */
.content.content-full { max-width: none; padding: 0; }
.page-head h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.4px; }
.subtitle { color: var(--text-muted); margin: 0 0 24px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card {
  background: #fff; border: 1px solid var(--gray-3); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px;
}
.grid .card { margin-bottom: 0; }
.card h2 { font-size: 15px; margin: 0 0 6px; }
.card-text { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.soon { font-size: 11px; color: var(--text-muted); text-transform: uppercase;
             letter-spacing: .5px; font-weight: 700; }

.button {
  display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13px;
  font-weight: 600; border: 1px solid var(--gray-3); background: #fff; color: var(--text);
  cursor: pointer; font-family: inherit;
}
.button:hover { background: var(--gray-2); text-decoration: none; }
.button.pieno { background: var(--green); border-color: var(--green); color: #fff; width: 100%; }
.button.pieno:hover { background: var(--green-dark); }

/* ── tabelle ────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
              color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid var(--gray-3); }
.table td { padding: 8px 0; border-bottom: 1px solid var(--gray-2); }
.table .empty { color: var(--text-muted); text-align: center; padding: 18px 0; }

/* ── form ───────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 4px; }
.form.narrow { max-width: 380px; }
.form label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 10px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--gray-3); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.form input:focus, .form select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(10,124,62,.13);
}
.form .button { margin-top: 18px; }

.error, .field-error {
  background: #fdecea; color: var(--red); border: 1px solid #f5c6cb;
  border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin: 6px 0;
}
.messages { margin-bottom: 18px; }
.messageso { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 6px;
             background: #e6f4ea; color: var(--green-dark); }
.messageso.error { background: #fdecea; color: var(--red); }

/* ── pagine di accesso ──────────────────────────────────────────────────── */
.pagina-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
  background: #fff; border: 1px solid var(--gray-3); border-radius: 14px;
  padding: 28px 30px 24px; width: 100%; max-width: 380px;
}
.auth-card .brand { padding: 0 0 18px; }
.auth-title { font-size: 21px; margin: 0 0 4px; letter-spacing: -.3px; }
.auth-sottotitle { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.auth-link { font-size: 12.5px; color: var(--text-muted); margin: 18px 0 0; text-align: center; }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--gray-3); }
  .content { padding: 20px; }
}

/* ── tappe nel pianificatore ────────────────────────────────────────────── */
.stops-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.stop-row { position: relative; display: flex; flex-direction: column; gap: 3px; }
.stop-name { font-size: 11.5px; font-weight: 700; color: #61707d;
             text-transform: uppercase; letter-spacing: .5px; }
.stop-input {
  width: 100%; padding: 10px 11px; border: 1px solid #d9dde2; border-radius: 8px;
  font-size: 14px; font-family: inherit;
}
.stop-input:focus { outline: none; border-color: #0a7c3e; box-shadow: 0 0 0 3px rgba(10,124,62,.13); }
.stop-remove {
  position: absolute; right: 6px; top: 24px; width: 28px; height: 28px;
  border: none; background: none; color: #a71d2a; font-size: 20px; cursor: pointer;
  line-height: 1;
}
.sugg {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff;
  border: 1px solid #d9dde2; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.10);
  max-height: 220px; overflow-y: auto;
}
.sugg-item { padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.sugg-item:hover { background: #f1f4f7; }

.times { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.times span { color: #61707d; }
.hint { font-size: 11.5px; color: #61707d; margin-top: 2px; }
.link-button { background: none; border: none; color: #0a7c3e; cursor: pointer;
  font-size: 13px; font-family: inherit; padding: 0; margin-top: 6px; font-weight: 600; }
.link-button:hover { text-decoration: underline; }

.preview { background: #fff; border: 1px solid #d9dde2; border-radius: 10px;
  padding: 14px 16px; margin: 18px 0; }
.preview-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
.preview-row span { color: #61707d; }


/* Quando WebGL non c'è la mappa resta un rettangolo con il motivo: nessun ripiego su tile
   raster di OSM, che ci hanno bloccato. */
.map-no-webgl {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 24px; text-align: center; color: #61707d; font-size: 13px;
  background: repeating-linear-gradient(45deg, #f4f6f8, #f4f6f8 10px, #eef1f4 10px, #eef1f4 20px);
}

/* La voce evidenziata dalla tastiera nell'autocomplete. Deve **vedersi**: una navigazione
   invisibile è come non averla. */
.sugg-item.scelto { background: #eaf5ee; }

/* ── Le tappe e lo stato nella pagina del viaggio ───────────────────────────── */
.stops-readonly { list-style: none; padding: 0; margin: 0; }
.riga-tappa { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.tappa-sigla { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* La posizione esatta: un punto, perché il vettore ne ha diritto. */
.punto-esatto { width: 14px; height: 14px; border-radius: 50%; background: #111827;
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .35), 0 1px 4px rgba(0, 0, 0, .4); }

.trip-state { font-weight: 700; }
.trip-state-on_time { color: #1f8a4c; }
.trip-state-at_risk { color: #a3670a; }
.trip-state-late { color: #b3261e; }
.trip-state-pending, .trip-state-delivered { color: #61707d; }

/* Un viaggio di simulazione deve **dichiararsi**: un orologio finto che sembra vero è peggio
   di nessuna simulazione. */
.sim-banner { background: #fff4e5; border: 1px solid #e0a45c; color: #6b4400;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }