/* GLOBALE */ a, a:hover { -webkit-transition: 200ms ease-in-out; transition: 200ms ease-in-out; } .nav-link.logout { background-color: #DC3545 !important; } .nav-item > hr { border-top: 1px solid #4F5962; } .text-large { font-size: 18px; } .text-light { color: #FFF; } input.inputNumerico::-webkit-outer-spin-button, input.inputNumerico::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number].inputNumerico { -moz-appearance: textfield; } .visible { display: inline-block !important; } .invisible { display: none !important; } .preloader > img { max-width: 90%; height: auto; } i.fas { min-width: 18px; } .btn-light { border-color: #E0E0E0; } .input-group-prepend > .input-group-text { width: 42px; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .select2-container--bootstrap4 .select2-dropdown { z-index: 3000 !important; } .tooltip-left { text-align: left; max-width: none; white-space: nowrap; } /* LOGIN (Fase 2.0 — layout split-screen, stile progetto "reception") */ body.login-page { background: #FFF !important; min-height: 100vh; padding: 0 !important; margin: 0; } .login-split { display: flex; min-height: 100vh; width: 100%; } .login-form-panel { background: #FFF; box-shadow: 6px 0 40px rgba(0, 0, 0, 0.28); display: flex; flex: 0 0 clamp(440px, 25%, 560px); max-width: clamp(440px, 25%, 560px); flex-direction: column; justify-content: center; padding: 30px 60px 60px; position: relative; z-index: 2; } .login-brand { margin-bottom: 48px; text-align: center; } .login-brand img { max-height: 70px; } .login-form-inner { width: 100%; } .login-form-inner .input-group .input-group-text:first-child { background: #E9ECEF; border-radius: 0.25rem 0 0 0.25rem; color: #495057; } .login-form-inner .input-group .input-group-text:last-child { background: #E9ECEF; border-radius: 0 0.25rem 0.25rem 0; color: #495057; cursor: pointer; } .login-form-inner button { font-size: 18px; } .login-box-msg { color: #222; font-family: "Manrope"; font-size: 2rem; font-weight: 400; padding: 0 0 28px; text-align: left; } .login-panel-footer { color: #999; font-family: "Kanit"; font-size: .8rem; text-align: center; position: absolute; bottom: 24px; left: 0; right: 0; } .login-panel-footer a { color: #00813E; text-decoration: none; } .login-panel-footer a:hover, .login-panel-footer a:focus { text-decoration: underline; } .login-visual-panel { align-items: flex-end; background: linear-gradient(160deg, rgba(0,129,62,.4), rgba(0,90,43,.55)), url('../images/bg-login.jpg') center/cover no-repeat; display: flex; flex: 1 1 auto; justify-content: flex-start; overflow: hidden; position: relative; } .visual-copy { color: #FFF; max-width: 560px; padding: 0 60px 30px; pointer-events: none; position: relative; text-align: left; z-index: 2; } .visual-eyebrow { font-family: "Kanit"; font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; opacity: 0.85; text-transform: uppercase; } .visual-subtitle { font-family: "Manrope"; font-size: 1.9rem; font-weight: 700; line-height: 1.3; } @media(max-width: 768px) { .login-split { flex-direction: column; } .login-form-panel { box-shadow: none; flex: 1 1 auto; max-width: 100%; padding: 40px 30px; } .login-visual-panel { display: none; } } /* NAVBAR */ .navbar-logo { position: absolute; right: 20px; top: 8px; max-height: 40px; } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { background: #FFF; color: #343A40; } .navbar-dark .navbar-nav .nav-item.dropdown.show { background: #FFF; color: #343A40; } .navbar-dark .navbar-nav .nav-item.dropdown.show .nav-link { color: #343A40; } .dropdown-item:focus, .dropdown-item:hover { background: #007BFF; color: #FFF; } @media(max-width: 991.98px) { .main-header .navbar-nav .nav-item { border: 1px solid rgba(255,255,255,.33); } .main-header .navbar-nav .nav-item, .main-header .navbar-nav .nav-item .dropdown-item { text-align: center; } .main-header .navbar-nav .nav-item:nth-child(n+2) { margin-top: 5px; } } /* BREADCRUMBS */ .breadcrumb .breadcrumb-item { font-size: 16px; } .breadcrumb-item+.breadcrumb-item { padding-left: 10px; } .breadcrumb-item+.breadcrumb-item::before { color: #FFF; padding-right: 10px; } .breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.66) !important; text-decoration: underline !important; } .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a:hover, .breadcrumb .breadcrumb-item a:focus, .breadcrumb .breadcrumb-item.active { color: #FFF !important; } /* TABELLA DETTAGLI */ #dettagliTabella .col { border: 1px solid #DEE2E6; padding: 8px 15px; min-height: 41px; } #dettagliTabella .col:first-child { background: #F6F6F6; } #dettagliTabella .col:not(:last-child) { border-right-width: 0; } #dettagliTabella .row:not(:last-child) .col { border-bottom-width: 0; } #dettagliTabella #bottonePrezzo { margin-top: -8px; margin-bottom: -4px; width: 35px; } /* Icona mostra/nascondi prezzo acquisto in verde ABZ, stessa tonalita' di .btn-success (qui il bottone resta btn-outline-primary, quindi si ridichiarano le variabili outline). */ #dettagliTabella #bottonePrezzo { --bs-btn-color: #00813E; --bs-btn-border-color: #00813E; --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #00813E; --bs-btn-hover-border-color: #00813E; --bs-btn-active-color: #FFF; --bs-btn-active-bg: #006732; --bs-btn-active-border-color: #006732; --bs-btn-focus-shadow-rgb: 38, 148, 91; } #dettagliTabella #IDCliente { height: 26px; } #dettagliTabella button#codiceCliente { font-size: 14px; height: 26px; line-height: 20px; margin-top: -4px; } /* ELENCO RAPPORTINI */ #elencoRapportini .bg-white > a { color: #FFF !important; } .calendar-grid { display: grid; gap: 10px; grid-template-columns: repeat(7, 1fr); } .day-card { border: 2px solid transparent; min-height: 120px; min-width: 0; overflow: hidden; } .day-card.weekend { background: #ABABAB; border-color: #000; color: #000; } .day-card.weekend .day-card-footer { border-color: #000; } .day-card.weekend .day-card-footer span { color: #000 !important; } .day-card.incomplete { border-color: #feb2b2; background: #fff5f5; } .day-card.complete { border-color: #9ae6b4; background: #f0fff4; } .day-card.empty-slot { background: transparent; border: none; } .rapportini-list .rapportino-item:last-child { margin-bottom: 15px !important; } .rapportino-item { background: rgba(255 255 255 / 75%); border-left: 3px solid #28a745; font-size: 0.75rem; padding: 2px; } .day-card-footer i { width: 12px; } .legend-swatch { display: inline-block; width: 15px; height: 15px; border-radius: 2px; vertical-align: middle; } .legend-swatch.complete { border: 2px solid #9ae6b4; background: #f0fff4; } .legend-swatch.incomplete { border: 2px solid #feb2b2; background: #fff5f5; } .legend-swatch.weekend { background: #ABABAB; } /* .btn-xs esiste in AdminLTE3 (vecchio stack) ma non in AdminLTE4/BS5: senza questa regola, sul nuovo stack la classe è un no-op e il bottone torna alle dimensioni piene di un .btn. */ .btn-xs { padding: .125rem .4rem; font-size: .75rem; line-height: 1.5; border-radius: .2rem; } @media (max-width: 991px) { .calendar-grid { grid-template-columns: 1fr !important; } .calendar-grid .empty-slot { display: none !important; min-height: 0; } .calendar-grid > div:nth-child(-n+7):not(.day-card) { display: none; } .day-card.empty-slot { display: none; } } /* RAPPORTINI */ #creaPDF #mySketch1 { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #CED4DA; border-radius: 0.25rem; height: 200px; margin: 0; padding: 10px; } .modal-content { border: 0; } .modal-header .modal-title { text-shadow: 2px 2px 0 #000; } .nav-tabs .nav-link { border-color: #E9ECEF #E9ECEF #DEE2E6; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background-color: rgba(0,123,255,0.85); border: #007BFF #007BFF #FFF; color: #FFF; } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background-color: #0056B3; color: #FFF; } /* DATATABLES */ form span.input-group-append > button { border-top-right-radius: .25rem !important; border-bottom-right-radius: .25rem !important; } div.dataTables_filter, div.dataTables_paginate { float: right; } div.dataTables_filter, div.dataTables_length, div.dataTables_info, div.dataTables_paginate { display: inline-block; } div.dt-buttons { display: block; margin-top: 15px; } .table-striped tbody tr:nth-of-type(odd) { background-color: #F8F8F8; } .table-hover tbody tr:not(.canone-scadenza):hover { background-color: rgba(0, 123, 255, 0.1) !important; } /* CANONI */ #risCanoni tfoot select { display: block; width: 100%; height: 100%; padding: .15rem .3rem; font-size: .875rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .2rem; box-shadow: inset 0 0 0 transparent; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } #risCanoni th select { width: 100%; } #risCanoni td.bg-disdettaParziale { background: linear-gradient(to top left, #DC3545 50%, transparent 50%); color: #FFF; text-align: right; } #risCanoni td.cellaDisdette { height: 20px; } #risCanoni .barraDisdette { display: flex; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; margin: 0 auto; } #risCanoni .barraDisdette > div { flex: 1; background-color: transparent; border: 1px solid #ccc; border-radius: 2px; transition: background-color 0.3s ease; height: 100%; } #risCanoni .barraDisdette > div.canoneDisdettato { background-color: #DC3545; border-color: #900000; } /* CALENDARIO */ .fc .fc-toolbar-title { text-transform: capitalize; } .fc-scroller { height:100% !important; } /* PRTG */ .select2-container--default .select2-selection--single { border-color: #CED4DA; } .select2-container .select2-selection--single { height: 38px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } /* RICHIESTA PERMESSO */ #richiestaPermesso #oraInizio option:disabled, #richiestaPermesso #oraFine option:disabled { color: #DC3545 !important; } /* LISTA USCITE */ #listaUsciteAutoPersonale thead th:nth-child(1), #listaUsciteAutoPersonale thead th:nth-child(3) { min-width: 200px; } #listaUsciteAutoPersonale thead th:nth-child(4) { min-width: 150px; } #listaUsciteAutoPersonale thead th:nth-child(5) { min-width: 100px; } /* TICKET */ .swal-actions-spaced { display: flex !important; justify-content: space-between !important; padding: 0 1.6em !important; width: 100% !important; } #ticketABZ.nav-tabs .nav-item:not(:first-child) { margin-left: 5px; } #ticketABZ.nav-tabs .nav-link:not(.active) { background-color: #E9ECEF; border-color: #DEE2E6; color: #495057; transition: background-color 0.2s ease; } #ticketABZ.nav-tabs .nav-link:not(.active):hover { background-color: #DEE2E6; color: #212529; } #ticketABZ.nav-tabs .nav-link.active { font-weight: bold; } .ticket-chiuso { background-color: rgba(0,0,0,0.5) !important; color: #FFF; pointer-events: none; } .ticket-chiuso td:not(:last-child), .ticket-chiuso td:not(:last-child) > * { text-decoration: line-through; } .ticket-chiuso a { color: #FFF; } .ticket-chiuso .chk-stato-ticket, .ticket-chiuso .btnAzioni button:last-child { cursor: pointer; pointer-events: all; } .form-check-input { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: #00813E; } .form-check-input:checked { background-color: #00813E; border-color: #00813E; } .form-check-input:focus { border-color: #00813E; box-shadow: 0 0 0 0.25rem rgba(0, 129, 62, 0.25); } /* Checkbox del pannello "Aggiungi annotazione" (dettaglioTicket.php): il bottone che apre il pannello è btn-info (cyan), quindi la checkbox segue la stessa logica colore invece del verde ABZ di default sopra. */ #blocNotaTicket .form-check-input { accent-color: #0DCAF0; } #blocNotaTicket .form-check-input:checked { background-color: #0DCAF0; border-color: #0DCAF0; } #blocNotaTicket .form-check-input:focus { border-color: #0DCAF0; box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25); } th.sorting_disabled::after, th.sorting_disabled::before { display: none !important; } /* RICHIESTE EFFETTUATE */ .btn-cancella-bloccato { opacity: .5; cursor: not-allowed; } /* CALENDARIO PERMESSI */ #calendarioPermessi .gantt-container { overflow: auto; border: 1px solid #e9ecef; border-radius: .5rem; background: #FFF; } #calendarioPermessi .gantt-container table { border-collapse: collapse; min-width: 1600px; table-layout: fixed; width: 100%; } #calendarioPermessi .gantt-container th, #calendarioPermessi .gantt-container td { border: 1px solid #ced4da; height: 28px; text-align: center; position: relative; padding: 0; } #calendarioPermessi .col-nome { width: 180px; text-align: left; padding-left: 15px; background: #f8f9fa; position: sticky; left: 0; z-index: 10; font-weight: bold; border-right: 3px solid #495057; font-size: 12px; } #calendarioPermessi .header-day { background: #495057; color: white; font-size: 13px; } #calendarioPermessi .header-name { background: #e9ecef; color: #495057; font-size: 11px; font-weight: bold; } #calendarioPermessi .weekend { background-color: #e9ecef !important; } #calendarioPermessi .festivo { background-color: #e4767c !important; } #calendarioPermessi .day-split { display: flex; width: 100%; height: 100%; } #calendarioPermessi .hour-block { flex: 1; height: 100%; border-right: 1px solid rgba(0,0,0,0.04); } #calendarioPermessi .hour-block:last-child { border-right: none; } #calendarioPermessi .hour-block.ferie { background-color: #00813E !important; } #calendarioPermessi .hour-block.chiusura { background-color: rgba(0,129,62,.4) !important; } #calendarioPermessi .gantt-cell-link { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; } #calendarioPermessi .legend-swatch.ferie { background-color: #00813E; } #calendarioPermessi .legend-swatch.chiusura { background-color: rgba(0,129,62,.4); } #calendarioPermessi .legend-swatch.weekend { background-color: #e9ecef; } #calendarioPermessi .legend-swatch.festivo { background-color: #e4767c; } /* CHIUSURE AZIENDALI */ #chiusureAziendali .weekend { background-color: #cbd5e0 !important; } /* CALENDARIO PRENOTAZIONI (auto + sala riunioni). Asse del tempo VERTICALE (righe = fasce da 30 minuti), colonne = combinazioni giorno×risorsa — così anche la settimana lavorativa (5 giorni x 3 risorse = 15 colonne) si vede senza scroll orizzontale, a differenza del primo tentativo con l'orario in colonna (fino a 80 colonne in settimana). Stile "barre fluttuanti su griglia leggera" ripreso da un riferimento DHTMLX Scheduler mandato dall'utente — solo lo stile, nessuna libreria esterna aggiunta: griglia hand-rolled come #calendarioPermessi. */ #calendarioPrenotazioni .card-primary { display: flex; flex-direction: column; min-height: calc(100vh - 220px); } #calendarioPrenotazioni .gantt-container { overflow: auto; border: 1px solid #e9ecef; border-radius: .5rem; background: #FFF; height: 100%; } /* table-layout:fixed + solo .col-ora con larghezza esplicita: il resto dello spazio si divide in parti automaticamente UGUALI tra tutte le colonne giorno×risorsa (niente scroll, poche colonne). L'altezza riga qui sotto è solo un FALLBACK statico (prima che il JS calcoli quella reale in ridimensionaRigheOrario(), che divide lo spazio disponibile per il numero di righe — così resta sempre uniforme ed è anche responsive al resize della finestra). */ #calendarioPrenotazioni .gantt-container table { border-collapse: collapse; table-layout: fixed; width: 100%; } #calendarioPrenotazioni .gantt-container th, #calendarioPrenotazioni .gantt-container td { border-right: 1px solid #ced4da; border-bottom: 1px solid #ced4da; text-align: center; position: relative; padding: 0; } #calendarioPrenotazioni .gantt-container tbody tr { height: 44px; } #calendarioPrenotazioni .gantt-container thead th { border-bottom: 2px solid #dee2e6; height: 42px; } #calendarioPrenotazioni .col-ora { width: 64px; background: #f8f9fa; position: sticky; left: 0; z-index: 10; font-weight: bold; border-right: 2px solid #dee2e6; font-size: 11px; color: #343a40; } #calendarioPrenotazioni .header-risorsa, #calendarioPrenotazioni .header-giorno-gruppo { background: #f8f9fa; color: #6c757d; font-size: 16px; font-weight: 700; } #calendarioPrenotazioni .header-giorno-gruppo { text-transform: uppercase; } #calendarioPrenotazioni .header-risorsa i { font-size: 13px; } #calendarioPrenotazioni .header-risorsa span { font-size: 10px; text-transform: none; font-weight: 600; } #calendarioPrenotazioni .confine-giorno { border-left: 3px solid #495057 !important; } #calendarioPrenotazioni .confine-pausa { border-top: 2px dashed #ced4da !important; } #calendarioPrenotazioni .hour-block-link { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: calc(100% - 8px); height: calc(100% - 6px); margin: 3px 4px; border-radius: .5rem; text-decoration: none; cursor: pointer; padding: 4px 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12); text-align: left; } #calendarioPrenotazioni .hour-block-link span { display: block; width: 100%; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #calendarioPrenotazioni .hour-block-link .riga-orario { font-size: 10px; font-weight: 700; } #calendarioPrenotazioni .hour-block-link .riga-nome { font-size: 10px; font-weight: 400; opacity: .9; } /* Prenotazioni troppo brevi per due righe leggibili (calendarioPrenotazioni.php, aggiornaModalitaCompatta()): solo l'orario, centrato, stile Outlook — il nome resta disponibile via tooltip (title) o aprendo il dettaglio col click. */ #calendarioPrenotazioni .hour-block-link.hour-block-compatto { flex-direction: row; align-items: center; justify-content: center; padding: 2px 4px; } #calendarioPrenotazioni .hour-block-link.hour-block-compatto .riga-nome { display: none; } #calendarioPrenotazioni .occ-ford { background-color: #DC3545 !important; } #calendarioPrenotazioni .occ-peugeot { background-color: #007BFF !important; } #calendarioPrenotazioni .occ-sala { background-color: #00813E !important; } #calendarioPrenotazioni .libero-link { display: block; width: 100%; height: 100%; cursor: pointer; min-height: 28px; } #calendarioPrenotazioni .libero-link:hover { background-color: #f0fff4; } #calendarioPrenotazioni .slot-passato { cursor: default; opacity: .35; } #calendarioPrenotazioni .toolbar-pren .btn-group .btn { font-weight: 600; } #calendarioPrenotazioni .legend-swatch { margin-right: 8px; } /* SHELL BOOTSTRAP 5 / ADMINLTE 4 (Fase 2.1 — solo per le pagine migrate a head2/header2/footer2/scripts2) */ :root { /* Senza questo override .bg-primary/.text-primary di Bootstrap 5 tornerebbero al blu di default (#0d6efd) — NON riguarda .btn-primary/.card-primary, che hanno le loro variabili dedicate (vedi sotto). Verde #00813E scelto come nuovo colore primario per le pagine sul nuovo stack (Fase 2.2) — le pagine ancora sul vecchio stack (AdminLTE 3/Bootstrap 4) restano sul blu #007BFF finché non vengono migrate, per non toccare codice condiviso da loro. */ --bs-primary: #00813E; --bs-primary-rgb: 0, 129, 62; } /* LINK — solo nuovo stack (login.php + shell head2/header2/footer2). Escluse esplicitamente le classi che sono in realtà componenti (bottoni, voci di navbar/dropdown, logo): la loro regola di colore di base (es. ".btn{color:var(--bs-btn-color)}") ha specificità più bassa di un semplice "a" con classe genitore, quindi senza queste esclusioni il verde vinceva anche lì. */ .app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle), body.login-page a:not(.btn) { color: #00813E; text-decoration: none; } .app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):hover, .app-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.dropdown-toggle):focus, body.login-page a:not(.btn):hover, body.login-page a:not(.btn):focus { color: #006732; } /* CARD-HEADER — altezza incoerente tra pagine con bottone nell'header (es. faq.php) e pagine con solo il titolo (es. magazzinoCavi.php): dentro ".row.align-items-center" (titolo+bottone) la riga si allunga sempre all'elemento più alto tra i due, e un .btn normale (~38px, misurato) è più alto del solo testo del titolo (~21px, misurato) — da qui l'header più alto. Generalizza il pattern già usato in ticket.php (flex diretto su .card-header + btn-sm) a tutte le varianti del sito, con :has() per toccare solo le card-header con titolo/bottone in questa forma (mai il generico .card-header, per non rompere le card-header con altro contenuto, es. i widget di canoniStatistiche.php o i pannelli bg-primary della checklist). 65px scelto dall'utente, poco sopra ai 62.6px misurati (32px di padding AdminLTE4 + 30.6px di altezza reale di un .btn-sm). */ .card-header:has(> h3.card-title:only-child), .card-header:has(> .row), .card-header.d-flex.align-items-center { display: flex; align-items: center; min-height: 65px; } /* .row e' gia' un flex container di suo (Bootstrap), ma da BLOCCO si allargava sempre al 100% del genitore per conto proprio; diventato figlio flex di .card-header sopra, senza questa regola si restringe al contenuto (flex-basis:auto di default) invece di riempire la larghezza disponibile — le due colonne si stringono, il titolo va a capo su due righe e l'header torna piu' alto del dovuto. Ripristina la larghezza piena di prima. */ .card-header:has(> .row) > .row { flex: 1 1 auto; min-width: 0; } /* PRELOADER (Fase 2.2 — stesso pattern del progetto "reception"): overlay a schermo intero con logo, barra di avanzamento finta (si ferma al 92% finché la pagina non ha finito di caricare davvero) e dicitura LOADING. Nascosto con un fade quando la pagina è pronta (o dopo 8s, come rete di sicurezza). Colori ripresi da "reception" ma con #00813E al posto della sua variabile --primary-color (qui non presente: il progetto usa --bs-primary direttamente). */ #preloader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FFF; transition: opacity .4s ease, visibility .4s ease; } #preloader.preloader-nascosto { opacity: 0; visibility: hidden; pointer-events: none; } #preloaderLogo { width: 380px; margin-bottom: 1.75rem; animation: preloader-pulse 1.4s ease-in-out infinite; } .preloader-barra { width: 380px; height: 6px; background: #E9ECEF; border-radius: 999px; overflow: hidden; } .preloader-barra-fill { height: 100%; width: 0%; background: var(--bs-primary); border-radius: 999px; transition: width .25s ease-out; } .preloader-testo { margin-top: .9rem; font-size: .95rem; font-weight: 700; letter-spacing: .15em; color: #6C757D; animation: preloader-testo-pulsa 1.6s ease-in-out infinite; } #preloaderPercentuale { display: inline-block; margin-left: .4em; letter-spacing: normal; color: var(--bs-primary); } @keyframes preloader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes preloader-testo-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* Mini-preloader per contenuti caricati via AJAX dentro una tab (dettaglioRubrica.php e simili): stesso stile del preloader di pagina ma in scala e con barra indeterminata (qui non conosciamo una percentuale reale, il contenuto rimpiazza tutto non appena arriva). */ .tab-preloader { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; } .tab-preloader-logo { width: 140px; margin-bottom: 1.1rem; animation: preloader-pulse 1.4s ease-in-out infinite; } .tab-preloader-barra { width: 220px; height: 5px; background: #E9ECEF; border-radius: 999px; overflow: hidden; } .tab-preloader-barra-fill { height: 100%; width: 40%; background: var(--bs-primary); border-radius: 999px; animation: tab-preloader-scorri 1.3s ease-in-out infinite; } .tab-preloader-testo { margin-top: .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: #6C757D; animation: preloader-testo-pulsa 1.6s ease-in-out infinite; } @keyframes tab-preloader-scorri { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } /* FONT (Fase 2.4) — solo nuovo stack: stesso schema di tempoLiberoDemo (titoli/corpo/etichette) ma con Manrope al posto di Rubik per i titoli, su richiesta esplicita. Scoped su "body" invece che su ".app-wrapper" (come già fatto per il colore dei link) perché copre anche i modali, che nel markup stanno fuori da ".app-wrapper" ma dentro "body" — le uniche classi presenti SOLO sulle pagine già migrate sono "body.bg-body-tertiary" (pagine applicative) e "body.login-page". */ body.bg-body-tertiary, body.login-page { font-family: 'Figtree', system-ui, sans-serif; } body.bg-body-tertiary h1, body.bg-body-tertiary h2, body.bg-body-tertiary h3, body.bg-body-tertiary h4, body.bg-body-tertiary h5, body.bg-body-tertiary h6, body.bg-body-tertiary .h1, body.bg-body-tertiary .h2, body.bg-body-tertiary .h3, body.bg-body-tertiary .h4, body.bg-body-tertiary .h5, body.bg-body-tertiary .h6, body.bg-body-tertiary .nav-link, body.bg-body-tertiary .dropdown-item, body.login-page h1, body.login-page h2, body.login-page h3, body.login-page h4, body.login-page h5, body.login-page h6 { font-family: 'Manrope', system-ui, sans-serif; } /* .dropdown-item non eredita il font-size dal body come .nav-link, ma da .dropdown-menu, che Bootstrap fissa staticamente a --bs-dropdown-font-size:1rem — va riallineato esplicitamente alla stessa dimensione del body, altrimenti resta diverso dalle voci di primo livello. */ body.bg-body-tertiary .dropdown-menu { --bs-dropdown-font-size: .95rem; } /* Voci di primo livello del menu e sottovoci dei dropdown: stesso peso (normale, non quello più bold ereditato da AdminLTE) e stessa spaziatura tra le lettere, su richiesta esplicita. */ body.bg-body-tertiary .nav-link { --bs-nav-link-font-weight: 400; } body.bg-body-tertiary .nav-link, body.bg-body-tertiary .dropdown-item { letter-spacing: .5px; } /* Hover verde per i dropdown FUORI dalla navbar (es. menu "Azioni" nelle card) — la regola ".dropdown-item:hover{background:#007BFF}" del vecchio stack, più in alto in questo stesso file, è globale e senza l'eccezione già presente per ".app-header .dropdown-menu". */ body.bg-body-tertiary .dropdown-item:hover, body.bg-body-tertiary .dropdown-item:focus { background-color: #00813E; color: #FFF; } /* Bottone azioni circolare su header colorato (es. dettaglioRubrica.php): un filo di bianco già a riposo, non solo al passaggio del mouse, per risaltare sul verde dell'header. */ .btn-header-actions { background-color: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); } .btn-header-actions:hover, .btn-header-actions:focus { background-color: #FFF; border-color: #FFF; color: #00813E; } body.bg-body-tertiary label, body.bg-body-tertiary .form-label, body.bg-body-tertiary .form-check-label, body.bg-body-tertiary th, body.bg-body-tertiary .badge, body.bg-body-tertiary .breadcrumb-item, body.login-page label, body.login-page .form-label { font-family: 'Kanit', system-ui, sans-serif; } /* Eccezione al blocco sopra: il titolo dentro la fascia colorata (.app-content-header, es. "Rubrica") va in Kanit e non in Manrope, per coerenza visiva col breadcrumb (già in Kanit) che gli sta accanto nella stessa fascia — scelta esplicita dell'utente. */ body.bg-body-tertiary .app-content-header h1 { font-family: 'Kanit', system-ui, sans-serif; } /* Righe informative del dettaglio ticket (Assegnato a/Aperto da/In carico a/...): non più grigie (tolto text-muted nel markup), font Manrope come i titoli del nuovo stack invece del corpo testo standard "Figtree" ereditato dal body. */ body.bg-body-tertiary .ticket-info-riga { font-family: 'Manrope', system-ui, sans-serif; } /* DataTables: il testo "Showing X to Y of Z" e la paginazione erano troppo attaccati alla tabella. */ body.bg-body-tertiary .dt-info, body.bg-body-tertiary .dt-paging { margin-top: .5rem; } /* Nota: il fix per "Show N entries"/ricerca sulla stessa riga non è più qui — si è rivelato inefficace affidarsi alle classi interne del layout di DataTables 2.x (non verificabile in browser in questa sessione). Sostituito con un template "dom" esplicito, vedi DT_DOM_STESSARIGA in js/custom2.js, usato da ogni init DataTable del nuovo stack. */ /* TABELLE (Fase 2.4) — solo nuovo stack: righe centrate verticalmente, generale così qualunque tabella futura eredita lo stesso comportamento senza doverlo ripetere. */ body.bg-body-tertiary .table td { vertical-align: middle; } /* Rubrica (index.php): Ragione sociale/Indirizzo/Città in maiuscolo (dati AS/400 con casing incoerente), solo visivo — l'e-mail resta minuscola tramite il PHP esistente (strtolower). */ #risRubrica tbody td:nth-child(2), #risRubrica tbody td:nth-child(3), #risRubrica tbody td:nth-child(5) { text-transform: uppercase; } /* Tutte le colonne di ogni DataTable del nuovo stack (tranne l'ultima, Azioni, che resta stretta per il suo trattamento "shrink") a sinistra con un po' di respiro laterale. Generalizzato da #risRubrica (solo index.php) a "table.dataTable" così qualunque tabella futura lo eredita senza doverlo ripetere — la classe "dataTable" è aggiunta automaticamente da DataTables su init. */ body.bg-body-tertiary table.dataTable tbody td:not(:last-child) { text-align: left; padding-left: .5rem; padding-right: .5rem; } /* Pagination di DataTables: stesso problema già visto per .btn-primary/.card-primary — i bottoni di pagina di Bootstrap hanno variabili proprie per lo stato attivo hardcoded blu (--bs-pagination-active-bg:#0d6efd) e il colore testo punta a --bs-link-color (anch'esso hardcoded blu), nessuno dei due segue l'override di --bs-primary fatto in Fase 2.2. Vanno ridichiarate le variabili del componente stesso, con le stesse tonalità già usate per .btn-success. */ body.bg-body-tertiary .pagination { --bs-pagination-color: #00813E; --bs-pagination-hover-color: #006E35; --bs-pagination-focus-color: #006E35; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(38, 148, 91, .25); --bs-pagination-active-color: #FFF; --bs-pagination-active-bg: #00813E; --bs-pagination-active-border-color: #00813E; } /* Nav-pills (switch Cliente/AB Z in rapportiniTab.php): stesso problema di sopra — lo stato attivo ha una variabile propria che non segue --bs-primary. */ body.bg-body-tertiary .nav-pills .nav-link { color: #00813E; border: 1px solid #00813E; } body.bg-body-tertiary .nav-pills .nav-link:hover:not(.active) { background-color: #00813E; color: #FFF; } body.bg-body-tertiary .nav-pills .nav-link.active { --bs-nav-pills-link-active-bg: #00813E; border-color: #00813E; color: #FFF; } /* Select2 (tema bootstrap-5): stesso problema di sopra — lo stato "selezionato" nella lista a tendina è hardcoded blu (background-color:#0d6efd) nel CSS del tema, non segue --bs-primary. !important necessario: il tema definisce lo stesso stato con una catena di selettori più specifica (.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted, 5 classi) di questa regola — scoperto perché senza !important restava blu/grigio nonostante il selettore qui sotto matchasse comunque l'elemento (verificato con una pagina di test statica). */ body.bg-body-tertiary .select2-container--bootstrap-5 .select2-results__option--selected, body.bg-body-tertiary .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background-color: #00813E !important; } /* Stesso problema dello stato "selected" sopra, ma per lo stato "highlighted" (passaggio del mouse/navigazione da tastiera sulla lista a tendina): il tema lo lascia hardcoded blu (#0d6efd) — mai coperto finora perché la regola sopra escludeva esplicitamente le opzioni evidenziate. */ body.bg-body-tertiary .select2-container--bootstrap-5 .select2-results__option--highlighted { background-color: #00813E !important; color: #FFF !important; } /* Le reale e mostra un div proprio con lo stesso blu hardcoded di Bootstrap — stesso identico trattamento del blocco sopra, stesso scope. */ .app-wrapper .select2-container--bootstrap-5.select2-container--focus .select2-selection, .app-wrapper .select2-container--bootstrap-5.select2-container--open .select2-selection, body.login-page .select2-container--bootstrap-5.select2-container--focus .select2-selection, body.login-page .select2-container--bootstrap-5.select2-container--open .select2-selection, .modal-content:has(.modal-header-flat) .select2-container--bootstrap-5.select2-container--focus .select2-selection, .modal-content:has(.modal-header-flat) .select2-container--bootstrap-5.select2-container--open .select2-selection { /* !important: plugins/select2-bootstrap5-theme/select2-bootstrap-5-theme.min.css arriva sempre via $extraHeadLinks, stampato in head2.php DOPO questo file — a parita' di specificita' senza !important vincerebbe il blu hardcoded del tema, vanificando l'override su ogni pagina che usa select2 con tema bootstrap-5. */ border-color: #80C09F !important; box-shadow: 0 0 0 .25rem rgba(0, 129, 62, .25) !important; } /* Stesso problema del blocco sopra, ma per il pannello a tendina aperto (.select2-dropdown, blu hardcoded anch'esso) e per il suo campo di ricerca interno quando riceve il focus. Qui niente prefisso .app-wrapper/body.login-page/.modal-content:has(...): select2, senza un dropdownParent esplicito, appende .select2-dropdown come figlio diretto di (non dentro il contenitore della pagina che l'ha aperto), quindi quegli scope non l'avrebbero mai intercettato — la classe --bootstrap-5 di per se' basta a restringere la regola alle sole select2 con questo tema. */ .select2-container--bootstrap-5 .select2-dropdown { border-color: #80C09F !important; } .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus { border-color: #80C09F !important; box-shadow: 0 0 0 .25rem rgba(0, 129, 62, .25) !important; } /* Filtro data nel card-header di serviziAttivati.php: il tint verde di serie sopra si confonde con lo sfondo verde pieno di .card-primary .card-header — qui serve un grigio medio a contrasto. */ .input-group-filtro-header .input-group-text { background-color: #ADB5BD; color: #333; } /* GESTIONE CANONI — righe di collegamento con badge icona a colore pieno, dentro card standard (.card.card-primary + .h-100), al posto dei 7 bottoni bg-gradient di colori Bootstrap scollegati dal brand usati prima di questa fase. Verde ABZ per l'azione più operativa (Elenco canoni), le altre tonalità sono una palette scelta apposta (non i colori semantici Bootstrap) per restare coordinate invece che "arcobaleno". */ .hub-azione { display: flex; align-items: center; gap: 18px; padding: 20px 14px; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color .15s ease; } .hub-azione:hover { background-color: rgba(0, 129, 62, .06); } .hub-azione + .hub-azione { border-top: 1px solid #F6F6F6; } .hub-azione-icona { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #FFF; flex: none; font-size: 26px; } .hub-azione-icona.hub-icona-verde { background-color: #00813E; } .hub-azione-icona.hub-icona-blu { background-color: #3E6C93; } .hub-azione-icona.hub-icona-rossa { background-color: #DC3545; } .hub-azione-icona.hub-icona-terracotta { background-color: #A65D42; } .hub-azione-icona.hub-icona-viola { background-color: #6E5A9E; } .hub-azione-icona.hub-icona-ambra { background-color: #B37D2E; } .hub-azione-icona.hub-icona-grigia { background-color: #666666; } .hub-azione-testo { flex: 1; min-width: 0; } .hub-azione-titolo { font-weight: 600; font-size: 19px; color: #212529; } .hub-azione-descrizione { font-size: 15px; color: #6C757D; margin-top: 4px; line-height: 1.45; } /* Card con più voci (Gestione canoni > Operativo): voci su due colonne affiancate, separatore solo tra una riga e l'altra. Decide la larghezza vera della card (container query), non quella dello schermo: misurato il 15/10, sotto i ~700px di card (schermi fino a ~1400px) titoli e descrizioni andrebbero a capo su 2-4 righe, quindi lì si resta su una colonna con il separatore di sempre. */ .hub-card-griglia { container-type: inline-size; } @container (min-width: 700px) { .hub-azioni-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; align-content: start; } .hub-azioni-griglia .hub-azione + .hub-azione { border-top: 0; } .hub-azioni-griglia .hub-azione:nth-child(n+3) { border-top: 1px solid #F6F6F6; } } /* Badge categoria (macro/micro) nel modale dettaglio canone disdetto (leggiDettaglioCanoneDisdetto.php): piu' leggeri dei badge standard Bootstrap (che sono font-weight: 700 di default) per restare un'informazione di contesto secondaria rispetto ai dati del canone sotto. */ .badge-categoria-canone { font-size: 0.95rem; font-weight: 300; } /* Condizioni di pagamento particolari nella scheda del canone (leggiDettaglioCanone*.php): grande quanto le righe accanto (il badge di Bootstrap a 0.75em restava a 10,5px, misurato) e a capo se il testo è lungo. */ .badge-condizioni-pagamento { font-size: 1em; font-weight: 500; line-height: 1.4; } /* Modal "Modifica canone" (canoni.php, caricaFormCanone.php), messo a punto nei mockup _mockupCanoneForm*.html prima di essere portato qui. Select2 dentro un input-group: Select2 assegna al proprio contenitore uno style inline width:100% che, con .input-group in flex-wrap:wrap (default BS5), lo fa andare a capo invece di affiancarsi alla prepend. Stesso trattamento che Bootstrap applica già a .form-control. Probabile stesso problema ovunque una Select2 sia dentro un input-group (es. gestioneUtenti.php), da verificare in un intervento dedicato. */ .input-group > .select2-container { width: 1% !important; flex: 1 1 auto; } /* Tasti "cancella"/occhiolino in append: span invece di (niente sottolineatura da link). */ .input-group-text-btn { cursor: pointer; } /* Log come timeline con badge per campo cambiato, al posto di una textarea col testo grezzo. */ .timeline-log { max-height: 220px; overflow-y: auto; } .timeline-log .timeline-log-item { background: #fff; border: 1px solid #dee2e6; border-left: 3px solid #00813E; border-radius: .375rem; margin-bottom: .5rem; padding: .5rem .75rem; } .timeline-log .timeline-log-item.timeline-log-sistema { border-left-color: #6c757d; } /* TICKET — bordo colorato per tipo di azione (dopo .timeline-log-sistema apposta: sulle righe di sistema di un tipo mappato, es. riapertura automatica da cron, il colore per tipo deve prevalere sul grigio generico, a parità di specificità CSS). */ .timeline-log .timeline-log-item.timeline-log-success { border-left-color: var(--bs-success); } .timeline-log .timeline-log-item.timeline-log-warning { border-left-color: var(--bs-warning); } .timeline-log .timeline-log-item.timeline-log-secondary { border-left-color: var(--bs-secondary); } .timeline-log .timeline-log-item.timeline-log-info { border-left-color: var(--bs-info); } /* Messaggi scritti dal cliente su yourABZ: blu, per distinguerli a colpo d'occhio dalle annotazioni di AB Z */ .timeline-log .timeline-log-item.timeline-log-cliente { border-left-color: #1F4E9D; background: rgba(31, 78, 157, .06); } .badge-cliente-ticket { background: #1F4E9D; color: #FFF; } .timeline-log .timeline-log-head { align-items: center; display: flex; gap: .5rem; margin-bottom: .35rem; } .timeline-log .timeline-log-autore { font-weight: 600; } .timeline-log .timeline-log-badges { display: flex; flex-wrap: wrap; gap: .35rem; } .timeline-log .badge { font-weight: 400; } /* TICKET — badge più leggeri e leggermente più grandi nel modal di dettaglio (intestazione + timeline), al posto del font-weight 700 di default dei badge Bootstrap. */ #modalDettaglioTicket .badge { font-weight: 300; font-size: 0.95rem; } /* CHIUSURE AZIENDALI CICLICHE — i 2 flatpickr "solo giorno+mese" (nuovaChiusuraAziendale.php, modificaChiusuraAziendale.php) usano un anno interno solo di appoggio, mai salvato: si nasconde lo spinner dell'anno nell'intestazione del calendario per non mostrare un dato irrilevante. */ .flatpickr-calendar.flatpickr-solo-giorno-mese .flatpickr-current-month .numInputWrapper { display: none; } /* GESTIONE CAUSALI USATE — card cliccabili per selezionare le causali da azzerare (l'intera card è una