h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* UI di riconnessione circuito (vedi App.razor): nascosta finche' Blazor non aggiunge le classi di stato */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center;
    background: rgba(16, 42, 82, .85); color: #fff;
}
#components-reconnect-modal .reconnect-box {
    font-size: 1.15rem; text-align: center; line-height: 1.6;
    padding: 1.5rem 2rem; border-radius: 12px; background: rgba(0, 0, 0, .35);
}

/* =========================================================================
   STILE COMUNE DELL'APP — 04/08/2026
   Il markup delle pagine e' scritto con i nomi di classe di Bootstrap
   (row/col, form-label, form-control, form-select, btn, badge, table,
   alert, utilita' di spaziatura) ma Bootstrap NON e' mai stato caricato:
   su Home 51 classi su 61 e su Interventi 52 su 74 non esistevano da
   nessuna parte, quindi quelle due pagine uscivano con i controlli di
   SISTEMA — etichette in linea, campi e bottoni grigi del browser,
   tabella a 12 colonne larga il doppio del riquadro che la contiene.
   Ferie.razor si era gia' scritta la sua copia locale del vocabolario:
   qui c'e' la stessa cosa, una volta sola e per tutte le pagine.
   Tutto e' agganciato a .ore-wrap: fuori dall'app non cambia nulla, e le
   pagine che ridefiniscono qualcosa nel proprio <style> continuano a
   vincere (vengono dopo nel documento).
   ========================================================================= */

/* --- griglia (row/col come Bootstrap: col-* sempre, col-md-* da 768px) --- */
.ore-wrap .row { display: flex; flex-wrap: wrap; margin-left: -4px; margin-right: -4px; }
.ore-wrap .row > * { padding-left: 4px; padding-right: 4px; box-sizing: border-box; }
.ore-wrap .row.g-1 { row-gap: 4px; } .ore-wrap .row.g-2 { row-gap: 8px; } .ore-wrap .row.g-3 { row-gap: 16px; }
.ore-wrap .col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.ore-wrap .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.ore-wrap .col-3 { flex: 0 0 25%; max-width: 25%; }
.ore-wrap .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ore-wrap .col-6 { flex: 0 0 50%; max-width: 50%; }
.ore-wrap .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .ore-wrap .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .ore-wrap .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .ore-wrap .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .ore-wrap .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

/* --- flex e spaziature --- */
.ore-wrap .d-flex { display: flex; }
.ore-wrap .d-block { display: block; }
.ore-wrap .flex-wrap { flex-wrap: wrap; }
.ore-wrap .flex-fill { flex: 1 1 auto; }
.ore-wrap .align-items-center { align-items: center; }
.ore-wrap .align-items-start { align-items: flex-start; }
.ore-wrap .align-items-end { align-items: flex-end; }
.ore-wrap .justify-content-between { justify-content: space-between; }
.ore-wrap .gap-1 { gap: 4px; } .ore-wrap .gap-2 { gap: 8px; } .ore-wrap .gap-3 { gap: 18px; }
.ore-wrap .ms-auto { margin-left: auto; }
.ore-wrap .ms-1 { margin-left: 4px; } .ore-wrap .ms-2 { margin-left: 8px; }
.ore-wrap .mb-0 { margin-bottom: 0; } .ore-wrap .mb-1 { margin-bottom: 4px; } .ore-wrap .mb-2 { margin-bottom: 8px; }
.ore-wrap .mt-1 { margin-top: 4px; } .ore-wrap .mt-2 { margin-top: 8px; } .ore-wrap .mt-3 { margin-top: 16px; }
.ore-wrap .py-1 { padding-top: 4px; padding-bottom: 4px; }
.ore-wrap .py-2 { padding-top: 8px; padding-bottom: 8px; }
.ore-wrap .ps-1 { padding-left: 4px; }
.ore-wrap .w-100 { width: 100%; }

/* --- campi: 16px sui controlli, altrimenti iOS ingrandisce la pagina al tocco --- */
.ore-wrap .form-label { display: block; font-size: 13px; color: #555; margin-bottom: 2px; font-weight: 600; }
.ore-wrap .form-control,
.ore-wrap .form-select { display: block; width: 100%; padding: 8px 10px; border: 1px solid #c9c4b8;
    border-radius: 6px; font-size: 16px; box-sizing: border-box; background: #fff; color: #222; }
.ore-wrap .form-control-lg, .ore-wrap .form-select-lg { font-size: 17px; padding: 11px 12px; }
.ore-wrap .form-control-sm, .ore-wrap .form-select-sm { font-size: 14px; padding: 5px 8px; }
.ore-wrap textarea.form-control { resize: vertical; }
.ore-wrap .form-control:focus, .ore-wrap .form-select:focus { outline: 2px solid #9bb6d4; outline-offset: 0; }

/* --- pulsanti --- */
.ore-wrap .btn { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent;
    font-size: 15px; cursor: pointer; text-decoration: none; line-height: 1.3; background: #fff; color: #333;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ore-wrap .btn-lg { padding: 12px 16px; font-size: 17px; }
.ore-wrap .btn-sm { padding: 4px 10px; font-size: 13px; }
.ore-wrap .btn-primary { background: #1A5DA8; border-color: #1A5DA8; color: #fff; }
.ore-wrap .btn-success { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.ore-wrap .btn-outline-primary { background: #fff; border-color: #1A5DA8; color: #1A5DA8; }
.ore-wrap .btn-outline-secondary { background: #fff; border-color: #bbb; color: #333; }
.ore-wrap .btn-outline-danger { background: #fff; border-color: #cc3333; color: #cc3333; }
.ore-wrap .btn:disabled { opacity: .6; cursor: default; }
.ore-wrap .btn:active { transform: scale(.98); }
.ore-wrap .btn-group { display: inline-flex; }
.ore-wrap .btn-group > .btn { border-radius: 0; margin-left: -1px; }
.ore-wrap .btn-group > .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.ore-wrap .btn-group > .btn:last-child { border-radius: 0 6px 6px 0; }
.ore-wrap .btn-group-sm > .btn { padding: 4px 10px; font-size: 13px; }

/* --- tabelle: la settimana ha 12 colonne, sul telefono scorre dentro il riquadro --- */
.ore-wrap .table { width: 100%; border-collapse: collapse; }
.ore-wrap .table th, .ore-wrap .table td { padding: 5px 6px; border-bottom: 1px solid #eee;
    text-align: left; font-size: 13px; vertical-align: top; }
.ore-wrap .table-sm th, .ore-wrap .table-sm td { padding: 4px 5px; }
.ore-wrap .table thead th { border-bottom: 2px solid #ded9cd; white-space: nowrap; }
.ore-wrap .table-light thead th, .ore-wrap thead.table-light th { background: #f4f2ec; }
.ore-wrap .align-middle th, .ore-wrap .align-middle td { vertical-align: middle; }
.ore-wrap .tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- pastiglie di stato --- */
.ore-wrap .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px;
    color: #fff; background: #888; white-space: nowrap; }
.ore-wrap .bg-success { background: #1f9d57; }
.ore-wrap .bg-danger { background: #cc3333; }
.ore-wrap .bg-secondary { background: #888; }
.ore-wrap .bg-warning { background: #e0a800; }
.ore-wrap .bg-info { background: #2a8fbd; }
.ore-wrap .bg-dark { background: #444; }
.ore-wrap .badge.bg-warning, .ore-wrap .badge.bg-info { color: #fff; }

/* --- avvisi --- */
.ore-wrap .alert { padding: 8px 10px; border-radius: 6px; }
.ore-wrap .alert-success { background: #e6f4ea; color: #176b3a; border: 1px solid #b6dfc4; }
.ore-wrap .alert-danger { background: #fde8e8; color: #a12020; border: 1px solid #f3bcbc; }
.ore-wrap .alert-info { background: #e8f1f9; color: #14406e; border: 1px solid #bcd6ef; }

/* --- testo --- */
.ore-wrap .small { font-size: 12px; }
.ore-wrap .fw-bold { font-weight: 700; }
.ore-wrap .fw-normal { font-weight: 400; }
.ore-wrap .text-center { text-align: center; }
.ore-wrap .text-end { text-align: right; }
.ore-wrap .text-muted { color: #777; }
.ore-wrap .text-dark { color: #222; }
.ore-wrap .text-danger { color: #c0392b; }

/* --- il terzo pulsantone del menu non aveva colori (menu-ore e menu-int si', menu-ferie no) --- */
.ore-wrap .menu-ferie { background: #fdf4e3; border-color: #d99a12; color: #7a5300; }

/* =========================================================================
   MAIUSCOLO SELETTIVO — 04/08/2026 (decisione di Stefano: "settalo solo
   dove serve"). Va sul testo BREVE che l'occhio cerca — etichette,
   pulsanti, titoli, intestazioni di colonna, pastiglie — e NON sulle frasi,
   che in stampatello si leggono peggio perche' perdono il profilo delle
   parole. Nessun dato viene toccato: quello che il tecnico scrive resta
   come lo scrive lui, sia a video sia nel gestionale.
   ========================================================================= */
.ore-wrap label,
.ore-wrap .form-label,
.ore-wrap th,
.ore-wrap .btn,
.ore-wrap .esito-btn,
.ore-wrap .menu-tit,
.ore-wrap .badge,
.ore-wrap .int-num,
.ore-wrap .int-foot,
.ore-wrap .ore-title,
.ore-wrap .modal-tit,
.ore-wrap .info-r > span:first-child,
.ore-wrap tbody td:first-child:not([colspan]),
.ore-wrap .up { text-transform: uppercase; }

/* eccezioni: text-transform si eredita, quindi i campi vanno esclusi a mano
   o il tecnico vedrebbe MAIUSCOLO mentre nel database finisce quel che ha
   battuto (due verita' sullo stesso schermo) */
.ore-wrap input,
.ore-wrap textarea,
.ore-wrap select,
.ore-wrap .lbl-nota,
.ore-wrap .info-r strong,
.ore-wrap .int-cli,
.ore-wrap .int-mot,
.ore-wrap .firma-auto,
.ore-wrap .menu-sub,
.ore-wrap .alert,
.ore-wrap .esito-hint,
.ore-wrap .text-muted { text-transform: none; }

/* regola a se': uno pseudo-elemento sconosciuto invaliderebbe tutto il gruppo */
.ore-wrap ::placeholder { text-transform: none; }