/* File: portale/timeline/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Inter:wght@400;500;700&display=swap');

:root {
    --bg-color: #111827;
    --panel-bg-color: rgba(17, 24, 39, 0.85);
    --border-color: rgba(255, 255, 255, 0.1);
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --accent-color: #f59e0b;
    --accent-color-hover: #d97706;
    --biography-bar-color: #B45309;
}

/* --- IMPOSTAZIONI GLOBALI --- */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
footer { background-color: gray; opacity:0.8; text-align:center; }
.back-link-main{
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.iframe-link-container {background-color:gray; opacity:0.8; text-align:center;}
.iframe-link-container a{color:white;}
#app-container { display: flex; flex-direction: column; height: 100%; width: 100%; }
.content-wrapper { display: flex; flex-grow: 1; height: 100%; overflow: hidden; }

/* --- PANNELLO LATERALE --- */
#exploration-panel {
    width: 380px;
    height: 100%;
    background: var(--panel-bg-color);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border-color);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, width 0.3s ease;
    flex-shrink: 0;
    z-index: 1001;
}
.scrollable-content { overflow-y: auto; padding: 1.25rem; }
#panel-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.panel-header-main { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
#panel-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin: 0; }
.back-link { font-size: 0.8rem; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.back-link:hover { color: var(--accent-color); }
.back-link i { margin-right: 0.5rem; }

/* --- CONTROLLI COMUNI E FILTRI --- */
.action-button { background-color: var(--accent-color-hover); color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; text-align: center; font-weight: 500; padding: 0.6rem 1rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.action-button:hover { background-color: var(--accent-color); }
.action-button.secondary { background-color: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border: 1px solid var(--border-color); }
.action-button.secondary:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.action-button.full-width { width: 100%; }

.filter-group { margin-bottom: 1rem; }
.filter-group label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.3rem; text-transform: uppercase; }
.checkbox-container { display: flex; flex-wrap: wrap; gap: 1rem; background-color: rgba(55, 65, 81, 0.8); padding: 0.6rem; border-radius: 6px; }
.checkbox-container label { display: flex; align-items: center; font-size: 0.9rem; cursor: pointer; color: var(--text-primary); text-transform: initial; }
p.filter-description { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0; border-left: 3px solid var(--accent-color); padding-left: 0.75rem; }
p.separator-text { text-align: center; color: var(--text-secondary); margin: 1rem 0; }

.ts-wrapper .ts-control { background-color: #374151; border: 1px solid var(--border-color); color: var(--text-primary); }
.ts-wrapper .ts-control input::placeholder { color: var(--text-secondary); }
.ts-wrapper .ts-control, .ts-wrapper .ts-control input { color: var(--text-primary) !important; }
.ts-wrapper .ts-control .item { background-color: var(--accent-color) !important; color: var(--bg-color) !important; font-weight: 500; border-radius: 4px; }
.ts-wrapper.multi .ts-control [data-value] { background-color: var(--accent-color); }
.ts-dropdown { background: #1f2937 !important; border: 1px solid var(--accent-color) !important; color: var(--text-primary); }
.ts-dropdown .option { color: var(--text-primary); }
.ts-dropdown .option:hover, .ts-dropdown .active { background-color: var(--accent-color-hover) !important; color: white !important; }
.ts-dropdown .disabled { opacity: 0.4; cursor: not-allowed; }
/*.ts-dropdown.direction-up {
    top: auto;
    bottom: 100%;
}*/
.ts-dropdown {
    position: relative;
    z-index: 9999 !important;
}
.ts-dropdown-content {
    -webkit-overflow-scrolling: touch;
}

select#bio-period-filter, select#bio-style-filter { width: 100%; background-color: #374151; border: 1px solid var(--border-color); padding: 8px; border-radius: 4px; color: var(--text-primary); }

/* --- ACCORDION E DETTAGLI --- */
.accordion-container { display: flex; flex-direction: column; gap: 0.75rem; }
.accordion-section { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.accordion-header { background-color: rgba(55, 65, 81, 0.6); padding: 0.75rem 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.accordion-header .toggle-icon { transition: transform 0.2s ease-in-out; }
.accordion-header.active .toggle-icon { transform: rotate(180deg); }
.accordion-content { padding: 1rem; display: none; border-top: 1px solid var(--border-color); }
.hidden { display: none !important; }
#content-display h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--accent-color); margin-top: 0; }
#content-display a { color: var(--accent-color); text-decoration: none; } #content-display a:hover { text-decoration: underline; }

#details-description { max-height: 250px; overflow-y: auto; padding-right: 5px; }
#gallery-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; max-height: 300px; overflow-y: auto; }
/* Le anteprime non avevano nessuna regola, quindi si disegnavano alla loro
   dimensione naturale: misurata una da 500×630 dentro una colonna da 94 px,
   che sbordava di 406 e finiva sopra le barre della timeline.
   `min-width: 0` sulla cella serve perché di suo una cella di griglia non
   scende sotto la dimensione del contenuto, e da sola `width: 100%`
   sull'immagine non basterebbe a farla rimpicciolire.
   Niente ritaglio: `height: auto` tiene l'opera intera, che in un atlante
   d'arte conta più delle righe allineate. */
#gallery-content > * { min-width: 0; }
#gallery-content img {
    display: block; width: 100%; height: auto;
    border-radius: 4px; background: #1f2937;
}

/* --- Mini Mappa & Contesto Bio --- */
#context-and-map-container { flex-shrink: 0; border-top: 1px solid var(--border-color); }
#map-section { padding: 1rem; }
#mini-map { width: 100%; height: 200px; background-color: #333; border-radius: 6px; }
#goToMapBtn { width: 90%; margin-bottom: 0.75rem; }
#context-panel-bio { padding: 1rem; }
#context-artist-list { max-height: 150px; overflow-y: auto; padding: 0.5rem; background-color: rgba(0,0,0,0.2); border-radius: 4px; border: 1px solid var(--border-color); list-style-position: inside; }

/* --- SEZIONE TIMELINE --- */
#timeline-main-content { flex-grow: 1; position: relative; overflow: hidden; }
#timeline-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; cursor: grab; }
#timeline-container:active { cursor: grabbing; }

#ruler, #timeline, #periods-lane, #styles-lane, #biographies-lane { position: absolute; left: 0; }
#timeline { top: 15%; height: 25%; }
#styles-lane { top: 40%; height: 20%; }
#ruler { top: 50%; height: 80px; transform: translateY(-50%); z-index: 20; pointer-events: none; }
#periods-lane { top: 60%; height: 25%; }
#biographies-lane { top: 0; height: 100%; }

.event-dot, .river-bar, .period-bar, .style-bar, .biography-bar { position: absolute; transition: all 0.2s ease; border-radius: 4px; }
.event-dot:hover { transform: scale(1.5); box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }

/* ── Gruppi di opere troppo vicine per stare una accanto all'altra ──────────
   Il numero dentro non è decorazione: dice quanto è densa quell'epoca, ed è
   un'informazione che il pallino singolo non poteva dare. */
.event-cluster {
    position: absolute; width: 1.2rem; height: 1.2rem;
    border-radius: 9999px; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .58rem; font-weight: 700; line-height: 1; color: #111827;
    cursor: pointer; z-index: 11; transition: all .2s ease;
}
.event-cluster:hover { transform: scale(1.35); box-shadow: 0 0 15px rgba(255,255,255,.5); }
/* aperto: si fa da parte, la stella è più importante di lui */
.event-cluster.aperto { opacity: .3; }

/* La stella: esce dalla corsia, e va bene — a tagliare è solo il contenitore
   che scorre, quindi resta tutta visibile. */
.event-star { position: absolute; z-index: 30; pointer-events: none; }
.event-star .event-dot { pointer-events: auto; cursor: pointer; }
.event-star svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.style-bar { height: 2.25rem; } 
.biography-bar { height: 2.5rem; background-color: var(--biography-bar-color); border: 1px solid rgba(255, 255, 255, 0.2); }
.opacity-30 { opacity: 0.3; }
.opacity-30:hover { opacity: 1; }
.river-bar { opacity: 0.6; }
.river-bar:hover { opacity: 1; filter: brightness(1.2); }
.period-bar:hover, .style-bar:hover, .biography-bar:hover { filter: brightness(1.2); transform: translateY(-2px); }

.timeline-tooltip { position: absolute; background-color: rgba(17, 24, 39, 0.95); color: #f3f4f6; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; z-index: 50; pointer-events: none; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; animation: fadeInTooltip 0.2s ease forwards; border: 1px solid var(--border-color); }
.timeline-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(17, 24, 39, 0.95) transparent transparent transparent; }
@keyframes fadeInTooltip { from { opacity: 0; transform: translate(-50%, -110%); } to { opacity: 1; transform: translate(-50%, -120%); } }
.ruler-label { position: absolute; top: 50%; transform: translateX(-50%); margin-top: 8px; color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; text-shadow: 0 0 2px var(--bg-color); }

/* --- GESTIONE MOBILE --- */
#mobile-filter-toggle { display: none; }
#mobile-panel-close { display: none; }

/* ✅ AGGIUNTA: Stili per il toggle e il suo contenitore */
#timeline-controls-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 30;
    background-color: var(--panel-bg-color);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex; /* CAMBIATO: da 'none' a 'flex' per renderlo sempre visibile */
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s ease; /* Aggiunta transizione per l'effetto disabilitato */
}

/* RIMOSSA la regola 'body.bio-mode #timeline-controls-overlay' perché ora è sempre visibile */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

/* NUOVA REGOLA: Stile per quando il toggle è disabilitato */
.toggle-switch input:disabled + .slider {
    cursor: not-allowed;
    background-color: #374151; /* Un grigio più scuro per indicare lo stato disabilitato */
}
.toggle-switch input:disabled ~ .label-text {
    cursor: not-allowed;
    opacity: 0.5;
}


.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b5563;
    transition: .4s;
    border-radius: 22px;
}
.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.toggle-switch input:checked + .slider { background-color: var(--accent-color); }
.toggle-switch input:checked + .slider:before { transform: translateX(18px); }
#timeline-controls-overlay .label-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    user-select: none;
}


@media (max-width: 1023px) {
    #exploration-panel { position: fixed; top: 0; left: 0; height: 100%; width: 90%; max-width: 380px; z-index: 2000; transform: translateX(-100%); border-right: 2px solid var(--border-color); }
    #exploration-panel.is-open { transform: translateX(0); box-shadow: 5px 0 15px rgba(0,0,0,0.3); }
    #mobile-panel-close {     display: inline-block;
    background-color: var(--accent-color);
    color: white;
    border: 2px solid var(--accent-color);
    font-weight: 700;
    padding: 0.5rem 1rem; }
    #panel-header h2 { font-size: 1.4rem; }
    #mobile-filter-toggle { display: inline-flex; position: absolute; top: 10px; left: 10px; z-index: 100; transition: transform 0.3s ease, opacity 0.3s ease; }
    #mobile-filter-toggle.is-hidden { transform: scale(0.5); opacity: 0; pointer-events: none; }
    body.overflow-hidden { overflow: hidden; }
}

@media (max-width: 768px) {
    #ruler, #timeline, #periods-lane, #styles-lane, #biographies-lane { position: relative; top: auto; left: auto; height: auto; transform: none; padding-bottom: 1rem; min-height: 120px; }
    #ruler { min-height: 60px; padding-bottom: 2rem; }
    body.bio-mode #timeline, body.bio-mode #styles-lane, body.bio-mode #periods-lane { display: none; }
    #biographies-lane { display: none; }
    body.bio-mode #biographies-lane { display: block; min-height: 300px; }
}