:root {
  --bg-dark:     #EDF4FB;
  --bg-card:     #FFFFFF;
  --bg-card2:    #F4F8FD;
  --bg-input:    #F7FAFD;
  --accent:      #1565C0;
  --accent-hover:#0D47A1;
  --accent2:     #0288D1;
  --text:        #0D2137;
  --text-muted:  #4A6685;
  --border:      #D0E4F7;
  --success:     #2E7D32;
  --danger:      #C62828;
  --info:        #0277BD;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --shadow:      0 2px 10px rgba(21,101,192,0.08);
  --surface:     #FFFFFF;
  --primary:     #1565C0;
  --primary-light:#DBEAFE;
  --hover-bg:    #F0F4FF;
}

[data-theme="dark"] {
  --bg-dark:     #0F1923;
  --bg-card:     #1A2535;
  --bg-card2:    #1C2840;
  --bg-input:    #202E42;
  --accent:      #4A90D9;
  --accent-hover:#5BA3E8;
  --accent2:     #38BDF8;
  --text:        #E8F1FB;
  --text-muted:  #7BA3C8;
  --border:      #253448;
  --success:     #4CAF50;
  --danger:      #EF5350;
  --info:        #29B6F6;
  --shadow:      0 2px 10px rgba(0,0,0,0.35);
  --surface:     #1A2535;
  --primary:     #4A90D9;
  --primary-light:#1E3A5F;
  --hover-bg:    #1E2D40;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
}

/* ── MATERIAL ICONS ── */
.mi {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.mi-sm { font-size: 14px; }
.mi-lg { font-size: 20px; }
.mi-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* ── LOGIN ── */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.login-card {
  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 44px 36px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: 50%;
}
.login-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 4px;
}
.login-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 28px;
  font-style: italic;
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-input {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 1rem;
  color: var(--text);
  text-align: center;
  letter-spacing: 3px;
  outline: none;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
.login-btn { width: 100%; padding: 13px; font-size: 1rem; font-weight: 700; border-radius: 10px; }
.login-error {
  color: var(--danger);
  font-size: 0.85rem;
  display: none;
}
.login-error.visible { display: block; }

/* ── Pagina Profilo (Cantiere 3) ── */
#page-profile input[type="text"],
#page-profile input[type="email"],
#page-profile input[type="password"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 11px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  width: 100%;
  max-width: 360px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#page-profile input:focus { border-color: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }

/* ── Tabs Login/Registrazione (Cantiere 2) ── */
.login-tabs {
  display: flex; gap: 0; margin: 0 0 16px;
  border: 1px solid #E5D3B0; border-radius: 999px;
  background: #FFFBF2; padding: 3px;
}
.login-tab {
  flex: 1; border: none; background: transparent;
  padding: 8px 12px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: #8B6F4C;
  cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.login-tab.active {
  background: linear-gradient(180deg, #D97706, #B45309);
  color: #FFFBF2;
  box-shadow: 0 1px 3px rgba(120,60,15,0.2);
}
.login-tab:not(.active):hover { color: #B45309; }

[data-theme="dark"] .login-tabs { background: #1A1208; border-color: #4A3520; }
[data-theme="dark"] .login-tab   { color: #B8956C; }
[data-theme="dark"] .login-tab.active { color: #1A1208; }

/* ── NAV ── */
nav {
  background: #1565C0;
  border-bottom: none;
  box-shadow: 0 1px 8px rgba(21,101,192,0.30);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px;
  text-decoration: none;
}
.nav-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
.nav-brand .brand-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
}
.nav-brand span { color: #fff; letter-spacing: 0.3px; }
.nav-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-btn.active { background: rgba(255,255,255,0.2); color: #fff; font-weight: 700; }
.nav-spacer { flex: 1; }
.nav-tagline {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(255,255,255,0.52);
  white-space: nowrap;
  transition: opacity 0.8s ease;
  letter-spacing: 0.1px;
}
.nav-settings {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-settings:hover { background: rgba(255,255,255,0.20); color: #fff; }

/* ── MOBILE BOTTOM NAV ── */
.mob-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(21,101,192,0.10);
  z-index: 110;
  height: 60px;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mob-nav-inner {
  display: flex;
  height: 100%;
}
.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mob-nav-item .mi { font-size: 19px; transition: all 0.2s; }
.mob-nav-item.active { color: var(--accent); }
.mob-nav-item.active .mi { font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.mob-nav-item:hover { color: var(--accent); }

/* ── LAYOUT ── */
#app-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 48px);
}

/* ── SIDEBAR ── */
#viaggi-sidebar {
  width: 196px;
  min-width: 196px;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow: hidden;
  transition: width 0.2s ease, min-width 0.2s ease;
  z-index: 50;
  box-shadow: 1px 0 4px rgba(0,0,0,0.04);
}
#viaggi-sidebar.collapsed {
  width: 42px;
  min-width: 42px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-header a:hover { color: #1565C0; }
.sidebar-header .mi-sm { color: #1565C0; flex-shrink: 0; }
#sidebar-toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.22s;
}
#viaggi-sidebar.collapsed #sidebar-toggle .mi { transform: rotate(180deg); }
#sidebar-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
#sidebar-list li {
  white-space: nowrap;
  overflow: hidden;
}
#sidebar-list li a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-size: 0.81rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}
#sidebar-list li a:hover { background: #F0F4FF; color: #1565C0; }
#sidebar-list li a.active { background: #DBEAFE; color: #1565C0; font-weight: 700; }
#sidebar-list li a .si-icon { flex-shrink: 0; font-size: 1rem; }
#sidebar-list li a .si-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#viaggi-sidebar.collapsed .sidebar-header span:not(#sidebar-toggle *):not(.mi-sm) { display: none; }
#viaggi-sidebar.collapsed .sidebar-footer { display: none; }
#viaggi-sidebar.collapsed #sidebar-list li a .si-name { display: none; }
#viaggi-sidebar.collapsed #sidebar-list li a { justify-content: center; padding: 8px; }
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sidebar-new-btn {
  width: 100%;
  flex-basis: 100%;
  background: #1565C0;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.15s;
}
.sidebar-new-btn:hover { background: #0D47A1; }

#app { padding: 16px; max-width: 1400px; margin: 0 auto; flex: 1; min-width: 0; }

.page { display: none; }
.page.active { display: block; }

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 1px 3px rgba(21,101,192,0.05);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── VIAGGI GRID ── */
.viaggi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 10px;
}
/* ═══════════════════════════════════════════════════════
   ── VIAGGIO CARDS — stile "diario di viaggio in pelle" ──
   ═══════════════════════════════════════════════════════ */
.viaggio-card {
  background:
    linear-gradient(135deg, rgba(245,158,11,0.025) 0%, rgba(180,83,9,0.015) 100%),
    linear-gradient(180deg, #FFFBF2 0%, #FAF3E0 100%);
  border: 1px solid #E5D3B0;
  border-radius: 12px;
  padding: 16px 16px 14px 22px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(120,60,15,0.06),
    0 3px 10px rgba(120,60,15,0.04),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Barra laterale "patch" colorata per stato */
.viaggio-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #D97706, #B45309);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.1);
}
/* Hover: leggero "lift" + ombra calda */
.viaggio-card:hover {
  border-color: #D97706;
  box-shadow:
    0 4px 8px rgba(120,60,15,0.10),
    0 8px 24px rgba(217,119,6,0.15),
    inset 0 1px 0 rgba(255,255,255,0.7);
  transform: translateY(-2px);
}
/* Bordo barra per stato */
.viaggio-card.completato::before       { background: linear-gradient(180deg, #65A30D, #4D7C0F); }
.viaggio-card.in-corso::before         { background: linear-gradient(180deg, #F59E0B, #D97706); box-shadow: inset -1px 0 0 rgba(0,0,0,0.1), 0 0 12px rgba(245,158,11,0.5); }
.viaggio-card.pianificato::before      { background: linear-gradient(180deg, #1565C0, #0D47A1); }
.viaggio-card.in-pianificazione::before{ background: linear-gradient(180deg, #92400E, #78350F); }

/* Differenziazione visiva per stato */
.viaggio-card.completato {
  opacity: 0.82;
  background: linear-gradient(135deg, rgba(101,163,13,0.04) 0%, rgba(77,124,15,0.02) 100%), linear-gradient(180deg, #F8F5EB 0%, #EDE6D2 100%);
}
.viaggio-card.completato .viaggio-nome { color: #6B5C45; }
.viaggio-card.completato:hover { opacity: 1; }

.viaggio-card.in-corso {
  border-color: rgba(217,119,6,0.55);
  background:
    linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(217,119,6,0.05) 100%),
    linear-gradient(180deg, #FFFBF2 0%, #FCEBC8 100%);
  box-shadow:
    0 2px 6px rgba(217,119,6,0.18),
    0 6px 18px rgba(245,158,11,0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.viaggio-card.in-corso:hover {
  border-color: #D97706;
  box-shadow:
    0 4px 10px rgba(217,119,6,0.25),
    0 10px 28px rgba(245,158,11,0.20),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.viaggio-card.pianificato {
  background: linear-gradient(135deg, rgba(21,101,192,0.04) 0%, rgba(13,71,161,0.02) 100%), linear-gradient(180deg, #FBFAF4 0%, #F2EAD2 100%);
  border-color: rgba(180,140,80,0.40);
}

.viaggio-card.in-pianificazione {
  background: linear-gradient(135deg, rgba(146,64,14,0.05) 0%, rgba(120,53,15,0.025) 100%), linear-gradient(180deg, #FCF6E8 0%, #F3E3C4 100%);
  border-color: rgba(146,64,14,0.35);
  border-style: dashed;
}
.viaggio-card.in-pianificazione:hover {
  border-style: solid;
  border-color: #92400E;
  box-shadow:
    0 4px 10px rgba(146,64,14,0.20),
    0 10px 28px rgba(146,64,14,0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Titolo viaggio: font display caldo */
.viaggio-card .viaggio-nome {
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: #3D2817;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

/* DARK MODE viaggio-card — pergamena scura */
[data-theme="dark"] .viaggio-card {
  background:
    linear-gradient(135deg, rgba(217,119,6,0.06) 0%, rgba(120,53,15,0.04) 100%),
    linear-gradient(180deg, #251A0E 0%, #1A1208 100%);
  border-color: #4A3520;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,200,120,0.08);
}
[data-theme="dark"] .viaggio-card:hover { border-color: #F59E0B; box-shadow: 0 4px 10px rgba(245,158,11,0.25), 0 10px 28px rgba(217,119,6,0.18), inset 0 1px 0 rgba(255,200,120,0.12); }
[data-theme="dark"] .viaggio-card .viaggio-nome { color: #F0DBB4; }
[data-theme="dark"] .viaggio-card.completato { background: linear-gradient(180deg, #1F1A0E 0%, #15110A 100%); opacity: 0.65; }
[data-theme="dark"] .viaggio-card.completato .viaggio-nome { color: #8B7A5C; }
[data-theme="dark"] .viaggio-card.in-corso { background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(217,119,6,0.08) 100%), linear-gradient(180deg, #2D1F0A 0%, #1F1505 100%); }

/* ── SIDEBAR DESTRA — Stato ── */
#stato-sidebar {
  width: 174px;
  min-width: 174px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow: hidden;
  transition: width 0.2s ease, min-width 0.2s ease;
  z-index: 50;
  box-shadow: -1px 0 4px rgba(0,0,0,0.04);
}
#stato-sidebar.collapsed {
  width: 42px;
  min-width: 42px;
}
.stato-sidebar-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
}
.stato-sidebar-header .mi-sm { color: #1565C0; flex-shrink: 0; }
#stato-sidebar-toggle {
  margin-right: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.22s;
  order: -1;
}
#stato-sidebar.collapsed #stato-sidebar-toggle .mi { transform: rotate(180deg); }
#stato-sidebar.collapsed .stato-sb-label { display: none; }
#stato-sidebar.collapsed .stato-sidebar-header .mi-sm { display: none; }
.stato-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.stato-group { margin-bottom: 2px; }
.stato-group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 4px;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.stato-group-header .sg-count {
  background: rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.stato-group.s-in-corso .stato-group-header          { color: var(--accent2); }
.stato-group.s-in-pianificazione .stato-group-header { color: #7B1FA2; }
.stato-group.s-pianificato .stato-group-header       { color: #0277BD; }
.stato-group.s-completato .stato-group-header        { color: var(--success); }
.stato-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stato-group-list li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.79rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.stato-group-list li a:hover { background: #F0F4FF; color: #1565C0; }
.stato-group-list li a.active { background: #DBEAFE; color: #1565C0; font-weight: 700; }
.stato-group-list li a .si-icon { flex-shrink: 0; font-size: 0.9rem; }
.stato-group-list li a .si-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
#stato-sidebar.collapsed .stato-group-header { padding: 7px 6px 5px; justify-content: center; }
#stato-sidebar.collapsed .stato-group-header span:not(.sg-count):not(.stato-group-icon) { display: none; }
#stato-sidebar.collapsed .stato-group-list li a { justify-content: center; padding: 6px 6px; }
#stato-sidebar.collapsed .stato-group-list li a .si-name { display: none; }
#stato-sidebar.collapsed .stato-group-header .sg-count { display: none; }
#stato-sidebar.collapsed .sidebar-footer { display: none; }
#stato-sidebar.collapsed .stato-sb-label { display: none; }
.sg-empty { padding: 4px 12px 6px; }
.sg-empty span { font-size: 0.78rem; color: var(--text-muted); opacity: 0.6; }
#stato-sidebar.collapsed .sg-empty { display: none; }
.stato-sidebar-header a:hover { color: #1565C0; }

.viaggio-nome {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text);
}
.viaggio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.badge-orange { background: rgba(245,124,0,0.12);  color: #E65100; }
.badge-purple { background: rgba(103,58,183,0.12); color: #6A1B9A; }
.badge-blue   { background: rgba(2,136,209,0.12);  color: #0277BD; }
.badge-green  { background: rgba(46,125,50,0.12);  color: var(--success); }
.badge-yellow { background: rgba(2,136,209,0.08);  color: #0288D1; }
.badge-gray   { background: rgba(74,102,133,0.10); color: var(--text-muted); }

.badge-stato-btn { cursor: pointer; user-select: none; transition: filter 0.15s; }
.badge-stato-btn:hover { filter: brightness(0.92); }

/* ── Lightbox foto percorso ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox-inner {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  cursor: default;
}
.lightbox-inner img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1;
}
.lightbox-close .mi { font-size: 18px; color: #333; }

.stato-picker-popup {
  position: absolute;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 180px;
}
.spp-item {
  border: none;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: filter 0.12s;
}
.spp-item:hover { filter: brightness(0.9); }

.viaggio-stats {
  display: flex;
  gap: 14px;
  font-size: 0.79rem;
  color: var(--text-muted);
}
.stat-item { display: flex; align-items: center; gap: 4px; }
.stat-link {
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 5px 1px 3px;
  margin: -1px -5px -1px -3px;
  transition: background 0.13s, color 0.13s;
}
.stat-link:hover { background: rgba(21,101,192,0.1); color: #1565C0; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s;
  text-decoration: none;
}
.btn-primary   { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-card2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger    { background: rgba(198,40,40,0.10); color: var(--danger); border: 1px solid rgba(198,40,40,0.25); }
.btn-danger:hover  { background: var(--danger); color: white; }
.btn-success   { background: rgba(46,125,50,0.10); color: var(--success); border: 1px solid rgba(46,125,50,0.25); }
.btn-success:hover { background: var(--success); color: white; }
.btn-info      { background: rgba(2,136,209,0.10); color: var(--info); border: 1px solid rgba(2,136,209,0.25); }
.btn-info:hover    { background: var(--info); color: white; }
.btn-sm   { padding: 4px 9px; font-size: 0.76rem; }
.btn-icon { padding: 6px; }

/* ── FORMS ── */
.form-grid              { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-grid.cols-3       { grid-template-columns: 1fr 1fr 1fr; }
.form-full              { grid-column: 1 / -1; }
.da-a-wrapper           { display: flex; flex-direction: column; gap: 5px; }
.da-a-swap-row          { display: flex; justify-content: center; }
.btn-da-a-swap          { background: none; border: 1px dashed var(--border); border-radius: 20px; padding: 2px 14px; font-size: 0.72rem; font-weight: 600; color: var(--accent); cursor: pointer; letter-spacing: 0.3px; transition: all .15s; }
.btn-da-a-swap:hover    { background: var(--accent); color: #fff; border-color: var(--accent); }
.form-group             { display: flex; flex-direction: column; gap: 4px; }
.form-group label       { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input,
.form-group select,
.form-group textarea    {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(21,101,192,.10); }
.form-group select option { background: var(--bg-card2); }
.form-group textarea { resize: vertical; min-height: 80px; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,33,55,0.50);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(12px);
  transition: transform 0.18s;
  box-shadow: 0 12px 40px rgba(21,101,192,0.14);
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* ── Dropdown "Apri in" mappa ── */
.apri-in-dropdown   { position: relative; }
.apri-in-btn        { white-space: nowrap; }
.apri-in-menu       {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 9999;
  display: flex; flex-direction: column; gap: 1px;
}
.apri-in-menu.down  { bottom: auto; top: calc(100% + 6px); }
.apri-in-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 5px; font-size: 0.82rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.apri-in-menu a:hover { background: var(--bg-card2); }

/* ── DETAIL PAGE ── */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.detail-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── TAPPE ── */
.tappe-list { display: flex; flex-direction: column; gap: 5px; }
.tappa-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.15s;
}
.tappa-item:hover { border-color: rgba(21,101,192,0.30); background: var(--hover-bg); }
.tappa-item.completata {
  border-color: rgba(46,125,50,0.4);
  background: rgba(46,125,50,0.04);
}
.tappa-item.completata .tappa-numero { background: var(--success); }
.btn-completata {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-completata.non-completata {
  background: rgba(46,125,50,0.10);
  color: var(--success);
  border: 1px solid rgba(46,125,50,0.25);
}
.btn-completata.non-completata:hover { background: var(--success); color: white; }
.btn-completata.completata-on { background: var(--success); color: white; }
.btn-completata.completata-on:hover { background: #1b5e20; }

/* ── BUDGET BAR ── */
.budget-panel {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.budget-panel.sforato { border-color: var(--danger); background: rgba(198,40,40,0.04); }
.budget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.budget-label { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.budget-saldo { font-size: 1.1rem; font-weight: 700; }
.budget-saldo.positivo { color: var(--success); }
.budget-saldo.negativo { color: var(--danger); }
.budget-bar-wrap {
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.budget-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.budget-bar-fill.ok      { background: var(--success); }
.budget-bar-fill.warning { background: var(--accent2); }
.budget-bar-fill.danger  { background: var(--danger); }
.budget-detail {
  display: flex;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.tappa-numero {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tappa-info { flex: 1; min-width: 0; }
.tappa-nome { font-weight: 600; font-size: 0.87rem; }
.tappa-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Chip metriche tappa ── */
.tappa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}
.tc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
  white-space: nowrap;
}
.tc-km      { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }
.tc-time    { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; }
.tc-toll    { background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
.tc-fuel    { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.tc-hotel   { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.tc-lodging { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.tc-food    { background: #F3E8FF; color: #7E22CE; border: 1px solid #E9D5FF; }
.tc-depart  { background: #E0F2FE; color: #075985; border: 1px solid #BAE6FD; }
.tappa-connector {
  width: 1px;
  height: 10px;
  background: var(--border);
  margin: 0 10px;
  align-self: center;
}
.tappa-connector-intraday { height: 10px; background: var(--accent); opacity: 0.3; }
.tappa-connector-interday { height: 22px; background: var(--border); }

/* ── WAYPOINT PLANNER ── */
.wp-row { margin-bottom: 4px; }
.wp-row-inner { display: flex; align-items: center; gap: 8px; }
.wp-bullet { font-size: 1rem; flex-shrink: 0; }
.wp-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}
.wp-input:focus { outline: none; border-color: var(--accent); }
.wp-leg-info { padding: 2px 0 4px 28px; font-size: 0.78rem; }
.wp-leg-text  { color: var(--accent); font-weight: 700; }
.wp-leg-error { color: var(--danger); }

/* ── RIEPILOGO PERCORSO ── */
.percorso-riepilogo {
  padding: 12px 14px;
  background: var(--bg-card2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.percorso-riepilogo-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.percorso-leg {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.percorso-leg-val { font-weight: 700; color: var(--accent); white-space: nowrap; }
.percorso-totale {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
  padding-top: 8px;
  color: var(--text);
}

/* Intestazione giorno */
.giorno-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 6px;
  margin-top: 4px;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: rgba(21,101,192,0.04);
  transition: all 0.15s;
}
.giorno-header.giorno-add-new {
  cursor: pointer;
  text-align:center;
  justify-content:center;
}
.giorno-header.drag-over {
  background: linear-gradient(135deg,#fde68a,#fbbf24);
  border-color: #d97706;
  transform: scale(1.02);
}
.giorno-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-outline-accent {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-outline-accent:hover { background: var(--accent); color: #fff; }

/* Fermata intermedia */
.tappa-item.tappa-intermedia {
  background: var(--bg-card2);
  border-style: dashed;
  opacity: 0.90;
}
.tappa-numero-intermedia {
  background: transparent !important;
  border: 2px solid var(--accent);
  color: var(--accent) !important;
  font-size: 1rem !important;
}

/* ── GIORNO MULTI-CARD ── */
.giorno-multi-card {
  border-left: 3px solid var(--accent);
}
.gc-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.gc-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.gc-mezzo-icon {
  font-size: 0.82rem;
  margin-right: 1px;
  flex-shrink: 0;
  opacity: 0.85;
}
.gc-place {
  color: var(--text-muted);
  font-weight: 500;
}
.gc-place-dest {
  color: var(--text);
  font-weight: 700;
}
.gc-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.71rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.gc-expand-btn:hover { color: var(--accent); }
.gc-chevron { font-size: 0.75rem; transition: transform 0.2s; }
.gc-stops {
  display: none;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: none;
  flex-direction: column;
  gap: 5px;
}
.gc-stops.gc-stops-open {
  display: flex;
}
.gc-stop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text);
}
.gc-stop-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
}
.gc-stop-last {
  border-color: var(--accent);
  background: var(--accent);
}
.gc-stop-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-stop-actions { display: flex; gap: 3px; flex-shrink: 0; }
.gc-stop-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 3px;
  flex-shrink: 0;
  user-select: none;
}
.gc-stop-row[draggable="true"] { cursor: grab; }
.gc-stop-row.gc-drag-over { border-top: 2px solid var(--accent) !important; }
.btn-completata.parziale { opacity: 0.75; }

/* ── DIARIO ── */
.diario-list { display: flex; flex-direction: column; gap: 12px; }
.diario-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(21,101,192,0.05);
}
.diario-entry:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.diario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.diario-day { display: flex; align-items: center; gap: 10px; }
.day-badge {
  background: var(--accent);
  color: white;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
}
.diario-titolo  { font-weight: 700; font-size: 0.97rem; }
.diario-meta    { display: flex; gap: 14px; font-size: 0.79rem; color: var(--text-muted); flex-wrap: wrap; }
.diario-preview { font-size: 0.84rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

/* ── STATS ROW ── */
/* ═══════════════════════════════════
   STATS COLLASSABILI
   ═══════════════════════════════════ */
.stats-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 1px 6px rgba(21,101,192,0.07);
  overflow: hidden;
}

/* Barra sommario */
.stats-summary-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  flex-wrap: wrap;
  row-gap: 4px;
  transition: background 0.15s;
}
.stats-summary-bar:hover { background: rgba(21,101,192,0.04); }
.ssb-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 2px;
}
.ssb-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}
.ssb-chip {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.04);
  white-space: nowrap;
}
.ssb-num  { font-size: 0.88rem; font-weight: 800; color: var(--text); }
.ssb-lbl  { font-size: 0.68rem; color: var(--text-muted); }
.ssb-fatto  { background: rgba(46,125,50,0.08); }
.ssb-fatto  .ssb-num { color: var(--success); }
.ssb-dafare { background: rgba(21,101,192,0.08); }
.ssb-dafare .ssb-num { color: #0277BD; }
.ssb-km     { background: rgba(21,101,192,0.06); }
.ssb-km     .ssb-num { color: #1565C0; }
.ssb-spese  { background: rgba(220,38,38,0.07); }
.ssb-spese  .ssb-num { color: #DC2626; }
.ssb-budget { background: rgba(46,125,50,0.06); }
.ssb-budget .ssb-num { color: var(--success); }
.ssb-chevron {
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.28s ease;
  flex-shrink: 0;
}
.stats-container.open .ssb-chevron { transform: rotate(180deg); }

/* Corpo espandibile */
.stats-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.stats-container.open .stats-detail { max-height: 600px; }
.stats-detail-inner {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
}
.sd-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-bottom: 7px;
  margin-top: 10px;
}

/* Griglia card totali */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 7px;
  margin-bottom: 0;
}

/* Riga split Fatto / Da fare */
.stats-split-row {
  display: flex;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.stats-split-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-width: 0;
}
.sg-fatto  { background: rgba(46,125,50,0.04); }
.sg-dafare { background: rgba(21,101,192,0.04); }
.stats-split-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 7px;
  margin-right: 2px;
}
.sg-fatto  .stats-split-label { color: var(--success); border-right: 2px solid rgba(46,125,50,0.2); }
.sg-dafare .stats-split-label { color: #0277BD;         border-right: 2px solid rgba(21,101,192,0.2); }
.stats-split-divider { width: 1px; background: var(--border); flex-shrink: 0; }
.stats-split-group .stat-card { flex: 1; min-width: 64px; box-shadow: none; border-radius: 7px; }
.sc-fatto  { border-left-color: rgba(46,125,50,0.55); }
.sc-dafare { border-left-color: rgba(21,101,192,0.55); }

@media (max-width: 700px) {
  .stats-split-row { flex-direction: column; }
  .stats-split-divider { width: auto; height: 1px; }
  .stats-split-label { writing-mode: initial; transform: none; border-right: none !important; border-bottom: 2px solid rgba(0,0,0,0.08); padding-right: 0; margin-right: 0; padding-bottom: 5px; margin-bottom: 4px; }
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid #BBDEFB;
  border-radius: var(--radius);
  padding: 8px 10px 7px;
  text-align: left;
  transition: box-shadow 0.15s, border-left-color 0.15s;
  box-shadow: 0 1px 3px rgba(21,101,192,0.05);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-card:hover { box-shadow: var(--shadow); }
.stat-icon { display: none; }
.stat-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; line-height: 1; }
.stat-value { font-size: 1.05rem; font-weight: 800; color: var(--accent); line-height: 1.15; }
.stat-sub   { font-size: 0.57rem; color: var(--text-muted); margin-top: 1px; }

.stat-card.c-km    { border-left-color: #1565C0; }
.stat-card.c-km    .stat-value { color: #1565C0; }

.stat-card.c-fuel  { border-left-color: #EA580C; }
.stat-card.c-fuel  .stat-value { color: #B45309; }

.stat-card.c-toll  { border-left-color: #0284C7; }
.stat-card.c-toll  .stat-value { color: #0369A1; }

.stat-card.c-time  { border-left-color: #7C3AED; }
.stat-card.c-time  .stat-value { color: #6D28D9; }

.stat-card.c-money { border-left-color: #16A34A; }
.stat-card.c-money .stat-value { color: #15803D; }

.stat-card.c-warn  { border-left-color: #DC2626; }
.stat-card.c-warn  .stat-value { color: #B91C1C; }

/* ═══════════════════════════════════════════════════════
   ── STATS GROUPED — stile "caldo motociclistico" ──
   Palette: ambra, terracotta, espresso, pergamena
   ═══════════════════════════════════════════════════════ */
.stats-grouped { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }

/* ── INFO CHIPS (tappe, km, tempo, diario) ───────────── */
.stats-info-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.info-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #FFFBF2 0%, #F8F0DE 100%);
  border: 1px solid #E5D3B0;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #3D2817;
  box-shadow: 0 1px 2px rgba(120,60,15,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.12s, box-shadow 0.12s;
}
.info-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(120,60,15,0.12); }
.info-chip .ic-ic    { font-size: 0.95rem; line-height: 1; filter: saturate(1.1); }
.info-chip b         { font-family: 'Oswald', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.95rem; color: #B45309; letter-spacing: 0.3px; }
.info-chip .ic-lbl   { color: #8B6F4C; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── STATS COSTI — Card principale "diario di viaggio" ── */
.stats-costi {
  position: relative;
  background:
    linear-gradient(135deg, rgba(245,158,11,0.04) 0%, rgba(180,83,9,0.02) 100%),
    linear-gradient(180deg, #FFFBF2 0%, #FAF3E0 100%);
  border: 1px solid #E5D3B0;
  border-left: 5px solid #D97706;
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 22px; align-items: center;
  box-shadow:
    0 1px 3px rgba(120,60,15,0.08),
    0 4px 16px rgba(120,60,15,0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}
/* Pattern texture "mappa" di sfondo (sottile) */
.stats-costi::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 180px; pointer-events: none; opacity: 0.05;
  background:
    radial-gradient(circle at 30% 50%, #D97706 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, #B45309 0%, transparent 35%);
}
.stats-costi.over-budget { border-left-color: #991B1B; background: linear-gradient(135deg, rgba(220,38,38,0.05) 0%, rgba(154,52,18,0.03) 100%), linear-gradient(180deg, #FFF7F2 0%, #FBE9DC 100%); }

/* Colonna sinistra: totale grosso */
.costi-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; z-index: 1; }
.costi-main .totale {
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-size: 2.1rem; font-weight: 600; line-height: 1;
  color: #D97706; letter-spacing: -0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.stats-costi.over-budget .costi-main .totale { color: #991B1B; }
.costi-main .vs-budget {
  font-size: 0.78rem; color: #6B4423; margin-top: 2px;
  font-family: 'Caveat', 'Segoe UI', cursive;
  font-weight: 700; font-size: 0.95rem;
}
.costi-main .vs-budget b { color: #3D2817; font-weight: 700; }
.costi-bar {
  height: 8px; border-radius: 4px;
  background: rgba(120,60,15,0.12);
  overflow: hidden; margin: 8px 0 4px;
  box-shadow: inset 0 1px 2px rgba(120,60,15,0.15);
}
.costi-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #D97706 0%, #F59E0B 50%, #FCD34D 100%);
  transition: width 0.5s ease-out;
  box-shadow: 0 0 6px rgba(245,158,11,0.4);
}
.costi-bar-fill.over { background: linear-gradient(90deg, #991B1B 0%, #DC2626 100%); box-shadow: 0 0 6px rgba(220,38,38,0.4); }
.costi-residuo {
  font-family: 'Oswald', 'Segoe UI', sans-serif;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.costi-residuo.pos { color: #4D7C0F; }
.costi-residuo.neg { color: #991B1B; }

/* Colonna destra: chip "patch" sui costi */
.costi-breakdown { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; position: relative; z-index: 1; }
.costi-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF3E0 100%);
  border: 1px solid #E5D3B0;
  border-radius: 999px;
  font-size: 0.78rem; color: #3D2817;
  box-shadow: 0 1px 2px rgba(120,60,15,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: default;
}
.costi-chip:hover { transform: translateY(-1px) rotate(-0.5deg); box-shadow: 0 3px 8px rgba(120,60,15,0.15); }
.costi-chip .cc-ic  { font-size: 0.9rem; line-height: 1; filter: saturate(1.15); }
.costi-chip b       { font-family: 'Oswald', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.3px; }
.costi-chip .cc-lbl { color: #8B6F4C; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }

.costi-chip.cc-fuel   { border-color: #E97B0F; background: linear-gradient(180deg, #FFF4E5 0%, #FED7AA 100%); }
.costi-chip.cc-fuel  b{ color: #9A3412; }
.costi-chip.cc-ferry  { border-color: #6B7280; background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%); }
.costi-chip.cc-ferry b{ color: #374151; }
.costi-chip.cc-toll   { border-color: #92400E; background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%); }
.costi-chip.cc-toll  b{ color: #78350F; }
.costi-chip.cc-stay   { border-color: #8B4513; background: linear-gradient(180deg, #FAF0E6 0%, #E8C9A1 100%); }
.costi-chip.cc-stay  b{ color: #5D2E0A; }
.costi-chip.cc-food   { border-color: #BE6B3E; background: linear-gradient(180deg, #FDEBD3 0%, #F5C99B 100%); }
.costi-chip.cc-food  b{ color: #7C2D12; }

@media (max-width: 700px) {
  .stats-costi { grid-template-columns: 1fr; gap: 12px; padding: 14px 14px; }
  .costi-main .totale { font-size: 1.7rem; }
  .stats-costi::after { display: none; }
}

/* DARK MODE — palette pergamena scura / cuoio */
[data-theme="dark"] .info-chip {
  background: linear-gradient(180deg, #2A1F12 0%, #1F1611 100%);
  border-color: #4A3520; color: #F0DBB4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,200,120,0.08);
}
[data-theme="dark"] .info-chip b   { color: #FCD34D; }
[data-theme="dark"] .info-chip .ic-lbl { color: #B8956C; }
[data-theme="dark"] .stats-costi {
  background: linear-gradient(135deg, rgba(217,119,6,0.08) 0%, rgba(120,53,15,0.05) 100%), linear-gradient(180deg, #251A0E 0%, #1A1208 100%);
  border-color: #4A3520; border-left-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,120,0.1);
}
[data-theme="dark"] .stats-costi.over-budget { border-left-color: #EF4444; background: linear-gradient(135deg, rgba(220,38,38,0.10) 0%, rgba(120,30,30,0.05) 100%), linear-gradient(180deg, #2A1414 0%, #1F0E0E 100%); }
[data-theme="dark"] .costi-main .totale { color: #FCD34D; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
[data-theme="dark"] .stats-costi.over-budget .costi-main .totale { color: #FCA5A5; }
[data-theme="dark"] .costi-main .vs-budget { color: #D4B583; }
[data-theme="dark"] .costi-main .vs-budget b { color: #F0DBB4; }
[data-theme="dark"] .costi-bar { background: rgba(255,200,120,0.10); box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); }
[data-theme="dark"] .costi-residuo.pos { color: #A3E635; }
[data-theme="dark"] .costi-residuo.neg { color: #FCA5A5; }
[data-theme="dark"] .costi-chip {
  background: linear-gradient(180deg, #2A1F12 0%, #1F1611 100%);
  border-color: #4A3520; color: #F0DBB4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,200,120,0.08);
}
[data-theme="dark"] .costi-chip .cc-lbl { color: #B8956C; }
[data-theme="dark"] .costi-chip.cc-fuel  { background: linear-gradient(180deg, #3D1F0A 0%, #2A1605 100%); border-color: #9A3412; }
[data-theme="dark"] .costi-chip.cc-fuel b{ color: #FB923C; }
[data-theme="dark"] .costi-chip.cc-ferry { background: linear-gradient(180deg, #1F2937 0%, #111827 100%); border-color: #4B5563; }
[data-theme="dark"] .costi-chip.cc-ferry b{ color: #D1D5DB; }
[data-theme="dark"] .costi-chip.cc-toll  { background: linear-gradient(180deg, #3D2A05 0%, #2A1D03 100%); border-color: #78350F; }
[data-theme="dark"] .costi-chip.cc-toll b{ color: #FCD34D; }
[data-theme="dark"] .costi-chip.cc-stay  { background: linear-gradient(180deg, #2D1810 0%, #1A0E08 100%); border-color: #8B4513; }
[data-theme="dark"] .costi-chip.cc-stay b{ color: #E8C9A1; }
[data-theme="dark"] .costi-chip.cc-food  { background: linear-gradient(180deg, #3D1F0F 0%, #2A1408 100%); border-color: #BE6B3E; }
[data-theme="dark"] .costi-chip.cc-food b{ color: #F5C99B; }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 2.8rem; margin-bottom: 12px; }
.empty-state h3 { font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }

/* ── FOTO GRID ── */
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.foto-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.2s;
}
.foto-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.foto-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.foto-thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-card2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted);
}
.foto-meta { padding: 7px; font-size: 0.72rem; color: var(--text-muted); }

/* ── IMMICH ALBUM ── */
.album-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.album-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.album-icon { font-size: 1.8rem; }
.album-info { flex: 1; }
.album-name  { font-weight: 700; }
.album-count { font-size: 0.78rem; color: var(--text-muted); }

/* ── SETTINGS ── */
.settings-section { margin-bottom: 24px; }
.settings-section h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── TOAST ── */
#toast-container {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.875rem;
  min-width: 240px;
  max-width: 320px;
  animation: slideIn 0.2s ease;
  box-shadow: var(--shadow);
  color: var(--text);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── LOADING ── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  color: var(--text-muted);
  gap: 12px;
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* logo watermark più chiaro sulle pagine dettaglio */
[data-page="detail"] #logo-watermark { opacity: 0.01; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #viaggi-sidebar { display: none; }
  #stato-sidebar  { display: none; }

  #app {
    padding: 14px;
    padding-bottom: 76px; /* space for bottom nav */
  }

  /* hide tagline and desktop nav buttons on mobile */
  .nav-tagline { display: none; }
  .nav-btn     { display: none; }
  .nav-settings:last-child { display: none; } /* hide logout from top nav on mobile */

  nav { height: 52px; padding: 0 14px; }
  .nav-brand { font-size: 1.05rem; }
  .nav-brand img, .nav-brand .brand-icon { width: 34px; height: 34px; }

  /* show bottom nav */
  .mob-nav { display: flex; }

  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-value { font-size: 1.2rem; }

  .detail-header { flex-direction: column; gap: 12px; }
  .detail-title { font-size: 1.3rem; }
  .detail-actions { gap: 6px; }
  .detail-actions .btn { padding: 8px 12px; font-size: 0.82rem; }

  #percorso-grid { grid-template-columns: 1fr !important; }

  .viaggi-grid { grid-template-columns: 1fr; }

  .modal { padding: 18px; border-radius: 20px 20px 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  .tabs { gap: 0; }
  .tab-btn { padding: 10px 12px; font-size: 0.8rem; }

  #toast-container { bottom: 70px; right: 12px; left: 12px; }
  .toast { min-width: unset; max-width: unset; width: 100%; }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .viaggio-card { padding: 14px; }
  .btn { padding: 8px 13px; }
  .btn-sm { padding: 5px 10px; font-size: 0.78rem; }
}

/* ── Anno selector nelle sidebar ── */
.sidebar-anno-wrap {
  padding: 6px 10px 4px;
}
.anno-sel {
  width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  outline: none;
}
.anno-sel:focus { border-color: var(--primary); }

/* ── Pulsanti icona sidebar (riga sotto "Nuovo viaggio") ── */
.sidebar-cal-btn {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.sidebar-cal-btn:hover { background: var(--hover-bg); color: var(--primary); }

/* ── Pulsante Share Maps ── */
.btn-share-maps { font-size: 0.82rem; }
.btn-success {
  background: #2e7d32;
  color: #fff;
  border: none;
}
.btn-success:hover { background: #1b5e20; }

/* ── Modal calendario ── */
.modal-cal { max-width: 420px; width: 100%; }
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 12px;
}
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 0 12px;
  margin-bottom: 4px;
}
.cal-dow {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 0;
}
.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 12px 12px;
  gap: 2px;
}
.cal-day {
  min-height: 46px;
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  cursor: default;
  transition: background 0.12s;
}
.cal-day.cal-has-trip { cursor: pointer; }
.cal-day.cal-has-trip:hover { background: var(--primary-light, #e3f0ff); }
.cal-day.cal-other { opacity: 0.35; }
.cal-day.cal-today .cal-day-num {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cal-day-num { font-size: 0.78rem; line-height: 1.4; }
.cal-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-legenda {
  border-top: 1px solid var(--border);
  margin: 0 12px;
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-leg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s;
}
.cal-leg-item:hover { background: var(--hover-bg, #f0f4ff); }
.cal-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Modal share ── */
.modal-share { max-width: 440px; width: 100%; }

/* ── Intestazione anno nelle sidebar ── */
.sidebar-anno-header {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 3px;
  opacity: 0.6;
  pointer-events: none;
  list-style: none;
}

/* ══════════════════════════════════════════
   DARK MODE — override elementi hardcoded
   ══════════════════════════════════════════ */
[data-theme="dark"] body { color: var(--text); }

[data-theme="dark"] #viaggi-sidebar,
[data-theme="dark"] #stato-sidebar {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .stato-sidebar-header { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .sidebar-header a,
[data-theme="dark"] .stato-sidebar-header a { color: var(--text); }
[data-theme="dark"] .sidebar-header a:hover,
[data-theme="dark"] .stato-sidebar-header a:hover { color: var(--accent); }
[data-theme="dark"] .sidebar-header .mi-sm,
[data-theme="dark"] .stato-sidebar-header .mi-sm { color: var(--accent); }
[data-theme="dark"] #sidebar-toggle,
[data-theme="dark"] #stato-sidebar-toggle { color: var(--text-muted); }
[data-theme="dark"] #sidebar-list li a { color: var(--text-muted); }
[data-theme="dark"] #sidebar-list li a:hover { background: var(--hover-bg); color: var(--accent); }
[data-theme="dark"] #sidebar-list li a.active { background: var(--primary-light); color: var(--accent); }
[data-theme="dark"] .sidebar-footer { border-color: var(--border); }
[data-theme="dark"] .sidebar-new-btn { background: var(--accent); }
[data-theme="dark"] .sidebar-new-btn:hover { background: var(--accent-hover); }
[data-theme="dark"] .sidebar-cal-btn { border-color: var(--border); color: var(--text-muted); }

[data-theme="dark"] .viaggio-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .viaggio-card:hover { background: var(--bg-card2); }
[data-theme="dark"] .viaggio-nome { color: var(--text); }
[data-theme="dark"] .viaggio-card.completato { background: var(--bg-card2); }

[data-theme="dark"] .stato-group { background: var(--bg-card2); border-color: var(--border); }
[data-theme="dark"] .stato-group-header { color: var(--text); border-color: var(--border); }
[data-theme="dark"] .stato-group-list li a { color: var(--text-muted); }
[data-theme="dark"] .stato-group-list li a:hover { background: var(--hover-bg); color: var(--accent); }
[data-theme="dark"] .stato-group-list li a.active { background: var(--primary-light); color: var(--accent); }

[data-theme="dark"] .tabs { border-color: var(--border); background: var(--bg-card); }
[data-theme="dark"] .tab-btn { color: var(--text-muted); }
[data-theme="dark"] .tab-btn.active { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .tab-btn:hover { background: var(--hover-bg); color: var(--accent); }

[data-theme="dark"] .modal { background: var(--bg-card); color: var(--text); }
[data-theme="dark"] .modal-header { border-color: var(--border); }
[data-theme="dark"] .modal-title { color: var(--text); }
[data-theme="dark"] .modal-close { color: var(--text-muted); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .form-control { background: var(--bg-input); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control:focus { border-color: var(--accent); }
[data-theme="dark"] label { color: var(--text-muted); }
[data-theme="dark"] select.form-control option { background: var(--bg-card); }

[data-theme="dark"] .stat-card { background: var(--bg-card2); border-color: var(--border); }
[data-theme="dark"] .stat-value { color: var(--text); }
[data-theme="dark"] .stat-label { color: var(--text-muted); }
[data-theme="dark"] .stats-summary-bar { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .ssb-title { color: var(--text-muted); }
[data-theme="dark"] .ssb-num { color: var(--text); }
[data-theme="dark"] .ssb-lbl { color: var(--text-muted); }
[data-theme="dark"] .ssb-divider { background: var(--border); }
[data-theme="dark"] .stats-detail { background: var(--bg-card2); border-color: var(--border); }
[data-theme="dark"] .sd-section-label { color: var(--text-muted); border-color: var(--border); }

[data-theme="dark"] .detail-header { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .detail-title { color: var(--text); }

[data-theme="dark"] .tappa-item { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .tappa-item:hover { background: var(--bg-card2); }
[data-theme="dark"] .tappa-nome { color: var(--text); }
[data-theme="dark"] .tappa-meta { color: var(--text-muted); }
[data-theme="dark"] .tappa-item.completata { opacity: 0.6; }

[data-theme="dark"] .diario-entry { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .diario-body { color: var(--text); }
[data-theme="dark"] .diario-meta { color: var(--text-muted); }

[data-theme="dark"] .btn-secondary { background: var(--bg-card2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .btn-secondary:hover { background: var(--border); }

[data-theme="dark"] .anno-sel { background: var(--bg-input); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .sidebar-anno-header { color: var(--text-muted); }

[data-theme="dark"] .cal-day { color: var(--text); }
[data-theme="dark"] .cal-dow { color: var(--text-muted); }
[data-theme="dark"] .cal-day.cal-other { color: var(--text-muted); }

/* Toggle dark mode button */
.dark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.12s;
  line-height: 1;
}
.dark-toggle:hover { background: rgba(255,255,255,0.14); }

/* ── Modal statistiche ── */
.modal-stats { max-width: 860px; width: 95%; max-height: 88vh; overflow-y: auto; }
.stats-charts-wrap { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-box {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.chart-box-wide { grid-column: 1 / -1; }
.chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

/* ── Dark mode mobile nav ── */
[data-theme="dark"] .mob-nav {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .mob-nav-item { color: var(--text-muted); }
[data-theme="dark"] .mob-nav-item.active { color: var(--accent); }

@media (max-width: 640px) {
  .chart-row { grid-template-columns: 1fr; }
}

/* ── Ricerca rapida ── */
.search-bar-wrap {
  position: relative;
  margin-bottom: 16px;
}
.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-bar {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}
.search-bar::placeholder { color: var(--text-muted); }

/* ── Countdown badge ── */
.countdown-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.countdown-today  { background: #FFF3E0; color: #E65100; border: 1px solid #FFCC80; }
.countdown-soon   { background: #FFF3E0; color: #EF6C00; border: 1px solid #FFE0B2; }
.countdown-near   { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.countdown-far    { background: var(--bg-card2); color: var(--text-muted); border: 1px solid var(--border); }

[data-theme="dark"] .countdown-today  { background: #4a2000; color: #ffb74d; border-color: #7a3800; }
[data-theme="dark"] .countdown-soon   { background: #3d2400; color: #ffcc80; border-color: #6a3d00; }
[data-theme="dark"] .countdown-near   { background: #1a3320; color: #81c784; border-color: #2e5c3a; }

/* ── Tipo tappa (traghetto / treno / aereo) ── */
.tappa-tipo-traghetto { border-left: 4px solid #1976D2 !important; }
.tappa-tipo-treno     { border-left: 4px solid #E65100 !important; }
.tappa-tipo-aereo     { border-left: 4px solid #7B1FA2 !important; }

.tc-ferry { background: #E3F2FD; color: #1565C0; border: 1px solid #90CAF9; }
.tc-train { background: #FBE9E7; color: #BF360C; border: 1px solid #FFAB91; }
.tc-plane { background: #F3E5F5; color: #6A1B9A; border: 1px solid #CE93D8; }

[data-theme="dark"] .tc-ferry { background: #0d2744; color: #90CAF9; border-color: #1565C0; }
[data-theme="dark"] .tc-train { background: #2d1200; color: #FFAB91; border-color: #BF360C; }
[data-theme="dark"] .tc-plane { background: #1e0d2e; color: #CE93D8; border-color: #6A1B9A; }

.c-ferry { border-top: 3px solid #1976D2; }
[data-theme="dark"] .c-ferry { border-top-color: #42A5F5; }

/* ── Documenti ── */
.doc-group { margin-bottom: 22px; }
.doc-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: box-shadow 0.15s;
}
.doc-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.doc-icon { font-size: 1.6rem; flex-shrink: 0; }
.doc-info { flex: 1; min-width: 0; }
.doc-nome { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.doc-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Calcolatrice ── */
/* Force the overlay to ignore flex/bottom-sheet quirks: cover the screen, then we
   position the modal absolutely & dead-centered. This is bulletproof against
   any media-query or transform interference. */
#modal-calcolatrice.modal-overlay {
  display: block !important;
  padding: 0 !important;
  align-items: unset !important;
  justify-content: unset !important;
}
.modal-calc {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 300px;
  max-width: 95vw;
  padding: 14px 14px 12px;
  max-height: 92vh;
  max-height: 92dvh;       /* dynamic viewport for mobile browsers w/ chrome */
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0 !important;
}
/* When the overlay is opening, neutralize the base .modal slide-in transform,
   otherwise translate(-50%,-50%) would be overwritten. */
#modal-calcolatrice .modal-calc          { transform: translate(-50%, calc(-50% + 12px)) !important; transition: transform 0.2s; }
#modal-calcolatrice.open .modal-calc     { transform: translate(-50%, -50%) !important; }
.modal-calc .modal-header { margin-bottom: 10px; }
.modal-calc .modal-title  { font-size: 1rem; }
.calc-body { padding: 0; }
.calc-screen {
  background: var(--bg-dark);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 9px;
  text-align: right;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1.5px solid var(--border);
}
.calc-op  { font-size: 0.78rem; color: var(--text-muted); min-height: 15px; }
.calc-num { font-size: 1.85rem; font-weight: 700; color: var(--text); word-break: break-all; line-height: 1.1; }
.calc-num.small { font-size: 1.2rem; }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.calc-btn {
  padding: 11px 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s, transform 0.08s;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Very short viewports: shrink buttons further */
@media (max-height: 600px) {
  .modal-calc { padding: 8px 10px 8px; }
  .modal-calc .modal-header { margin-bottom: 4px; }
  .calc-screen { min-height: 42px; padding: 4px 10px; margin-bottom: 6px; }
  .calc-num { font-size: 1.45rem; }
  .calc-op { min-height: 12px; font-size: 0.7rem; }
  .calc-btn { padding: 8px 0; font-size: 0.95rem; border-radius: 8px; }
  .calc-grid { gap: 5px; }
}
.calc-btn:active { transform: scale(0.92); filter: brightness(0.9); }
.calc-btn.calc-fn  { background: var(--bg-card2); color: var(--text-muted); }
.calc-btn.calc-op-btn { background: var(--primary-light); color: var(--accent); border-color: var(--accent); }
.calc-btn.calc-eq  { background: var(--accent); color: #fff; border-color: var(--accent); }
.calc-btn.calc-zero { grid-column: span 2; text-align: left; padding-left: 20px; }
[data-theme="dark"] .calc-btn.calc-op-btn { background: rgba(74,144,217,0.15); }
[data-theme="dark"] .calc-btn.calc-eq     { background: var(--accent); }

/* ── Pianificatore costi ── */
.modal-pian { width: 740px; max-width: 97vw; }
.pian-table-wrap { overflow-x: auto; border-radius: 8px; border: 1.5px solid var(--border); }
.pian-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pian-table th {
  background: var(--bg-card2);
  padding: 9px 10px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.pian-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pian-table tbody tr:last-child td { border-bottom: none; }
.pian-table tbody tr:hover { background: var(--hover-bg); }
.pian-input, .pian-sel {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 6px;
  color: var(--text);
  padding: 5px 7px;
  font-size: 0.85rem;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.pian-input:focus, .pian-sel:focus, .pian-input:hover, .pian-sel:hover {
  border-color: var(--border);
  background: var(--bg-input);
}
.pian-input:focus, .pian-sel:focus { border-color: var(--accent); }
.pian-num { text-align: right; }
.pian-tot { font-weight: 600; color: var(--accent); text-align: right; padding-right: 10px; white-space: nowrap; }
.pian-tfoot td { padding: 9px 10px; background: var(--bg-card2); }
.pian-tfoot-label { text-align: right; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); grid-column: span 4; }
.pian-tfoot-val { font-weight: 800; color: var(--accent); font-size: 1.05rem; text-align: right; padding-right: 10px; }
.btn-pian-del {
  background: none; border: none; color: var(--danger); font-size: 0.9rem;
  cursor: pointer; padding: 4px 6px; border-radius: 5px; line-height: 1;
  transition: background 0.15s; opacity: 0.6;
}
.btn-pian-del:hover { background: rgba(198,40,40,0.12); opacity: 1; }
.pian-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Globo 3D ── */
.globo-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #060c18;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.globo-overlay.open { opacity: 1; pointer-events: all; }

.globo-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(6,12,24,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74,144,217,0.18);
  flex-shrink: 0;
  flex-wrap: wrap;
  z-index: 10;
}
.globo-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #90CAF9;
  white-space: nowrap;
  flex-shrink: 0;
}
.globo-searchbar {
  display: flex;
  gap: 6px;
  flex: 1;
  max-width: 400px;
}
.globo-search-inp {
  flex: 1;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(74,144,217,0.25);
  border-radius: 8px;
  color: #E8F1FB;
  padding: 7px 12px;
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.globo-search-inp:focus { border-color: rgba(74,144,217,0.7); }
.globo-search-inp::placeholder { color: rgba(200,220,255,0.28); }
.globo-search-btn {
  background: rgba(74,144,217,0.2);
  border: 1.5px solid rgba(74,144,217,0.35);
  border-radius: 8px;
  color: #90CAF9;
  padding: 7px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.globo-search-btn:hover { background: rgba(74,144,217,0.4); }
.globo-ctrl-row { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.globo-ctrl-btn {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #B0C8E8;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.globo-ctrl-btn:hover { background: rgba(74,144,217,0.25); color: #90CAF9; }
.globo-close-btn:hover { background: rgba(198,40,40,0.3); color: #EF9A9A; border-color: rgba(198,40,40,0.4); }

.globo-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; color: rgba(180,210,255,0.6);
  font-size: 0.9rem; z-index: 5;
  background: #060c18;
}
.globo-spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(74,144,217,0.18);
  border-top-color: #4A90D9;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.globo-legend {
  position: absolute;
  top: 60px; left: 14px;
  display: flex; gap: 10px; flex-wrap: wrap;
  background: rgba(6,12,24,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(74,144,217,0.18);
  border-radius: 8px;
  padding: 6px 12px;
  z-index: 10;
}
.globo-leg-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: rgba(200,225,255,0.65);
}
.globo-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.globo-infobar {
  position: absolute; bottom: 34px; left: 0; right: 0;
  background: rgba(6,12,24,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(74,144,217,0.2);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; z-index: 20;
}
.globo-info-nome { font-weight: 600; color: #E8F1FB; font-size: 0.95rem; }
.globo-info-coord { font-size: 0.72rem; color: rgba(180,210,255,0.45); margin-top: 2px; font-family: monospace; }
.globo-info-content { flex: 1; min-width: 0; }
.globo-info-btns { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.globo-info-close {
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: rgba(200,220,255,0.5); padding: 5px 9px;
  cursor: pointer; font-size: 0.8rem; transition: background 0.15s;
}
.globo-info-close:hover { background: rgba(198,40,40,0.25); color: #EF9A9A; }

.globo-hint {
  text-align: center;
  font-size: 0.7rem;
  color: rgba(180,210,255,0.22);
  padding: 6px;
  flex-shrink: 0;
  z-index: 10;
}

/* Pin tappe sul globo MapLibre (HTML markers) */
.globo-pin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #4FC3F7;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.globo-pin:hover { transform: scale(1.18); }
.globo-pin.globo-pin-search {
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 1.7rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
/* Stile compatto per controlli MapLibre — coerente con il tema scuro del globo */
#modal-globo-3d .maplibregl-ctrl-group {
  background: rgba(6,12,24,0.85);
  border: 1px solid rgba(74,144,217,0.25);
  border-radius: 8px;
}
#modal-globo-3d .maplibregl-ctrl-group button {
  background: transparent;
}
#modal-globo-3d .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(74,144,217,0.18);
}
#modal-globo-3d .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(0.85) hue-rotate(180deg);
}
#modal-globo-3d .maplibregl-ctrl-attrib {
  background: rgba(6,12,24,0.75);
  color: rgba(200,225,255,0.55);
  font-size: 0.65rem;
}
#modal-globo-3d .maplibregl-ctrl-attrib a { color: rgba(144,202,249,0.85); }
#modal-globo-3d .maplibregl-ctrl-scale {
  background: rgba(6,12,24,0.7);
  border-color: rgba(180,210,255,0.4);
  color: rgba(200,225,255,0.85);
  font-size: 0.7rem;
}

/* ══════════════════════════════════════════════
   PLANISFERO VIAGGI
   ══════════════════════════════════════════════ */
.piani-legend {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(6,12,24,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(74,144,217,0.18);
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 10;
  max-height: calc(100% - 28px);
  overflow-y: auto;
}
.piani-leg-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: rgba(210,230,255,0.75);
  white-space: nowrap;
}
.piani-leg-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.piani-leg-count {
  margin-left: auto;
  font-size: 0.68rem;
  color: rgba(180,210,255,0.4);
  padding-left: 8px;
}

/* Popup Leaflet tema scuro per planisfero */
#planisfero-canvas .leaflet-popup-content-wrapper {
  background: rgba(8,16,32,0.96);
  color: #E8F1FB;
  border: 1px solid rgba(74,144,217,0.3);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
#planisfero-canvas .leaflet-popup-tip {
  background: rgba(8,16,32,0.96);
}
#planisfero-canvas .leaflet-popup-content {
  margin: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
}
#planisfero-canvas .piani-popup-geo {
  font-weight: 700;
  font-size: 0.9rem;
  color: #FFD54F;
  margin-bottom: 3px;
}
#planisfero-canvas .piani-popup-viaggio {
  font-size: 0.78rem;
  color: #90CAF9;
  margin-bottom: 1px;
}
#planisfero-canvas .piani-popup-luogo {
  color: #E8F1FB;
  font-size: 0.82rem;
}
#planisfero-canvas .leaflet-control-attribution {
  background: rgba(6,12,24,0.75);
  color: rgba(200,225,255,0.45);
  font-size: 0.65rem;
}
#planisfero-canvas .leaflet-control-attribution a { color: rgba(144,202,249,0.8); }
#planisfero-canvas .leaflet-control-zoom a {
  background: rgba(6,12,24,0.85);
  color: #90CAF9;
  border-color: rgba(74,144,217,0.3);
}
#planisfero-canvas .leaflet-control-zoom a:hover {
  background: rgba(74,144,217,0.25);
}

/* ═══════════════ Autocomplete luoghi (Google Places / Nominatim) ═══════════════ */
.lac-wrap { position: relative; }
.lac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--bg-card2, #1a1f2e);
  border: 1px solid var(--border, #2a3142);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.86rem;
}
.lac-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #2a3142);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lac-item:last-child { border-bottom: none; }
.lac-item:hover, .lac-item.lac-active {
  background: var(--accent, #1565C0);
  color: #fff;
}
.lac-item:hover .lac-item-secondary,
.lac-item.lac-active .lac-item-secondary {
  color: rgba(255,255,255,0.85);
}
.lac-item-main { font-weight: 600; color: var(--text, #e8eef7); }
.lac-item-secondary { font-size: 0.74rem; color: var(--text-muted, #8a93a8); }
.lac-status {
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-muted, #8a93a8);
  text-align: center;
}
.lac-source-badge {
  display: inline-block;
  font-size: 0.62rem;
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.lac-input-confirmed {
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(135deg, rgba(46,125,50,0) 0%, rgba(46,125,50,0.15) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIX — aggiunto per correggere scroll orizz.
   Non modifica nulla sul desktop (>768px)
   ═══════════════════════════════════════════════════════════════ */

/* Blocca scroll orizzontale globale */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
#app, .page {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {

  /* ── Layout generale ────────────────────────────── */
  #app {
    padding: 10px !important;
  }

  /* ── Cards con max-width inline → full width su mobile ─ */
  .card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ── Impostazioni: sezioni a colonna singola ──── */
  .settings-section .form-grid,
  .settings-section .form-grid.cols-3 {
    grid-template-columns: 1fr !important;
  }
  .settings-section {
    padding: 10px !important;
  }

  /* ── Pagina piani: colonna singola ──────────────── */
  #plans-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Garage: colonna singola ────────────────────── */
  .garage-grid,
  #garage-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Admin: stats chips ─────────────────────────── */
  .admin-stats-row,
  .admin-stats-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── Admin: tabelle con scroll orizzontale ──────── */
  table {
    display: block;
    overflow-x: auto;
    width: 100%;
  }

  /* ── Modali: occupano tutta la larghezza ─────────── */
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 14px !important;
    box-sizing: border-box;
  }

  /* ── Tabs: scorribili orizzontalmente ───────────── */
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 9px 10px !important;
    font-size: 0.75rem !important;
  }

  /* ── Header viaggio: colonna su mobile ───────────── */
  .detail-header {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .detail-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
  }
  .detail-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem !important;
    padding: 7px 8px !important;
  }

  /* ── Navbar: testo piano più piccolo ─────────────── */
  #plan-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  /* ── Heatmap: altezza corretta ───────────────────── */
  #map-heatmap {
    height: 60vh !important;
  }

  /* ── Planisfero / mappa: altezza corretta ─────────── */
  #globo-container,
  #planisfero-container,
  #mappa-posti {
    height: 55vmax !important;
    min-height: 280px;
  }

  /* ── Charts statistiche: colonna singola ─────────── */
  .chart-row {
    grid-template-columns: 1fr !important;
  }
  .stats-charts-wrap {
    overflow-x: hidden;
  }

  /* ── Waypoints planner: bottoni più piccoli ──────── */
  .wp-row-inner {
    gap: 4px !important;
  }
  .wp-wiki-btn {
    padding: 4px 5px !important;
    font-size: 0.75rem !important;
  }

  /* ── Garage modal 2 colonne → 1 colonna ─────────── */
  #modal-moto-edit .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Form inline (Da/A tappa) ────────────────────── */
  .da-a-wrapper {
    overflow: visible;
  }

  /* ── Meteo: cards scorribili ─────────────────────── */
  #meteo-content > div:nth-child(2) {
    -webkit-overflow-scrolling: touch;
  }

}

@media (max-width: 480px) {
  #app { padding: 8px !important; }

  nav { padding: 0 10px !important; }

  .btn { padding: 7px 10px !important; font-size: 0.8rem !important; }
  .btn-sm { padding: 4px 8px !important; font-size: 0.74rem !important; }

  /* Stats row: 2 colonne invece di 3 ────────────────── */
  .stats-row { grid-template-columns: 1fr 1fr !important; }

  /* Viaggio card padding ridotto */
  .viaggio-card { padding: 12px !important; }

  /* Titolo viaggio più piccolo */
  .viaggio-card h3 { font-size: 0.95rem !important; }

  /* Chips stato più compatte */
  .badge { font-size: 0.65rem !important; padding: 2px 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PANNELLO "ALTRO" — menu mobile bottom sheet
   ═══════════════════════════════════════════════════════════════ */
#mob-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,33,55,0.45);
  z-index: 120;
  align-items: flex-end;
}
#mob-menu-overlay.open { display: flex; }
#mob-menu-sheet {
  background: var(--bg-card, #fff);
  width: 100%;
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  animation: mobSheetUp 0.22s ease;
}
@keyframes mobSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mob-menu-handle {
  width: 40px; height: 4px;
  background: var(--border, #ccc);
  border-radius: 3px;
  margin: 4px auto 14px;
}
.mob-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mob-menu-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--bg-card2, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px;
  color: var(--text, #333);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.mob-menu-grid button:active { background: var(--accent); color: #fff; }
.mob-menu-grid button .mi { font-size: 22px; }
.mob-menu-grid button.mob-menu-logout {
  color: #dc2626;
  border-color: #fecaca;
}
[data-theme="dark"] #mob-menu-sheet { background: #1a2332; }
[data-theme="dark"] .mob-menu-grid button { background: #232f42; border-color: #2d3a52; color: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════
   FIX MAPPE MOBILE — non sovrapporre bottom nav e menu "Altro"
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Pannello "Altro": z-index sopra Leaflet */
  #mob-menu-overlay { z-index: 1100 !important; }
  .mob-nav           { z-index: 1050 !important; }

  /* Heatmap: altezza sottraendo bottom nav */
  #map-heatmap {
    height: calc(100vh - 60px - 120px) !important;
    max-height: calc(100vh - 140px);
  }

  /* Mappa posti notte */
  #mappa-posti {
    height: calc(100vh - 60px - 180px) !important;
    min-height: 240px;
    max-height: 55vh;
  }

  /* Pagina heatmap: padding bottom per non coprire con nav */
  #page-heatmap {
    padding-bottom: 70px !important;
  }

  /* Pagina posti: padding bottom */
  #page-posti {
    padding-bottom: 70px !important;
  }

  /* Controlli Leaflet (zoom): spostali sopra la bottom nav */
  .leaflet-bottom.leaflet-left,
  .leaflet-bottom.leaflet-right {
    bottom: 70px !important;
  }

  /* Leaflet popup e tooltip: z-index sotto il pannello Altro */
  .leaflet-pane { z-index: 400; }
  .leaflet-tile-pane { z-index: 200; }
  .leaflet-overlay-pane { z-index: 400; }
  .leaflet-shadow-pane { z-index: 500; }
  .leaflet-marker-pane { z-index: 600; }
  .leaflet-tooltip-pane { z-index: 650; }
  .leaflet-popup-pane { z-index: 700; }
  .leaflet-control { z-index: 800; }
}

/* Fix z-index modal sopra mappa Leaflet */
.modal-overlay {
  z-index: 1000 !important;
}