/* File: www/css/style.css */

/* ==========================================================================
   1. Imports, Design Tokens & Global Styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* --- Default Theme (Light) --- */
:root {
  /* Palette Brand (esistente) */
  --primary-color: #4A6C6F;
  --primary-color-dark: #3A5659;
  --secondary-color: #D98A5F;
  --secondary-color-dark: #C37B54;
  --danger-color: #D16060;
  --warning-color: #E6B445;
  --success-color: #16a34a; /* Aggiunto per coerenza */
  --info-color: #2563eb;    /* Aggiunto per coerenza */
  --gray-color: #6b7280;   /* Aggiunto per coerenza */
  --gray-color-dark: #4b5563; /* Aggiunto per coerenza */


  /* Colori Base Light */
  --background-color: #F8F5F2;
  --background-accent-color: #FFFFFF;
  --text-color: #2E3D40;
  --text-muted-color: #677375;
  --text-inverted-color: #FFFFFF; /* Testo su sfondi scuri/colorati */
  --border-color: #DCD6CE;
  --modal-overlay-color: rgba(46, 61, 64, 0.6);
  --sheet-background-color: rgba(248, 245, 242, 0.85);

  /* Colori Grafici Light */
  --chart-grid-color: rgba(0, 0, 0, 0.05);
  --chart-ticks-color: rgba(18, 18, 18, 0.7);
  --chart-elevation-color: #2F6B4F; /* Verde scuro */
  --chart-elevation-bg: rgba(47, 107, 79, 0.2);
  --chart-speed-color: #3b82f6; /* Blu */

  /* Safe Area & Varie (invariate) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --bottom-tab-bar-height: 80px;
}

/* --- Dark Theme --- */
[data-theme="dark"] {
  /* Palette Brand Scura (Esempi) */
  --primary-color: #5E8A8F;
  --primary-color-dark: #4A6C6F;
  --secondary-color: #E89B7A;
  --secondary-color-dark: #D98A5F;
  --danger-color: #E57373;
  --warning-color: #FFD54F;
  --success-color: #4ade80; /* Verde più brillante */
  --info-color: #60a5fa;   /* Blu più brillante */
  --gray-color: #9E9E9E;  /* Grigio più chiaro */
  --gray-color-dark: #757575;

  /* Colori Base Dark */
  --background-color: #121212;
  --background-accent-color: #1E1E1E;
  --text-color: #EAE6E1;
  --text-muted-color: #9E9E9E;
  --text-inverted-color: #121212; /* Testo scuro su sfondi chiari/colorati */
  --border-color: #3A3A3C;
  --modal-overlay-color: rgba(0, 0, 0, 0.7);
  --sheet-background-color: rgba(28, 28, 30, 0.85); /* Già usato per console */

  /* Colori Grafici Dark */
  --chart-grid-color: rgba(255, 255, 255, 0.1);
  --chart-ticks-color: rgba(255, 255, 255, 0.7);
  --chart-elevation-color: #F97316; /* Arancione */
  --chart-elevation-bg: rgba(249, 115, 22, 0.2);
  --chart-speed-color: #38BDF8; /* Azzurro */
}


body {
    background-color: var(--background-color); /* MODIFICATO */
    font-family: 'Inter', sans-serif;
    color: var(--text-color); /* MODIFICATO */
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* ==========================================================================
   === NUOVA SEZIONE: Classi CSS Generiche per Tema ===
   ========================================================================== */

/* Sfondi */
.bg-base { background-color: var(--background-color); }
.bg-accent { background-color: var(--background-accent-color); }

/* Testi */
.text-normal { color: var(--text-color); }
.text-muted { color: var(--text-muted-color); }
.text-inverted { color: var(--text-inverted-color); }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-success { color: var(--success-color); }
.text-info { color: var(--info-color); }

/* Bordi */
.border-base { border-color: var(--border-color); }
.border-primary { border-color: var(--primary-color); }

/* Componenti */
.card-base {
  background-color: var(--background-accent-color);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Sostituisce shadow-lg per coerenza */
  color: var(--text-color);
  /* padding: 1rem; Rimosso padding di default, applicalo dove serve con classi Tailwind (p-4) */
}

.modal-base {
  background-color: var(--background-accent-color);
  color: var(--text-color);
  border-radius: 1rem; /* 16px */
  padding: 1.5rem; /* 24px */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Sostituisce shadow */
  border: 1px solid var(--border-color);
  max-width: 400px;
  width: 90%;
  max-height: 90vh; /* Aggiunto da codice esistente */
  overflow-y: auto; /* Aggiunto da codice esistente */
}

.input-base {
  width: 100%;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 0.75rem; /* 12px */
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}
.input-base::placeholder {
    color: var(--text-muted-color);
    opacity: 0.7;
}
/* Stile focus (opzionale ma consigliato) */
.input-base:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.textarea-base {
    /* Stili simili a input-base, ma per textarea */
    width: 100%;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.75rem; /* 12px */
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    resize: vertical; /* Permetti resize verticale */
}
.textarea-base::placeholder { color: var(--text-muted-color); opacity: 0.7; }
.textarea-base:focus { /* Stessi stili focus di input-base */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.select-base {
    width: 100%;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.75rem; /* 12px */
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Icona grigia */
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Spazio per la freccia */
}
.select-base:focus { /* Stessi stili focus di input-base */
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
}
/* Aggiorna il colore dell'icona SVG per il tema scuro */
[data-theme="dark"] .select-base {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239E9E9E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); /* Icona grigio chiaro */
}

/* Pulsanti */
.btn {
  /* Dimensioni e Arrotondamento (Puoi scegliere valori diversi) */
  padding: 0.625rem 1rem; /* Equivalente a py-2.5 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 700; /* bold */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  /* Transizioni e Interazioni */
  transition: all 0.2s ease-in-out;
  text-align: center;
  border: 1px solid transparent; /* Bordo base trasparente */
  cursor: pointer;
  display: inline-flex; /* Per allineare icone */
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Spazio tra icona e testo */
}
.btn:active { transform: scale(0.96); opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Varianti Colore Pulsanti */
.btn-primary { background-color: var(--primary-color); color: var(--text-inverted-color); border-color: var(--primary-color);}
.btn-primary:hover:not(:disabled) { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); }

.btn-secondary { background-color: var(--secondary-color); color: var(--text-inverted-color); border-color: var(--secondary-color); }
.btn-secondary:hover:not(:disabled) { background-color: var(--secondary-color-dark); border-color: var(--secondary-color-dark); }

.btn-danger { background-color: var(--danger-color); color: var(--text-inverted-color); border-color: var(--danger-color); }
.btn-danger:hover:not(:disabled) { opacity: 0.85; } /* O definisci --danger-color-dark */

.btn-success { background-color: var(--success-color); color: var(--text-inverted-color); border-color: var(--success-color); }
.btn-success:hover:not(:disabled) { opacity: 0.85; } /* O definisci --success-color-dark */

.btn-info { background-color: var(--info-color); color: var(--text-inverted-color); border-color: var(--info-color); }
.btn-info:hover:not(:disabled) { opacity: 0.85; } /* O definisci --info-color-dark */

.btn-gray { background-color: var(--gray-color); color: var(--text-inverted-color); border-color: var(--gray-color); }
.btn-gray:hover:not(:disabled) { background-color: var(--gray-color-dark); border-color: var(--gray-color-dark); }

/* Pulsante Outline/Ghost (esempio) */
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}


/* ==========================================================================
   2. Layout (Mappa, Pagine, etc.)
   ========================================================================== */

.page-content {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color); /* MODIFICATO */
    opacity: 1; /* Sempre opaca */
    transform: translateY(100%); /* Nascosta sotto di default */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), /* Curva di easing più reattiva */
                visibility 0.35s;
    z-index: 10;
}
/* ... resto delle regole per .page-content, .page-visible, .page-enter, .page-leave-active invariato ... */
.page-content.page-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    z-index: 2; /* Pagina attiva sempre in primo piano */
}
.page-enter {
    /*transform: translateY(0);*/
    z-index: 3; /* Assicura che entri sopra la pagina vecchia */
}
.page-leave-active {
    z-index: 1;
    transition: transform 0.3s ease-out, visibility 0.3s ease-out; /* Transizione più veloce per uscire */
}


#map-view.page-content {
    background-color: transparent;
    transform: translateY(0) !important;
    transition: none !important;
}

#map-view.page-leave-active {
    /* Non far uscire la mappa */
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #e0e0e0; /* Fallback, ma dovrebbe essere coperto dalle tile */
    touch-action: none;
    z-index: 0;
    padding-bottom: calc(var(--bottom-tab-bar-height) + var(--safe-area-bottom));
    box-sizing: border-box;
    transition: padding-bottom 0.4s ease-in-out;
}
/* ... body.is-recording #map invariato ... */
body.is-recording #map {
    padding-bottom: var(--safe-area-bottom);
}

.info-page {
    overflow-y: auto;
    padding-top: calc(var(--safe-area-top) + 4rem);
    padding-bottom: calc(var(--safe-area-bottom) + 80px);
    touch-action: pan-y;
    background-color: var(--background-color); /* Assicura sfondo corretto */
    height: 100vh;
    box-sizing: border-box;
}

/* Rimosso #discover-page background specifico, usa .info-page */

.content-padding {
    padding-left: 1rem;
    padding-right: 1rem;
}

#bottom-tab-bar {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
    /* Spostata definizione stile qui */
    position: fixed; /* Aggiunto */
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Aggiunto */
}
/* ... #bottom-tab-bar.tab-bar-hidden invariato ... */
#bottom-tab-bar.tab-bar-hidden {
    transform: translateY(100%);
}

/* Stile base DIV interno alla tab bar */
#bottom-tab-bar > div {
    display: flex; /* Aggiunto */
    justify-content: space-around; /* Aggiunto */
    align-items: center; /* Aggiunto */
    background-color: color-mix(in srgb, var(--background-accent-color) 95%, transparent);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: var(--safe-area-bottom); /* Spostato padding qui */
}

.tab-bar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    padding-top: 12px;
    color: var(--text-muted-color); /* MODIFICATO */
    background-color: transparent;
    border: none;
    font-size: 0.75rem;
    transition: color 0.2s ease;
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
}

.tab-bar-btn svg { margin-bottom: 2px; }
.tab-bar-btn.active { color: var(--secondary-color); font-weight: 600; }

/* Stili Prose (per contenuti HTML, es. Privacy) - Assicurati che usino variabili */
.prose { color: var(--text-color); }
.prose p, .prose li { color: var(--text-muted-color); }
.prose strong { color: var(--text-color); font-weight: 700; }
.prose a { color: var(--primary-color); text-decoration: underline; }
.prose a:hover { color: var(--primary-color-dark); }
.prose h1, .prose h2, .prose h3 { color: var(--text-color); font-weight: 700; margin-bottom: 1em; }
.prose h1 { font-size: 1.875rem; } /* text-3xl */
.prose h2 { font-size: 1.5rem; } /* text-2xl */
.prose h3 { font-size: 1.25rem; } /* text-xl */

/* ==========================================================================
   3. Componenti UI (Controlli Mappa, Popup, etc.)
   ========================================================================== */

#top-ui-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + var(--safe-area-top));
    pointer-events: none;
}
/* ... #top-ui-container > * invariato ... */
#top-ui-container > * {
    pointer-events: auto;
}


/* Stile Pulsante Menu e Controlli Mappa */
.map-control-button { /* Nuova classe base per questi bottoni */
    background-color: color-mix(in srgb, var(--background-accent-color) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    border-radius: 0.75rem; /* 12px */
    width: 48px; height: 48px;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease-in-out;
    color: var(--text-color); /* Colore icona */
}
.map-control-button svg { stroke: currentColor; /* Usa il colore del bottone */ }

.map-control-button:hover {
    background-color: color-mix(in srgb, var(--background-accent-color) 85%, transparent);
}

.map-control-button.active {
    background-color: var(--secondary-color);
    color: var(--text-inverted-color); /* Icona bianca/scura */
    border-color: transparent;
    transform: scale(1.05);
}
.map-control-button.active svg { stroke: var(--text-inverted-color); }

/* Applica la classe base ai bottoni */
#menu-toggle-btn { /* Mantiene solo posizionamento */
    position: static;
    /* Rimuove stili specifici, usa .map-control-button */
}
/* Applica la classe in HTML: <button id="menu-toggle-btn" class="map-control-button">...</button> */

.map-controls { /* Mantiene solo posizionamento e layout flex */
    position: fixed;
    top: calc(var(--safe-area-top) + 1rem);
    right: calc(var(--safe-area-right) + 1rem);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1050 !important;
}
/* Applica la classe in HTML ai bottoni interni: <button id="layer-switcher-btn" class="map-control-button">...</button> */


.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: bold;
    font-size: 0.875rem;
    border: 1px solid var(--border-color); /* USA VARIABILE */
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* Colori specifici per provider */
}
.social-login-btn#google-signin-btn { background-color: #FFFFFF; color: #333; }
.social-login-btn#apple-signin-btn { background-color: #000000; color: #FFFFFF; }
[data-theme="dark"] .social-login-btn#google-signin-btn { background-color: #4285F4; color: #FFFFFF; border-color: #4285F4; }
[data-theme="dark"] .social-login-btn#apple-signin-btn { background-color: #FFFFFF; color: #000000; border-color: #FFFFFF; }

.social-login-btn:hover {
    opacity: 0.9;
}

/* Layer Options */
#layer-options {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    position: absolute;
    top: 56px;
    right: 0;
    background-color: color-mix(in srgb, var(--background-accent-color) 80%, transparent); /* USA VARIABILE */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); /* USA VARIABILE */
    overflow: hidden;
    width: 120px; /* Era 120px */
    /* NUOVO: Usa flex per i bottoni interni */
    display: flex;
    flex-direction: column;
}
#layer-options.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.layer-option {
    /* Stili base bottone, ma con padding diverso */
    padding: 0.75rem; /* Aumenta padding */
    cursor: pointer;
    background: none;
    border: none;
    text-align: center; /* Centra icona */
    color: var(--text-muted-color); /* Colore icona spenta */
    transition: background-color 0.2s, color 0.2s;
    width: 100%; /* Occupa tutta larghezza */
}
.layer-option:not(:last-child) {
    border-bottom: 1px solid var(--border-color); /* USA VARIABILE */
}
.layer-option:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.layer-option.active {
    background-color: var(--primary-color);
    color: var(--text-inverted-color); /* Icona attiva */
}
.layer-option svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    display: inline-block; /* Per centrare */
}
/* Rimosso .layer-option.active svg, usa color del bottone */


/* Map Actions Menu */
#map-actions-menu {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    position: absolute;
    top: 56px; /* Sotto il bottone toggle */
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Spazio tra i bottoni */
}
#map-actions-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Applica la classe .map-control-button ai bottoni dentro #map-actions-menu in HTML */
/* Es: <button id="center-map-btn" class="map-control-button">...</button> */

#map-actions-toggle-btn svg {
    /* stroke: var(--text-dark); -> Rimosso, usa .map-control-button */
    transition: transform 0.3s ease;
}
/* ... resto stili toggle invariato ... */
#map-actions-toggle-btn.active svg#plus-icon {
    transform: rotate(45deg);
}
#map-actions-toggle-btn.active svg#close-icon {
    transform: rotate(0);
}


/* Popup OpenLayers */
.ol-popup {
    position: absolute;
    background-color: var(--background-accent-color); /* MODIFICATO */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color); /* MODIFICATO */
    bottom: calc(12px + var(--safe-area-bottom)); /* Era 12px */
    left: -50px; /* Mantiene offset */
    min-width: 200px;
    color: var(--text-color); /* Colore testo default */
}
/* Stili freccia popup */
.ol-popup:after, .ol-popup:before {
    top: 100%; border: solid transparent; content: " "; height: 0; width: 0;
    position: absolute; pointer-events: none;
}
.ol-popup:after { border-top-color: var(--background-accent-color); border-width: 10px; left: 48px; margin-left: -10px; } /* MODIFICATO colore */
.ol-popup:before { border-top-color: var(--border-color); border-width: 11px; left: 48px; margin-left: -11px; } /* MODIFICATO colore */

.ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; font-size: 1.5rem; color: var(--text-muted-color); } /* MODIFICATO colore */
.ol-popup-closer:after { content: "✖"; }
.ol-popup h3 { color: var(--text-color); margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem; font-weight: bold; } /* MODIFICATO colore */
.ol-popup p { color: var(--text-muted-color); margin: 0; font-size: 0.875rem; } /* MODIFICATO colore */
/* Stile bottone nel popup */
.ol-popup button { /* Usa le classi .btn .btn-primary */
    font-size: 0.75rem; /* text-sm */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    margin-top: 0.5rem; /* mt-2 */
}


/* Banner Notifica */
#notification-banner {
    /* ... posizionamento e animazione invariati ... */
    position: fixed;
    top: 0;
    left: 50%;
    width: auto;
    min-width: 300px;
    max-width: 90%;
    padding: 1rem;
    padding-top: calc(1rem + var(--safe-area-top));
    color: var(--text-inverted-color); /* Testo sempre chiaro */
    text-align: center;
    z-index: 4000;
    border-radius: 0 0 12px 12px;
    font-weight: 500;
    transform: translate(-50%, -150%);
    transition: transform 0.4s ease-in-out;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
#notification-banner.show { transform: translate(-50%, 0); }
/* Usa variabili per i colori di stato */
#notification-banner.error { background: var(--danger-color); }
#notification-banner.success { background: var(--success-color); }
#notification-banner.info { background: var(--info-color); }
#notification-banner.warning { background: var(--warning-color); } /* Aggiunto warning */


/* Overlay Modale */
.modal-overlay {
    position: fixed; inset: 0;
    background-color: var(--modal-overlay-color); /* USA VARIABILE */
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }

/* Contenuto Modale (usa .modal-base) */
/* .modal-content { ... } -> Rimosso, usa .modal-base in HTML */
/* Applica in HTML: <div class="modal-overlay"><div class="modal-base">...</div></div> */

/* Stili specifici interni ai modali (titoli, input, bottoni) */
.modal-base h2 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* bold */
    margin-bottom: 1rem;
    color: var(--text-color); /* Assicura colore corretto */
}
.modal-base p {
    font-size: 0.875rem; /* text-sm */
    color: var(--text-muted-color);
    margin-bottom: 1rem;
}
.modal-base label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* medium */
    color: var(--text-muted-color); /* Leggermente più scuro */
    margin-bottom: 0.25rem; /* mb-1 */
}

/* Usa .input-base, .textarea-base, .select-base in HTML */
/* .modal-content input, .modal-content textarea { ... } -> Rimosso */

.modal-buttons { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; } /* Aggiunto margine sopra */
/* Applica classi .btn .btn-primary, .btn-gray etc. ai bottoni nei modali in HTML */

/* Auth Form Tabs */
#auth-form .tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color); /* USA VARIABILE */
    margin-bottom: 1rem;
}
#auth-form .tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: var(--text-muted-color); /* USA VARIABILE */
    border-bottom: 2px solid transparent; /* Base trasparente */
    margin-bottom: -1px; /* Sovrappone bordo inferiore */
    transition: color 0.2s, border-color 0.2s;
}
#auth-form .tab:hover {
    color: var(--text-color);
}
#auth-form .tab.active {
    color: var(--primary-color); /* Usa colore primario per attivo */
    border-bottom-color: var(--primary-color); /* USA VARIABILE */
}
#auth-form .form-content { display: none; }
#auth-form .form-content.active { display: block; }
#auth-form a { /* Link password dimenticata */
    font-size: 0.875rem; /* text-sm */
    color: var(--primary-color); /* Usa colore primario */
    text-decoration: none;
}
#auth-form a:hover { text-decoration: underline; }

/* Separatore "Oppure accedi con" */
#auth-form .separator { /* Aggiungi questa classe al div in HTML */
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted-color);
    font-size: 0.75rem; /* text-xs */
    margin: 1.25rem 0; /* py-5 */
}
#auth-form .separator::before,
#auth-form .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color); /* USA VARIABILE */
}
#auth-form .separator:not(:empty)::before { margin-right: .5em; }
#auth-form .separator:not(:empty)::after { margin-left: .5em; }


/* User Info nel Menu */
#user-info {
    font-size: 0.875rem; /* text-sm */
    color: var(--text-muted-color); /* MODIFICATO */
    margin-bottom: 1rem;
    padding: 0.5rem; /* p-2 */
    background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%); /* Leggermente diverso da sfondo */
    border-radius: 0.5rem; /* rounded-lg */
    overflow-wrap: break-word;
    word-break: break-all;
}
[data-theme="dark"] #user-info {
     background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%);
}


/* Mappe nei Dettagli */
#track-detail-map, #public-track-detail-map {
    height: 300px;
    background-color: #e0e0e0; /* Fallback colore */
    border-radius: 0.5rem; /* Aggiunto arrotondamento */
    border: 1px solid var(--border-color); /* Aggiunto bordo */
    overflow: hidden; /* Nasconde angoli mappa base */
}

/* Star Rating (già usano variabili colore) */
/* ... .star-rating, .star, .static-stars invariati ... */
.star-rating {
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--border-color); /* Colore stelle spente */
}
.star-rating .star {
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
}
.star-rating .star:hover {
    transform: scale(1.1);
}
.star-rating .star.hovered {
    color: var(--warning-color);
}
.star-rating .star.selected {
    color: var(--warning-color);
}

.static-stars {
    display: flex; /* Aggiunto per allineamento */
    align-items: center; /* Aggiunto */
    gap: 0.1rem; /* Spazio tra stelle */
    color: var(--warning-color);
}
.static-stars .muted {
    color: var(--border-color); /* Usa colore bordo per stelle spente */
}


/* Select (Filtri, Modali) */
/* Rimuovi .filter-select e .modal-select, usa .select-base in HTML */


/* Stili Pulsanti con Gradienti (da rimuovere/sostituire) */
/* .bg-green-500, .bg-green-600, ... etc -> Rimuovi queste regole. */
/* Applica invece le classi .btn .btn-success, .btn-info, .btn-danger, .btn-primary, .btn-gray in HTML */


/* Animazione fadeInUp (invariata) */
/* ... */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ... .sheet-content-animation invariato ... */


/* Hover Liste (aggiusta colori se necessario) */
.info-page li:hover {
    /* ... transform invariato ... */
    box-shadow: 0 8px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Esempio ombra più pronunciata */
}

/* Badge (adatta colori) */
.badge-item {
    /* ... layout invariato ... */
    opacity: 0.4; /* Aumenta leggermente opacità spenti */
    filter: grayscale(80%); /* Riduci leggermente grayscale */
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 0.75rem;
}
.badge-item.earned { opacity: 1; filter: grayscale(0%); }

.badge-icon {
    /* ... dimensioni e layout invariati ... */
    background-color: color-mix(in srgb, var(--border-color) 50%, var(--background-color)); /* Colore spenti basato su tema */
    border-radius: 9999px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.badge-item.earned .badge-icon {
    background-color: color-mix(in srgb, var(--warning-color) 30%, var(--background-accent-color)); /* Colore base guadagnati */
}
/* Colori livelli (OK con colori specifici) */
.badge-item.level-1 .badge-icon { background-color: #CD7F32; color: white; }
.badge-item.level-2 .badge-icon { background-color: #C0C0C0; color: white; }
.badge-item.level-3 .badge-icon { background-color: #FFD700; color: #333; }

.badge-item.level-3 { transform: scale(1.05); }

.badge-name {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted-color); /* USA VARIABILE */
}
.badge-item.earned .badge-name {
    color: var(--text-color); /* USA VARIABILE */
    font-weight: 600;
}

/* Wishlist Button (OK con variabile warning) */
/* ... */
.wishlist-btn svg {
    transition: all 0.2s ease-in-out;
}
.wishlist-btn.active svg {
    fill: var(--warning-color);
    stroke: var(--warning-color);
    transform: scale(1.1);
}


/* Sezione Condizioni (già scura, verifica leggibilità testo) */
#trail-conditions-section {
    background-color: var(--background-accent-color); /* USA VARIABILE ACCENT */
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1.5rem;
    border: 1px solid var(--border-color); /* Aggiunto bordo */
}
/* Aggiungi stili per i tag condizione in tema chiaro se necessario */
/* ... .condition-tag, .condition-perfect etc. potrebbero aver bisogno di versioni per tema chiaro ... */
/* Esempio: */
/* :root { --condition-perfect-bg: #dcfce7; --condition-perfect-text: #166534; ... } */
/* [data-theme="dark"] { --condition-perfect-bg: #166534; --condition-perfect-text: #dcfce7; ... } */
/* .condition-perfect { background-color: var(--condition-perfect-bg); color: var(--condition-perfect-text); } */


.condition-choice-btn {
    flex-grow: 1;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color); /* USA VARIABILE */
    transition: all 0.2s ease;
    background-color: var(--background-color); /* Sfondo base */
    color: var(--text-color); /* Testo normale */
}
.condition-choice-btn:hover {
    background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%); /* Leggero hover */
    transform: translateY(-2px);
}


/* =========================== */
/* === Stili Galleria Foto === */
/* =========================== */

/* Contenitore principale Swiper */
.track-photo-gallery {
    position: relative; /* Necessario per posizionamento assoluto interno */
    overflow: hidden; /* FONDAMENTALE: Nasconde slide che escono */
    margin-left: -1.5rem; /* Compensa padding di .content-section per effetto full-bleed */
    margin-right: -1.5rem;
    padding-left: 1.5rem; /* Ripristina padding interno per primo/ultimo slide */
    padding-right: 1.5rem;
    padding-top: 4px;    /* Piccolo padding sopra/sotto */
    padding-bottom: 4px;
    /* Altezza basata sull'immagine interna (h-48 = 12rem) + padding */
    height: calc(12rem + 8px);
    /* background-color: lightblue; */ /* Decommenta per debug visivo del contenitore */
}

/* Contenitore interno che scorre */
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* Usa l'altezza del contenitore padre */
    z-index: 1;
    display: flex; /* FONDAMENTALE: Allinea gli slide orizzontalmente */
    transition-property: transform;
    box-sizing: content-box;
    align-items: center; /* Centra verticalmente gli slide se hanno altezze diverse */
}

/* Stile per ogni slide individuale */
.swiper-slide {
    flex-shrink: 0; /* FONDAMENTALE: Impedisce agli slide di restringersi */
    width: 65%;     /* Larghezza desiderata (come da JS) */
    max-width: 250px;/* Limite massimo (come da JS) */
    height: 100%;   /* Usa l'altezza del wrapper */
    margin-right: 16px; /* Equivalente a spaceBetween: 16 in JS */
    position: relative;
    transition-property: transform;
    display: flex; /* Per allineare l'immagine all'interno */
    align-items: center;
    justify-content: center;
    /* background-color: lightcoral; */ /* Decommenta per debug visivo dello slide */
}

/* Stile per l'immagine dentro lo slide */
.swiper-slide img {
    display: block; /* Rimuove spazio extra sotto */
    width: 100%; /* Occupa tutta la larghezza dello slide */
    height: 12rem; /* h-48 (come definito in JS) */
    object-fit: cover; /* Mantiene proporzioni e riempie */
    border-radius: 0.5rem; /* rounded-lg (come da JS) */
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Aggiunge ombra leggera */
}
.swiper-slide img:hover {
    transform: scale(1.05); /* Come da JS */
}

/* Nasconde eventuali scrollbar orizzontali generate dal browser */
.track-photo-gallery::-webkit-scrollbar { display: none; }
.track-photo-gallery { -ms-overflow-style: none; scrollbar-width: none; }


/* Nearby Tracks List (Scroll orizzontale) */
#nearby-tracks-list {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Nasconde scrollbar */
    touch-action: pan-x;
}
#nearby-tracks-list::-webkit-scrollbar { display: none; }

.nearby-track-card {
    aspect-ratio: 3 / 4;
    transition: transform 0.3s ease;
    snap-start: start; /* Aggancia inizio card */
    flex-shrink: 0; /* Non restringere */
    width: 75%; /* Occupa 3/4 larghezza */
    max-width: 250px; /* Limite massimo */
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: var(--border-color); /* Sfondo placeholder durante caricamento */
}
.card-background { /* Immagine di sfondo */
    position: absolute; inset: 0; width: 100%; height: 100%;
    background-position: center; background-size: cover;
    transition: transform 0.3s ease;
}
.nearby-track-card:hover .card-background { transform: scale(1.05); }

.card-logo-overlay { /* Logo su immagini default */
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: none; /* Nascosto di default */
    align-items: center; justify-content: center;
    background-image: url('../assets/logo.jpg'); /* Assicurati percorso corretto */
    background-size: 50%; background-repeat: no-repeat; background-position: center;
    opacity: 0.5;
}
.nearby-track-card.no-image .card-logo-overlay { display: flex; } /* Mostra se c'è classe no-image */

/* Overlay gradiente e testo card */
.nearby-track-card .gradient-overlay { /* Nuovo div per gradiente */
     position: absolute; inset: 0;
     background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); /* Gradiente più scuro */
}
.nearby-track-card .card-content { /* Nuovo div per contenuto testo */
    position: relative; /* Sta sopra gradiente */
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1rem; /* p-4 */
    color: white; /* Testo bianco */
}
.card-name { font-size: 1.125rem; font-weight: 700; line-height: 1.3; } /* text-lg bold leading-tight */
.card-details { display: flex; align-items: center; font-size: 0.75rem; color: #E5E7EB; margin-top: 0.25rem; gap: 0.75rem; } /* text-xs text-white/80 mt-1 gap-3 */


/* Pulsante Registrazione Centrale */
#record-action-btn {
    background-color: var(--secondary-color); /* USA VARIABILE */
    color: var(--text-inverted-color); /* USA VARIABILE */
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-20px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Bordo usa colore accento per staccare dalla tab bar */
    border: 4px solid var(--background-accent-color);
    transition: background-color 0.2s ease;
}
#record-action-btn:hover { background-color: var(--secondary-color-dark); } /* USA VARIABILE */

.tab-bar-btn:nth-child(4) { margin-left: auto; } /* Mantiene spostamento per bottone centrale */

/* Console Registrazione */
#recording-console-container {
    position: fixed; bottom: 0; left: 0; width: 100%;
    z-index: 999;
    padding-bottom: calc(var(--safe-area-bottom) + 1rem); /* Aumenta leggermente padding sotto */
    pointer-events: none;
}
#recording-console {
    background-color: var(--sheet-background-color); /* USA VARIABILE SHEET */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-color); /* Usa colore testo del tema */
    padding: 1rem; margin: 0 1rem;
    border-radius: 1.5rem;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color); /* USA VARIABILE BORDO */
    transform: translateY(120%); /* Leggermente più nascosto */
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
}
#recording-console.visible { transform: translateY(0); }
/* Stili interni console (testo, sfondi blocchi) */
#recording-console .stat-block { /* Applica questa classe ai div con le statistiche */
    background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%);
    padding: 0.5rem; /* p-2 */
    border-radius: 0.5rem; /* rounded-lg */
}
#recording-console .stat-label { /* Applica alle etichette (Distanza, Tempo...) */
    font-size: 0.75rem; /* text-xs */
    color: var(--text-muted-color);
}
#recording-console .stat-value { /* Applica ai valori (0.00 km, 00:00:00...) */
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* bold */
    color: var(--text-color);
}
/* Bottoni console (Start, Stop, Pausa...) - Usa classi .btn */
/* Applica .btn .btn-success a #start-btn, .btn .btn-danger a #stop-btn, etc. in HTML */
/* Stile specifico per pausa/play */
#pause-btn { /* Mantieni colore arancione se vuoi */
    background-color: var(--warning-color);
    color: var(--text-inverted-color);
    padding: 0.75rem; /* p-3 */
    border-radius: 9999px; /* rounded-full */
}
#pause-btn:hover { opacity: 0.85; }


/* Splash Screen (invariato) */
/* ... */
#splash-screen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
    opacity: 1; visibility: visible;
}
#splash-screen::before {
    content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4);
}
#splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { position: relative; text-align: center; color: white; animation: fadeInUp 1s ease-out; }
.splash-logo { width: 128px; height: 128px; display: block; margin: 0 auto 1rem auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.splash-title { font-size: 2.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.splash-subtitle { font-size: 1rem; opacity: 0.9; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }


/* Pagina Dettaglio Pubblico (Refactoring Sfondo e Testo) */
#public-track-detail-page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* padding-top: calc(var(--safe-area-top) + 1rem); -> Rimosso, gestito da header */
    padding-bottom: calc(var(--safe-area-bottom) + 90px); /* Aumenta spazio per bottoni sticky */
    background-color: var(--background-color); /* Usa sfondo base tema */
    color: var(--text-color); /* Usa testo base tema */
    height: 100vh;
    box-sizing: border-box;
}
/* Contenitore Immagine Sfondo */
#public-track-detail-page .background-image-container { /* Nuovo div wrapper in HTML */
    position: fixed; /* Mantiene effetto parallax */
    top: 0; left: 0; width: 100%; height: 40vh; /* Altezza immagine */
    z-index: 1;
}
#public-track-bg-image { /* Immagine stessa */
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-out; /* Animazione opacità */
}
/* Overlay Gradiente sull'immagine */
#public-track-detail-page .background-image-container::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--background-color) 80%, black) 0%, transparent 70%); /* Gradiente verso colore sfondo tema */
}
/* Header Trasparente sopra immagine */
#public-track-detail-page header {
    position: fixed; /* Fisso in alto */
    top: 0; left: 0; right: 0;
    z-index: 20; /* Sopra immagine e contenuto */
    padding: 0.75rem 1rem; /* p-3/4 */
    padding-top: calc(var(--safe-area-top) + 0.75rem);
    display: flex; justify-content: space-between; align-items: center;
    color: white; /* Testo/Icone bianche sull'immagine */
}
#public-track-detail-page header button { /* Stile bottoni header */
    background: none; border: none; padding: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}
#public-track-detail-page header button:hover { color: white; }
#public-track-detail-page header #edit-public-track-btn { /* Bottone modifica */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 700; /* bold */
    display: flex; align-items: center; gap: 0.5rem;
    color: white;
}
#public-track-detail-page header #edit-public-track-btn:hover { background-color: rgba(255, 255, 255, 0.2); }

/* Contenuto Scrollabile */
.public-track-content-scroll { /* Nuovo div wrapper in HTML */
    position: relative; /* Per stare sopra immagine (con z-index) */
    z-index: 10;
    margin-top: 35vh; /* Inizia poco sopra fine immagine */
    padding-top: 1.5rem; /* Spazio sopra primo blocco */
    background-color: var(--background-color); /* Sfondo contenuto */
    border-top-left-radius: 1.5rem; /* Arrotonda angoli sopra */
    border-top-right-radius: 1.5rem;
    min-height: calc(100vh - 35vh); /* Assicura che riempia schermo */
}
/* Stile Titolo e Owner */
.public-track-content-scroll h1 { /* Titolo traccia */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* bold */
    line-height: 1.2;
    color: var(--text-color); /* Colore tema */
    padding: 0 1.5rem; /* p-6 orizzontale */
}
.public-track-content-scroll #public-track-owner-link { /* Link owner */
    color: var(--text-muted-color); /* Colore tema */
    margin-top: 0.25rem;
    display: block; /* Per margine */
    padding: 0 1.5rem;
}
.public-track-content-scroll #public-track-detail-description { /* Descrizione */
    color: var(--text-muted-color); /* Colore tema */
    margin-top: 1rem;
    font-style: italic;
    padding: 0 1.5rem;
}

/* Griglia Statistiche */
.stats-grid-public { /* Nuovo ID o classe per la griglia */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colonne */
    gap: 1rem; /* gap-4 */
    text-align: center;
    margin: 1.5rem 1.5rem; /* my-6 px-6 */
    padding: 1rem 0; /* py-4 */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.stats-grid-public > div { /* Stile blocco statistica */
    background-color: var(--background-accent-color); /* Sfondo blocco */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid var(--border-color);
}
.stats-grid-public .stat-label { /* Etichetta (Distanza, Tempo...) */
    font-size: 0.75rem; /* text-sm */
    color: var(--text-muted-color);
}
.stats-grid-public .stat-value { /* Valore (-- km, --:--:--...) */
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* bold */
    color: var(--text-color);
    margin-top: 0.25rem;
}
/* Colori specifici per D+ e D- */
#public-track-detail-ele-gain { color: var(--success-color); }
#public-track-detail-ele-loss { color: var(--danger-color); }
/* Stile per blocco a colonna intera (Vel Max, VAM) */
.stats-grid-public > div.col-span-2 { grid-column: span 2 / span 2; }

/* Stili Sezioni (Split, Condizioni, Mappa, Grafico, Foto) */
.content-section {
    padding: 0 1.5rem; /* Padding orizzontale */
    margin-top: 1.5rem; /* Spazio tra sezioni */
}
.content-section h2 { /* Titoli sezioni */
    font-size: 1.125rem; /* text-lg */
    font-weight: 700; /* bold */
    color: var(--text-color);
    margin-bottom: 0.75rem; /* mb-3 */
}
/* Tabella Split */
#public-track-detail-splits table { width: 100%; font-size: 0.875rem; color: var(--text-color); }
#public-track-detail-splits thead { color: var(--text-muted-color); font-weight: 400; text-align: left; }
#public-track-detail-splits th, #public-track-detail-splits td { padding: 0.5rem; } /* p-2 */
#public-track-detail-splits tbody { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
#public-track-detail-splits tr:not(:last-child) td { border-bottom: 1px solid var(--border-color); }
#public-track-detail-splits .text-right { text-align: right; }
#public-track-detail-splits .font-bold { font-weight: 700; }
#public-track-detail-splits .text-green-400 { color: var(--success-color); } /* Usa variabile */
#public-track-detail-splits .font-mono { font-family: monospace; } /* Mantiene font mono */

/* Sezione Condizioni */
/* #trail-conditions-section { ... } -> Usa .content-section + stili interni */

/* Contenitore Mappa e Grafico */
.map-chart-container {
    border-radius: 0.75rem; /* rounded-lg */
    background-color: var(--background-accent-color);
    border: 1px solid var(--border-color);
    overflow: hidden; /* Nasconde angoli mappa/grafico */
}
/* Assicurati che #public-track-detail-map e #public-combined-chart abbiano altezza */

/* Galleria Foto */
/* ... stili swiper invariati ... */

/* Barra Bottoni Sticky */
.sticky-actions-bar { /* Nuovo ID o classe per il div sticky */
    position: sticky; /* Appiccicato al fondo */
    bottom: 0;
    z-index: 15; /* Sopra contenuto ma sotto modali */
    padding: 1rem 1.5rem; /* p-4/6 */
    padding-bottom: calc(var(--safe-area-bottom) + 1rem); /* Considera safe area */
    background-color: color-mix(in srgb, var(--background-color) 80%, transparent); /* Sfondo con trasparenza */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
}
.sticky-actions-bar > div { /* Contenitore flex interno */
    display: flex; gap: 0.75rem; /* gap-3 o gap-4 */
}
/* Stile Bottoni Azione (Segui, Wishlist, Download) */
.sticky-actions-bar .action-btn { /* Classe base per questi bottoni */
    padding: 0.875rem; /* p-3.5 o p-4 */
    border-radius: 0.75rem; /* rounded-xl */
    font-weight: 700; /* bold */
    transition: background-color 0.2s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; /* Non restringere bottoni piccoli */
}
.sticky-actions-bar .action-btn svg { width: 1.5rem; height: 1.5rem; } /* h-6 w-6 */

/* Bottone Segui (principale) */
#follow-public-track-btn {
    flex-grow: 1; /* Occupa spazio rimanente */
    font-size: 1.125rem; /* text-lg */
    gap: 0.5rem; /* gap-2 */
    /* Applica colori con classi .btn .btn-secondary */
}
/* Bottoni piccoli (Wishlist, Download) */
#wishlist-btn, #download-public-track-btn, #download-public-track-map-btn {
    background-color: color-mix(in srgb, var(--text-color) 10%, transparent); /* bg-white/10 o simile */
    color: var(--text-color); /* Icona colore testo */
}
#wishlist-btn:hover, #download-public-track-btn:hover, #download-public-track-map-btn:hover {
    background-color: color-mix(in srgb, var(--text-color) 20%, transparent); /* bg-white/20 o simile */
}
/* Stato attivo wishlist (OK con variabile warning) */
#wishlist-btn.active {
    background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
    color: var(--warning-color);
}
#wishlist-btn.active svg { fill: var(--warning-color); stroke: var(--warning-color); }


/* Report Tag Button (Badge rotondo) */
.report-tag-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color); /* USA VARIABILE */
    border-radius: 9999px; /* Pillola */
    font-size: 0.875rem;
    color: var(--text-muted-color); /* USA VARIABILE */
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.report-tag-btn:hover {
    border-color: var(--text-muted-color);
}
.report-tag-btn.active {
    background-color: var(--primary-color); /* USA VARIABILE */
    color: var(--text-inverted-color); /* USA VARIABILE */
    border-color: var(--primary-color); /* USA VARIABILE */
    font-weight: 600;
}


/* Fix Onboarding Swiper (invariato) */
/* ... */
#onboarding-modal .swiper-wrapper { display: flex !important; }
#onboarding-modal .swiper-slide { width: 100%; height: 100%; flex-shrink: 0; }


/* Posizione Controlli Mappa OpenLayers (invariato) */
/* ... */
.ol-zoom { top: 130px; left: 20px; }
.ol-rotate { top: 220px; right: auto; left: 20px; }


/* Console Planner (Usa variabili tema scuro) */
.planner-console-content {
    background-color: var(--sheet-background-color); /* USA VARIABILE */
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: var(--text-color); /* USA VARIABILE */
    padding: 1rem; margin: 0 1rem; border-radius: 1.5rem;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color); /* USA VARIABILE */
    transform: translateY(120%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
    margin-bottom: var(--safe-area-bottom);
}
#planner-console.visible .planner-console-content { transform: translateY(0); }
/* Stili interni planner (Usa classi .input-base, .btn etc.) */
#search-input { /* Applica .input-base in HTML */
    color: var(--text-color); /* Assicura colore testo corretto */
    background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%); /* Sfondo leggermente diverso */
}
/* Stili blocchi statistiche (simili a console registrazione) */
.planner-stat-block { /* Applica questa classe ai div */
    background-color: color-mix(in srgb, var(--background-color) 80%, var(--border-color) 20%);
    padding: 0.5rem; border-radius: 0.5rem;
}
.planner-stat-label { font-size: 0.75rem; color: var(--text-muted-color); }
.planner-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--text-color); }


/* Barra XP */
.xp-bar-container { /* Aggiungi un div contenitore in HTML se non c'è */
    width: 100%;
    background-color: color-mix(in srgb, var(--border-color) 50%, var(--background-color)); /* Sfondo barra */
    border-radius: 9999px; /* rounded-full */
    height: 0.625rem; /* h-2.5 */
    overflow: hidden; /* Nasconde eccesso barra interna */
}
.xp-bar-progress {
    background-color: var(--warning-color); /* Colore XP */
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s ease-out;
}


/* Photo Viewer Modale (Usa variabili per sfondo e bottone) */
#photo-viewer-modal {
    background-color: var(--modal-overlay-color); /* USA VARIABILE */
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
#photo-viewer-modal .modal-content { /* Rimuove stili .modal-base */
    background-color: transparent; box-shadow: none; border: none; padding: 0;
    max-width: 100%; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
#photo-viewer-img { /* Stili immagine invariati */
    max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 8px;
}
#close-photo-viewer-btn { /* Posizionamento invariato, adatta colore */
    position: fixed;
    top: calc(1rem + var(--safe-area-top));
    right: calc(1rem + var(--safe-area-right));
    font-size: 2.5rem; font-weight: 300; width: 2.5rem; height: 2.5rem;
    line-height: 2.5rem; padding: 0; text-align: center;
    z-index: 1510;
    color: rgba(255, 255, 255, 0.7); /* Colore icona chiusura (bianco semi-trasparente) */
    background: none; border: none; cursor: pointer;
}
#close-photo-viewer-btn:hover { color: white; }


/* Contenitori Grafici (invariato) */
.chart-container { position: relative; height: 350px; width: 100%; padding: 0.5rem; }
.chart-container canvas { max-width: 100% !important; height: 100% !important; }

/* ==========================================================================
   NUOVA SEZIONE: Stili per il Toggle del Tema
   ========================================================================== */

#theme-toggle {
  /* Stili base del toggle (dimensioni, sfondo spento) */
  position: relative;
  display: inline-flex;
  height: 1.5rem; /* h-6 */
  width: 2.75rem; /* w-11 */
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px; /* rounded-full */
  border: 2px solid transparent;
  background-color: #E5E7EB; /* bg-gray-200 - Colore spento light */
  transition: background-color 0.2s ease-in-out;
  appearance: none; /* Rimuove stile default */
  padding: 0; /* Rimuove padding default */
}
[data-theme="dark"] #theme-toggle {
    background-color: #374151; /* bg-gray-700 - Colore spento dark */
}

#theme-toggle:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 40%, transparent); }

/* Stile del "pallino" interno */
#theme-toggle span:last-child {
  pointer-events: none;
  display: inline-block;
  height: 1.25rem; /* h-5 (leggermente più piccolo del contenitore) */
  width: 1.25rem; /* w-5 */
  border-radius: 9999px; /* rounded-full */
  background-color: white; /* Pallino bianco */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transform: translateX(0.125rem); /* Posizione iniziale (spento) - leggero offset */
  transition: transform 0.2s ease-in-out;
}

/* Stili quando il toggle è ATTIVO (checked) */
#theme-toggle[aria-checked="true"] {
  background-color: var(--primary-color); /* Colore sfondo acceso */
}
#theme-toggle[aria-checked="true"] span:last-child {
  transform: translateX(1.375rem); /* Posizione finale (acceso) */
}

/* Nasconde testo screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Stili più specifici per i bottoni piccoli nella barra sticky */
.sticky-actions-bar #wishlist-btn,
.sticky-actions-bar #download-public-track-btn,
.sticky-actions-bar #download-public-track-map-btn {
    background-color: var(--background-accent-color); /* Sfondo accento (es. bianco in light) */
    color: var(--text-muted-color); /* Icona/testo grigio in light */
    border: 1px solid var(--border-color); /* Bordo leggero */
}
.sticky-actions-bar #wishlist-btn:hover,
.sticky-actions-bar #download-public-track-btn:hover,
.sticky-actions-bar #download-public-track-map-btn:hover {
    background-color: color-mix(in srgb, var(--background-accent-color) 90%, var(--border-color));
}

/* Stato attivo wishlist */
.sticky-actions-bar #wishlist-btn.active {
    background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
    color: var(--warning-color);
    border-color: var(--warning-color);
}
.sticky-actions-bar #wishlist-btn.active svg { fill: var(--warning-color); stroke: var(--warning-color); }

.detail-view-toggle {
    background-color: transparent;
    color: var(--text-muted-color);
    border: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.detail-view-toggle.active {
    background-color: var(--primary-color);
    color: var(--text-inverted-color);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Controlli per mappa fullscreen*/

#fullscreen-map-container {
    background-color: var(--background-color);
}

/* Classe per mostrare il contenitore */
#fullscreen-map-container.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Assicura che il target della mappa copra tutto */
#fullscreen-map-target {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Stile per i controlli in fullscreen */
#fullscreen-map-container header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10; /* Sopra la mappa */
    /* Lo sfondo trasparente è gestito dal .map-control-button e dai toggle */
}

/* Il pulsante di chiusura usa già .map-control-button */
#fullscreen-map-close-btn {
     /* Assicurati che abbia uno sfondo visibile */
    background-color: color-mix(in srgb, var(--background-accent-color) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}
#fullscreen-map-close-btn:hover {
    background-color: color-mix(in srgb, var(--background-accent-color) 85%, transparent);
}


/* Stile per i toggle (usa lo stesso stile di .detail-view-toggle) */
#fullscreen-map-container .detail-view-toggle {
    background-color: transparent;
    color: var(--text-muted-color);
    border: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
#fullscreen-map-container .detail-view-toggle.active {
    background-color: var(--primary-color);
    color: var(--text-inverted-color);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* --- REGOLA PER APPROCCIO IBRIDO --- */

/* Nascondi tutte le pagine di default, tranne la mappa che fa da sfondo */
.page-content {
    display: none;
}

/* Mostra solo la pagina con la classe 'page-visible' */
.page-content.page-visible {
    display: block;
}

/* La mappa (che è uno strato base) fa eccezione */
#map-view {
    display: block; /* È sempre "sotto" */
}

/* Quando la mappa NON è la pagina attiva, nascondila */
#map-view:not(.page-visible) {
    display: none;
}

/* Quando la mappa È la pagina attiva, assicurati che sia sopra le altre pagine
   che potrebbero essere ancora `display: block` (anche se non visibili) */
#map-view.page-visible {
    display: block;
    z-index: 10; /* O un valore adeguato */
}

/* Le altre pagine devono avere uno z-index più alto della mappa quando sono visibili */
#discover-page.page-visible,
#profile-page.page-visible,
#my-tracks-page.page-visible,
#track-detail-page.page-visible,
#public-track-detail-page.page-visible,
#feed-page.page-visible,
#wishlist-page.page-visible,
#settings-page.page-visible { /* Aggiungi tutti gli ID delle tue pagine qui */
    z-index: 20;
    position: relative; /* Necessario per z-index */
    background: var(--background-color); /* Assicura che la pagina abbia uno sfondo */
}

/* Contenitore per il grafico in modalità fullscreen sulla mappa */
#fullscreen-chart-container {
    position: fixed;
    bottom: 0; /* Allinea al fondo assoluto dello schermo */
    left: 0;
    right: 0;
    
    /* L'altezza totale è 150px (per il grafico) + lo spazio per la barra nera */
    height: calc(200px + env(safe-area-inset-bottom));
    
    background-color: var(--background-accent-color);
    border-top: 1px solid var(--border-color);
    z-index: 40; 
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%);
}

#fullscreen-chart-container.visible {
    transform: translateY(0);
}

/* Ora stilizziamo il div .chart-container interno 
(che ha le classi 'p-2' e 'pt-4')
*/
#fullscreen-chart-container .chart-container {
    height: 200px; /* Altezza fissa SOLO per l'area del grafico */
    box-sizing: border-box; /* Assicura che il padding non aumenti l'altezza */
}
.is-hidden {
    display: none !important;
}
/* Aggiungi alla fine di style.css */
#image-gallery-modal .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}
#image-gallery-modal .swiper-pagination-bullet-active {
    background-color: #FFFFFF;
}

/* Rende le frecce di Swiper bianche e più visibili */
#image-gallery-modal .swiper-button-prev,
#image-gallery-modal .swiper-button-next {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.2s;
}
#image-gallery-modal .swiper-button-prev:hover,
#image-gallery-modal .swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
#image-gallery-modal .swiper-button-prev::after,
#image-gallery-modal .swiper-button-next::after {
    font-size: 1.5rem; /* Frecce più piccole */
}

#gallery-swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Obbligatorio per lo zoom */
}
/* --- FIX GALLERIA FULLSCREEN --- */
#image-gallery-modal {
    position: fixed;
    inset: 0; /* top:0, right:0, bottom:0, left:0 */
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 10000 !important; /* Altissimo, sopra tutto (mappe, header, tab bar) */
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

/* Gestione visibilità */
#image-gallery-modal.hidden {
    display: none !important;
}
#image-gallery-modal.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

/* Assicura che Swiper prenda tutto lo spazio disponibile */
#gallery-swiper {
    flex-grow: 1;
    width: 100%;
    height: 100%;
}

/* Centra le immagini nello slide */
#gallery-swiper-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Stile immagine zoomabile */
#gallery-swiper-wrapper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* --- FIX SPECIFICO PER IL MODALE GALLERIA --- */

/* Forza la slide a occupare tutto lo schermo, annullando il 65% della galleria piccola */
#image-gallery-modal .swiper-slide {
    width: 100% !important;       /* Occupa tutta la larghezza */
    max-width: none !important;   /* Rimuove il limite di 250px */
    height: 100% !important;      /* Occupa tutta l'altezza */
    margin: 0 !important;         /* Rimuove margini strani */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Forza l'immagine a adattarsi allo schermo intero */
#image-gallery-modal .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important; /* Non superare l'altezza schermo */
    object-fit: contain !important; /* Mantieni le proporzioni senza tagliare */
    border-radius: 0 !important;    /* Niente bordi arrotondati in fullscreen */
    box-shadow: none !important;    /* Niente ombre */
}

/* Nasconde il contenitore zoom che potrebbe interferire se non attivo */
#image-gallery-modal .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   DESKTOP MODE OVERRIDES (Solo se body ha classe .is-desktop)
   ========================================================================== */

:root {
    --sidebar-width: 280px;
}

/* 1. Nascondi elementi puramente Mobile */
body.is-desktop #bottom-tab-bar,       /* La barra in basso */
body.is-desktop #record-action-btn,    /* Il tasto REC centrale */
body.is-desktop #menu-toggle-btn,      /* L'hamburger in alto a sinistra */
body.is-desktop #menu-overlay {        /* L'ombra scura del menu */
    display: none !important;
}

/* 2. Trasforma il Menu Mobile in una Sidebar Fissa */
body.is-desktop #nav-menu {
    transform: translateX(0) !important; /* Sempre aperto */
    width: var(--sidebar-width) !important;
    top: 0;
    bottom: 0;
    left: 0;
    border-right: 1px solid var(--border-color);
    box-shadow: none !important; /* Rimuovi ombra mobile */
    background-color: var(--background-accent-color);
    z-index: 50; /* Sotto i modali ma sopra la mappa */
    padding-top: 20px;
}

/* Nascondi il tasto "Login" dalla sidebar su desktop se vuoi metterlo altrove, 
   o lascialo lì. Per ora nascondiamo il pulsante 'Chiudi menu' se ne hai uno interno */

/* 3. Sposta il contenuto principale a destra */
body.is-desktop .page-content {
    left: var(--sidebar-width) !important; /* Sposta l'inizio della pagina */
    width: calc(100% - var(--sidebar-width)) !important; /* Riduci larghezza */
    padding-bottom: 0 !important; /* Niente spazio per la tab bar */
    padding-top: 20px; /* Un po' di aria in alto */
}

/* 4. Adattamenti specifici per la Mappa */
body.is-desktop #map-view.page-content {
    padding-top: 0 !important; /* La mappa deve toccare il bordo alto */
}

body.is-desktop #map {
    padding-bottom: 0 !important; /* Rimuovi padding inferiore del mobile */
}

body.is-desktop .map-controls {
    top: 20px !important;
    right: 20px !important;
}

body.is-desktop #top-ui-container {
    left: var(--sidebar-width) !important; /* Sposta i controlli mappa a destra */
    width: calc(100% - var(--sidebar-width)) !important;
    justify-content: flex-end; /* Allinea a destra */
    pointer-events: none;
}

/* 5. Miglioramento layout Liste (Grid invece di lista verticale) */
body.is-desktop #published-tracks-list ul,
body.is-desktop #feed-tracks-list ul,
body.is-desktop #my-tracks-list ul,
body.is-desktop #wishlist-tracks-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Card responsive */
    gap: 1.5rem;
}

body.is-desktop .nearby-track-card {
    /* Nella lista orizzontale, rendiamole meno larghe su desktop */
    min-width: 200px;
}

/* 6. Centrare i Modali su schermi grandi */
body.is-desktop .modal-base {
    max-width: 500px; /* Un po' più larghi su PC */
    margin: auto;
}

/* 7. Adattamento Pagina Dettaglio (Layout a 2 colonne) */
@media (min-width: 1024px) {
    body.is-desktop #public-track-detail-page .public-track-content-scroll {
        margin-top: 0 !important; /* Rimuovi effetto parallax mobile */
        height: 100vh;
        overflow-y: auto;
        display: grid;
        grid-template-columns: 40% 60%; /* Colonna Info e Colonna Mappa */
        background-color: var(--background-color);
    }

    body.is-desktop #public-track-detail-page .background-image-container {
        display: none; /* Nascondi l'immagine header parallax su desktop per ora */
        /* Oppure puoi metterla come colonna laterale */
    }
    
    /* Per ora manteniamo il layout semplice, affineremo la pagina dettaglio nella Fase 3 */
}

/* style.css - Sezione Desktop */

/* Nascondi le voci di navigazione "Desktop Only" sui dispositivi mobili */
body:not(.is-desktop) .desktop-nav-item {
    display: none !important;
}

/* Mostrale esplicitamente su Desktop */
body.is-desktop .desktop-nav-item {
    display: block !important;
}

/* ==========================================================================
   LANDING PAGE STYLES
   ========================================================================== */

#landing-page {
    position: fixed;
    inset: 0;
    background-color: var(--background-color);
    z-index: 2000; /* Sopra tutto, anche la mappa */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#landing-page.hidden {
    display: none !important;
}

/* Hero Section */
.landing-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 80vh;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.landing-content {
    flex: 1;
    max-width: 500px;
}

.landing-logo {
    width: 80px;
    margin-bottom: 1.5rem;
}

.landing-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.landing-hero p {
    font-size: 1.25rem;
    color: var(--text-muted-color);
    margin-bottom: 2.5rem;
}

.landing-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.landing-cta {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.store-badges {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.store-badge img {
    height: 48px;
    width: auto;
}

.landing-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.landing-image img {
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transform: rotate(-3deg); /* Un tocco di stile */
}

/* Features Grid */
.landing-features {
    background-color: var(--background-accent-color);
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    border-radius: 24px 24px 0 0;
}

.feature-card {
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-align: center;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* Mobile Adaptation (Se mai si aprisse da mobile web) */
@media (max-width: 768px) {
    .landing-hero {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 2rem;
    }
    .landing-buttons {
        justify-content: center;
    }
    .store-badges {
        justify-content: center;
    }
}

/* ==========================================================================
   FASE 3: PLANNER DESKTOP & LISTA PUNTI
   ========================================================================== */

/* Posizionamento Desktop del Pannello Pianificazione */
body.is-desktop #planner-console {
    position: absolute;
    top: 20px;
    left: calc(var(--sidebar-width) + 20px); /* 280px + 20px = 300px */
    bottom: auto;
    width: 380px;
    transform: none !important; /* Disabilita slide-up mobile */
    background-color: var(--background-accent-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 40; /* Sopra la mappa */
    border: 1px solid var(--border-color);
    padding: 0;
    max-height: calc(100vh - 40px); /* Evita che esca dallo schermo */
    overflow-y: auto;
    transition: opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

body.is-desktop #planner-console.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Reset stili interni per adattarli al pannello desktop */
body.is-desktop .planner-console-content {
    box-shadow: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 1.5rem;
    transform: none !important;
}

/* Stile Lista Punti (Waypoint) */
#planner-points-list {
    margin-bottom: 1rem;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
}

.planner-point-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.planner-point-item:last-child {
    border-bottom: none;
}

.planner-point-index {
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 0.5rem;
    width: 20px;
}

.planner-point-coords {
    color: var(--text-muted-color);
    flex-grow: 1;
    font-family: monospace;
}

.delete-point-btn {
    color: var(--danger-color);
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
}
.delete-point-btn:hover {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
}

body.is-desktop #planner-console h2 {
    cursor: move; /* Mostra la manina o le frecce di spostamento */
    user-select: none; /* Evita di selezionare il testo mentre trascini */
    padding: 10px; /* Aumenta l'area cliccabile */
    margin: -10px -10px 10px -10px; /* Compensa il padding per riempire l'header */
    border-bottom: 1px solid var(--border-color); /* Opzionale: separa visivamente l'header */
    background-color: var(--background-accent-color); /* Assicura sfondo solido */
    border-radius: 12px 12px 0 0; /* Arrotonda solo sopra */
}

/* Grafico Desktop (sostituisce la console di registrazione) */
body.is-desktop #fullscreen-chart-container {
    left: var(--sidebar-width) !important; /* Inizia dopo la sidebar */
    width: calc(100% - var(--sidebar-width)) !important;
    bottom: 0;
    height: 250px; /* Altezza fissa comoda */
    background-color: var(--background-accent-color);
    border-top: 1px solid var(--border-color);
    z-index: 45; /* Sopra la mappa, sotto i modali/menu */
    transform: translateY(100%); /* Nascosto di default */
    transition: transform 0.3s ease-in-out;
    display: block !important; /* Assicura che non sia hidden */
}

body.is-desktop #fullscreen-chart-container.visible {
    transform: translateY(0); /* Mostra */
}

/* Nascondi il bottone "Indietro" della modalità fullscreen mobile su desktop */
body.is-desktop #fullscreen-back-btn {
    display: none !important;
}