/* 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 {
    stroke-width: 1.5;
    stroke: #d1d5db; /* gray-300 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.dark .timeline-node rect {
    stroke: #4b5563; /* gray-600 */
}

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

/* Nodo incidente speciale */
.incident-node {
    cursor: default; /* Il nodo incidente non è trascinabile */
}
.incident-node rect {
    fill: #ef4444; /* red-500 */
    stroke: #b91c1c; /* red-700 */
}
.dark .incident-node rect {
    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 */
.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 --- */

/* --- INIZIO MODIFICA: Animazione più marcata --- */
@keyframes pulse-red-border {
  0%, 100% {
    stroke: #b91c1c; /* Rosso Scuro (red-700) */
  }
  50% {
    stroke: #fecaca; /* Rosso Chiarissimo (red-200) - Aumentato contrasto */
  }
}
/* --- FINE MODIFICA --- */

/* Stile per i nodi delle barriere fallite */
.failed-barrier-node rect {
    fill: #fef2f2; /* Sfondo rosso molto chiaro */
    stroke: #ef4444; /* Colore di base rosso */
    stroke-width: 2px;
    stroke-dasharray: 4; /* Tratteggio per indicare una "difesa fallita" */
    animation: pulse-red-border 1.5s ease-in-out infinite; /* Applica la nuova animazione (più veloce) */
}
.dark .failed-barrier-node rect {
    fill: #3f2222; /* Sfondo rosso scuro */
    stroke: #f87171; /* Colore di base rosso chiaro */
}

/* Stile per il menu contestuale */
#timeline-context-menu {
    position: fixed;
    z-index: 1000;
    width: 220px;
    background-color: white;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb; /* gray-200 */
    padding: 0.5rem;
}
.dark #timeline-context-menu {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
}

#timeline-context-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #374151; /* gray-700 */
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.dark #timeline-context-menu button {
    color: #d1d5db; /* gray-300 */
}

#timeline-context-menu button:hover {
    background-color: #f3f4f6; /* gray-100 */
}
.dark #timeline-context-menu button:hover {
    background-color: #374151; /* gray-700 */
}

#timeline-context-menu button i {
    margin-right: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #6b7280; /* gray-500 */
}
.dark #timeline-context-menu button i {
    color: #9ca3af; /* gray-400 */
}

/* In style.css */
#timeline-context-menu a {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}
/* Stile per i nodi PRE-INCIDENTE (es. blu) */
.pre-incident-node rect {
    fill: #EFF6FF; /* bg-blue-50 */
    stroke: #3B82F6; /* border-blue-500 */
}
.dark .pre-incident-node rect {
    fill: #1E3A8A; /* bg-blue-900 */
    stroke: #60A5FA; /* border-blue-400 */
}

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

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