/*
Theme Name: T>Guido App
Author: Claudio Liverano
Description: PWA per supporto operativo autisti.
Version: 1.0
*/

:root {
    /* Palette Dark Mode */
    --bg-deep-night: #0F172A;
    --text-main: #F8FAFC;
    --text-secondary: #94A3B8;
    
    /* Accenti di Interazione */
    --accent-slate-blue: #6A5ACD;
    --accent-glow: #8378E8;

    /* Colori Operativi e Brand (T>per) */
    --brand-red: #E63027; 
    --alert-critical: #EF4444;
    --alert-warning: #F59E0B;
    --alert-success: #10B981;

    /* Effetto Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Reset base per un'app fluida */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* Rimuove il flash blu su mobile quando si tappa */
}

body {
    background-color: var(--bg-deep-night);
    color: var(--text-main);
    /* Font di sistema per la massima velocità e leggibilità nativa */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Spazio vitale in fondo per non far coprire i contenuti dalla Bottom Nav Bar */
    padding-bottom: 90px; 
}

/* Classe Utility Glassmorphism (pronta per essere usata su card e pannelli) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- HEADER E LOGO --- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Modifichiamo il glass-panel di base per adattarlo in alto */
    border-radius: 0; 
    border-top: none;
    border-left: none;
    border-right: none;
}

.logo-container {
    font-size: 26px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -1.5px;
}

.logo-t {
    color: var(--brand-red); /* Il rosso aziendale */
}

.logo-text {
    color: var(--text-main); /* Il bianco ghiaccio */
}

/* Spazio per non far finire i contenuti sotto l'header fisso */
.app-content {
    padding-top: 80px; 
    padding-left: 20px;
    padding-right: 20px;
}

/* --- BOTTOM NAVIGATION BAR --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    /* Modifichiamo il glass-panel di base per arrotondarlo solo sopra */
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding-bottom: env(safe-area-inset-bottom); /* Supporto notch/barra home iPhone */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    width: 25%;
    transition: color 0.3s ease;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
    fill: currentColor;
    transition: fill 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Stato Attivo (Lo Slate Blue "Pro" e l'animazione di rimbalzo) */
.nav-item.active {
    color: var(--accent-slate-blue);
}

.nav-item.active svg {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0px 2px 4px rgba(106, 90, 205, 0.4));
}

/* --- DASHBOARD E GRIGLIA --- */
.dashboard-header {
    margin-bottom: 25px;
}

.dashboard-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.dashboard-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Stile delle singole Tessere */
.dash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 25px 15px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s, box-shadow 0.2s;
}

/* Effetto pressione (rimbalzo e bagliore) */
.dash-card:active {
    transform: scale(0.95);
    border-color: var(--accent-glow);
    box-shadow: 0 0 20px rgba(106, 90, 205, 0.2);
}

.dash-card .icon-wrapper {
    background: rgba(106, 90, 205, 0.15); /* Sfondo Slate Blue semi-trasparente */
    color: var(--accent-slate-blue);
    padding: 14px;
    border-radius: 50%;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-card svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.dash-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
}

/* Variante Manuali (con il rosso del logo) */
.dash-card.brand-accent .icon-wrapper {
    background: rgba(230, 48, 39, 0.15);
    color: var(--brand-red);
}

/* --- ANIMAZIONI UX (Fade In) --- */
.fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- FORM E INPUT MODERNI --- */
.tguido-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 12px;
    padding: 14px 15px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.tguido-input:focus {
    border-color: var(--accent-slate-blue);
    box-shadow: 0 0 10px rgba(106, 90, 205, 0.3);
    outline: none;
}

/* Stile per i bottoni d'azione principali */
.tguido-btn {
    width: 100%;
    background-color: var(--accent-slate-blue);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tguido-btn:active {
    transform: scale(0.97);
    background-color: var(--accent-glow);
}

/* --- TIMELINE (LINEA DEL TEMPO) --- */
.timeline {
    position: relative;
    padding-left: 30px;
    margin-top: 20px;
}

/* La linea verticale che unisce i punti */
.timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--glass-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 5px;
}

/* Il pallino sulla linea */
.timeline-dot {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-secondary);
    border: 2px solid var(--bg-deep-night);
    z-index: 2;
}

/* Colori dinamici per i pallini in base all'azione */
.dot-fuorilinea { background: var(--brand-red); }
.dot-corsa { background: var(--accent-slate-blue); box-shadow: 0 0 8px var(--accent-slate-blue); }
.dot-fermata { background: var(--text-secondary); width: 10px; height: 10px; left: -28px; top: 7px; }

.timeline-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 15px;
}

.timeline-time {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.timeline-linea {
    background: rgba(106, 90, 205, 0.2);
    color: var(--accent-glow);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
}

.timeline-luogo {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.timeline-note {
    font-size: 12px;
    color: var(--alert-warning);
    margin-top: 8px;
    font-style: italic;
}

/* --- MESSAGGIO ATTESA 10 SECONDI --- */
.loader-msg {
    text-align: center;
    color: #a3bffa; /* Tonalità Slate Blue chiara ed elegante */
    font-size: 0.9rem;
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: pulseMsg 2s infinite ease-in-out;
}

@keyframes pulseMsg {
    0% { opacity: 0.4; }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(163, 191, 250, 0.4); }
    100% { opacity: 0.4; }
}