body { font-family: 'Inter', sans-serif; background-color: #f0f2f5; margin: 0; }

/* Navbar Stile Admin */
.admin-nav { background: #1a1d20; color: white; padding: 1rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.stat-badge { background: rgba(255,255,255,0.1); padding: 8px 15px; border-radius: 10px; font-weight: 600; }

/* Griglia Mappa */
.mappa-wrapper { padding: 40px; overflow: auto; display: flex; justify-content: center; }
.mappa-container {
display: grid;
position: relative;
background: white;
border: 5px solid #333;
border-radius: 8px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);

/* Griglia Principale (Linee nere/grigie delle celle) */
background-image: 
linear-gradient(to right, #e0e0e0 1px, transparent 1px),
linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
}

/* Opzionale: Aggiungi una croce di puntatori per capire dove finisce la cella */
.mappa-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* Disegna dei puntini grigi scuri esattamente agli incroci */
background-image: radial-gradient(#bcbcbc 1.5px, transparent 1.5px);
background-position: -1px -1px;
pointer-events: none;
}

/* Contenitore per allineare righelli e mappa */
.mappa-outer-container {
display: inline-grid;
grid-template-columns: 30px 1fr; /* 30px per i numeri di riga */
grid-template-rows: 30px 1fr;    /* 30px per i numeri di colonna */
}

/* Numeri in alto (colonne) */
.ruler-h {
grid-column: 2;
display: flex;
}
.ruler-h div {
text-align: center;
font-size: 10px;
color: #888;
line-height: 30px;
border-right: 1px solid #eee;
}

/* Numeri a sinistra (righe) */
.ruler-v {
grid-row: 2;
display: flex;
flex-direction: column;
}
.ruler-v div {
text-align: center;
font-size: 10px;
color: #888;
border-bottom: 1px solid #eee;
}

/* Evidenzia il numero della cella al passaggio del mouse */
.mappa-container:hover {
/*cursor: crosshair; Cambia il cursore in un mirino */
}

/* Zone Interattive */
.zona {
display: flex; flex-direction: column; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; text-transform: uppercase;
cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.2);
z-index: 10; /* Abbassato da 100 a 10 */
overflow: hidden;
}
.zona:hover { 
filter: brightness(1.1); 
transform: scale(1.01); 
z-index: 11; /* Leggermente sopra le altre zone, ma sotto gli operatori */
box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
}
.zona .count { font-size: 16px; display: block; margin-top: 2px; }

/* Colori Stati Zone */
.z-verde  { background-color: #28a745; color: white; }
.z-giallo { background-color: #ffc107; color: #212529; }
.z-rosso  { background-color: #dc3545; color: white; }
.z-nero   { background-color: #1a1a1a; color: white; border-color: #444;z-index: 5; }

/* Operatori (Pallini sui nodi) */
.operatore {
position: absolute; width: 22px; height: 22px; border-radius: 50%;
border: 3px solid white; box-shadow: 0 4px 8px rgba(0,0,0,0.4);
z-index: 100; /* Alzato da 10 a 50 */
transform: translate(-50%, -50%); cursor: pointer; transition: 0.3s;
}

.operatore:hover { 
transform: translate(-50%, -50%) scale(1.4); 
z-index: 110; 
}
.op-online  { background-color: #28a745; }
.op-offline { background-color: #adb5bd; }
.op-sos     { background-color: #dc3545; animation: pulse-red 0.8s infinite; border-color: #fff; }

@keyframes pulse-red {
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(220, 53, 69, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Modali Custom */
.modal-content { border-radius: 20px; border: none; }
.modal-header { border-bottom: none; padding: 25px 25px 10px; }
.modal-footer { border-top: none; padding: 10px 25px 25px; }

/* Gli elementi devono stare sopra tutto */
.mappa-fisso {
z-index: 50 !important;
transition: transform 0.2s;
}

.mappa-fisso:hover {
filter: brightness(1.2);
opacity: 0.8;
}

/* Stile specifico per le forme (linee) */
.mappa-fisso div[style*="background"] {
pointer-events: all; /* Rende la linea cliccabile */
box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
/* Stile per le linee/muri */
.mappa-fisso .linea-forma {
display: block;
border: none; /* Rimuove eventuali bordi strani */
box-shadow: 0 0 3px rgba(0,0,0,0.3); /* Un'ombra leggera le rende più visibili */
pointer-events: all;
}
/* Stato SOS Preso in Carico (Arancione) */
.op-sos-gestione { 
background-color: #fd7e14; /* Arancione Bootstrap */
animation: pulse-orange 1.5s infinite; 
border-color: #fff; 
}

@keyframes pulse-orange {
0% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(253, 126, 20, 0); }
100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); }
}