/* Stili Custom dell'Applicazione */

/* --- Stile per il link di navigazione attivo (Versione Precedente) --- */
.nav-link.active {
    background-color: #e0f2fe; /* Tailwind sky-100 */
    color: #0284c7; /* Tailwind sky-600 */
    font-weight: 600;
    border-right: 4px solid #0284c7;
}
.dark .nav-link.active {
    background-color: #1f2937; /* Tailwind gray-800 */
    color: #ffffff;
}

.modal-backdrop { background-color: rgba(0, 0, 0, 0.5); }
.hidden { display: none !important; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.toast-notification { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 100; transform: translateX(120%); transition: transform 0.3s ease-in-out; }
.toast-notification.show { transform: translateX(0); }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; z-index: 40; display: none; min-width: 180px; }
.dropdown:hover .dropdown-menu, .dropdown-menu:hover { display: block; }

/* --- Stili per la Progress Bar della Missione --- */
.progress-bar { display: flex; align-items: flex-start; width: 100%; }
.progress-step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.progress-step:not(.is-last)::after {
    content: ''; position: absolute; width: 100%; height: 2px;
    top: 1.25rem; left: 50%; transform: translateX(0%);
    background-color: #e5e7eb; /* gray-200 */
}
.dark .progress-step:not(.is-last)::after { background-color: #4b5563; } /* gray-600 */

.progress-step-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    z-index: 10;
}
.progress-step-label {
    margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem;
    font-weight: 600; text-align: center;
}

/* Stati dei Passi */
.progress-step-upcoming .progress-step-icon { background-color: #f3f4f6; color: #6b7280; border: 2px solid #e5e7eb; }
.dark .progress-step-upcoming .progress-step-icon { background-color: #374151; color: #9ca3af; border-color: #4b5563; }
.progress-step-upcoming .progress-step-label { color: #6b7280; }
.dark .progress-step-upcoming .progress-step-label { color: #9ca3af; }

.progress-step-active .progress-step-icon { background-color: #3b82f6; color: white; }
.progress-step-active .progress-step-label { color: #2563eb; }
.dark .progress-step-active .progress-step-label { color: #60a5fa; }

.progress-step-complete .progress-step-icon { background-color: #16a34a; color: white; }
.progress-step-complete:not(.is-last)::after { background-color: #16a34a; }

/* Stili specifici per Diagrammi */
.diagram-container-wrapper { position: relative; width: 100%; min-height: 500px; max-height: 700px; overflow: hidden; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
#bowtie-svg, #fishbone-svg { width: 100%; height: 100%; user-select: none; }
#bowtie-svg { cursor: grab; }
#bowtie-svg.panning { cursor: grabbing; }
.bowtie-node { cursor: grab; }
.bowtie-node.dragging { cursor: grabbing; }
.bowtie-path { stroke: #9ca3af; stroke-width: 1.5; fill: none; }
.bowtie-arrow-head { fill: #9ca3af; }

/* --- Main Content Background --- */
/* This rule explicitly sets the background for the main content area,
   ensuring it's correct in both light and dark modes. */
#main-content {
    background-color: #f9fafb; /* Tailwind's bg-gray-50 */
}
html.dark #main-content {
    background-color: #111827; /* Tailwind's bg-gray-900 */
}

/* --- Dark Mode Overrides (Versione Precedente) --- */
/* These rules force styles in dark mode, which is the previous, stable method. */

html.dark .bg-white,
html.dark .bg-gray-50 {
    background-color: #1f2937 !important; /* gray-800 */
}

html.dark tr:hover {
    background-color: #374151 !important; /* gray-700 */
}

html.dark .text-gray-500,
html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-900 {
    color: #d1d5db !important; /* gray-300 */
}

html.dark span.absolute.text-gray-800 {
    color: #ffffff !important; /* White for risk matrix numbers */
}

/* --- Fix for Dark Mode Title Brightness --- */
html.dark .page-title {
    color: #f9fafb !important; /* Tailwind's gray-50, very bright */
}
/* Stili per la timeline investigativa */
/* Stili per il contenitore della timeline SVG */
.timeline-container {
    position: relative;
    overflow: hidden;
    cursor: grab;
    background-color: #f3f4f6; /* gray-100 */
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb; /* gray-200 */
    height: 60vh;
}
.dark .timeline-container {
    background-color: #111827; /* gray-900 */
    border-color: #374151; /* gray-700 */
}
.timeline-container.grabbing {
    cursor: grabbing;
}

/* Stili per i nodi SVG */
.timeline-node > rect { /* AGGIUNTO > */
    stroke-width: 1.5;
    stroke: #d1d5db; /* gray-300 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.dark .timeline-node > rect { /* AGGIUNTO > */
    stroke: #4b5563; /* gray-600 */
}

/* Nodo evento standard */
.event-node {
    cursor: move;
}
.event-node > rect { /* AGGIUNTO > */
    fill: #ffffff; /* white */
}
.dark .event-node > rect { /* AGGIUNTO > */
    fill: #374151; /* gray-700 */
}

/* Nodo incidente speciale */
.incident-node {
    cursor: default; /* Il nodo incidente non è trascinabile */
}
.incident-node > rect { /* AGGIUNTO > */
    fill: #ef4444; /* red-500 */
    stroke: #b91c1c; /* red-700 */
}
.dark .incident-node > rect { /* AGGIUNTO > */
    fill: #ef4444;
    stroke: #f87171; /* red-400 */
}

/* Linea dell'asse temporale */
.timeline-axis-line {
    stroke: #9ca3af; /* gray-400 */
    stroke-width: 3;
    stroke-linecap: round;
}
.dark .timeline-axis-line {
    stroke: #6b7280; /* gray-500 */
}

/* Linee di connessione verticali */
.timeline-path {
    stroke: #9ca3af; /* gray-400 */
    stroke-width: 2;
    fill: none;
}
.dark .timeline-path {
    stroke: #6b7280; /* gray-500 */
}

/* Stili per l'etichetta HFACS dentro i box evento */
.hfacs-label {
    letter-spacing: 0.05em;
}

/* Colori specifici per ogni categoria HFACS (testo) */
[data-hfacs-key="unsafeAct"] { color: #c22f2f; }
[data-hfacs-key="precondition"] { color: #c25a0a; }
[data-hfacs-key="unsafeSupervision"] { color: #b48a00; }
[data-hfacs-key="organizationalInfluence"] { color: #6d28d9; }

.dark [data-hfacs-key="unsafeAct"] { color: #f87171; }
.dark [data-hfacs-key="precondition"] { color: #fb923c; }
.dark [data-hfacs-key="unsafeSupervision"] { color: #facc15; }
.dark [data-hfacs-key="organizationalInfluence"] { color: #a78bfa; }

/* Applica il colore anche al bordo del box (AGGIUNTO > OVUNQUE) */
.event-node[data-hfacs="unsafeAct"] > rect { stroke: #ef4444; stroke-width: 2px; }
.event-node[data-hfacs="precondition"] > rect { stroke: #f97316; stroke-width: 2px; }
.event-node[data-hfacs="unsafeSupervision"] > rect { stroke: #eab308; stroke-width: 2px; }
.event-node[data-hfacs="organizationalInfluence"] > rect { stroke: #8b5cf6; stroke-width: 2px; }

.dark .event-node[data-hfacs="unsafeAct"] > rect { stroke: #f87171; }
.dark .event-node[data-hfacs="precondition"] > rect { stroke: #fb923c; }
.dark .event-node[data-hfacs="unsafeSupervision"] > rect { stroke: #facc15; }
.dark .event-node[data-hfacs="organizationalInfluence"] > rect { stroke: #a78bfa; }

/* --- INIZIO NUOVI STILI PER BARRIERE E MENU --- */

/* Stile per i nodi PRE-INCIDENTE (es. blu) */
.pre-incident-node > rect { /* AGGIUNTO > */
    fill: #EFF6FF; /* bg-blue-50 */
    stroke: #3B82F6; /* border-blue-500 */
}
.dark .pre-incident-node > rect { /* AGGIUNTO > */
    fill: #1E3A8A; /* bg-blue-900 */
    stroke: #60A5FA; /* border-blue-400 */
}

/* Stile per il nodo INCIDENTE (assicuriamoci che sia rosso) */
.incident-node > rect { /* AGGIUNTO > */
    fill: #DC2626; /* bg-red-600 */
    stroke: #F87171; /* border-red-400 */
}
.dark .incident-node > rect { /* AGGIUNTO > */
    fill: #991B1B; /* bg-red-800 */
    stroke: #F87171; /* border-red-400 */
}

/* Stile per i nodi POST-INCIDENTE (es. verde) */
.post-incident-node > rect { /* AGGIUNTO > */
    fill: #F0FDF4; /* bg-green-50 */
    stroke: #22C55E; /* border-green-500 */
}
.dark .post-incident-node > rect { /* AGGIUNTO > */
    fill: #166534; /* bg-green-800 */
    stroke: #4ADE80; /* border-green-400 */
}

/* Stile per evidenziare un Rischio Residuo modificato manualmente */
/* Si applica alla 'pillola' <span> */
.manual-override {

    /* --- QUESTA È LA RIGA MANCANTE --- */
    /* Forza l'elemento a rispettare il padding e il testo al suo interno. */
    display: inline-block;
    /* --- FINE RIGA MANCANTE --- */

    /* Bordo arancione */
    border: 2px solid #F97316 !important; /* text-orange-500 */

    /* Ombra */
    box-shadow: 0 0 5px 1px #F97316;

    /* Angoli stondati */
    border-radius: 9999px;

    /* Animazione opzionale */
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% {
        box-shadow: 0 0 5px 1px #F97316;
    }
    50% {
        box-shadow: 0 0 10px 3px #F97316;
    }
    100% {
        box-shadow: 0 0 5px 1px #F97316;
    }
}
/* Fix per il titolo dell'app nell'header */
[data-i18n="appTitle"] {
    color: #0f172a !important; /* Colore Giorno (Slate 900) */
    transition: color 0.3s ease;
}

.dark [data-i18n="appTitle"] {
    color: #ffffff !important; /* Colore Notte (Bianco) */
}
/* =========================================
   FIX DEFINITIVO UI TIMELINE (Forza Colori)
   ========================================= */

/* Forza testo grigio leggibile nel Menu Contestuale */
#timeline-context-menu a, #barrier-context-menu a {
    color: #374151 !important;
    font-weight: 600 !important;
}

/* Forza i colori delle azioni speciali nel menu */
#timeline-context-menu a.text-red-600, #barrier-context-menu a.text-red-600 { color: #dc2626 !important; }
#timeline-context-menu a.text-orange-600, #barrier-context-menu a.text-orange-600 { color: #ea580c !important; }
#timeline-context-menu a.text-green-600, #barrier-context-menu a.text-green-600 { color: #16a34a !important; }

/* Forza Tasto Salva (Blu) e Annulla (Grigio) nelle Modali */
.modal-content button[type="submit"] {
    background-color: #2563eb !important; /* Blu acceso */
    color: white !important;
    opacity: 1 !important;
}
.modal-content button[data-close-modal], .modal-content .btn-secondary {
    background-color: #4b5563 !important; /* Grigio scuro */
    color: white !important;
    opacity: 1 !important;
}
/* Forza il testo SCURO all'interno delle barriere (perché gli sfondi sono pastello chiari) */
.failed-barrier-node foreignObject p {
    color: #111827 !important; /* Quasi nero */
    text-shadow: none !important;
}