@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap'); /* ─── Design Tokens ─────────────────────────────────────────────────────── */ :root { --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca; --indigo-800: #3730a3; --indigo-900: #312e81; --green-50: #f0fdf4; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --amber-50: #fffbeb; --amber-500: #f59e0b; --amber-700: #b45309; --red-50: #fef2f2; --red-500: #ef4444; --red-700: #b91c1c; --sky-50: #f0f9ff; --sky-500: #0ea5e9; --sky-700: #0369a1; --teal-50: #f0fdfa; --teal-500: #14b8a6; --teal-700: #0f766e; --fiscal-50: #eefbf8; --fiscal-500: #0f766e; --fiscal-700: #115e59; --sidebar-w: 240px; --topbar-h: 58px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -2px rgba(0,0,0,.03); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.07), 0 10px 10px -5px rgba(0,0,0,.03); --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', monospace; } /* ─── Tema scuro (Impostazioni → Generali → Tema) ───────────────────────── Preferenza personale per account (attributo data-theme sull'elemento , impostato lato server da includes/head.php). La quasi totalità di questo foglio di stile e degli stili incorporati nelle pagine usa questi stessi token sia per gli sfondi (--gray-50/100, --white) sia per il testo (--gray-700/800/900): ridefinirli qui basta a propagare il tema scuro a card, tabelle, form, pulsanti e testo in tutto il Portal. Alcuni elementi volutamente sempre scuri (sidebar, toast, aree di log) usano colori fissi invece dei token, apposta per non invertirsi. */ html[data-theme="dark"] { --gray-100: #171b26; --gray-50: #1d2230; --white: #242a3b; --gray-200: #333c52; --gray-300: #454f68; --gray-400: #7b849b; --gray-500: #99a2b8; --gray-600: #b3bbcc; --gray-700: #ccd2e0; --gray-800: #e4e8f0; --gray-900: #f6f8fb; --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.35), 0 2px 4px -1px rgba(0,0,0,.25); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -2px rgba(0,0,0,.25); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.45), 0 10px 10px -5px rgba(0,0,0,.25); /* indigo-50/100/200 sono usati ovunque come sfondo "tenue" per righe selezionate, icone e chip (es. .azienda-row.selected in invia_certificati.php). Nel tema chiaro sono tinte quasi bianche; se restassero tali anche qui, il testo (che usa i token --gray-* sopra, ormai chiari) diventerebbe illeggibile su sfondo quasi bianco. Qui diventano un velo indigo trasparente sopra la superficie scura corrente, cosi' il contrasto resta buono qualunque sia lo sfondo sottostante (card, riga di tabella, ecc.). */ --indigo-50: rgba(99, 102, 241, .16); --indigo-100: rgba(99, 102, 241, .26); --indigo-200: rgba(129, 140, 248, .38); } html[data-theme="dark"] ::selection { background: var(--indigo-800); color: #fff; } html[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2399a2b8' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); } /* .btn-soft (bottoni "outline" tenui: Ricarica, Mostra Cessati, Catalogo DPI, ecc. - usati in tutta l'app) usa --indigo-700/800 per il testo, che non vengono ridefiniti sopra (restano fissi sul tono saturo del tema chiaro) per non alterare --indigo-* ovunque: qui si sceglie percio' un colore di testo dedicato, piu chiaro, che resti leggibile sullo sfondo blu notte. Selettore ".btn.btn-soft" (entrambe le classi) per non toccare i bottoni "btn-soft" di listini.php, che li usa da soli con una propria palette neutra gia' theme-aware (var(--gray-*)) e va lasciata invariata. */ html[data-theme="dark"] .btn.btn-soft { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .35); color: #c7d2fe; } html[data-theme="dark"] .btn.btn-soft:hover { background: rgba(99, 102, 241, .28); border-color: rgba(165, 180, 252, .5); color: #e0e7ff; } /* ─── Reset & Base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--gray-800); background: var(--gray-100); -webkit-font-smoothing: antialiased; } ::selection { background: var(--indigo-100); color: var(--indigo-700); } /* ─── Layout Shell ───────────────────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } /* ─── Sidebar ────────────────────────────────────────────────────────────── */ .app-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; /* Colore fisso (non var(--gray-900)): la barra laterale resta scura sia nel tema chiaro che in quello scuro, e non deve invertirsi con la palette. */ background: #111827; display: flex; flex-direction: column; z-index: 100; overflow-y: auto; scrollbar-width: none; } .app-sidebar::-webkit-scrollbar { display: none; } .sidebar-brand-bar { display: flex; align-items: center; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; } .sidebar-brand-bar .sidebar-logo { flex: 1; min-width: 0; height: 100%; padding-right: 6px; border-bottom: 0; } .sidebar-debug-shortcut { width: 28px; height: 28px; margin-right: 12px; border: 1px solid rgba(165,180,252,.4); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #c7d2fe; background: rgba(99,102,241,.18); text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; } .sidebar-debug-shortcut:hover { color: #fff; background: rgba(99,102,241,.28); border-color: rgba(165,180,252,.55); transform: translateY(-1px); } .sidebar-mobile-close { display: none; width: 36px; height: 36px; margin-right: 10px; border: 1px solid rgba(165,180,252,.38); border-radius: 9px; background: rgba(99,102,241,.16); color: #e0e7ff; align-items: center; justify-content: center; flex: 0 0 36px; font: inherit; font-size: 16px; cursor: pointer; } .sidebar-mobile-close:hover { background: rgba(99,102,241,.28); color:#fff; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 20px; height: var(--topbar-h); border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none; flex-shrink: 0; } .sidebar-logo-icon { width: 42px; height: 42px; border-radius: 8px; background: var(--indigo-600); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; overflow: visible; } .sidebar-logo-icon img { width: 42px; height: 42px; object-fit: contain; display: block; } .sidebar-logo-text { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -.01em; } .sidebar-logo-sub { font-size: 10px; font-weight: 400; color: var(--gray-400); display: block; letter-spacing: .02em; } .sidebar-nav { padding: 12px 10px; flex: 1; } .sidebar-section-label { padding: 12px 10px 4px; font-size: 10px; font-weight: 600; color: var(--gray-500); letter-spacing: .08em; text-transform: uppercase; } .nav-item-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); color: var(--gray-400); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; margin-bottom: 2px; } .nav-item-link i { font-size: 15px; width: 18px; flex-shrink: 0; } .nav-item-link:hover { background: rgba(255,255,255,.06); color: #fff; } .nav-item-link.active { background: var(--indigo-600); color: #fff; } .nav-item-offline { cursor: not-allowed; opacity: .45; pointer-events: none; user-select: none; } .sidebar-footer { padding: 12px 10px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; color: var(--gray-500); text-align: center; } /* ─── Topbar (mobile) ────────────────────────────────────────────────────── */ .app-topbar { display: none; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 16px; background: var(--white); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-xs); } .topbar-title { font-size: 15px; font-weight: 700; color: var(--gray-900); letter-spacing: -.01em; flex: 1; } .topbar-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--white); color: var(--gray-700); cursor: pointer; font-size: 18px; flex-shrink: 0; transition: background .15s; } .topbar-toggle:hover { background: var(--gray-50); } /* ─── Main content ───────────────────────────────────────────────────────── */ .app-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* ─── Page content ───────────────────────────────────────────────────────── */ .page-content { padding: 24px; flex: 1; } /* ─── Page header ────────────────────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; flex-shrink: 0; } .page-heading { font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0 0 2px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; } .page-heading-icon { color: var(--indigo-500); font-size: 20px; line-height: 1; flex: 0 0 auto; } .page-subheading { font-size: 13px; color: var(--gray-500); margin: 0; } /* ─── Cards ──────────────────────────────────────────────────────────────── */ .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header.panel-header { padding: 16px 20px; border-bottom: 1px solid var(--gray-200); background: var(--gray-50); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .panel-title { font-size: 14px; font-weight: 700; color: var(--gray-900); margin: 0; letter-spacing: -.01em; } .panel-subtitle { font-size: 12px; color: var(--gray-500); margin: 2px 0 0; } .card-body { padding: 20px; } .card-body.p-0 { padding: 0; } .card-body.p-4 { padding: 24px; } /* ─── Stat cards ─────────────────────────────────────────────────────────── */ .stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-radius: 0 var(--radius-lg) 0 80px; opacity: .06; } .stat-card-primary { border-top: 3px solid var(--indigo-500); } .stat-card-primary::after { background: var(--indigo-500); } .stat-card-info { border-top: 3px solid var(--sky-500); } .stat-card-info::after { background: var(--sky-500); } .stat-card-success { border-top: 3px solid var(--green-500); } .stat-card-success::after { background: var(--green-500); } .stat-card-warning { border-top: 3px solid var(--amber-500); } .stat-card-warning::after { background: var(--amber-500); } .stat-card-danger { border-top: 3px solid var(--red-500); } .stat-card-danger::after { background: var(--red-500); } .stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 16px; } .stat-card-primary .stat-icon { background: var(--indigo-50); color: var(--indigo-600); } .stat-card-info .stat-icon { background: var(--sky-50); color: var(--sky-700); } .stat-card-success .stat-icon { background: var(--green-50); color: var(--green-700); } .stat-card-warning .stat-icon { background: var(--amber-50); color: var(--amber-700); } .stat-card-danger .stat-icon { background: var(--red-50); color: var(--red-700); } /* Tema scuro: le icone delle stat-card usano toni fissi (indigo-600, sky/green/amber/red-700) non ridefiniti dal tema scuro, poco leggibili sullo sfondo blu notte. Usate in tutta l'app (Dashboard, Compliance, ecc.). */ html[data-theme="dark"] .stat-card-primary .stat-icon { background: rgba(99,102,241,.28); color: #c7d2fe; } html[data-theme="dark"] .stat-card-info .stat-icon { background: rgba(14,165,233,.24); color: #7dd3fc; } html[data-theme="dark"] .stat-card-success .stat-icon { background: rgba(34,197,94,.24); color: #86efac; } html[data-theme="dark"] .stat-card-warning .stat-icon { background: rgba(245,158,11,.24); color: #fcd34d; } html[data-theme="dark"] .stat-card-danger .stat-icon { background: rgba(239,68,68,.24); color: #fca5a5; } .stat-label { font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; } .stat-value { font-size: 28px; font-weight: 700; color: var(--gray-900); line-height: 1; letter-spacing: -.03em; font-family: var(--font-mono); } .stat-note { font-size: 12px; color: var(--gray-400); margin-top: 6px; } .stat-card[data-vm-stat], .stat-card[data-ft-stat] { cursor: pointer; user-select: none; transition: box-shadow .15s, transform .1s; } .stat-card[data-vm-stat]:hover, .stat-card[data-ft-stat]:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .stat-card[data-vm-stat].vm-stat-active, .stat-card[data-ft-stat].vm-stat-active { box-shadow: 0 0 0 2px currentColor, var(--shadow-sm); opacity: 1; } .stat-card-primary[data-vm-stat].vm-stat-active, .stat-card-primary[data-ft-stat].vm-stat-active { box-shadow: 0 0 0 2px var(--indigo-400), var(--shadow-sm); background: var(--indigo-50); } .stat-card-success[data-vm-stat].vm-stat-active, .stat-card-success[data-ft-stat].vm-stat-active { box-shadow: 0 0 0 2px var(--green-400), var(--shadow-sm); background: var(--green-50); } .stat-card-warning[data-vm-stat].vm-stat-active, .stat-card-warning[data-ft-stat].vm-stat-active { box-shadow: 0 0 0 2px var(--amber-400), var(--shadow-sm); background: var(--amber-50); } .stat-card-danger[data-vm-stat].vm-stat-active, .stat-card-danger[data-ft-stat].vm-stat-active { box-shadow: 0 0 0 2px var(--red-400), var(--shadow-sm); background: var(--red-50); } .stat-card[data-vm-stat="in_scadenza"].vm-stat-active { box-shadow: 0 0 0 2px #ea580c, var(--shadow-sm); background: #fff7ed; } /* ─── Visita chip selector ───────────────────────────────────────────────── */ .visita-chip-group { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 6px; } .visita-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--gray-300); background: var(--gray-50); color: var(--gray-600); user-select: none; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .visita-chip:hover { border-color: var(--indigo-400); color: var(--indigo-600); background: var(--indigo-50); } .visita-chip.visita-chip-sel { background: var(--indigo-100); border-color: var(--indigo-400); color: var(--indigo-700); font-weight: 500; } /* ─── Grid ───────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 16px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1199px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ─── Solo da smartphone (non da tablet): nascondi i badge statistiche e alcune voci di menu meno essenziali, per lasciare piu spazio ai contenuti principali. Il breakpoint 767.98px corrisponde alla larghezza di un iPad in verticale (768px), che resta "tablet". ─── */ @media (max-width: 767.98px) { .stat-card { display: none !important; } .nav-mobile-hide { display: none !important; } } /* ─── Tables ─────────────────────────────────────────────────────────────── */ .app-table { width: 100%; border-collapse: collapse; font-size: 13px; } .app-table thead th { padding: 10px 16px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); font-size: 11px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .app-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* celle che devono andare a capo invece di essere troncate */ .app-table tbody td.td-wrap { white-space: normal; word-break: break-word; text-overflow: unset; overflow: visible; max-width: 200px; } .app-table tbody tr:last-child td { border-bottom: 0; } .app-table tbody tr:hover td { background: var(--gray-50); } .table-responsive { overflow-x: auto; } /* ─── Forms ──────────────────────────────────────────────────────────────── */ .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; } .form-control, .form-select { width: 100%; padding: 8px 12px; font-family: var(--font-sans); font-size: 13px; color: var(--gray-800); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s; min-height: 38px; appearance: none; -webkit-appearance: none; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } .form-control::placeholder { color: var(--gray-400); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--indigo-400); box-shadow: 0 0 0 3px rgba(99,102,241,.12); } /* Campi data/ora nativi (input type="date"/"time"/...): il browser disegna il testo e l'icona del calendario con la propria UI, non con i token --gray-* della pagina. Senza questo "color-scheme", a tema scuro restano scuri su sfondo scuro e diventano quasi illeggibili. */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="week"] { color-scheme: dark; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all .15s; text-decoration: none; line-height: 1.4; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: none; } /* Nessuna regola precedente rendeva visibile lo stato "disabled" dei bottoni: restavano cliccabili solo "a occhio" identici a quelli attivi, confondendo l'utente (es. le icone azione del Protocollo Sanitario quando sono selezionate 0 o 2+ mansioni). */ .btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } .btn-primary { background: var(--indigo-600); border-color: var(--indigo-700); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.08); } .btn-primary:hover { background: var(--indigo-700); border-color: var(--indigo-800); color: #fff; } .btn-outline-primary { background: var(--white); border-color: var(--gray-300); color: var(--indigo-600); } .btn-outline-primary:hover { background: var(--indigo-50); border-color: var(--indigo-300); color: var(--indigo-700); } .btn-outline-secondary { background: var(--white); border-color: var(--gray-300); color: var(--gray-700); } .btn-outline-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-800); } html[data-theme="dark"] .btn-outline-primary { background: var(--white); border-color: rgba(129,140,248,.4); color: #c7d2fe; } html[data-theme="dark"] .btn-outline-primary:hover { background: rgba(99,102,241,.18); border-color: rgba(165,180,252,.5); color: #e0e7ff; } .btn-outline-danger { background: var(--white); border-color: var(--gray-300); color: var(--red-500); } .btn-outline-danger:hover { background: var(--red-50); border-color: var(--red-500); color: var(--red-700); } .btn-soft { background: var(--indigo-50); border-color: var(--indigo-100); color: var(--indigo-700); } .btn-soft:hover { background: var(--indigo-100); color: var(--indigo-800); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-icon { padding: 6px; width: 32px; height: 32px; } /* ─── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 11px; font-weight: 600; border-radius: 99px; letter-spacing: .02em; } .badge-primary { background: var(--indigo-100); color: var(--indigo-700); } html[data-theme="dark"] .badge-primary { color: #c7d2fe; } .badge-secondary { background: var(--gray-100); color: var(--gray-600); } .badge-success { background: var(--green-50); color: var(--green-700); } .badge-warning { background: var(--amber-50); color: var(--amber-700); } .badge-danger { background: var(--red-50); color: var(--red-700); } .badge-info { background: var(--sky-50); color: var(--sky-700); } .badge-teal { background: var(--teal-50); color: var(--teal-700); } /* Badge giudizio idoneita' (visite mediche): stile condiviso, identico a quello della tab Invia Certificati, cosi' che lo stesso giudizio abbia sempre lo stesso aspetto in tutta l'app. */ .badge-giud { display:inline-block; padding:calc(2px * var(--ui-scale,1)) calc(8px * var(--ui-scale,1)); border-radius:calc(99px * var(--ui-scale,1)); font-size:calc(11px * var(--ui-type-scale,1)); font-weight:600; white-space:nowrap; } .badge-giud-ok { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; } .badge-giud-warn { background:#fef9c3; color:#854d0e; border:1px solid #fde047; } .badge-giud-danger { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; } .badge-giud-gray { background:var(--gray-100); color:var(--gray-500); border:1px solid var(--gray-200); } /* ─── Filter bar ─────────────────────────────────────────────────────────── */ .filter-bar { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 20px; margin-bottom: 16px; } .filter-grid { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } @media (max-width: 991px) { .filter-grid { grid-template-columns: 1fr 1fr; } .filter-grid .filter-actions { grid-column: span 2; } } @media (max-width: 575px) { .filter-grid { grid-template-columns: 1fr; } .filter-grid .filter-actions { grid-column: span 1; } } /* Alcune schede (DPI/Formazione/Visite Mediche) impostano un grid-template-columns inline (es. "1fr auto auto") che ha priorità sulle regole responsive sopra e sui piccoli schermi fa uscire la barra filtri fuori dallo schermo. Su mobile forziamo comunque una colonna sola, con !important perché deve vincere sull'inline style. */ @media (max-width: 767px) { .filter-bar .filter-grid, .filter-bar > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .filter-bar select, .filter-bar input, .filter-bar .search-wrap { width: 100% !important; min-width: 0 !important; } .filter-grid .filter-actions { grid-column: auto !important; } } .filter-actions { display: flex; gap: 8px; } /* ─── Search input ───────────────────────────────────────────────────────── */ .search-wrap { position: relative; } .search-wrap .bi-search { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 13px; pointer-events: none; } .search-wrap .form-control { padding-left: 32px; } /* ─── Empty state ────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 24px; color: var(--gray-400); } .empty-state i { font-size: 32px; display: block; margin-bottom: 12px; color: var(--gray-300); } .empty-state p { margin: 0; font-size: 13px; } /* ─── Footer ─────────────────────────────────────────────────────────────── */ .app-footer { padding: 16px 24px; border-top: 1px solid var(--gray-200); background: var(--white); font-size: 12px; color: var(--gray-400); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; flex-shrink: 0; min-height: 0; white-space: normal; overflow: visible; } /* ─── Utilities ──────────────────────────────────────────────────────────── */ .d-flex { display: flex; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .text-muted { color: var(--gray-400); } .text-sm { font-size: 12px; } .text-right { text-align: right; } .text-center { text-align: center; } .font-mono { font-family: var(--font-mono); } .w-full { width: 100%; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } /* Utility margin-end e margin-start: mancavano del tutto, per cui icona+testo (es. "Tema", "Cartella sanitaria" in Impostazioni, o le tante icone bi-* nei bottoni con classe "me-1"/"me-2" in tutta l'app) restavano sempre attaccati, nonostante la classe fosse gia' presente nel markup. */ .me-0 { margin-right: 0; } .me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 12px; } .me-4 { margin-right: 16px; } .ms-0 { margin-left: 0; } .ms-1 { margin-left: 4px; } .ms-2 { margin-left: 8px; } .ms-3 { margin-left: 12px; } .ms-4 { margin-left: 16px; } .p-0 { padding: 0; } .p-1 { padding: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } /* ─── Sidebar overlay (mobile) ───────────────────────────────────────────── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; } .sidebar-overlay.is-open { display: block; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .app-sidebar { width:min(84vw,300px); max-width:100%; height:100vh; height:100dvh; transform:translateX(-105%); transition:transform .25s ease; z-index:1200; padding-bottom:env(safe-area-inset-bottom); box-shadow:18px 0 48px rgba(15,23,42,.3); } .app-sidebar.is-open { transform:translateX(0); } .sidebar-mobile-close { display:inline-flex; } .sidebar-overlay { z-index:1190; background:rgba(15,23,42,.58); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } .app-main { margin-left:0 !important; width:100%; min-width:0; max-width:100vw; } .app-topbar { display:flex; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } .page-content { width:100%; min-width:0; max-width:100vw; padding:16px; overflow-x:hidden; } .page-header { width:100%; min-width:0; flex-direction:column; align-items:flex-start; } .page-header > * { min-width:0; max-width:100%; } .table-responsive { max-width:100%; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } .worker-modal-backdrop { padding:12px !important; } .worker-modal { width:100% !important; max-width:100% !important; max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; } } /* Rilevamento di sicurezza per Safari/iPhone in modalita sito desktop: mantiene il layout mobile anche quando il layout viewport viene ampliato. */ html.sirio-mobile-device .app-sidebar { width:min(84vw,300px); max-width:100%; height:100vh; height:100dvh; transform:translateX(-105%); transition:transform .25s ease; z-index:1200; padding-bottom:env(safe-area-inset-bottom); box-shadow:18px 0 48px rgba(15,23,42,.3); } html.sirio-mobile-device .app-sidebar.is-open { transform:translateX(0); } html.sirio-mobile-device .sidebar-mobile-close { display:inline-flex; } html.sirio-mobile-device .sidebar-overlay { z-index:1190; background:rgba(15,23,42,.58); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } html.sirio-mobile-device .app-main { margin-left:0 !important; width:100%; min-width:0; max-width:100vw; } html.sirio-mobile-device .app-topbar { display:flex; padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); } html.sirio-mobile-device .page-content { width:100%; min-width:0; max-width:100vw; padding:16px; overflow-x:hidden; } html.sirio-mobile-device .page-header { width:100%; min-width:0; flex-direction:column; align-items:flex-start; } html.sirio-mobile-device .page-header > * { min-width:0; max-width:100%; } html.sirio-mobile-device .table-responsive { max-width:100%; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; } html.sirio-mobile-device .worker-modal-backdrop { padding:12px !important; } html.sirio-mobile-device .worker-modal { width:100% !important; max-width:100% !important; max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; } /* Evita lo zoom automatico di Safari quando si entra in un campo. */ @media (max-width: 767.98px) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px !important; } .page-content { padding:12px; } } html.sirio-mobile-device input:not([type="checkbox"]):not([type="radio"]), html.sirio-mobile-device select, html.sirio-mobile-device textarea { font-size:16px !important; } html.sirio-mobile-device .page-content { padding:12px; } /* Da cellulare il piè di pagina ha poco spazio: la scritta "SIRIO HSE SRL ©" e' ridondante con il badge "Sirio HSE Manager" gia' presente accanto e viene nascosta per lasciare spazio alla nota descrittiva della pagina. */ @media (max-width: 767.98px) { .app-footer-copyright { display:none; } } html.sirio-mobile-device .app-footer-copyright { display:none; } html.sirio-sidebar-open, html.sirio-sidebar-open body { overflow:hidden !important; overscroll-behavior:none; } /* Quando un modale (.worker-modal-backdrop, es. Nuova visita, Nuovo lavoratore, Registra consegna DPI, ecc.) e aperto, blocchiamo lo scroll della pagina sotto: su mobile altrimenti il gesto di scroll veniva "rubato" dalla pagina di sfondo invece che dal contenuto scorrevole del modale stesso. */ html:has(.worker-modal-backdrop.open) { overflow: hidden !important; } html:has(.worker-modal-backdrop.open) body { overflow: hidden !important; } .worker-modal-backdrop .worker-modal-body, #visitaForm .worker-modal-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }