/* ManutenGO — design system condiviso */
/* === TOKENS === */
:root {
/* Palette PA */
--mg-primary: #0066cc;
--mg-primary-dark: #1F4E79;
--mg-primary-light: #e8f1fb;
--mg-amber: #875800;
--mg-critico: #7b0000;
--mg-urgente: #dc3545;
/* Superfici */
--mg-bg: #f5f8fb;
--mg-edit-bg: #f0f6ff;
--mg-edit-border: #cce0ff;
/* Scala tipografica */
--mg-caption: 0.75rem;
/* Icone / elementi muted non testuali */
--mg-icon-muted: #9faab5;
--mg-hint: #596270;
/* Card */
--mg-card-radius: 12px;
--mg-card-shadow: 0 2px 12px rgba(0,0,0,0.08);
/* Z-index semantici */
--mg-z-sticky: 100;
--mg-z-modal: 1050;
--mg-z-tooltip: 1080;
}
/* === BASE === */
body { background: var(--mg-bg); }
.navbar { background: var(--mg-primary) !important; }
.form-control::placeholder { color: var(--mg-hint); opacity: 1; }
/* === TABELLE === */
.table th { background: var(--mg-primary-light); font-weight: 600; }
/* Indizio di scroll orizzontale per tabelle strette su mobile: ombra che appare
solo sul lato dove c'è altro contenuto da scorrere (via background-attachment:
local + scroll) e sparisce da sola una volta raggiunto il bordo — nessun JS,
nessuna colonna sticky da far convivere con hover/opacity delle righe. */
/* Riga "disabilitato" (edifici/manutentori/utenti): tint di sfondo al posto di
opacity sull'intera riga — l'opacity dimezzava anche il contrasto del testo e
del badge "Disabilitato" stesso, sotto la soglia WCAG AA richiesta per legge
(L. 4/2004). Il badge badge-disabilitato porta già da solo il segnale a piena
leggibilità, coerente con la Regola del tint-di-riga già usata per l'anzianità. */
.tr-disabled > td { background-color: rgba(33, 37, 41, .05); }
.table-scroll-cue {
background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0)),
linear-gradient(to left, rgba(0,0,0,.12), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-color: #fff;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-attachment: local, local, scroll, scroll;
}
/* === CARD === */
.card { border: none; border-radius: var(--mg-card-radius); box-shadow: var(--mg-card-shadow); }
.card-header-brand { background: var(--mg-primary); color: #fff; border-radius: var(--mg-card-radius) var(--mg-card-radius) 0 0 !important; padding: 1.5rem 2rem; }
.stat-card { border-radius: var(--mg-card-radius); border: none; box-shadow: var(--mg-card-shadow); display: flex !important; flex-direction: column; justify-content: center; }
/* Le tile di ufficio.php sono : .d-block di Bootstrap Italia
è anch'essa "display: block !important" con la stessa specificità (una classe) — a parità di
!important e specificità vince l'ordine di caricamento del foglio di stile, che può variare
da ambiente ad ambiente. Il selettore composto qui sotto ha specificità maggiore e vince sempre,
indipendentemente dall'ordine. */
.stat-card.d-block { display: flex !important; flex-direction: column; justify-content: center; }
.stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }
/* === INFO BLOCK (pagine dettaglio) === */
.info-label { font-size: var(--mg-caption); text-transform: uppercase; color: #6c757d; font-weight: 600; letter-spacing: 0.05em; }
.info-value { font-size: 1rem; color: #222; margin-top: 2px; }
/* === PANNELLO MODIFICA / FORM === */
.edit-panel,
.form-panel { background: var(--mg-edit-bg); border-radius: 10px; border: 1px solid var(--mg-edit-border); padding: 1.5rem; margin-bottom: 1.5rem; }
.form-panel .form-text { color: var(--mg-hint); }
/* === CHECKBOX LABEL INTERATTIVO (selezione specializzazioni) === */
.spec-label { cursor: pointer; }
.spec-label:has(input:checked) { background: var(--mg-primary-light); }
/* === DETAILS CHEVRON === */
details summary { cursor: pointer; list-style: none; padding: 0.25rem 0; }
details summary::-webkit-details-marker { display: none; }
.det-chevron { display: inline-block; transition: transform 0.2s ease-out; }
details[open] .det-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .det-chevron { transition: none; } }
/* === BADGE COLORI PA === */
.badge-navy { background: var(--mg-primary-dark); color: #fff; }
.badge-amber { background: var(--mg-amber); color: #fff; }
.badge-critico { background: var(--mg-critico); color: #fff; }
.badge-pa-light { background: var(--mg-primary-light); color: var(--mg-primary-dark); }
/* === BADGE TICKET === */
.badge-ticket { background: var(--mg-primary-dark); color: #fff; font-size: 0.8rem; }
.badge-ticket-pending { font-size: var(--mg-caption); background: #e9ecef; color: #495057; }
/* === TOKEN TESTO PA === */
.text-critico { color: var(--mg-critico) !important; }
.text-amber { color: var(--mg-amber) !important; }
.text-teal { color: #0a7e8c !important; }
.text-orange { color: #fd7e14 !important; }
.text-hint { color: var(--mg-hint) !important; }
.text-pa-blue { color: var(--mg-primary) !important; }
/* === BADGE RUOLO UTENTE === */
.badge-role-segnalatore { background: #e3f2fd; color: #1565c0; }
.badge-role-ufficio { background: #e8f5e9; color: #2e7d32; }
.badge-role-visualizzatore{ background: #ede7f6; color: #4527a0; }
/* === STAT NUMBER VARIANTI COLORE === */
.stat-number-navy { color: var(--mg-primary-dark); }
.stat-number-amber { color: var(--mg-amber); }
.stat-number-critico { color: var(--mg-critico); }
/* === TITOLO SEZIONE CARD === */
.card-title-sm { font-size: 1.125rem; }
/* === CAPTION FONT-SIZE (token utility) === */
.fs-caption { font-size: var(--mg-caption); }
/* === STAT KPI CARD (reportistica + dettaglio_edificio) === */
.stat-kpi { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 1rem 1.25rem; }
.stat-kpi__n { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--mg-primary-dark); }
.stat-kpi__l { font-size: var(--mg-caption); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #555; margin-top: 4px; }
.stat-kpi--amber .stat-kpi__n { color: var(--mg-amber); }
.stat-kpi--red .stat-kpi__n { color: var(--mg-urgente); }
/* === STAT CONTEXT (reportistica + dettaglio_edificio) === */
.stat-context { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .875rem; font-size: .875rem; color: #555; }
.stat-context__n { font-weight: 700; color: #222; }
.stat-context__sep { color: #dee2e6; padding: 0 .125rem; user-select: none; }
/* === FILTRI CHIP — tag filtro attivo rimuovibile (reportistica) === */
.filtri-chip { display: inline-flex; align-items: center; background: var(--mg-primary-light); color: var(--mg-primary-dark); font-size: .8rem; font-weight: 500; padding: .2em .65em; border-radius: 20px; white-space: nowrap; line-height: 1.4; }
.filtri-chip--remove { text-decoration: none; transition: background .12s, color .12s; }
.filtri-chip--remove:hover,
.filtri-chip--remove:focus-visible { background: #c4d9f0; color: #0d3c6e; }
.filtri-chip--remove:focus-visible { outline: 2px solid var(--mg-primary); outline-offset: 2px; }
/* === TOKEN TESTO AGGIUNTIVI === */
.text-op-green { color: #198754 !important; }
/* === FOCUS NAVBAR — outline visibile su sfondo blu pieno, non il box-shadow di Bootstrap Italia === */
.navbar .btn-outline-light:focus-visible,
.navbar .dropdown-toggle:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
/* === FOCUS BTN-PRIMARY — il box-shadow di Bootstrap Italia risulta trasparente su questo bottone
(verificato: rgba(0,0,0,0) 0 0 0 0 su focus), quindi nessun anello visibile. Stesso trattamento
ad outline già usato altrove sulla pagina (stat-card, sort-th) invece di fidarsi del box-shadow. */
.btn-primary:focus-visible { outline: 2px solid var(--mg-amber) !important; outline-offset: 2px; }
/* === CONTRASTO MODAL-HEADER — Bootstrap Italia applica un colore titolo scuro (~#1a1a1a) a
.modal-title che vince sull'ereditarietà di .text-white sul contenitore (verificato: ~3:1 su
sfondo blu, sotto la soglia AA 4.5:1). Riguarda tutti e 3 i modal (assegna singolo, bulk, nuovo). */
.modal-header.text-white .modal-title { color: #fff !important; }
/* === CONTRASTO STAT-CARD — .text-muted (~4.15-4.19:1) scende sotto AA sui tint bg-danger/bg-warning-10 === */
.stat-card.bg-danger.bg-opacity-10 .text-muted,
.stat-card.bg-warning.bg-opacity-10 .text-muted { color: #495057 !important; }
/* Interlinea più stretta per la didascalia a due righe delle tile KPI (scope limitato
alla stat-card: .fs-caption altrove — es. "Filtri attivi:" — resta all'interlinea normale). */
.stat-card .fs-caption { line-height: 1.3; }
/* === TOUCH TARGET CHECKBOX SEGNALAZIONI — area cliccabile 44x44 senza ingrandire il checkbox ===
Niente margine negativo: dentro una riga flex (card mobile) fa sovrapporre il contenuto
adiacente sopra la checkbox, rendendola invisibile pur restando nel DOM. In una | di
tabella non succede (nessun sibling flex da riposizionare), ma teniamo la regola uguale
ovunque per non avere due comportamenti diversi con lo stesso selettore. */
.seg-check-hit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
/* === SAFE AREA BOTTOM (iPhone home indicator) === */
.pb-safe { padding-bottom: max(3rem, calc(1.5rem + env(safe-area-inset-bottom))) !important; }
/* === DIALOG ISTRUZIONI INSTALLAZIONE iOS — |