/* ── Poppins @font-face (offline) ── */
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins/Poppins-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
:root {
--bg: #f4f7fb;
--surface: #ffffff;
--surface-2: #f8fbff;
--border: #e5ebf4;
--text: #1f2a44;
--text-soft: #6f7b92;
--primary: #2f80ed;
--primary-dark: #1c63c7;
--secondary: #6c7cf0;
--success: #1fb67a;
--warning: #f6a623;
--danger: #eb5757;
--info: #4b9cff;
--shadow: 0 10px 28px rgba(24, 48, 88, 0.07);
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 8px;
--sidebar-width: 230px;
--transition: 0.25s ease;
/* ── Palette moduli (gradiente brand) ────────────────────────── */
--mod-entry-grad: linear-gradient(135deg, #3b82f6, #2563eb);
--mod-booking-grad: linear-gradient(135deg, #6366f1, #4f46e5);
--mod-sample-grad: linear-gradient(135deg, #14b8a6, #0d9488);
--mod-report-grad: linear-gradient(135deg, #8b5cf6, #7c3aed);
--mod-tsrm-grad: linear-gradient(135deg, #a855f7, #9333ea);
--mod-store-grad: linear-gradient(135deg, #f59e0b, #d97706);
--mod-message-grad: linear-gradient(135deg, #22c55e, #16a34a);
--mod-card-grad: linear-gradient(135deg, #ec4899, #db2777);
--mod-stats-grad: linear-gradient(135deg, #10b981, #059669);
--mod-gest-grad: linear-gradient(135deg, #64748b, #475569);
--mod-faq-grad: linear-gradient(135deg, #7c3aed, #5b21b6);
--mod-wiki-grad: linear-gradient(135deg, #fbbf24, #92400e);
--mod-ssn-grad: linear-gradient(135deg, #16a34a, #15803d);
--mod-personal-grad: linear-gradient(135deg, #374151, #1f2937);
--mod-online-grad: linear-gradient(135deg, #0ea5e9, #0369a1);
--mod-aimed-grad: linear-gradient(135deg, #7c3aed, #4c1d95);
--mod-queue-grad: linear-gradient(135deg, #06b6d4, #0891b2);
--mod-repolab-grad: linear-gradient(135deg, #06b6d4, #0891b2);
--mod-checklist-grad: linear-gradient(135deg, #f43f5e, #be123c);
--mod-cashflow-grad: linear-gradient(135deg, #0f766e, #134e4a);
--mod-fse-grad: linear-gradient(135deg, #0891b2, #0e7490);
--mod-design-grad: linear-gradient(135deg, #d946ef, #a21caf);
/* ── Tinta unita per icone modulo (dove serve color sfondo) ─── */
--mod-entry: #2563eb;
--mod-booking: #4f46e5;
--mod-sample: #0d9488;
--mod-report: #7c3aed;
--mod-tsrm: #9333ea;
--mod-store: #d97706;
--mod-message: #16a34a;
--mod-card: #db2777;
--mod-stats: #059669;
--mod-gest: #475569;
--mod-faq: #5b21b6;
--mod-wiki: #92400e;
--mod-ssn: #15803d;
--mod-personal:#1f2937;
--mod-checklist:#be123c;
--mod-cashflow:#0f766e;
}
* {
box-sizing: border-box;
}
html {
font-size: 13px;
}
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow: hidden;
height: 100vh;
}
@media print {
html, body { overflow: visible; height: auto; }
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
.app-shell {
display: flex;
height: 100vh;
overflow: hidden;
}
/* SIDEBAR */
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: linear-gradient(180deg, #12223e 0%, #182c4e 100%);
color: #dbe7ff;
padding: 0 14px;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.sidebar__brand {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
padding: 18px 0 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 0;
}
.brand-mark {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #4da4ff, #6f7cf6);
color: white;
font-weight: 800;
font-size: 1rem;
}
.sidebar__brand h1 {
margin: 0;
font-size: 1rem;
color: #fff;
}
.sidebar__brand p {
margin: 2px 0 0;
color: #9fb2d8;
font-size: 0.78rem;
}
.sidebar__search {
margin-bottom: 14px;
}
.sidebar__nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 0;
margin: 0;
/* scrollbar sottile */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar__nav::-webkit-scrollbar {
width: 4px;
}
.sidebar__nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar__nav::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.15);
border-radius: 4px;
}
.sidebar__nav::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.25);
}
.nav-section + .nav-section {
margin-top: 16px;
}
.nav-section__title {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7f95bd;
margin: 8px 8px 10px;
}
/* ── Accordion sidebar (Gest Med) ──
Header cliccabile che apre/chiude la sezione; una sola sezione aperta alla volta
(comportamento gestito dallo script inline in renderGestmedSidebarNav). L'animazione
di altezza usa grid-template-rows 0fr↔1fr (auto-height senza misurazioni JS). Le
classi .nav-accordion__* sono additive: gli altri moduli usano ancora .nav-section__title
come span statico e non sono impattati. */
.nav-accordion__header {
width: 100%;
border: 0;
background: transparent;
font-family: inherit;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #7f95bd;
text-align: left;
padding: 6px 8px;
margin: 8px 4px 4px;
border-radius: 8px;
transition: color .18s, background .18s;
}
.nav-accordion:first-child .nav-accordion__header { margin-top: 2px; }
.nav-accordion__header:hover { color: #cdddff; background: rgba(255,255,255,0.05); }
.nav-accordion__header > span:first-child { flex: 1; min-width: 0; }
.nav-accordion__chevron {
margin-left: auto;
display: inline-flex;
align-items: center;
color: #7f95bd;
transition: transform .28s ease;
}
.nav-accordion__chevron i, .nav-accordion__chevron svg { width: 14px !important; height: 14px !important; }
.nav-accordion.is-open .nav-accordion__chevron { transform: rotate(180deg); }
.nav-accordion__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .28s ease;
}
.nav-accordion.is-open .nav-accordion__body { grid-template-rows: 1fr; }
.nav-accordion__inner {
overflow: hidden;
min-height: 0;
padding: 0 4px;
}
.nav-link {
width: 100%;
border: 0;
background: transparent;
color: #dbe7ff;
display: flex;
align-items: center;
gap: 10px;
border-radius: 11px;
padding: 10px 12px;
cursor: pointer;
transition: var(--transition);
margin-bottom: 4px;
text-align: left;
font-size: 0.92rem;
}
.nav-link__icon i, .nav-link__icon svg { width: 16px !important; height: 16px !important; }
.nav-link:hover,
.nav-link--active {
background: rgba(255,255,255,0.09);
color: #fff;
}
.nav-link__icon {
width: 18px;
text-align: center;
opacity: 0.95;
}
.nav-link__arrow {
margin-left: auto;
transition: transform var(--transition);
}
.nav-link--toggle.is-open .nav-link__arrow {
transform: rotate(180deg);
}
.nav-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #2f80ed;
display: grid;
place-items: center;
font-size: 0.7rem;
color: #fff;
}
/* Badge inline accanto al testo della voce (es. conteggio richieste pendenti).
Variante rossa di default per segnalazioni urgenti (workflow approvazione). */
.nav-link__badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 10px;
background: #e74c3c;
color: #fff;
font-size: 0.66rem;
font-weight: 700;
line-height: 1.4;
vertical-align: 1px;
}
/* Variante verde — usata per i workflow "presa visione" (notifiche medici specialisti). */
.nav-link__badge--success { background: #1fb67a; }
/* Variante "allerta": cerchio perfetto con un solo carattere (tipicamente "!"),
per segnalare che una sezione richiede un intervento di configurazione
(es. Cashflow Med > Nomenclatore TS con prestazioni non classificate).
Non e' un conteggio: e' un indicatore booleano, quindi dimensione fissa.
La sidebar non ha tooltip hover (CLAUDE.md §3) -> serve sempre aria-label. */
.nav-link__badge--alert {
width: 16px;
height: 16px;
min-width: 16px;
padding: 0;
border-radius: 50%;
display: inline-grid;
place-items: center;
line-height: 1;
font-size: 0.72rem;
}
/* Quando ci sono più pallini affiancati, riduci lo spazio per renderli quasi attaccati. */
.nav-link__badge + .nav-link__badge { margin-left: 2px; }
/* Pallino "indicatore" senza conteggio, accanto al testo della voce.
Usato per la voce "Messaggistica" quando ci sono messaggi non letti.
Toggle dinamico via JS (chat.js): aggiunge/rimuove la classe is-on. */
.nav-link__dot {
display: none;
width: 8px;
height: 8px;
margin-left: 6px;
border-radius: 50%;
background: #e74c3c;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.25);
}
.nav-link__dot.is-on { display: inline-block; }
.submenu {
display: none;
margin: 2px 0 8px 10px;
padding-left: 10px;
border-left: 1px solid rgba(255,255,255,0.12);
}
.submenu.is-open {
display: block;
}
.submenu a {
display: block;
padding: 7px 8px;
color: #afc2e3;
border-radius: 8px;
transition: var(--transition);
font-size: 0.92rem;
}
.submenu a:hover {
color: #fff;
background: rgba(255,255,255,0.07);
}
.sidebar__footer {
flex-shrink: 0;
padding: 12px 0 18px;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 0;
position: relative;
}
.sidebar__msg-badge {
position: absolute;
top: 11px;
right: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color 0.2s;
z-index: 2;
}
.sidebar__msg-badge:hover {
color: #fff;
}
.sidebar__msg-badge i,
.sidebar__msg-badge svg {
width: 14px;
height: 14px;
}
.tippy-box {
font-size: var(--em-tooltip-fs, 0.8rem);
}
.sidebar__msg-badge .msg-dot {
position: absolute;
top: 5px;
right: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #eb5757;
}
.sidebar__msg-badge:has(.msg-dot) {
color: #ffffff;
}
.sidebar__msg-badge:has(.msg-dot) i,
.sidebar__msg-badge:has(.msg-dot) svg {
animation: msg-ring 3s ease-in-out infinite;
transform-origin: 50% 2px;
}
@keyframes msg-ring {
0% { transform: rotate(0); }
2% { transform: rotate(14deg); }
4% { transform: rotate(-12deg); }
6% { transform: rotate(10deg); }
8% { transform: rotate(-8deg); }
10% { transform: rotate(5deg); }
12% { transform: rotate(-2deg); }
14% { transform: rotate(0); }
100% { transform: rotate(0); }
}
.mini-card {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 11px;
cursor: pointer;
}
.mini-card__avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
max-width: 40px;
max-height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
display: block;
/* Sfondo bianco con leggero gradiente: garantisce contrasto sul tema scuro
della sidebar quando l'avatar è un PNG/SVG con sfondo trasparente. */
background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.mini-card__icon {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.1);
}
.mini-card__icon i,
.mini-card__icon svg {
width: 20px;
height: 20px;
color: #fff;
}
.mini-card__text {
min-width: 0;
overflow: hidden;
}
.mini-card strong {
display: block;
color: #fff;
font-size: 0.9rem;
}
.mini-card p {
margin: 2px 0 0;
color: #9fb2d8;
font-size: 0.66rem;
}
/* SweetAlert2 — pulsante "X" di chiusura: niente outline su click/auto-focus.
L'anello di focus resta SOLO su navigazione da tastiera (focus-visible). */
.swal2-close:focus,
.swal2-close:active {
outline: none !important;
box-shadow: none !important;
}
.swal2-close:focus-visible {
outline: 2px solid #2f80ed !important;
outline-offset: 2px;
box-shadow: none !important;
}
/* MODULE NAV (SWal mini-card) — versione compatta a 2 colonne */
.module-nav-popup { max-width: 540px !important; border-radius: 16px !important; padding: 22px 22px 18px !important; }
.module-nav-popup .swal2-title { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 2px; }
.module-nav-popup .swal2-html-container { color: #8a94a6; font-size: 0.82rem; margin-bottom: 14px; }
.module-nav-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
max-height: 70vh;
overflow-y: auto;
padding-right: 4px;
}
.module-nav-empty { grid-column: 1 / -1; text-align: center; color: #9ca3af; font-size: 0.84rem; padding: 18px 8px; }
.module-nav-card {
display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
padding: 7px 10px; border: 1px solid transparent; border-radius: 9px;
background: transparent; cursor: pointer; transition: all 0.14s; text-align: left;
}
.module-nav-card:hover { background: #f4f6fa; border-color: #e1e5eb; }
.module-nav-card:focus { outline: none; background: #eef4ff; border-color: #2f80ed; }
.module-nav-card__icon {
width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
background: linear-gradient(135deg, #5b7cfa, #3f5efb); color: #fff;
display: grid; place-items: center;
}
.module-nav-card__icon i, .module-nav-card__icon svg { width: 14px; height: 14px; color: #fff; }
.module-nav-card__text { display: flex; flex-direction: column; gap: 0; min-width: 0; overflow: hidden; }
.module-nav-card__text strong { font-size: 0.84rem; font-weight: 700; color: #1a1a2e; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.module-nav-card__text small { font-size: 0.7rem; font-weight: 500; color: #8a94a6; letter-spacing: 0.02em; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.module-nav-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px dashed #eef0f3;
}
.module-nav-actions .module-nav-card:only-child { grid-column: 1 / -1; }
.module-nav-card--logout .module-nav-card__icon {
background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.module-nav-card--logout:hover { background: #fff0f0; border-color: #fecaca; }
.module-nav-card--logout:focus { background: #fff0f0; border-color: #ef4444; }
.module-nav-card--logout .module-nav-card__text strong { color: #b91c1c; }
/* Su mobile o dialog stretto: torna a 1 colonna */
@media (max-width: 480px) {
.module-nav-popup { max-width: 92vw !important; padding: 18px 16px 14px !important; }
.module-nav-list { grid-template-columns: 1fr; }
.module-nav-actions { grid-template-columns: 1fr; }
}
.module-nav-cancel {
background: #6b7a99 !important; color: #fff !important; border: none !important;
border-radius: 8px !important; padding: 7px 18px !important; font-weight: 600 !important;
font-size: 0.82rem !important;
}
/* MAIN */
.main-area {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.topbar {
padding: 14px 22px;
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,0.72);
backdrop-filter: blur(10px);
flex-shrink: 0;
z-index: 20;
}
.topbar__left,
.topbar__right {
display: flex;
align-items: center;
gap: 10px;
}
.page-title h2 {
margin: 0;
font-size: 1.25rem;
}
.page-title p {
margin: 2px 0 0;
color: var(--text-soft);
font-size: 0.88rem;
}
.searchbar {
min-width: 280px;
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 11px;
padding: 9px 12px;
box-shadow: 0 5px 14px rgba(31, 42, 68, 0.04);
}
.icon-btn {
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
cursor: pointer;
color: var(--text);
transition: var(--transition);
}
.icon-btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.profile-chip {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 5px 10px 5px 6px;
}
.profile-chip__avatar {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
}
.profile-chip strong,
.profile-chip span {
display: block;
}
.profile-chip span {
color: var(--text-soft);
font-size: 0.8rem;
}
.mobile-toggle {
display: none;
}
.content {
padding: 22px;
flex: 1;
overflow-y: auto;
min-height: 0;
}
/* Dashboard: content non scrolla, scrolla solo la tabella interna */
.content--dashboard {
overflow: hidden;
display: flex;
flex-direction: column;
}
.grid {
display: grid;
gap: 14px;
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.95fr);
gap: 14px;
margin-top: 14px;
}
/* HERO */
.hero-card {
background: linear-gradient(135deg, #163968 0%, #2f80ed 52%, #6f7cf6 100%);
color: #fff;
border-radius: 18px;
padding: 18px 20px;
display: flex;
justify-content: space-between;
gap: 16px;
align-items: stretch;
box-shadow: 0 14px 32px rgba(47, 128, 237, 0.20);
margin-bottom: 0;
flex-shrink: 0;
}
.eyebrow {
display: inline-block;
background: rgba(255,255,255,0.16);
padding: 5px 10px;
border-radius: 999px;
font-size: 0.78rem;
margin-bottom: 10px;
}
.hero-card h3 {
font-size: 1.55rem;
margin: 0 0 8px;
line-height: 1.15;
max-width: 600px;
}
.hero-card p {
max-width: 600px;
margin: 0;
color: rgba(255,255,255,0.88);
line-height: 1.5;
}
.hero-card__actions {
display: flex;
gap: 10px;
margin-top: 16px;
flex-wrap: wrap;
}
.hero-stats {
min-width: 280px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
/* Hero con le KPI TUTTE SU UNA RIGA, qualunque sia il loro numero (Entry Med).
⚠ Non si usa `repeat(N, 1fr)`: in questa dashboard le schede sono 5 ma QUATTRO
sono condizionali (tre permessi ACL + «Esami Sospesi», che compare solo se ce
n'e' almeno uno), quindi il numero reale va da 1 a 5 e un conteggio fisso
lascerebbe colonne vuote nel caso piu' comune — nessun esame sospeso.
`grid-auto-flow: column` genera esattamente le colonne che servono.
Lo spazio si prende dal blocco di testo a sinistra, che manda a capo titolo e
sottotitolo invece di restare largo 600px.
Il default a 4 colonne resta invariato per le altre dashboard. */
.hero-card--kpi-row .hero-stats {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.hero-card--kpi-row .hero-card__content { min-width: 0; }
.hero-card--kpi-row .hero-card__content h3,
.hero-card--kpi-row .hero-card__content p { max-width: 34ch; }
.hero-card--kpi-row .hero-stat { padding: 10px; }
.hero-card--kpi-row .hero-stat span { font-size: 0.76rem; }
.hero-stat {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 11px;
padding: 10px 12px;
}
.hero-stat span {
display: block;
color: rgba(255,255,255,0.8);
margin-bottom: 4px;
font-size: 0.82rem;
}
.hero-stat strong {
font-size: 1.2rem;
}
/* PANELS / CARDS */
.panel,
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.panel {
padding: 18px;
}
.panel__head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
margin-bottom: 14px;
}
.panel__head h4 {
margin: 0;
font-size: 1rem;
}
.panel__head p {
margin: 3px 0 0;
color: var(--text-soft);
font-size: 0.88rem;
}
/* KPI */
.stat-card {
padding: 14px;
display: flex;
gap: 11px;
align-items: center;
}
.stat-card__icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #eef5ff, #e8eeff);
display: grid;
place-items: center;
font-size: 1.1rem;
}
.stat-card p {
margin: 0 0 4px;
color: var(--text-soft);
font-size: 0.88rem;
}
.stat-card h3 {
margin: 0 0 3px;
font-size: 1.3rem;
}
.trend {
font-size: 0.8rem;
font-weight: 600;
}
.trend--up {
color: var(--success);
}
.trend--down {
color: var(--danger);
}
/* CHART */
.chart-box {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
}
.chart-bars {
height: 200px;
display: flex;
align-items: flex-end;
gap: 11px;
}
.bar {
flex: 1;
min-width: 0;
border-radius: 12px 12px 6px 6px;
background: linear-gradient(180deg, #6f7cf6 0%, #2f80ed 100%);
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
}
.bar:nth-child(even) {
background: linear-gradient(180deg, #c3d9ff 0%, #87b4ff 100%);
}
.bar span {
position: absolute;
bottom: -22px;
color: var(--text-soft);
font-size: 0.8rem;
}
.legend {
display: flex;
gap: 12px;
margin-top: 28px;
color: var(--text-soft);
font-size: 0.86rem;
}
.dot {
width: 8px;
height: 8px;
border-radius: 999px;
display: inline-block;
margin-right: 6px;
}
.dot--dark {
background: #2f80ed;
}
.dot--soft {
background: #87b4ff;
}
/* TABLE */
.table-wrap {
overflow: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
min-width: 620px;
}
.data-table thead th {
text-align: left;
font-size: 0.85rem;
color: var(--text-soft);
font-weight: 600;
padding: 10px 8px;
border-bottom: 1px solid var(--border);
}
.data-table tbody td {
padding: 10px 8px;
border-bottom: 1px solid #edf1f7;
vertical-align: middle;
}
.data-table tbody tr:nth-child(even) {
background: rgba(47, 128, 237, 0.06);
}
.data-table tbody tr:hover {
background: rgba(47, 128, 237, 0.10);
}
.person-inline {
display: flex;
align-items: center;
gap: 8px;
}
.person-inline strong,
.person-inline span {
display: block;
}
.person-inline span {
font-size: 0.8rem;
color: var(--text-soft);
}
.avatar {
display: grid;
place-items: center;
border-radius: 11px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
flex-shrink: 0;
}
.avatar--sm {
width: 30px;
height: 30px;
font-size: 0.75rem;
}
.avatar--lg {
width: 52px;
height: 52px;
font-size: 1rem;
}
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.78rem;
font-weight: 700;
}
.badge--success {
color: #0d7f54;
background: #dff8ee;
}
.badge--warning {
color: #986000;
background: #fff1d6;
}
.badge--danger {
color: #b03636;
background: #ffe2e2;
}
.badge--info {
color: #195db6;
background: #dbeaff;
}
/* COMPONENTS */
.component-block {
display: grid;
gap: 14px;
}
.button-row,
.tag-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn {
border: 0;
border-radius: 11px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-weight: 700;
transition: var(--transition);
}
.btn:hover {
transform: translateY(-1px);
}
.btn--sm {
padding: 7px 10px;
border-radius: 10px;
font-size: 0.86rem;
}
.btn--primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.btn--secondary {
background: #eef2ff;
color: #4a5bd6;
}
.btn--light {
background: #f3f7fd;
color: var(--text);
border: 1px solid var(--border);
}
.btn--ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
}
.tag {
display: inline-block;
border-radius: 999px;
padding: 5px 10px;
background: #eef1f6;
color: var(--text);
font-size: 0.78rem;
font-weight: 700;
}
.tag--blue {
background: #e2eeff;
color: #195db6;
}
.tag--green {
background: #def5eb;
color: #0d7f54;
}
.tag--orange {
background: #fff1d6;
color: #986000;
}
.alert {
padding: 11px 13px;
border-radius: 11px;
border: 1px solid transparent;
}
.alert--info {
background: #edf5ff;
color: #24538f;
border-color: #d6e8ff;
}
/* PROGRESS */
.progress-list {
display: grid;
gap: 12px;
}
.progress-item__label {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 5px;
}
.progress-item__label span {
color: var(--text-soft);
}
.progress {
width: 100%;
height: 8px;
border-radius: 999px;
background: #edf2f8;
overflow: hidden;
}
.progress__bar {
height: 100%;
border-radius: inherit;
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
}
.progress__bar--violet {
background: linear-gradient(135deg, #6f7cf6, #9b7df9);
}
/* TABS */
.tabs {
background: #f8fbff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 11px;
}
.tabs__nav {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 11px;
}
.tab-btn {
border: 0;
background: #fff;
color: var(--text-soft);
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
border: 1px solid var(--border);
font-weight: 700;
}
.tab-btn.is-active {
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
color: #fff;
border-color: transparent;
}
.tab-panel {
display: none;
color: var(--text-soft);
line-height: 1.5;
}
.tab-panel.is-active {
display: block;
}
/* PROFILE CARD */
.profile-card__top {
display: flex;
gap: 11px;
align-items: center;
margin-bottom: 14px;
flex-wrap: wrap;
}
.profile-card__top h4 {
margin: 0 0 3px;
}
.profile-card__top p {
margin: 0;
color: var(--text-soft);
}
.profile-card__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.profile-card__meta div {
background: #f8fbff;
border: 1px solid var(--border);
border-radius: 11px;
padding: 11px;
}
.profile-card__meta span {
display: block;
color: var(--text-soft);
margin-bottom: 4px;
font-size: 0.82rem;
}
.profile-card__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* FINANCE */
.finance-balance {
background: linear-gradient(135deg, #12223e, #1c3d72);
color: #fff;
border-radius: 14px;
padding: 16px;
}
.finance-balance__main span,
.finance-balance__main small {
display: block;
color: rgba(255,255,255,0.75);
}
.finance-balance__main strong {
display: block;
font-size: 1.6rem;
margin: 6px 0 3px;
}
.finance-balance__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.finance-mini {
border-radius: 11px;
padding: 11px;
background: rgba(255,255,255,0.08);
}
.finance-mini span {
display: block;
color: rgba(255,255,255,0.75);
margin-bottom: 4px;
}
.finance-mini strong {
font-size: 1rem;
}
.payment-list {
display: grid;
gap: 8px;
margin-top: 12px;
}
.payment-item {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 11px;
border: 1px solid var(--border);
background: #fbfdff;
border-radius: 11px;
}
.payment-item strong,
.payment-item span {
display: block;
}
.payment-item span {
color: var(--text-soft);
font-size: 0.85rem;
margin-top: 2px;
}
/* SCHEDULE */
.schedule-list,
.activity-list {
display: grid;
gap: 10px;
}
.schedule-item {
display: flex;
gap: 11px;
align-items: flex-start;
padding: 10px;
border-radius: 11px;
background: #f8fbff;
border: 1px solid var(--border);
}
.schedule-time {
min-width: 48px;
padding: 7px 8px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--border);
text-align: center;
font-weight: 700;
color: var(--primary-dark);
}
.schedule-body strong {
display: block;
margin-bottom: 3px;
}
.schedule-body p {
margin: 0;
color: var(--text-soft);
}
/* ACTIVITY */
.activity-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 3px 0;
}
.activity-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
margin-top: 5px;
flex-shrink: 0;
}
.activity-item strong,
.activity-item p,
.activity-item span {
display: block;
}
.activity-item p {
margin: 3px 0;
color: var(--text-soft);
}
.activity-item span {
color: #9ca8bc;
font-size: 0.8rem;
}
/* MODAL */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 25, 55, 0.48);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 60;
}
.modal-backdrop.is-open {
display: flex;
}
.modal {
width: min(560px, 100%);
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 56px rgba(16, 32, 62, 0.25);
overflow: hidden;
}
.modal__head,
.modal__foot {
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__head {
border-bottom: 1px solid var(--border);
}
.modal__head h4 {
margin: 0;
}
.modal__body {
padding: 16px;
}
.modal__foot {
border-top: 1px solid var(--border);
gap: 8px;
justify-content: flex-end;
}
/* HIDDEN FILTERED ROWS */
tr.is-hidden {
display: none;
}
/* RESPONSIVE */
@media (max-width: 1400px) {
.grid--4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1100px) {
.searchbar {
min-width: 200px;
}
.hero-card {
flex-direction: column;
}
.hero-stats {
grid-template-columns: repeat(4, 1fr);
min-width: 0;
}
/* Su schermo stretto la hero e' gia' in colonna: le KPI stanno meglio su piu'
righe che schiacciate in una sola. Si torna al comportamento a griglia. */
.hero-card--kpi-row .hero-stats {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
}
.hero-card--kpi-row .hero-card__content h3,
.hero-card--kpi-row .hero-card__content p { max-width: none; }
}
/* ── Sidebar overlay + close btn (solo mobile) ──────────────────── */
.sidebar-overlay {
display: none;
}
.sidebar-close-btn {
display: none;
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 1010;
width: 280px;
max-width: 85vw;
transform: translateX(-105%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
}
.sidebar.is-open,
.sidebar.sidebar--open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
/* Overlay backdrop */
.sidebar-overlay {
display: block;
position: fixed;
inset: 0;
z-index: 1005;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* Pulsante chiudi dentro la sidebar */
.sidebar-close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
color: rgba(255,255,255,0.7);
font-size: 1.1rem;
cursor: pointer;
z-index: 10;
transition: background 0.15s;
}
.sidebar-close-btn:hover {
background: rgba(255,255,255,0.2);
color: #fff;
}
.mobile-toggle {
display: inline-grid;
place-items: center;
font-size: 1.4rem;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
}
.mobile-toggle:active {
background: rgba(255,255,255,0.08);
}
/* Topbar mobile: titolo+sottotitolo SEMPRE inline accanto all'hamburger,
pulsanti azione collassati a sola icona allineati a destra (regola globale). */
.topbar {
padding: 12px 14px;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}
.topbar__left {
flex: 1;
min-width: 0;
justify-content: flex-start;
flex-wrap: nowrap;
}
.topbar__left .page-title {
min-width: 0;
flex: 1;
}
.topbar__left .page-title h2,
.topbar__left .page-title p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar__right {
flex: 0 0 auto;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 6px;
}
/* Pulsanti azione topbar in mobile: solo icona, no testo */
.topbar__right .btn {
font-size: 0;
gap: 0;
padding: 0;
width: 38px;
height: 38px;
min-width: 38px;
justify-content: center;
flex-shrink: 0;
}
.topbar__right .btn > i,
.topbar__right .btn > svg {
width: 18px !important;
height: 18px !important;
margin: 0 !important; /* override eventuali margin inline (es. margin-right:4px) */
vertical-align: middle !important; /* override vertical-align inline */
}
.searchbar {
order: 3;
width: 100%;
min-width: 0;
}
.content {
padding: 14px;
}
.profile-card__meta,
.finance-balance__cards {
grid-template-columns: 1fr;
}
.hero-stats {
grid-template-columns: 1fr 1fr;
}
/* Su mobile il contenuto della dashboard deve poter scorrere */
.content--dashboard {
overflow-y: auto;
}
}
@media (max-width: 640px) {
.grid--4 {
grid-template-columns: 1fr;
}
.hero-card h3 {
font-size: 1.3rem;
}
.panel,
.stat-card {
padding: 12px;
}
.page-title h2 {
font-size: 1.05rem;
}
.profile-chip {
width: 100%;
justify-content: flex-start;
}
}
/* ===========================================================
ENDLESSMED — CUSTOM OVERRIDES
=========================================================== */
/* ── Lucide icons ── */
.lucide {
width: 14px;
height: 14px;
vertical-align: -0.15em;
display: inline-block;
}
/* ── SweetAlert2 override per dark theme ── */
:root {
--swal2-width: 520px;
--swal2-padding: 1.6em;
--swal2-border-radius: 14px;
--swal2-title-font-size: 1.3rem;
--swal2-html-container-font-size: 0.92rem;
--swal2-confirm-button-font-size: 0.92rem;
--swal2-cancel-button-font-size: 0.92rem;
--swal2-background: #ffffff;
--swal2-backdrop: rgba(10, 25, 55, 0.48);
}
.swal2-popup {
font-family: 'Poppins', sans-serif !important;
border-radius: 14px !important;
}
.swal2-confirm {
border-radius: 11px !important;
font-weight: 700 !important;
}
.swal2-cancel, .swal2-deny {
border-radius: 11px !important;
font-weight: 700 !important;
}
/* swal-paz-table → spostato in style_swal_custom.css */
/* ── Stato Accettazione Badges ── */
.stato_acc {
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.stato_acc.fatt_lav { color: #986000; background: #fff1d6; }
.stato_acc.da_fatt { color: #195db6; background: #dbeaff; }
.stato_acc.preventivo { color: #7b2d8f; background: #f3e5f5; }
.stato_acc.ref_ok { color: #0d7f54; background: #dff8ee; }
.stato_acc.non_ese { color: #b03636; background: #ffe2e2; }
.stato_acc.bozza { color: #5a5a5a; background: #eef1f6; }
/* ── Sidebar ENTRYMED brand ── */
.sidebar__brand .brand-mark {
background: linear-gradient(135deg, #2f80ed, #6f7cf6);
}
/* ── Bottoni custom ENTRYMED ── */
.btn--confirm {
background: linear-gradient(135deg, #1fb67a, #17a06b);
color: #fff;
}
.btn--danger {
background: linear-gradient(135deg, #eb5757, #d94545);
color: #fff;
}
.btn--warning {
background: linear-gradient(135deg, #f6a623, #e69516);
color: #fff;
}
/* ── Table action buttons ── */
.btn--icon {
width: 30px;
height: 30px;
padding: 0;
display: inline-grid;
place-items: center;
border-radius: 10px;
border: 1px solid var(--border);
background: #fff;
cursor: pointer;
transition: var(--transition);
}
.btn--icon:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
background: #f0f5ff;
}
/* ── KPI Grid 2-col (dashboard specific) ── */
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
.grid--2 {
grid-template-columns: 1fr;
}
}
/* ── Dash accettazioni empty ── */
.empty-state {
text-align: center;
color: var(--text-soft);
padding: 38px 16px;
font-size: 0.92rem;
}
.empty-state .lucide {
width: 40px;
height: 40px;
margin-bottom: 10px;
opacity: 0.5;
}
/* ── DataTables overrides + table-footer: MOVED to /css/style_datatable.css ── */
/* ── Grid 3 col ── */
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
.grid--3 { grid-template-columns: 1fr; }
}
/* ── Autocomplete dropdown ── */
.ac-wrap { position: relative; }
#acDropdown {
position: absolute; left: 0; right: 0; margin-top: 4px;
max-height: 260px; overflow-y: auto;
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 6px 20px rgba(24, 48, 88, 0.14);
z-index: 1050; display: none;
}
#acDropdown .ac-row {
display: flex; align-items: center; gap: 14px;
padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #edf1f7;
transition: background var(--transition);
}
#acDropdown .ac-row:hover { background: #f0f5ff; }
#acDropdown .ac-row.ac-row-active { background: #dbe8ff; outline: 2px solid var(--primary); outline-offset: -2px; }
/* Colonne allineate verticalmente: codice e codice ministeriale a larghezza
fissa, nome esame elastico, prezzo a destra. Le due colonne fisse garantiscono
che cod.min. e nome partano dalla stessa x su tutte le righe. I badge
(pacchetto/prelievo) vivono DENTRO .ac-name (vedi actions_acc_item.js), così
non sfasano le colonne. */
#acDropdown .ac-row .ac-code {
flex: 0 0 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-weight: 700; color: var(--text-soft); font-size: .84em;
}
#acDropdown .ac-row .ac-codmin {
flex: 0 0 62px; white-space: nowrap; color: #9ca8bc; font-size: .82em;
font-variant-numeric: tabular-nums;
}
#acDropdown .ac-row .ac-codmin:empty::before { content: "\2014"; color: #d3d9e3; }
#acDropdown .ac-row .ac-name { flex: 1 1 auto; min-width: 0; }
#acDropdown .ac-row .ac-price { flex: 0 0 auto; font-weight: 600; white-space: nowrap; color: var(--primary); }
#acDropdown .ac-row .ac-added {
flex: 0 0 auto; color: var(--success); font-size: 11px; font-weight: 600; display: none;
}
#acDropdown .ac-empty { padding: 11px; text-align: center; color: #9ca8bc; font-style: italic; }
#acDropdown .ac-loading { padding: 11px; text-align: center; color: var(--text-soft); }
/* Pacchetto nel dropdown autocomplete */
#acDropdown .ac-row.ac-row-pack {
background: linear-gradient(90deg, #e8f4fd 0%, #fff 40%);
}
#acDropdown .ac-row.ac-row-pack:hover {
background: linear-gradient(90deg, #cce5ff 0%, #f0f5ff 40%);
}
.ac-pack-badge {
color: var(--primary);
margin-right: 3px;
display: inline-flex;
align-items: center;
}
/* ── Pacchetto header + sub-item rows in table ── */
tr.tr-pack-header {
background: linear-gradient(90deg, #e0f7fa 0%, var(--surface-2) 60%) !important;
border-left: 3px solid var(--info);
}
tr.tr-pack-header td {
font-weight: 500;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
tr.tr-pack-item {
border-left: 3px solid #b3e5fc;
background: #fafcff !important;
}
tr.tr-pack-item td:nth-child(2) {
padding-left: 22px !important;
}
tr.tr-pack-item td {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* ── Voce AGGREGATA agganciata a un esame (es. proiezione aggiuntiva) ──
Classe DEDICATA e non tr-pack-item: quest'ultima porta con se' la semantica
pacchetto letta dal JS (rimozione a cascata del pacchetto, conteggio figlie,
check anti-duplicato). Stessa grammatica visiva — bordo sinistro colorato +
indentazione della colonna esame — con la tinta viola dell'aggregata. */
tr.tr-aggr-item {
border-left: 3px solid #c4b5fd;
background: #fbfaff !important;
}
tr.tr-aggr-item td:nth-child(2) {
padding-left: 22px !important;
}
tr.tr-aggr-item td {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* ── Righe prelievo/anamnesi nella tabella accettazione ── */
tr.tr-prelievo {
border-left: 3px solid #20c997;
background: #f0faf6 !important;
}
tr.tr-prelievo td:nth-child(2) {
font-style: italic;
}
/* ── Topbar action buttons (icon-only, accettazione item) ── */
.topbar-action-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
display: inline-grid;
place-items: center;
border: none;
cursor: pointer;
color: #fff;
transition: opacity .2s, transform .15s;
}
.topbar-action-btn:hover {
opacity: .85;
transform: translateY(-1px);
}
.topbar-action-btn i, .topbar-action-btn svg {
width: 15px;
height: 15px;
pointer-events: none;
}
/* ── Patient card (compact horizontal) ── */
.patient-card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 11px;
}
.patient-field label {
display: block;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-soft);
margin-bottom: 3px;
}
.patient-field .field-value {
font-weight: 600;
font-size: 0.92rem;
color: var(--text);
}
/* ── Accettazione footer (totals/payments) ── */
.acc-footer {
background: linear-gradient(135deg, #12223e 0%, #1a3358 100%);
color: #dbe7ff;
border-radius: 0 0 var(--radius) var(--radius);
padding: 14px 18px;
}
.acc-footer-grid {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.acc-footer-grid > div {
flex: 1 1 140px;
min-width: 120px;
}
.acc-footer-divider {
border-top: 1px solid rgba(255,255,255,0.1);
margin: 11px 0;
}
.acc-footer-info {
font-size: 0.82rem;
color: #8fa3c7;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.acc-footer-info strong {
color: #fff;
}
/* ── Scrollbar styled (override reference) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #eef2ff; border-radius: 999px; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }
/* ═══════════════════════════════════════════════════════════════════════
FILTRO PERIODO STANDARD
Pattern unificato: 3 preset (7GG / Mese / Anno) + display + Flatpickr
Vedi /view/include/_period_filter.php + /js/period_filter.js
═══════════════════════════════════════════════════════════════════════ */
/* Contenitore barra filtri (§14): storicamente definito SOLO nel partial locale
di StatsMed (_styles.php) — le pagine §14 fuori da StatsMed restavano senza
layout (field-group impilati in verticale). Centralizzato qui 2026-07-17
(prima consumatrice: checklist_sanificazioni.php); il duplicato in
dash_statsmed/_styles.php resta innocuo (stesse regole). */
.stats-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; padding:14px 18px; background:#f8fafc; border:1px solid #e5ebf4; border-radius:12px; margin-bottom:20px; }
.stats-filters .field-group { margin-bottom:0; min-width:180px; flex:0 0 auto; }
.stats-filters label { display:block; font-size:0.68rem; font-weight:700; color:#3d4a5c; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:3px; }
.stats-filters .em-input, .stats-filters .em-select { height:34px; font-size:0.84rem; }
/* min-width alzata da 480 a 560 con l'aggiunta di Oggi e Ultimi 30GG: sotto
questa soglia i 5 preset si spezzavano su tre righe ragged. Il blocco ha
flex-wrap, quindi su schermi stretti va comunque a capo per intero. */
.field-group--period { min-width:560px; flex:1; }
.period-filter { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.period-preset {
display:inline-flex; align-items:center;
height:34px; padding:0 11px; border-radius:8px;
background:#f0f4fa; border:1px solid #d6dfeb; color:#3d4a5c;
font-size:0.78rem; font-weight:600; font-family:inherit;
cursor:pointer; white-space:nowrap;
transition:background .15s, border-color .15s, color .15s;
}
.period-preset:hover { background:#e6edf7; border-color:#bfcde3; }
.period-preset.is-active {
background:linear-gradient(135deg,#2f80ed,#1a5bbf);
color:#fff; border-color:#1a5bbf;
}
.period-display {
flex:1; min-width:160px; height:34px;
display:inline-flex; align-items:center; gap:8px;
padding:0 12px; border:1px solid #bfc7d2; border-radius:8px;
background:#fff; font-size:0.84rem; color:#1a1a2e;
cursor:pointer; user-select:none;
transition:border-color .15s, box-shadow .15s;
}
.period-display:hover { border-color:#2f80ed; box-shadow:0 0 0 3px rgba(47,128,237,0.08); }
.period-display::before { content:'\1F4C5'; font-size:0.85rem; }
/* ============================================================
EMBED MODE — pagine _item.php caricate in iframe dentro un
sidepanel (slide-over). Pattern standard del software:
- sidebar/topbar dell'iframe nascosti (il sidepanel ne fornisce uno proprio)
- respiro 16px attorno al contenuto (no full-bleed)
- i panel mantengono bordi/radius normali (look "card" coerente)
- spazio fra panel consecutivi
Attivata via quando $isEmbed = true.
Vedi CLAUDE.md §21 e js/macc_sidepanel.js / js/fam_sidepanel.js.
============================================================ */
body.body--embed { background: #f1f3f5; }
body.body--embed .sidebar,
body.body--embed .topbar,
body.body--embed #mobileToggle { display: none !important; }
body.body--embed .app-shell { display: block; }
body.body--embed .main-area { width: 100%; margin: 0; }
body.body--embed .content {
padding: 16px;
min-height: 0;
}
/* Spazio fra panel consecutivi (es. "Modifica Info" + "Prestazioni Associate") */
body.body--embed .dt-panel + .dt-panel,
body.body--embed .panel + .panel,
body.body--embed .dt-panel + .panel,
body.body--embed .panel + .dt-panel { margin-top: 16px; }
/* Form-footer (azioni Salva/Annulla) chiude correttamente il bottom del panel */
body.body--embed .form-footer { border-radius: 0 0 var(--radius, 14px) var(--radius, 14px); }
/* Il content ha gia il suo padding: i margin-bottom inline sui panel vanno ignorati */
body.body--embed .content > .panel:last-child,
body.body--embed .content > .dt-panel:last-child { margin-bottom: 0; }
/* ════════════════════════════════════════════════════════════════
MOBILE TOUCH (≤640px) — regole additive globali
- Target touch 44px (WCAG / Apple HIG); il desktop resta 34px
- Feedback :active al tocco (l'hover non esiste sul touch)
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.icon-btn { width: 44px; height: 44px; }
.icon-btn:active { transform: scale(0.95); box-shadow: none; }
.btn:active { transform: scale(0.97); }
}
/* SweetAlert2: il popup default (520px) deve rientrare nel viewport stretto */
@media (max-width: 480px) {
:root { --swal2-width: min(94vw, 520px); }
}
/* ── Loader inline di sezione — standard EndlessMed (CLAUDE.md §27) ─────────────
Spinner + etichetta per una SEZIONE/pannello che carica contenuto via AJAX
(NON è il preloader full-page §25, che copre l'intera viewport durante la
navigazione). Uso:
Caricamento…
Varianti dimensione: .em-loader--sm (compatta) / .em-loader--lg (ampia). */
.em-loader { display:flex; align-items:center; justify-content:center; gap:10px; padding:30px 20px; color:var(--text-soft,#64748b); font-size:0.86rem; }
.em-loader__spin { width:18px; height:18px; flex-shrink:0; border-radius:50%; border:3px solid rgba(28,53,88,0.18); border-top-color:#1c3558; animation:em-spin .7s linear infinite; }
.em-loader--sm { padding:16px 12px; font-size:0.82rem; }
.em-loader--sm .em-loader__spin { width:14px; height:14px; border-width:2px; }
.em-loader--lg { padding:44px 20px; font-size:0.9rem; }
.em-loader--lg .em-loader__spin { width:28px; height:28px; border-width:4px; }
@keyframes em-spin { to { transform: rotate(360deg); } }
/* ============================================================
QUEUE MED — WIDGET SIDEBAR ENTRYMED (.em-qmw)
Ultimo ticket chiamato + code gestite con attesa.
Markup emesso da renderEntrymedSidebarNav() (lib/helpers.php),
dati da qm_sidebar_status.php (poll 10s). Sidebar già scura:
nessuna variante tema necessaria.
============================================================ */
.em-qmw { margin-top: 16px; }
.em-qmw__last {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 11px;
padding: 10px 12px;
margin: 6px 0 8px;
}
.em-qmw__last small {
display: block;
font-size: 0.6rem;
font-weight: 700;
color: #9fb2d8;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
}
.em-qmw__ticket { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.em-qmw__ticket strong { font-size: 1.45rem; font-weight: 800; color: #fff; line-height: 1.1; }
.em-qmw__ticket span { font-size: 0.66rem; font-weight: 700; color: #7ea6dd; letter-spacing: 0.03em; }
.em-qmw__coda {
display: block;
font-size: 0.7rem;
color: #9fb2d8;
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-qmw__code { display: flex; flex-direction: column; gap: 4px; }
.em-qmw__row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: 9px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
}
.em-qmw__row .sig { font-size: 0.68rem; font-weight: 800; color: #7ea6dd; min-width: 26px; flex-shrink: 0; }
.em-qmw__row .nom { flex: 1; min-width: 0; font-size: 0.74rem; color: #dbe7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-qmw__row .att {
min-width: 22px; height: 18px; padding: 0 6px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.66rem; font-weight: 800;
background: rgba(255,255,255,0.10); color: #9fb2d8;
flex-shrink: 0;
}
.em-qmw__row .att.is-on { background: rgba(246,166,35,0.28); color: #ffce7a; }
/* Contatore attesa del prossimo ticket (per coda) — tick client-side 1s */
.em-qmw__row .eta {
font-size: 0.64rem;
font-weight: 800;
color: #ffce7a;
letter-spacing: 0.02em;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.em-qmw__row .eta.is-warn { color: #f1948a; } /* prossimo ticket in attesa da ≥15 min */
/* Pulsante EMETTI TICKET (solo operatori con permesso queue_print_ticket):
emissione per le code di smistamento via SWal */
.em-qmw__emit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 8px;
padding: 8px 10px;
border: none;
border-radius: 9px;
background: var(--mod-queue-grad, linear-gradient(135deg, #06b6d4, #0891b2));
color: #fff;
font-family: inherit;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: filter .15s, transform .15s;
}
.em-qmw__emit:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* ── Console rapida code (SWal dal box "Ultimo ticket chiamato") ── */
.em-qmw__last { cursor: pointer; transition: background .15s, border-color .15s; }
.em-qmw__last:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.em-qmc-post {
font-size: 0.78rem;
color: var(--text-soft);
text-align: left;
margin: 0 0 10px;
}
.em-qmc-msg {
text-align: left;
font-size: 0.78rem;
font-weight: 700;
padding: 7px 11px;
border-radius: 8px;
margin-bottom: 10px;
}
.em-qmc-msg.is-ok { background: rgba(31,182,122,0.14); color: #1fb67a; }
.em-qmc-msg.is-err { background: rgba(235,87,87,0.14); color: #eb5757; }
.em-qmc-list { display: flex; flex-direction: column; gap: 10px; }
.em-qmc-card {
background: var(--surface-2, #f8fbff);
border: 1px solid var(--border, #e5ebf4);
border-radius: 12px;
padding: 10px 12px;
text-align: left;
}
.em-qmc-card.is-callable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.em-qmc-card.is-callable:hover { border-color: var(--primary, #2f80ed); box-shadow: 0 4px 14px rgba(47,128,237,0.12); }
.em-qmc-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.em-qmc-card__sig {
font-size: 0.7rem; font-weight: 800;
background: rgba(47,128,237,0.12); color: var(--primary, #2f80ed);
padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.em-qmc-card__nome { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-qmc-card__att { font-size: 0.68rem; font-weight: 700; color: var(--text-soft); background: rgba(0,0,0,0.06); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.em-qmc-card__att.is-on { background: rgba(246,166,35,0.18); color: #b87a00; }
html[data-em-theme="dark"] .em-qmc-card__att { background: rgba(255,255,255,0.08); }
html[data-em-theme="dark"] .em-qmc-card__att.is-on { color: #ffce7a; }
.em-qmc-card__row { display: flex; align-items: stretch; gap: 10px; }
.em-qmc-ultimo { flex: 1; min-width: 0; }
.em-qmc-ultimo small { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); margin-bottom: 3px; }
.em-qmc-ultimo__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-qmc-ultimo__et { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.em-qmc-ultimo__meta { font-size: 0.7rem; color: var(--text-soft); }
.em-qmc-ultimo__none { font-size: 0.76rem; color: var(--text-soft); font-style: italic; }
.em-qmc-recall {
display: inline-flex; align-items: center; gap: 5px;
border: 1px solid var(--border, #e5ebf4);
background: var(--surface, #fff);
color: var(--text);
font-family: inherit; font-size: 0.68rem; font-weight: 700;
padding: 4px 9px; border-radius: 8px; cursor: pointer;
transition: border-color .15s, background .15s;
}
.em-qmc-recall:hover { border-color: var(--primary, #2f80ed); color: var(--primary, #2f80ed); }
.em-qmc-recall i, .em-qmc-recall svg { width: 12px; height: 12px; }
.em-qmc-next {
min-width: 128px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
border: none; border-radius: 10px; padding: 6px 12px;
background: var(--mod-queue-grad, linear-gradient(135deg, #06b6d4, #0891b2));
color: #fff; font-family: inherit; cursor: pointer;
transition: filter .15s, transform .15s;
}
.em-qmc-next:hover { filter: brightness(1.1); transform: translateY(-1px); }
.em-qmc-next:disabled { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
.em-qmc-next small { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
.em-qmc-next strong { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.em-qmc-next .em-qmc-eta { font-size: 0.64rem; font-weight: 700; opacity: 0.9; font-variant-numeric: tabular-nums; }
.em-qmc-next .em-qmc-eta.is-warn { color: #ffd9d3; }
.em-qmc-next--empty { background: rgba(0,0,0,0.08); color: var(--text-soft); cursor: default; }
.em-qmc-next--empty:hover { filter: none; transform: none; }
html[data-em-theme="dark"] .em-qmc-next--empty { background: rgba(255,255,255,0.07); }
/* Griglia badge 2 colonne nella SWal EMETTI TICKET */
.em-qmw-emit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
text-align: left;
}
@media (max-width: 560px) { .em-qmw-emit-grid { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════
SIDEBAR COMPRESSA (CLAUDE.md §7 — "Compressione sidebar")
═══════════════════════════════════════════════════════════════════════
Attivata dall'attributo html[data-em-sidebar], messo PRIMA del primo paint
da renderThemeBoot(). L'attributo sta su e non su .sidebar perché la
sidebar non esiste ancora quando lo snippet anti-FOUC gira: senza questo,
ad ogni cambio pagina la sidebar lampeggerebbe larga prima di stringersi.
Due VALORI, perché sono due cose diverse che non devono cancellarsi:
- "collapsed" → SCELTA dell'operatore, persistita nel DB
(em_ui_prefs.sidebar_collapsed, lib/ui_prefs.php).
- "auto" → AUTOMATISMO di larghezza: finestra sotto i 1200px, dove
una sidebar da 230px si mangia un quinto dello schermo.
NON tocca la preferenza: riportando la finestra sopra i
1200px l'operatore ritrova la sidebar come l'aveva messa.
Le regole di aspetto qui sotto valgono per entrambi → selettore sulla sola
PRESENZA dell'attributo. Chi deve distinguerli (il JS) legge il valore.
Tutto è CSS: il markup delle 160 pagine con sidebar NON cambia. Regge
perché la struttura è uniforme (misurato il 2026-09-09: brand con
.brand-mark +