:root {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --primary-color: #ffd700; /* Oro centro bersaglio */
	--green-color:#47FF47;  /* colore verde acceso */
    --text-color: #ffffff;
    --text-muted: #aaaaaa;
    --nav-height: 65px;
    --header-height: 60px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    height: 100vh;
}

/* Header */
.app-header {
    height: var(--header-height);
    background-color: var(--surface-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #333;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.app-header h1 {
    font-size: 1.3rem;
    color: var(--primary-color);
}

.status-badge {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 12px;
}
.status-badge.online { background-color: #2e7d32; }
.status-badge.offline { background-color: #c62828; }

/* Contenuto Principale */
.app-content {
    margin-top: var(--header-height);
    height: calc(100vh - var(--header-height) - var(--nav-height));
    overflow-y: auto;
    padding: 20px;
}

/* Gestione Schermate Modulari */
.app-module {
    display: none;
}
.app-module.active {
    display: block;
}

h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

p {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

.card {
    background-color: var(--surface-color);
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

/* Barra di Navigazione Inferiore */
.app-nav {
    height: var(--nav-height);
    background-color: var(--surface-color);
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #333;
    z-index: 10;
}

.nav-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    cursor: pointer;
    width: 25%;
    height: 100%;
    justify-content: center;
    transition: color 0.2s;
}

.nav-btn i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.nav-btn.active {
    color: var(--primary-color);
}

/* ==========================================
   STILI FASE 2: ELEMENTI ENCICLOPEDIA
   ========================================== */

/* Menu interno orizzontale */
.sub-nav {
    display: flex;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.sub-nav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 10px 5px;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.sub-nav-btn.active {
    background-color: var(--primary-color);
    color: #000;
    font-weight: bold;
}

/* Visibilità sotto-sezioni */
.sub-section {
    display: none;
}
.sub-section.active {
    display: block;
}

/* Ricerca e Filtri Badge */
.search-container {
    margin-bottom: 20px;
}

#glossary-search {
    width: 100%;
    padding: 12px;
    background-color: var(--surface-color);
    border: 1px solid #333;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 12px;
}

#glossary-search:focus {
    outline: 1px solid var(--primary-color);
}

.filter-badges {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.filter-badges::-webkit-scrollbar {
    height: 4px;
}

.badge {
    background-color: #2a2a2a;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge.active {
    background-color: rgba(255, 215, 0, 0.15);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* Stile Accordion (Details/Summary) */
details.glossary-item, details.tutorial-card {
    background-color: var(--surface-color);
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #2d2d2d;
    overflow: hidden;
}

details summary {
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Rimuove la freccia nativa brutta */
}

details summary::-webkit-details-marker {
    display: none; /* Rimuove freccia su Safari */
}

/* Icona freccia personalizzata con i CSS */
details summary::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--text-muted);
    transition: transform 0.3s;
}

details[open] summary::after {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.details-content {
    padding: 15px;
    border-top: 1px solid #2d2d2d;
    background-color: rgba(0, 0, 0, 0.15);
}

.details-content ul {
    padding-left: 20px;
    color: var(--text-muted);
}

.details-content li {
    margin-bottom: 8px;
}

.type-tag {
    font-size: 0.7rem;
    background-color: #333;
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: normal;
}

/* Tabelle di gara */
.fiarc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.fiarc-table th, .fiarc-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: center;
    font-size: 0.9rem;
}

.fiarc-table th {
    background-color: #252525;
    color: var(--text-muted);
}

.bg-dark {
    background-color: #161616 !important;
    border-left: 4px solid var(--primary-color);
}

.txt-gold {
    color: var(--primary-color);
    font-weight: bold;
}

.txt-silver {
    color: var(--green-color);
    font-weight: bold;
}

hr {
    border: 0;
    height: 1px;
    background: #333;
    margin: 15px 0;
}

/* ==========================================
   STILI FASE 3: INTERFACCIA INTERATTIVA
   ========================================== */

/* Form e Input */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    background-color: #2b2b2b;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
}

.form-group textarea {
    resize: vertical;
    height: 70px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Pulsanti */
.btn-primary, .btn-success, .btn-danger {
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.btn-primary { background-color: var(--primary-color); color: #000; }
.btn-primary:hover { background-color: #e6c200; }
.btn-success { background-color: #2e7d32; color: #fff; }
.btn-danger { background-color: #c62828; color: #fff; }

/* Liste dinamiche archi */
.bow-card {
    background-color: var(--surface-color);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
}

.bow-card h4 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.bow-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.bow-delete-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #ff5252;
    cursor: pointer;
}

/* Tastierino Segnapunti FIARC */
.score-live-banner {
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 6px;
    margin: 12px 0;
    border: 1px dashed #555;
}

.fiarc-pad {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pad-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pad-row span {
    width: 85px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.btn-pad {
    flex: 1;
    background-color: #2d2d2d;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 5px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-pad:active {
    background-color: var(--primary-color);
    color: #000;
}

.btn-pad.zero {
    background-color: #1e1e1e;
    color: #ff5252;
    border-color: #555;
}

/* Tabella o Griglia Log Piazzole */
.target-log-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.target-badge {
    background-color: #252525;
    border: 1px solid #3c3c3c;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
}

.target-badge span {
    display: block;
    color: var(--primary-color);
    font-weight: bold;
}

/* Card Storico Gara */
.history-card {
    background-color: var(--surface-color);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-info h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.history-info p {
    font-size: 0.75rem;
    margin-bottom: 0;
    color: var(--text-muted);
}

.history-actions {
    display: flex;
    gap: 10px;
}

/* ==========================================
   STILI PER IL PRIMO AVVIO (MODAL)
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.95); /* Sfondo scuro coprente */
    z-index: 9999; /* Sopra a qualsiasi menu o header */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    width: 100%;
    max-width: 420px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================
   STILI FASE 4: CHECKLIST E TIMER RESPIRAZIONE
   ========================================== */

/* Contenitore Checklist */
.checklist-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface-color);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #2d2d2d;
    transition: background 0.2s;
}

.checklist-item label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 85%;
    font-size: 0.95rem;
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Stile quando l'oggetto è spuntato */
.checklist-item.checked {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: #222;
}
.checklist-item.checked label {
    text-decoration: line-through;
    color: var(--text-muted);
}

.check-del-btn {
    background: none;
    border: none;
    color: #ff5252;
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
}

/* Grafica dell'Anello di Respirazione */
.breathing-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #161616;
    border-radius: 50%;
    border: 2px solid #2d2d2d;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
}

.breathing-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 215, 0, 0.04);
    border: 2px solid var(--primary-color);
    transform: scale(0.5); /* Dimensione minima di partenza (apnea/vuoto) */
    transition: transform 4s linear, border-color 0.3s; /* La transizione dura esattamente 4 secondi per passo */
    z-index: 1;
}

/* Classi dinamiche per animare il diametro e colore del cerchio */
.breathing-circle.inhale {
    transform: scale(1);
}
.breathing-circle.hold-in {
    transform: scale(1);
    border-color: #2e7d32; /* Verde stabilità */
    background-color: rgba(46, 125, 50, 0.06);
}
.breathing-circle.exhale {
    transform: scale(0.5);
}
.breathing-circle.hold-out {
    transform: scale(0.5);
    border-color: #c62828; /* Rosso apnea */
    background-color: rgba(198, 40, 40, 0.06);
}

.breathing-text {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 2;
    color: #ffffff;
}

.breathing-timer {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    z-index: 2;
    margin-top: 2px;
}

/* ==========================================
   STILI TESSERE REALI (WALK-IN GARA)
   ========================================== */
.cards-wrapper {
    margin: 20px 0;
}

.cards-wrapper h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.tessere-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Base stile della tessera */
.tessera-digital {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    position: relative;
    border: 1px solid #333;
}

/* Colori distintivi sui bordi sinistri delle tessere */
.tessera-digital.fiarc { border-left: 5px solid #ff9800; }   /* Giallo/Arancione FIARC */
.tessera-digital.fidasc { border-left: 5px solid #2196f3; }  /* Blu CONI FIDASC */
.tessera-digital.fitarco { border-left: 5px solid #4caf50; } /* Verde Fitarco */

.tessera-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-muted);
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.tessera-header i {
    color: var(--primary-color);
    margin-right: 4px;
}

.badge-fed {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    color: #fff;
}

.tessera-holder {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tessera-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 2px !important;
    letter-spacing: 1px;
}

.tessera-code {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-color) !important;
    font-family: 'Courier New', Courier, monospace; /* Aspetto codice numerico */
    margin-bottom: 0 !important;
}

/* Allineamento Logo e Testo Federazione */
.fed-brand {
    display: flex;
    align-items: center;
    gap: 10px; /* Spazio tra logo e testo */
}

.tessera-logo {
    width: 28px;
    height: 28px;
    object-fit: contain; /* Mantiene le proporzioni del logo senza schiacciarlo */
    background-color: #ffffff; /* Sfondo bianco per rendere leggibili i loghi scuri */
    padding: 2px;
    border-radius: 6px; /* Arrotonda leggermente lo scudetto del logo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* Scheda Anatomia dell'Arco */
.anatomy-card {
    margin-bottom: 25px;
    border-left-color: #ffd700; /* Richiama l'oro del centro bersaglio */
}

.anatomy-img-container {
    width: 100%;
    background-color: #ffffff; /* Mantiene lo sfondo bianco nativo dell'immagine pulito */
    border-radius: 6px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Permette un leggero swipe laterale se lo schermo è molto stretto, evitando di deformare le scritte */
}

.anatomy-img {
    display: block;
    width: 100%;
    max-width: 600px; /* Evita che si sgranasse su tablet o schermi più grandi */
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* Pulsante Toggle Mappa */
.toggle-btn {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid #333;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    width: 100%;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
}

.toggle-btn:active {
    background-color: #252525;
    transform: scale(0.98);
}

.toggle-btn i {
    color: var(--primary-color); /* L'oro del centro bersaglio per l'icona dell'occhio */
    font-size: 1rem;
}

/* Classe di utilità per nascondere dinamicamente la scheda */
.anatomy-hidden {
    display: none !important;
}

.glossary-img-wrapper {
    margin-top: 12px;
    text-align: center;
    width: 100%;
}

.glossary-img {
    max-width: 100%;     /* Impedisce all'immagine di uscire dalla card */
    height: auto;        /* Mantiene le proporzioni corrette */
    border-radius: 6px;  /* Arrotonda gli angoli in linea con il resto dell'app */
    border: 1px solid #444; /* Un piccolo bordo scuro di separazione */
    background: #111;    /* Sfondo scuro se l'immagine ha trasparenze (PNG) */
}

/* Stili specifici per il modulo di Riscaldamento su Mobile */
.warmup-phase-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: #ffd700;
    margin: 20px 5px 10px 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.warmup-card {
    border-left: 3px solid #ffd700;
    padding: 12px !important;
}

.warmup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.warmup-header h4 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.warmup-badge {
    background: #ffd700;
    color: #111;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.warmup-badge.badge-cardio {
    background: #e74c3c;
    color: #fff;
}

.warmup-target {
    margin-top: 10px;
    background: #222;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #ddd;
    border: 1px dashed #444;
}

.warmup-danger {
    margin-top: 10px;
    background: rgba(231, 76, 60, 0.15);
    padding: 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #ff6b6b;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.info-alert-box {
    background: #1e251f;
    border: 1px solid #2e3d30;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #ccc;
}

.info-alert-box i {
    font-size: 1.1rem;
    margin-top: 2px;
}