/* ─── Tema (chiaro di default, scuro via OS o toggle esplicito) ──────────── Il toggle in sidebar imposta data-theme su e vince sempre sia sul chiaro che sullo scuro; senza scelta esplicita segue prefers-color-scheme. Le severità (--sev-*) sono fisse e uguali in entrambi i temi: hanno il loro sfondo pieno con testo bianco, quindi il contrasto non dipende dal tema della pagina. */ :root { color-scheme: light; --bg: #f8f9fb; --surface: #ffffff; --surface-sunken: #f1f3f6; --text: #1a202c; --text-muted: #5a6472; --border: #e2e5ea; --border-strong: #7c8798; --accent: #3b5bdb; --accent-soft: #eef1fc; --sev-ok: #1a7f37; --sev-info: #0969da; --sev-warning: #9a6700; --sev-error: #cf222e; --sev-critical: #82071e; /* Rosso di brand (MSP Consulting, mspconsulting.it): riservato a logo/marchio, tenuto distinto da --sev-error/--sev-critical per non confondere "rosso di brand" con "rosso = severità critica" nella stessa interfaccia. */ --brand-red: #C8102E; --font: 'Barlow', system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: 'Barlow Condensed', var(--font); --sidebar-w: 234px; --rail-w: 130px; --topbar-h: 3.1rem; --footer-h: 2.1rem; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --bg: #14161a; --surface: #1c1f26; --surface-sunken: #22262e; --text: #f0f2f5; --text-muted: #9aa3b2; --border: #2c313a; --border-strong: #5f6879; --accent: #4a68d9; --accent-soft: #202a4d; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #14161a; --surface: #1c1f26; --surface-sunken: #22262e; --text: #f0f2f5; --text-muted: #9aa3b2; --border: #2c313a; --border-strong: #5f6879; --accent: #4a68d9; --accent-soft: #202a4d; } * { box-sizing: border-box; } html { font-size: var(--font-scale, 100%); height: 100%; } /* App-shell: solo
scrolla, footer resta sempre ancorato in fondo e sidebar/right-rail sono pannelli sovrapposti (non occupano spazio nel flusso), non parte del contenuto che scorre. */ body { font-family: var(--font); margin: 0; line-height: 1.45; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg); color: var(--text); } .app-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* Scrim dietro i pannelli a comparsa (sidebar/right-rail): click per chiudere. */ .scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 25; } .scrim.show { display: block; } /* Tasti burger (collassa/riespande la sidebar) e ingranaggio (apre il pannello di visualizzazione a comparsa): entrambi vivono nel footer, nessun bottone fisso sovrapposto al contenuto. */ .footer-icon-btn { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: .35rem; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; flex: 0 0 auto; } .footer-icon-btn:hover { background: var(--surface-sunken); color: var(--text); } .footer-icon-btn svg { width: 1rem; height: 1rem; } h1 { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: .01em; margin: 0; line-height: 1; } h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: .01em; margin: 0 0 .9rem; } h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; margin: 1.5rem 0 .6rem; color: var(--text-muted); } .brand-flow { color: var(--brand-red); } /* ─── Sidebar ────────────────────────────────────────────────────────────── */ /* Visibile di default, parte del flusso (non un overlay): il tasto nel footer la collassa/riespande per chi vuole più spazio, non la nasconde come pannello temporaneo. */ nav.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); border-right: 1px solid var(--border); padding: .9rem; overflow-y: auto; overflow-x: hidden; background: var(--surface); transition: width .18s ease, padding .18s ease, border-color .18s ease; } nav.sidebar.collapsed { width: 0; flex-basis: 0; padding-left: 0; padding-right: 0; border-color: transparent; overflow: hidden; } /* ─── Barra superiore: logo a sinistra, campana/utente a destra ──────────── A piena larghezza, sopra sidebar+main+right-rail (non fa parte di .app-body) — la sidebar sotto contiene solo l'albero di navigazione. */ header.topbar { flex: 0 0 var(--topbar-h); height: var(--topbar-h); display: flex; align-items: center; gap: 1rem; padding: 0 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); } .topbar-brand { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; } .brand-icon { width: 2rem; height: 2rem; border-radius: .45rem; flex: 0 0 auto; } .topbar-right { display: flex; align-items: center; gap: .8rem; margin-left: auto; } .notif-bell { position: relative; display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: .5rem; border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; } .notif-bell:hover { background: var(--surface-sunken); color: var(--text); } .notif-bell svg { width: 1.2rem; height: 1.2rem; } .notif-badge { position: absolute; top: .15rem; right: .15rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: .5rem; background: var(--sev-critical); color: #fff; font-size: .58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem .3rem .3rem; border-radius: .5rem; cursor: pointer; background: none; border: none; font-family: inherit; color: var(--text); } .user-menu-trigger:hover { background: var(--surface-sunken); } .user-avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); } .user-avatar svg { width: 1.1rem; height: 1.1rem; } .user-menu-trigger .user-email { font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; } .user-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); min-width: 180px; z-index: 40; overflow: hidden; } .user-menu-dropdown button { display: block; width: 100%; text-align: left; padding: .55rem .8rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: .85rem; color: var(--text); } .user-menu-dropdown button:hover { background: var(--surface-sunken); } .user-menu-dropdown button:disabled { color: var(--border-strong); cursor: not-allowed; } .user-menu-dropdown button:disabled:hover { background: none; } .user-menu-separator { border: none; border-top: 1px solid var(--border); margin: .25rem 0; } /* Icona Salute in topbar: badge rosso in alto (errori), giallo in basso (rate limit/avvisi) — entrambi assenti se non c'è nulla da segnalare. */ .health-badge-warning { top: auto; bottom: .15rem; background: var(--sev-warning); color: #402d00; } .health-dropdown { min-width: 300px; max-width: 340px; max-height: 22rem; padding: 0; display: flex; flex-direction: column; } .health-dropdown-list { overflow-y: auto; padding: .4rem 0; } .health-dropdown-footer { flex: 0 0 auto; padding: .55rem .8rem; border-top: 1px solid var(--border); font-size: .78rem; } .health-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .6rem 0; } .health-row .icon-badge { width: 1.7rem; height: 1.7rem; border-radius: .45rem; } .health-row .icon-badge svg { width: .95rem; height: .95rem; } .health-row-name { font-weight: 600; font-size: .82rem; } .health-row-note { font-size: .72rem; color: var(--text-muted); padding: .1rem .6rem .55rem; } .health-empty { padding: .7rem .6rem; font-size: .82rem; color: var(--text-muted); text-align: center; } /* Intestazione fissa sopra l'elenco (non scrolla via col resto) — titolo + azione bulk "segna tutte lette". */ .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem .7rem; border-bottom: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--text-muted); flex: 0 0 auto; } .notif-dropdown-header button.btn.ghost { font-size: .7rem; padding: .2rem .5rem; } /* Un gruppo per "casa" (kind) — collassato di default (stesso pattern
/ già usato per le sezioni della modale utente), non più un elenco piatto con al massimo 5 voci per gruppo: con più tipi di notifica insieme, mostrarle tutte espanse rendeva il popup ingestibile (e ne troncava silenziosamente la maggior parte, vedi nota in appNotifications.js su getUnseenForUser). */ .notif-group summary { display: flex; align-items: center; gap: .4rem; padding: .55rem .6rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .82rem; border-top: 1px solid var(--border); } .notif-group:first-child summary { border-top: none; } .notif-group summary::-webkit-details-marker { display: none; } .notif-group summary::before { content: '▸'; color: var(--text-muted); font-size: .62rem; } .notif-group[open] summary::before { content: '▾'; } .notif-group summary:hover { background: var(--surface-sunken); } .notif-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Badge del conteggio non lette per gruppo — volutamente più piccolo del pallino "N nuove" precedente (era uno .sev-info a pillola, pensato per le severità degli alert, sovradimensionato per un semplice contatore). */ .notif-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; border-radius: .55rem; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; flex: 0 0 auto; } .notif-more-link { display: block; width: 100%; text-align: left; padding: .4rem .6rem .55rem 1.5rem; font-size: .72rem; color: var(--accent); cursor: pointer; background: none; border: none; } .notif-more-link:hover { text-decoration: underline; } /* Voci del popup notifiche: pallino di stato a sx, cliccabile a sé stante per segnare letta/da-leggere SENZA navigare (stopPropagation nel JS) — centrato sull'intera altezza della riga (non solo sulla prima riga di testo) — separate da una linea sottile, non solo spaziatura. */ .notif-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem .5rem 1.5rem; border-top: 1px solid var(--border); cursor: pointer; } .notif-item:first-child { border-top: none; } .notif-item:hover { background: var(--surface-sunken); } .notif-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; background: transparent; border: 1.5px solid var(--border-strong); cursor: pointer; } .notif-dot:hover { border-color: var(--accent); } .notif-dot.unseen { background: #2f9e44; border-color: #2f9e44; } .notif-item-text { font-size: .78rem; color: var(--text); min-width: 0; } /* Evidenziazione temporanea della riga a cui porta una notifica — sparisce da sola dopo un paio di secondi, non è uno stato permanente. */ @keyframes row-highlight-flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } } .row-highlight { animation: row-highlight-flash 2.5s ease-out; } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; z-index: 50; } .modal-card { width: 100%; max-width: 360px; margin: 1rem; } /* .card.modal-card-wide (2 classi) invece di .modal-card-wide da solo: serve più specificità di ".card { overflow: hidden }" (Cards & sections, più sotto nel file) — altrimenti quella regola vince in cascata su entrambi gli assi e la modale non scrolla mai, a prescindere da max-height/overflow-y qui sopra. Bug reale, non solo un dettaglio: senza scroll, tutto ciò che sta sotto la piega (bottoni inclusi, se non fossero ora in una barra sticky) è semplicemente irraggiungibile. */ .card.modal-card-wide { max-width: 760px; max-height: 90vh; overflow-y: auto; } /* Wrapper non-clippato attorno alla card (quest'ultima ha overflow:hidden/ auto per lo scroll interno, che tagliava via metà del pulsante X quando era posizionato a cavallo del suo bordo) — il pulsante vive qui fuori, non dentro la card, così il suo angolo "a metà dentro metà fuori" non viene tagliato da nessun overflow. */ .modal-card-wrap { position: relative; width: 100%; max-width: 760px; margin: 1rem; } /* Azzera margin/padding di QUALSIASI card dentro il wrapper, non solo #user-form-card (bug reale 2026-07-19: scritta con lo scope ID quando il pattern esisteva solo per la modale utente — tutte le altre modali retrofittate dopo ereditavano comunque il margin-bottom/padding di base di .card, che si sommava al margin del wrapper e spostava la card visibile lontano dall'angolo (0,0) del wrapper dove la X è ancorata: risultato, la X finiva ben lontana dalla card, non sul suo bordo). .modal-body-padded fornisce già il padding interno, il wrapper fornisce già il margine esterno: la card in mezzo non deve aggiungerne di suoi. */ .modal-card-wrap > .card { margin: 0; padding: 0; } /* Barra statica in cima alla modale: niente più margini negativi per farla "bleedare" al bordo della card (la combinazione margine-negativo + sticky + overflow lasciava una fessura reale, non solo un dettaglio estetico — durante lo scroll ci si vedeva il contenuto sotto). La card ora non ha PROPRIO padding (vedi sopra): la barra parte già esattamente da (0,0), il resto del contenuto ha il suo padding in .modal-body-padded qui sotto. */ .modal-sticky-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-radius: .6rem .6rem 0 0; padding: .6rem 1.2rem; /* stesso padding orizzontale di .modal-body-padded sotto: il titolo si allinea con Nome/Cognome/ecc, non un rientro diverso */ background: var(--surface); border-bottom: 1px solid var(--border); } .modal-body-padded { padding: 1.1rem 1.2rem; } /* Sezioni collassabili della modale utente (Dati utente / Permessi) — stesso pattern
/ già usato per i grafici in Dashboard. */ .collapsible-section { margin-bottom: 1rem; } .collapsible-section:last-child { margin-bottom: 0; } .collapsible-section summary { cursor: pointer; list-style: none; font-weight: 700; font-size: .95rem; margin-bottom: .7rem; } .collapsible-section summary::-webkit-details-marker { display: none; } .collapsible-section summary::before { content: '▸ '; } .collapsible-section[open] summary::before { content: '▾ '; } /* Attività del periodo raggruppate Cliente → Attività → Operatore (Rendicontazione Attività, tab "Attività"): ogni livello sotto il cliente è rientrato e ha un peso tipografico minore, a marcare la gerarchia. */ .activity-group-client { border: 1px solid var(--border); border-radius: .5rem; padding: .8rem 1rem; margin-bottom: .75rem; } .activity-group-client summary { font-size: 1rem; } .activity-group-activities { padding-left: 1.2rem; } .activity-group-activity { margin-bottom: .6rem; } .activity-group-activity summary { font-weight: 600; font-size: .9rem; } .activity-group-operators { padding-left: 1.2rem; } .activity-group-operator { margin-bottom: .6rem; } .activity-group-operator summary { font-weight: 600; font-size: .85rem; } /* Il CENTRO del pulsante deve stare esattamente sulla coordinata (0,0) della modale (il suo angolo in alto a sinistra) — non "vicino", esattamente lì, metà dentro e metà fuori dal bordo. */ .modal-close-x { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); z-index: 6; } /* Specificità alta apposta (tag+3 classi): "button.btn { background: none }" più sotto nel file (0,1,1) altrimenti vince su ".modal-close-x" da solo (0,1,0) — stesso identico bug di specificità già visto altrove in questo file (vedi nota su .card/.modal-card-wide), qui sul colore di sfondo invece che su overflow: risultato, il pulsante restava sempre trasparente nonostante la regola sembrasse "già scritta". */ button.btn.icon-only.modal-close-x { border-color: var(--border-strong); color: var(--text-muted); background: var(--surface); } button.btn.icon-only.modal-close-x:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .modal-sticky-bar-title { margin: 0; flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: .4rem; text-align: left; font-size: 1rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; overflow: hidden; } .modal-sticky-bar-title span { overflow: hidden; text-overflow: ellipsis; } .modal-title-logo { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; border-radius: .2rem; } .nav-group { margin-bottom: .9rem; } .nav-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 0 .5rem; margin-bottom: .25rem; font-weight: 600; } /* La versione "categoria" è un vero