/* v2 */
:root {
--c-primary: #2f7d4f;
--c-primary-dark: #266842;
--c-primary-darker: #1b3b2c;
--c-primary-gradient: linear-gradient(135deg, #246340 0%, #1b3b2c 100%);
/* Le sfumature del verde, dal bosco al prato: sono queste e basta.
Prima meta' dei riquadri sfumava dal blu al verde, e sulla stessa
pagina i due colori facevano a pugni. */
--g-verde: linear-gradient(160deg, var(--c-primary), var(--c-primary-deep));
--g-verde-chiaro: linear-gradient(160deg, var(--c-primary-soft), var(--c-primary));
--c-success: #10b981;
--c-success-dark: #059669;
--c-success-darker: #065f46;
--c-success-bg: #d1fae5;
--c-danger: #ef4444;
--c-danger-dark: #dc2626;
--c-danger-darker: #991b1b;
--c-danger-bg: #fee2e2;
--c-danger-bg-light: #fef2f2;
--c-warning: #f59e0b;
--c-warning-dark: #d97706;
--c-warning-darker: #92400e;
--c-warning-bg: #fef3c7;
--c-info: #3b82f6;
--c-info-dark: #2563eb;
--c-info-bright: #6366f1;
--c-info-bg: #eef2ff;
--c-text: #333;
--c-text-dark: #1f2937;
--c-text-darkest: #111827;
--c-text-mid: #666;
--c-text-secondary: #4b5563;
--c-text-darkish: #374151;
--c-text-muted: #6b7280;
--c-text-lighter: #9ca3af;
--c-text-faint: #888;
--c-border: #dde4ea;
--c-border-light: #f3f4f6;
--c-border-mid: #c3ced8;
--c-border-faint: #eee;
--c-border-light2: #e2e8f0;
--c-border-cool: #cbd5e1;
--c-bg: #f4f6f8;
--c-bg-card: white;
--c-bg-light: #f7f9fa;
--c-bg-lighter: #f1f5f9;
--c-white: #fff;
--c-primary-deep: #1e5c39;
--c-primary-soft: #6ba883;
--c-primary-bg-soft: #e6f1ea;
--c-primary-bg: #cbe3d5; /* verde tenue, piu' saturo di primary-bg-soft */
--c-primary-deeper: #15402a; /* piu' scuro di primary-deep */
--c-info-bg-pale: #dbeafe;
--c-info-bg-soft: #c7d7fa; /* blu-indigo tra info-bg e info-bg-pale */
--c-info-darker: #1d4ed8; /* più scuro di info-dark */
--c-success-bright: #22c55e;
--c-success-deep: #16a34a;
--c-success-darkest: #166534;
--c-success-bg-mint: #ecfdf5;
--c-danger-bg-mid: #fca5a5;
--c-danger-bg-pale: #fecaca;
--c-warning-mid: #b45309;
--c-pink-dark: #9d174d;
--c-focus-ring: rgba(47, 125, 79, 0.18);
/* CARATTERI — nessun webfont: si usa quello del sistema. */
--font-ui: system-ui, 'Segoe UI', Roboto, -apple-system, 'Helvetica Neue',
Arial, sans-serif;
--font-mono: ui-monospace, Consolas, 'SF Mono', 'Cascadia Mono', monospace;
/* MODULE PALETTE — Colori condivisi tra moduli (>=2 file).
Aggiungere qui invece di hex literali per coerenza visuale. */
--c-amber-bg-soft: #fefce8;
--c-amber-bg-mid: #fde68a;
--c-amber-text-deep: #854d0e;
--c-orange-bg: #ffedd5;
--c-purple-deep: #764ba2;
--c-violet: #8b5cf6;
--c-violet-bg: #ede9fe;
--c-violet-bg-pale: #f5f3ff;
--c-violet-darker: #5b21b6;
--c-indigo-medium: #5a6fd6;
--c-pink-bg: #fce7f3;
--c-pink-bg-pale: #fdf2f8;
--c-green-bg-mint: #bbf7d0;
--c-cyan-bg: #cffafe;
--c-warm-bg: #fff7ed;
/* Palette extra per moduli/runtime (anti-drift) */
--c-blue-light: #93c5fd;
--c-cyan-bg-pale: #e0f2fe;
--c-cyan-text-deep: #0369a1;
--c-blue-soft: #bfdbfe;
--c-amber-bright: #fbbf24;
--c-red-700: #b91c1c;
--c-amber-300: #fcd34d;
--c-green-500: #4caf50;
--c-black: #000000;
--c-border-grey: #dee2e6;
/* Colori aggiuntivi da audit moduli — mai usare hex letterali nei moduli */
--c-amber-focus: #b88d00; /* focus ring campi obbligatori ambra */
--c-green-darkest: #365314; /* testo su badge verde scuro */
--c-emerald-300: #6ee7b7; /* bordo emerald chiaro */
--c-lime-300: #bef264; /* bordo lime */
--c-cyan-500: #06b6d4; /* chip calendario cyan */
/* Phase 5 — unificazione palette (hex letterali eliminati dai moduli) */
--c-success-bg-pale: #f0fdf4; /* alert-success, card-success-light */
--c-success-bg-soft: #dcfce7; /* quick-half--active, turno-intero */
--c-success-border-light: #86efac; /* alert-success, card-success-light */
--c-warning-bg-pale: #fef9c3; /* turno-solo_pomeriggio, state-box */
--c-warning-bg-bright: #fffbeb; /* alert-warning */
--c-warning-bg-strong: #fff3cd; /* duplicate-warning */
--c-warning-border: #facc15; /* state-box-warning */
--c-warning-border-strong: #ffc107; /* duplicate-warning */
--c-warning-text-deep: #856404; /* duplicate-warning text */
--c-info-bg-bright: #eff6ff; /* alert-info */
--c-info-bg-pale-cyan: #f0f9ff; /* info-block-cyan */
--c-primary-bg-pale: #f2f8f4; /* card-primary-pale, hover-bg-blue-pale-row */
--c-violet-bg-pale: #f0f2ff; /* card-violet-pale */
--c-violet-text-deep: #7c3aed; /* order-badge Avvisato */
--c-cyan-text-mid: #0891b2; /* order-badge Ricevuto Parz. */
--c-orange-vibrant: #f97316; /* text-orange, order-badge Chiamato */
--c-slate-text: #5a6f86; /* text-slate */
--c-amber-text: #f39c12; /* u-text-amber */
--c-brown-text-deep: #78350f; /* tag-legna */
--c-yellow-highlight: #fef08a; /* cal-day today hover */
--c-bg-grey-light: #f9f9f9; /* cal-we weekend */
--c-bg-grey-pale: #f0f0f0; /* hover-bg-gray-pale */
--c-bg-grey-very-light: #edf0f3; /* cal-bar-empty */
--c-bg-cyan-bright: #e8f4fd; /* hover-bg-blue-pale */
--c-warm-bg: #fff8e5; /* bg-warn-pale */
--c-warm-bg-soft: #fff5e6; /* bg-warm-pale */
--c-yellow-bolla-aperta: #fff7c2; /* pesa: riga bolla aperta */
--c-green-bolla-chiusa: #d2f0c8; /* pesa: riga bolla chiusa */
/* Glow semi-trasparenti — box-shadow e gradient con canale alpha */
--c-primary-glow: rgba(102, 126, 234, 0.08);
--c-purple-glow: rgba(118, 75, 162, 0.08);
--c-success-glow: rgba(34, 197, 94, 0.53);
--c-warning-glow: rgba(234, 179, 8, 0.53);
--c-danger-glow: rgba(239, 68, 68, 0.53);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 20px;
/* Primitive componenti: un solo contratto per layout e stati condivisi. */
--ui-transition-fast: 0.2s ease;
--btn-padding-block: 0.6rem;
--btn-padding-inline: 1.25rem;
--btn-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.14);
/* DENSITA' — la sceglie chi lavora, in Utilita', e resta salvata.
Le righe si stringono togliendo spazio, mai rimpicciolendo il testo:
ridurre il carattere per farne stare di piu' e' il modo sicuro di
rendere illeggibile una tabella che serve a leggere. */
--table-cell-padding-block: 0.55rem;
--table-cell-padding-inline: 0.9rem;
--table-riga-min: 40px;
/* e le righe degli elenchi che non sono tabelle (ordini, lavori) */
--riga-y: 0.55rem;
--riga-x: 0.9rem;
--riga-gap: 0.2rem;
--modal-width: 94%;
--modal-max-width: 700px;
--modal-max-height: 96vh;
--modal-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
--loading-size: 18px;
--loading-border-width: 2px;
/* Z-INDEX LADDER — Scala centralizzata per evitare conflitti di stacking.
Usare SEMPRE queste variabili, mai numeri ad-hoc. */
--z-base: 1; /* Elementi normali in flusso */
--z-sticky: 100; /* Header/tabelle sticky */
--z-navbar: 900; /* Navbar top */
--z-modal-backdrop: 1000;
--z-modal: 1010; /* Contenuto modal sopra backdrop */
--z-dropdown: 1050; /* Dropdown/combobox sopra modali */
--z-toast: 2000; /* Notifiche toast */
--z-alert: 10000; /* Overlay critici (riavvio server, errori fatali) */
}
/* Compatta: per chi ci sta tutto il giorno. */
:root[data-densita="compatta"] {
--table-cell-padding-block: 0.3rem;
--table-cell-padding-inline: 0.7rem;
--table-riga-min: 32px;
--riga-y: 0.3rem;
--riga-x: 0.75rem;
--riga-gap: 0.1rem;
}
/* Comoda: per chi apre il Portale due volte a settimana, e per i tablet. */
:root[data-densita="comoda"] {
--table-cell-padding-block: 0.8rem;
--table-cell-padding-inline: 1rem;
--table-riga-min: 48px;
--riga-y: 0.85rem;
--riga-x: 1.1rem;
--riga-gap: 0.4rem;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
width: 100%;
}
/* Il carattere e' quello del sistema, e non si scarica niente.
Il motivo per cui tutti i gestionali usano lo stesso carattere e' che
quel carattere e' fatto per gli schermi, si legge piccolo e ha le cifre
della stessa larghezza. Quel carattere pero' ce l'abbiamo gia': su
Windows e' Segoe UI, e le macchine dell'ufficio sono tutte Windows.
`system-ui` davanti serve ai tablet Android e agli iPhone, che cosi'
prendono il proprio - su ciascuno e' quello che si legge meglio.
Zero richieste in piu', zero attesa, e funziona anche quando la rete fa
i capricci. */
body {
font-family: var(--font-ui);
background-color: var(--c-bg);
color: var(--c-text);
line-height: 1.6;
/* I numeri della stessa larghezza ovunque: in colonna le migliaia
stanno sopra le migliaia, e una cifra che cambia non fa ballare la
riga. E' la singola regola che fa sembrare una tabella curata. */
font-variant-numeric: tabular-nums;
}
/* ACCESSIBILITY — Focus ring coerente (keyboard navigation) */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--c-focus-ring);
border-radius: var(--radius-sm);
}
/* Sr-only (screen reader) helper */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* NAVBAR */
.navbar {
background: var(--c-primary-gradient);
padding: 0.75rem 2rem;
box-shadow: 0 2px 15px rgba(0,0,0,0.15);
position: sticky;
top: 0;
z-index: var(--z-navbar);
}
.navbar-container {
max-width: 1600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.navbar-brand {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
}
.navbar-toggle {
display: none;
background: none;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 6px;
color: white;
font-size: 1.5rem;
padding: 0.3rem 0.7rem;
cursor: pointer;
transition: background 0.3s;
}
.navbar-toggle:hover {
background: rgba(255,255,255,0.15);
}
.navbar-menu {
display: flex;
gap: 1.5rem;
list-style: none;
align-items: center;
}
.navbar-menu a {
color: white;
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
border-radius: var(--radius-sm);
padding: 0.35rem 0.65rem;
line-height: 1.15;
white-space: nowrap;
transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.navbar-menu a:hover {
opacity: 0.8;
background: rgba(255,255,255,0.1);
transform: translateY(-1px);
}
.navbar-menu a.active {
background: rgba(255,255,255,0.15);
border-radius: 6px;
padding: 0.35rem 0.65rem;
opacity: 1;
}
.navbar-menu a.navbar-tile {
min-width: 72px;
min-height: 56px;
flex-direction: column;
gap: 0.28rem;
padding: 0.42rem 0.65rem;
text-align: center;
}
.navbar-tile-icon {
display: block;
font-size: 1.05rem;
line-height: 1;
}
.navbar-tile-label {
display: block;
font-size: 0.9rem;
line-height: 1.1;
}
.navbar-menu a.navbar-tile.active {
padding: 0.42rem 0.65rem;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
/* Dropdown navbar (Configurazione ▾, ecc.) */
.navbar-dropdown { position: relative; }
.navbar-dropdown > a { cursor: pointer; user-select: none; }
.navbar-submenu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 12rem;
background: var(--c-white, #fff);
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
list-style: none;
margin: 0;
padding: 0.35rem 0;
z-index: var(--z-dropdown);
display: none;
}
.navbar-submenu.open { display: block; }
.navbar-submenu li { display: block; }
.navbar-submenu a {
display: block;
padding: 0.5rem 1rem;
color: var(--c-text, #333) !important;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
}
.navbar-submenu a:hover { background: var(--c-bg-light, #f4f6fb); opacity: 1; }
/* Tab navigazione Magazzino */
.magazzino-tabs {
display: flex;
gap: 0;
margin-bottom: 0;
border-bottom: 2px solid var(--c-border);
background: var(--c-white);
border-radius: 10px 10px 0 0;
padding: 0 0.5rem;
}
.magazzino-tab {
padding: 0.75rem 1.5rem;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
color: var(--c-text-muted);
border-bottom: 3px solid transparent;
transition: all 0.2s;
margin-bottom: -2px;
}
.magazzino-tab:hover {
color: var(--c-primary-dark);
background: var(--c-info-bg);
}
.magazzino-tab.active {
color: var(--c-primary-dark);
border-bottom-color: var(--c-primary-dark);
background: transparent;
}
.magazzino-tabs + .card {
border-radius: 0 0 12px 12px;
border-top: none;
}
/* CONTAINER */
.container {
max-width: 1600px;
margin: 1.5rem auto;
padding: 0 2rem;
overflow-x: hidden;
animation: pageFadeIn 0.3s ease;
}
/* CARD */
.card {
background: var(--c-bg-card);
border-radius: var(--radius-md);
padding: 1.5rem 2rem;
box-shadow: var(--shadow-card);
margin-bottom: 1.5rem;
border: 1px solid var(--c-border);
animation: cardFadeIn 0.4s ease backwards;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card-title {
font-size: 1.5rem;
color: var(--c-primary-dark);
margin-bottom: 1rem;
font-weight: 700;
}
/* ==================== LE ICONE ====================
Un pacchetto solo: le Fluent Emoji di Microsoft (licenza MIT), variante
piatta e colorata, scaricate in static/images/icone/ — tutte, cosi' per un
modulo nuovo il disegno c'e' gia'. Prima erano le emoji del sistema
operativo: ognuno le disegnava a modo suo, e in fila non sembravano dello
stesso programma.
Si usano come immagini, col nome del disegno:
 }})
Sono decorative: l'`alt` resta vuoto perche' accanto c'e' sempre la parola
che dicono, e uno screen reader che le legge direbbe due volte la stessa
cosa. */
.ico {
width: 1.3em;
height: 1.3em;
flex: 0 0 auto;
vertical-align: -0.28em;
object-fit: contain;
}
/* Sulle schede della home l'icona e' il segno che si cerca da lontano. */
.ico-grande {
width: 2.6rem;
height: 2.6rem;
vertical-align: middle;
}
/* BUTTONS */
.btn {
padding: var(--btn-padding-block) var(--btn-padding-inline);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--c-bg-light);
color: var(--c-text-dark);
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), color var(--ui-transition-fast), transform var(--ui-transition-fast);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
line-height: 1.4;
white-space: nowrap;
}
.btn:hover:not(:disabled) {
background: var(--c-border-light);
transform: translateY(-2px);
box-shadow: var(--btn-shadow-hover);
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--c-focus-ring), var(--btn-shadow-hover);
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.58;
}
.btn-primary {
background: var(--c-primary-gradient);
color: var(--c-white);
}
.btn-primary:hover:not(:disabled) {
background: var(--c-primary-gradient);
color: var(--c-white);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-success {
background: var(--c-success);
color: var(--c-white);
}
.btn-success:hover:not(:disabled) {
background: var(--c-success-dark);
color: var(--c-white);
}
.btn-danger {
background: var(--c-danger);
color: var(--c-white);
}
.btn-danger:hover:not(:disabled) {
background: var(--c-danger-dark);
color: var(--c-white);
}
.btn-warning {
background: var(--c-warning);
color: var(--c-white);
}
.btn-warning:hover:not(:disabled) {
background: var(--c-warning-dark);
color: var(--c-white);
}
.btn-secondary {
background: var(--c-text-muted);
color: var(--c-white);
}
.btn-secondary:hover:not(:disabled) {
background: var(--c-text-secondary);
color: var(--c-white);
}
.btn-info {
background: var(--c-info);
color: var(--c-white);
}
.btn-info:hover:not(:disabled) {
background: var(--c-info-dark);
color: var(--c-white);
}
.btn-light {
background: var(--c-white);
border-color: var(--c-border-mid);
color: var(--c-text-dark);
}
.btn-light:hover:not(:disabled) {
background: var(--c-bg-light);
border-color: var(--c-border);
}
.btn-outline,
.btn-outline-light,
.btn-outline-primary {
background: transparent;
border-color: var(--c-border-mid);
color: var(--c-text-dark);
}
.btn-outline:hover:not(:disabled),
.btn-outline-primary:hover:not(:disabled) {
background: var(--c-bg-light);
border-color: var(--c-border);
}
.btn-outline-primary,
.btn-outline.btn-primary,
.btn-primary.btn-outline {
border-color: var(--c-primary);
color: var(--c-primary);
}
.btn-outline-primary:hover:not(:disabled),
.btn-outline.btn-primary:hover:not(:disabled),
.btn-primary.btn-outline:hover:not(:disabled) {
background: var(--c-primary-bg-soft);
border-color: var(--c-primary);
color: var(--c-primary-dark);
}
.btn-outline.btn-danger,
.btn-danger.btn-outline {
background: transparent;
border-color: var(--c-danger-bg-pale);
color: var(--c-danger-dark);
}
.btn-outline.btn-danger:hover:not(:disabled),
.btn-danger.btn-outline:hover:not(:disabled) {
background: var(--c-danger-bg);
border-color: var(--c-danger-bg-pale);
color: var(--c-danger-dark);
}
.btn-outline-light {
border-color: rgba(255, 255, 255, 0.65);
color: var(--c-white);
}
.btn-outline-light:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.14);
border-color: var(--c-white);
color: var(--c-white);
}
.btn:active:not(:disabled) {
transform: scale(0.96);
}
/* IL PULSANTE CHE NON SEMBRA UN PULSANTE — dentro una tabella fitta un
valore su cui si puo' cliccare non puo' portarsi dietro la cornice del
browser: quaranta righe di scatolette grigie. Qui e' testo, col
sottolineato tratteggiato che dice che c'e' altro sotto.
(Era usato senza essere definito: la classe non esisteva in nessun
foglio, e il browser ci metteva del suo — bordo, fondo grigio, font di
sistema.) */
.btn-link {
display: inline;
padding: 0;
margin: 0;
background: none;
border: 0;
border-radius: 0;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
text-decoration: none;
}
.btn-link:hover,
.btn-link:focus-visible {
color: var(--c-primary-dark);
}
.btn-sm {
padding: 0.4rem 0.8rem;
font-size: 0.9rem;
}
.btn-xs {
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
}
.btn-square {
width: 34px;
height: 34px;
min-width: 34px;
padding: 0;
}
.btn-square.btn-xs {
width: 30px;
height: 30px;
min-width: 30px;
}
/* FORM */
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--c-text-secondary);
}
.form-control,
.input-base,
.form-select {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--c-border-mid);
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-family: inherit;
color: var(--c-text-dark);
transition: border-color 0.2s, box-shadow 0.2s;
background: var(--c-bg-light);
}
.form-control:focus,
.input-base:focus,
.form-select:focus,
.search-input:focus,
.search-input-sm:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-focus-ring);
background: var(--c-white);
animation: focusRing 0.2s ease;
}
.form-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
fieldset {
border: 1px solid transparent;
padding: 0;
margin: 0;
min-inline-size: 0;
transition: border-color 0.2s;
}
fieldset:focus-within {
border-color: var(--c-primary);
border-radius: var(--radius-sm);
}
/* TABLE */
.table-container,
.table-responsive {
overflow-x: auto;
margin-top: 1rem;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Quando la tabella e' piu' alta di una schermata, l'intestazione resta
attaccata in cima: senza, a meta' elenco non si sa piu' quale colonna si
sta guardando e si torna su a controllare. Serve un'altezza massima sul
contenitore perche' lo sticky abbia un riferimento. */
.table-container.tabella-alta,
.table-responsive.tabella-alta {
max-height: calc(100vh - 260px);
overflow-y: auto;
}
.table {
width: 100%;
border-collapse: collapse;
background: var(--c-white);
}
.table th {
position: sticky;
top: 0;
z-index: 2;
background: var(--c-bg-light);
padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
text-align: left;
font-weight: 600;
color: var(--c-text-muted);
/* Una riga sola, netta. Il reticolo di linee di prima litigava con i
dati per l'attenzione: la struttura la portano lo spazio e un solo
separatore. */
border-bottom: 1px solid var(--c-border-mid);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.table th.sortable {
cursor: pointer;
user-select: none;
}
.table th.sortable:hover {
background: var(--c-bg-lighter);
color: var(--c-primary-dark);
}
.table th.sortable .sort-arrow {
font-size: 0.7rem;
color: var(--c-primary);
}
.table td {
padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
border-bottom: 1px solid var(--c-border-light);
word-break: break-word;
overflow-wrap: break-word;
vertical-align: middle;
}
.table tbody tr { min-height: var(--table-riga-min); }
/* ══════════════════════════════════════════════════════════════════
LA TABELLA DA BANCO — .table-banco
E' la tabella della home della pesa promossa a stile condiviso: la
usano le pagine dove il lavoro e' tenere sotto gli occhi un documento
intero (una bolla, un registro, un confronto di prezzi), non scorrere
dieci schede. Quindici colonne per quaranta righe, e devono starci.
Cosa cambia rispetto alla tabella normale:
- **una riga e' una riga.** `word-break: break-word` sulla tabella
normale, dentro una colonna stretta, spezza "CRANCY CAT MEATYMIX"
in una parola per riga: la riga diventa alta 280px e a schermo ne
stanno due. Qui il testo non va a capo, e quello che non ci sta
finisce nei puntini, col testo intero nel `title`.
- **le colonne non si stringono per far stare la tabella nella
pagina.** Con `width: 100%` e diciassette colonne il browser
comprime le ultime a due pixel: l'ultima colonna non spariva dietro
un bordo, era larga niente. Qui la tabella si prende la larghezza
che le serve e il contenitore scorre di lato.
- i numeri a destra e a larghezza fissa, che in colonna si
confrontano a occhio;
- i righelli verticali restano, tenui: con quindici colonne aiutano a
non perdere la riga, marcati litigherebbero coi dati.
══════════════════════════════════════════════════════════════════ */
.table-banco {
width: auto;
min-width: 100%;
font-size: var(--banco-corpo, 0.78rem);
font-variant-numeric: tabular-nums;
}
.table-banco th {
padding: 4px 6px;
border-right: 1px solid var(--c-border-light);
font-size: 0.68rem;
vertical-align: bottom;
/* L'intestazione va a capo dentro la sua colonna: "MARGINE PRECEDENTE"
su una riga sola e' centotrenta pixel per una colonna da
novantadue, e quei trentotto pixel di troppo facevano comparire la
barra orizzontale su tutta la tabella. Due righe di intestazione si
leggono; una colonna spinta fuori dallo schermo no. */
white-space: normal;
overflow: hidden;
line-height: 1.15;
}
.table-banco td {
padding: var(--banco-riga-y, 3px) 6px;
border-right: 1px solid var(--c-border-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
overflow-wrap: normal;
max-width: var(--banco-cella-max, 260px);
line-height: 1.25;
}
.table-banco tbody tr { min-height: 0; }
.table-banco tbody tr:hover td { background: var(--c-cyan-bg-pale); }
/* COLONNE DECISE — quando le colonne che contano devono stare a schermo,
la larghezza non la sceglie il contenuto: la si decide, con un
, e la colonna piu' larga (la descrizione) si prende quello
che avanza. Senza questo la colonna dello stato, che e' l'unica con
del testo libero, si allargava fino a spingere il nuovo prezzo fuori
dallo schermo — e il nuovo prezzo e' il motivo per cui si e' aperta la
pagina. Il min-width tiene la tabella leggibile sui portatili: sotto
quella misura scorre, sopra ci sta tutta. */
.table-banco--colonne {
table-layout: fixed;
width: 100%;
min-width: var(--banco-min, 1300px);
}
/* Una cella che puo' andare a capo invece di allargare la colonna: il
testo libero (uno stato composto, una lista di sconti) sta su due
righe e la tabella resta larga quanto lo schermo. */
.table-banco .cella-capo {
white-space: normal;
overflow-wrap: anywhere;
}
/* LA NUVOLETTA — quello che si vuole sapere passando sopra una cella,
senza aprire niente e senza perdere il posto: si scopre col mouse e
sparisce da sola quando ci si sposta. Un modal per leggere cinque
date e' un modal da chiudere. */
.nuvoletta {
position: fixed;
z-index: var(--z-dropdown, 1050);
max-width: 30rem;
max-height: 60vh;
overflow: auto;
padding: 0.5rem 0.7rem;
background: var(--c-white);
border: 1px solid var(--c-border-mid);
border-radius: var(--radius-sm);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
font-size: 0.78rem;
pointer-events: none;
}
.nuvoletta[hidden] { display: none; }
.nuvoletta table { border-collapse: collapse; width: 100%; }
.nuvoletta th,
.nuvoletta td {
padding: 2px 6px;
white-space: nowrap;
text-align: left;
}
.nuvoletta th {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--c-text-muted);
border-bottom: 1px solid var(--c-border);
}
.nuvoletta td.num { text-align: right; font-variant-numeric: tabular-nums; }
.nuvoletta-titolo {
font-weight: 700;
margin-bottom: 0.25rem;
}
/* La cella da cui si scopre qualcosa: si vede che c'e' altro sotto. */
.table-banco .listino-storico,
.table-banco .cella-scopri {
border-bottom: 1px dotted var(--c-border-mid);
cursor: help;
}
/* Il secondo dato della cella — la percentuale accanto agli euro, il
valore che l'articolo ha oggi in anagrafica — sta sulla stessa riga,
piu' piccolo e spento: e' un riferimento, non un dato da leggere per
primo. Andare a capo raddoppiava l'altezza di ogni riga. */
.table-banco .cella-2 {
font-size: 0.9em;
color: var(--c-text-muted);
margin-left: 0.3em;
}
.table-banco .cella-2-danger { color: var(--c-danger-dark); }
/* I CAMPI DENTRO LA TABELLA — si compilano, ma non sono un modulo: una
colonna di scatolette grigie col bordo (e quaranta righe di scatolette)
e' l'aspetto di un gestionale di trent'anni fa, e ruba anche lo spazio
che serve alle cifre. Qui il campo e' il numero: fondo trasparente e un
tratteggio sotto che dice "questo si scrive". Diventa un campo per
davvero quando lo si tocca, ed e' l'unico momento in cui serve.
Niente altezza fissa: un input da 38px deciderebbe l'altezza di tutte
le righe. */
.table-banco .form-control {
width: 100%;
padding: 1px 2px;
font: inherit;
color: inherit;
height: auto;
min-height: 0;
background: transparent;
border: 0;
border-bottom: 1px dashed var(--c-border-mid);
border-radius: 0;
box-shadow: none;
text-align: right;
}
.table-banco .form-control:hover {
background: var(--c-bg-lighter);
border-bottom-color: var(--c-text-lighter);
}
.table-banco .form-control:focus,
.table-banco .form-control:focus-visible {
background: var(--c-white);
border-bottom: 1px solid var(--c-primary);
box-shadow: 0 0 0 2px var(--c-focus-ring);
outline: none;
}
.table-banco input[type="checkbox"] { margin: 0; }
/* Lo stato della riga: una parola, non una pastiglia. Quattro pastiglie
in colonna facevano da sole l'altezza della riga; il colore basta a
dire di che si tratta, e il dettaglio sta nel title. */
.table-banco .segno {
font-weight: 600;
white-space: nowrap;
}
.table-banco .segno-nuovo { color: var(--c-warning-mid); }
.table-banco .segno-agg { color: var(--c-info-darker); }
.table-banco .segno-uguale { color: var(--c-text-lighter); font-weight: 400; }
.table-banco .segno-errore { color: var(--c-danger-dark); }
.table-banco .segno-avviso {
color: var(--c-warning-mid);
cursor: help;
margin-left: 0.25em;
}
/* Il contenitore che tiene la tabella alta quanto lo schermo che resta:
la pagina non scorre, scorre la tabella. Chi lo usa deve dargli
un'altezza (o stare in un flex con min-height: 0), altrimenti
l'intestazione appiccicata non ha un riferimento. */
.banco-tabella {
flex: 1 1 auto;
min-height: 220px;
/* La barra verticale c'e' sempre, anche quando non serve: cosi' la
larghezza dentro cui la tabella misura il suo "cento per cento" e'
sempre la stessa. Con la barra che appare e sparisce, la tabella
misurava dodici pixel piu' del posto disponibile e compariva una
barra orizzontale per niente - e quei dodici pixel se li prendeva
l'ultima colonna, che e' il nuovo margine. */
overflow-x: auto;
overflow-y: scroll;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
margin-top: 0;
}
/* La riga scelta si vede anche quando il puntatore e' altrove. */
.table tbody tr.selezionata td { background: var(--c-primary-bg-pale); }
.table tbody tr.selezionata td:first-child {
box-shadow: inset 3px 0 0 var(--c-primary);
}
/* I numeri a destra, il testo a sinistra. E' la regola che risolve piu'
lamentele di "tabella disordinata" di qualunque restyling: le cifre si
allineano per posizione, e la colonna si legge dall'alto in basso invece
che parola per parola.
Vale per chi la chiede - `.text-right`, `data-num`, `.num` - cosi' si
applica dove il contenuto e' davvero un numero e non dove capita. */
.table td.text-right,
.table td[data-num],
.table td.num,
.table th.text-right,
.table th[data-num],
.table th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* I codici in monospazio: li' distinguere lo zero dalla O conta, ed e'
l'unico posto dove serve un carattere diverso. */
.table td code,
.table td .cod,
.codice {
font-family: var(--font-mono);
font-size: 0.94em;
letter-spacing: -0.01em;
}
.table tbody tr {
transition: background 0.15s;
animation: rowSlideIn 0.3s ease backwards;
}
.table tbody tr:hover {
background: var(--c-bg-lighter);
}
/* ── I filtri attivi si devono vedere ──────────────────────────────────
Una tabella filtrata identica a una non filtrata e' il modo in cui si
leggono male i dati e si prendono decisioni sbagliate. Le pastiglie
dicono cosa e' acceso, si tolgono toccandole, e accanto c'e' il conto di
quante righe sono rimaste su quante. */
.filtri-attivi {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.75rem 0 0;
}
.filtri-attivi:empty { display: none; }
.filtro-pastiglia {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.15rem 0.5rem 0.15rem 0.6rem;
border: 1px solid var(--c-primary);
border-radius: 999px;
background: var(--c-primary-bg-soft);
color: var(--c-primary-deep);
font-size: 0.78rem;
font-weight: 600;
line-height: 1.7;
cursor: pointer;
}
/* IL TASTO-FILTRO — «Tutti / Scaduti / I miei», il nome di una persona da
accendere, un reparto da scegliere. E' un interruttore, e si vede se e'
acceso: spento e' neutro, acceso e' pieno di accento. Ogni modulo aveva
la sua versione (.lav-filtro-btn, .lav-tag-chip, .turni-toggle button),
con tre gialli diversi per la stessa cosa. */
.filtro-tasto {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 32px;
padding: 0.2rem 0.7rem;
border: 1px solid var(--c-border-mid);
border-radius: 999px;
background: var(--c-white);
color: var(--c-text-dark);
font-size: 0.82rem;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
white-space: nowrap;
}
.filtro-tasto:hover { background: var(--c-bg-lighter); }
.filtro-tasto.attiva {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-white);
}
/* Lo stesso oggetto, ma che non si tocca: e' un'etichetta, non un
interruttore (i responsabili di un lavoro, visti da chi legge). */
.filtro-tasto.ferma {
cursor: default;
background: var(--c-bg-light);
font-weight: 500;
}
.filtro-pastiglia .via {
font-weight: 400;
opacity: 0.6;
font-size: 0.9em;
}
.filtro-pastiglia:hover { background: var(--c-primary-bg); }
.filtri-conto {
margin-left: auto;
font-size: 0.8rem;
color: var(--c-text-muted);
font-variant-numeric: tabular-nums;
}
.filtri-azzera {
border: 0;
background: none;
color: var(--c-text-muted);
font: inherit;
font-size: 0.78rem;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
padding: 0.15rem 0.2rem;
}
/* SEARCH BAR */
.search-input {
width: 100%;
max-width: 400px;
padding: 0.7rem 1rem;
border: 1px solid var(--c-border-mid);
border-radius: var(--radius-sm);
font-size: 0.95rem;
background: var(--c-bg-light);
transition: border-color 0.2s, box-shadow 0.2s;
}
/* ── Le viste di un modulo ─────────────────────────────────────────────
Sono lo stesso dato con un altro filtro - Attivi, Storico, Archivio -
quindi stanno accanto ai dati, non nella barra in alto insieme ai
moduli. Sottolineate, non a pastiglie: le pastiglie qui vicino sono i
filtri, e due cose che si toccano allo stesso modo devono fare la stessa
cosa. */
.viste-modulo {
display: flex;
align-items: stretch;
gap: 0.5rem;
margin: 0 0 1rem;
border-bottom: 1px solid var(--c-border);
}
.viste-linguette {
display: flex;
gap: 0.15rem;
overflow-x: auto;
scrollbar-width: none;
}
.viste-linguette::-webkit-scrollbar { display: none; }
.viste-modulo .vista {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 0.85rem;
border-bottom: 2px solid transparent;
color: var(--c-text-muted);
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
/* La linguetta puo' essere un collegamento (una vista che e' una pagina)
o un pulsante (una vista che e' un pannello della stessa pagina): il
pulsante porta con se' la cornice del browser, e va toglierla, altrimenti
le due file di linguette non si somigliano. */
.viste-modulo button.vista {
background: none;
border: 0;
border-bottom: 2px solid transparent;
font: inherit;
font-weight: 500;
cursor: pointer;
}
.viste-modulo .vista:hover { color: var(--c-text-dark); }
.viste-modulo .vista.attiva {
color: var(--c-primary-deep);
border-bottom-color: var(--c-primary);
font-weight: 600;
}
/* Quando le viste non sono pagine ma pannelli della stessa pagina (li
scambia il JS senza ricaricare), le linguette sono le stesse: chi
guarda non deve sapere se dietro c'e' un indirizzo nuovo. Il pannello
acceso e' quello con .attiva, come la linguetta. */
.pannello-vista { display: none; }
.pannello-vista.attiva { display: block; }
/* L'ingranaggio: fuori dalla fila, a destra, discreto. */
.viste-modulo .vista-config {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
/* L'ingranaggio e' l'emoji, lo stesso del Portale in alto a destra: i
suoi colori sono suoi e `color` non lo tocca. A riposo sta a colori
pieni come li' — smorzarlo lo faceva sembrare spento — e sotto il
dito cresce di un niente. */
font-size: 1.25rem;
line-height: 1;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: transform .12s ease;
}
.viste-modulo .vista-config:hover { transform: scale(1.12); }
.viste-modulo .vista-config.attiva {
border-bottom-color: var(--c-primary);
}
/* Quando le voci del modulo sono diventate linguette, la barra in alto
resta con la sola scritta del modulo: il tasto del menu non deve aprire
un cassetto vuoto. */
.navbar-container:has(.navbar-menu:empty) .navbar-toggle { display: none; }
/* MODAL */
.modal {
display: none;
position: fixed;
z-index: var(--z-modal-backdrop, 1000);
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.45);
overflow: auto;
/* Il velo non passa la spinta alla pagina sotto: arrivato in fondo,
il dito non trascina piu' il listone dietro al foglio. */
overscroll-behavior: contain;
backdrop-filter: blur(2px);
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
animation: pageFadeIn 0.25s ease;
}
/* ══════════════════════════════════════════════════════════════════════
LA PAGINA DIETRO STA FERMA.
`apriModal()` mette `overflow: hidden` sul , e finora non e'
servito a niente: piu' su c'e' `html, body { overflow-x: hidden }`, e
quando l' non e' piu' `visible` e' lui a comandare lo scorrimento
della finestra — quello del smette di contare. Il velo si
apriva e la pagina sotto continuava a scorrere come prima.
Il blocco va messo sull'. E va messo in CSS, non in JS: mezzo
portale apre i modal con `classList.add('active')` senza passare da
`apriModal()`, e quelli non avrebbero mai chiamato il blocco. Con
`:has()` il blocco segue il modal, chiunque lo apra e comunque lo
chiuda. */
html:has(.modal.active),
body:has(.modal.active) {
overflow: hidden;
overscroll-behavior: none;
}
/* Portale modal: root che si trova alla fine del . I modal
al suo interno sono isolati dagli stacking contexts delle pagine. */
#modal-root {
position: relative;
z-index: var(--z-modal-backdrop, 1000);
}
#modal-root .modal.active {
z-index: var(--z-modal, 1010);
}
.modal-content {
background-color: var(--c-white);
padding: 0;
border-radius: var(--radius-lg);
width: var(--modal-width);
max-width: var(--modal-max-width, 700px);
max-height: var(--modal-max-height, 92vh);
/* margin:auto invece del solo align-items: centrato in un contenitore
che scorre, il bordo alto finisce fuori schermo e non si raggiunge. */
margin: auto;
overflow-y: auto;
overflow-x: hidden;
box-shadow: var(--modal-shadow);
animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Scrollbar sottile nel modal */
.modal-content::-webkit-scrollbar {
width: 5px;
}
.modal-content::-webkit-scrollbar-track {
background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--c-border-mid);
border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: var(--c-text-lighter);
}
@keyframes modalSlideUp {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Modal sizing variants */
.modal-content.modal-sm {
max-width: 460px;
}
.modal-content.modal-md {
max-width: 600px;
}
.modal-content.modal-lg {
max-width: 900px;
}
.modal-content.modal-xl {
max-width: 1100px;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-light);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
position: sticky;
top: 0;
z-index: 10;
}
.modal-title {
font-size: 1.15rem;
color: var(--c-primary-dark);
font-weight: 700;
margin: 0;
line-height: 1.3;
}
.modal-body {
padding: 1.25rem 2rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Compact form inside modals */
.modal .form-label {
margin-bottom: 0.2rem;
font-size: 0.88rem;
}
.modal .form-control {
padding: 0.45rem 0.65rem;
font-size: 0.92rem;
}
.modal textarea.form-control {
resize: vertical;
min-height: 2.2rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
padding: 0.85rem 2rem;
border-top: 1px solid var(--c-border);
background: var(--c-bg-light);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
position: sticky;
bottom: 0;
z-index: 10;
flex-wrap: wrap;
}
.modal-close {
font-size: 1.35rem;
font-weight: 800;
color: var(--c-danger-dark);
cursor: pointer;
line-height: 1;
width: 34px;
height: 34px;
min-width: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s;
background: var(--c-danger-bg-light);
border: 1px solid var(--c-danger-bg);
padding: 0;
}
.modal-close:hover {
color: var(--c-white);
background: var(--c-danger);
border-color: var(--c-danger);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.22);
}
.modal-close:active {
transform: scale(0.96);
}
/* BADGES & ALERTS — shared color system */
.badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-pill);
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.01em;
}
.badge-success {
background: var(--c-success-bg);
color: var(--c-success-darker);
}
.badge-danger,
.alert-danger {
background: var(--c-danger-bg);
color: var(--c-danger-darker);
}
.badge-warning,
.alert-warning {
background: var(--c-warning-bg);
color: var(--c-warning-darker);
}
.badge-info,
.alert-info {
background: var(--c-info-bg);
color: var(--c-info-darker);
}
.badge-info {
border: 1px solid var(--c-info-bg-soft);
}
/* Verde tenue: la pastiglia che dice "di che cosa si tratta" quando la
cosa e' del Portale e non un esito (il reparto di un lavoro, il tipo di
una riga). Non e' ne' un allarme ne' un successo. */
.badge-primary {
background: var(--c-primary-bg-soft);
color: var(--c-primary-darker);
}
.badge-muted {
background: var(--c-bg-light);
color: var(--c-text-muted);
border: 1px solid var(--c-border-light);
}
.badge-neutral {
background: var(--c-bg-lighter);
color: var(--c-text-darkish);
border: 1px solid var(--c-border-mid);
font-family: 'Consolas', monospace;
font-size: 0.72rem;
}
/* Il battito era su tutte le pastiglie gialle: in una lista di venti
lavori con la priorita' media, venti pastiglie che pulsano sono un
albero di Natale, e quando pulsa tutto non pulsa niente. Ora e' una
scelta, per l'unica pastiglia che deve farsi notare. */
.badge-pulsa {
animation: badgePulse 2s ease-in-out infinite;
}
.badge--xs { font-size: 0.7rem; margin-left: 4px; }
.link-clean { color: inherit; text-decoration: none; }
/* Turni grid (modulo Ore + Turni) — celle giorno compatte */
.turni-day-label {
font-size: 0.72rem;
font-weight: 600;
margin-bottom: 2px;
}
.turni-day-select {
width: 56px;
font-size: 0.7rem;
padding: 1px 2px;
border-radius: 3px;
border: 1px solid var(--c-border-mid);
}
.alert {
padding: 1rem 1.5rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.alert-danger {
border-left: 4px solid var(--c-danger);
}
.alert-warning {
border-left: 4px solid var(--c-warning);
}
.alert-info {
border-left: 4px solid var(--c-info);
}
/* Variant compatta per liste avvisi inline */
.alert-compact {
padding: 0.4rem 0.6rem;
margin-bottom: 0.35rem;
font-size: 0.85rem;
border-radius: 5px;
}
/* TEXT UTILITIES */
.text-success {
color: var(--c-success);
}
.text-warning {
color: var(--c-warning);
}
.text-danger {
color: var(--c-danger);
font-weight: bold;
}
/* DATE INDICATORS */
.date-ok {
color: var(--c-success-dark);
font-weight: bold;
}
.date-overdue {
color: var(--c-danger-dark);
font-weight: bold;
}
.date-na {
color: var(--c-text-muted);
}
/* EMPTY STATES */
.error-state {
text-align: center;
padding: 1rem 0;
color: var(--c-danger);
}
.empty-state--success {
text-align: center;
color: var(--c-success);
}
/* CARD HEADER WITH ACTIONS */
.card-header-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.card-header-actions .card-title {
margin: 0;
}
/* SEARCH DROPDOWN */
.search-dropdown-wrap {
position: relative;
}
.search-dropdown {
display: block;
position: absolute;
z-index: var(--z-modal-backdrop);
background: white;
border: 1px solid var(--c-border-mid);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
margin-top: 4px;
width: 100%;
}
.search-dropdown-item {
padding: 0.75rem 1rem;
cursor: pointer;
border-bottom: 1px solid var(--c-border);
transition: background 0.2s;
word-wrap: break-word;
overflow-wrap: break-word;
}
.search-dropdown-item:hover {
background: var(--c-border-light);
}
.search-dropdown-item:last-child {
border-bottom: none;
}
.search-dropdown-empty {
padding: 1rem;
color: var(--c-text-muted);
text-align: center;
}
/* FORM HINTS */
.form-hint {
font-size: 0.85rem;
color: var(--c-text-muted);
display: block;
margin-top: 0.25rem;
}
/* TIMELINE */
.timeline-entry {
position: relative;
padding-bottom: 2rem;
animation: timelineSlideIn 0.4s ease backwards;
}
.timeline-entry--connected {
border-left: 3px solid var(--c-text-muted);
}
.timeline-dot {
position: absolute;
left: -8px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid white;
background: var(--c-text-muted);
}
.timeline-card {
margin-left: 1.5rem;
background: white;
padding: 1rem;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.timeline-title {
font-weight: bold;
color: var(--c-text-muted);
}
.timeline-date {
color: var(--c-text-muted);
font-size: 0.875rem;
}
.timeline-body {
margin: 0.5rem 0;
color: var(--c-text-secondary);
}
.timeline-meta {
display: flex;
gap: 1rem;
font-size: 0.875rem;
color: var(--c-text-muted);
margin-top: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.timeline-notes {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--c-border);
}
.timeline-notes-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--c-text-muted);
margin-bottom: 0.5rem;
}
.timeline-notes-text {
padding-left: 0.75rem;
border-left: 2px solid var(--c-border-mid);
font-size: 0.875rem;
color: var(--c-text-secondary);
white-space: pre-wrap;
}
/* BUTTON ICON */
.btn-icon {
padding: 0.25rem 0.5rem;
font-size: 1.1rem;
border: none;
background: transparent;
cursor: pointer;
transition: transform 0.2s;
}
.btn.btn-icon:hover:not(:disabled),
.btn-icon:hover {
transform: scale(1.2);
box-shadow: none;
}
.btn-icon.btn-danger:hover {
color: var(--c-danger);
}
/* STATS CARDS */
.stats-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.5rem;
}
.stat-card {
background: white;
padding: 1.25rem 1.5rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
border: 1px solid var(--c-border);
border-left: 4px solid var(--c-primary);
flex: 1 1 150px;
min-width: 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-label {
color: var(--c-text-muted);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.stat-value {
font-size: 2rem;
font-weight: bold;
color: var(--c-text-darkest);
transition: transform 0.3s;
}
.stat-card:hover .stat-value {
transform: scale(1.05);
}
/* LOADING */
.loading,
.loading-state {
text-align: center;
padding: 2rem;
color: var(--c-text-muted);
}
.loading::after,
.loading-state::after {
content: '';
display: inline-block;
width: var(--loading-size);
height: var(--loading-size);
border: var(--loading-border-width) solid var(--c-border-mid);
border-top-color: var(--c-primary);
border-radius: 50%;
animation: spin 0.6s linear infinite;
margin-left: 0.5rem;
vertical-align: middle;
}
.spinner,
.spinner-sm {
display: inline-block;
width: var(--loading-size);
height: var(--loading-size);
border: var(--loading-border-width) solid var(--c-border-mid);
border-top-color: var(--c-primary);
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
}
.spinner-sm {
width: 16px;
height: 16px;
}
.is-loading,
[aria-busy="true"] {
cursor: wait;
}
.btn.is-loading,
.btn[aria-busy="true"] {
pointer-events: none;
opacity: 0.72;
}
.btn.is-loading::before,
.btn[aria-busy="true"]::before {
content: '';
width: 1em;
height: 1em;
border: var(--loading-border-width) solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
/* RICAMBI ROW (manutenzione) */
.ricambio-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr auto;
gap: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.5rem;
background-color: white;
border: 1px solid var(--c-border-grey);
border-radius: 4px;
align-items: start;
}
/* MANUTENZIONE BUTTONS */
.manutenzione-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.manutenzione-buttons .btn {
width: 100%;
}
/* HOMEPAGE CARDS */
/* I numeri di riepilogo: una striscia, non dieci manifesti.
Erano dieci riquadri da centosessanta pixel l'uno: 590 px di schermo per
dieci numeri, e il primo ordine compariva sotto la piega. Sono numeri che
si guardano di sfuggita e si toccano per filtrare - quindi stanno in
fila, piccoli, e la lista comincia subito sotto.
Sotto i 760px diventa una striscia che scorre di lato: la regola sta in
60-responsive, non in compatto.css, perche' questa striscia la vedono
tutti i moduli e non solo quelli che caricano il foglio del telefono. */
.home-grid,
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 1px;
background: var(--c-border);
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
overflow: hidden;
margin: 0 0 1rem;
}
.home-card {
background: var(--c-white);
padding: 0.5rem 0.75rem 0.6rem;
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.1rem;
cursor: pointer;
text-decoration: none;
color: inherit;
position: relative;
min-height: 58px;
}
.home-card:hover { background: var(--c-bg-lighter); }
/* Il riquadro acceso e' quello su cui si sta filtrando: si vede da una
riga sotto, non da un'ombra. */
.home-card.stat-card-active {
background: var(--c-primary-bg-pale);
box-shadow: inset 0 -3px 0 var(--c-primary);
}
/* L'icona non serve a distinguere un numero da un altro: lo fa la parola.
Dieci emoji in fila erano un albero di Natale. */
.home-card-icon { display: none; }
.home-card-info {
min-width: 0;
}
/* Nella striscia il nome sta sopra, piccolo, e la cifra sotto, grande:
in colonna fra un riquadro e l'altro i numeri si confrontano a occhio. */
.home-card-title {
order: 1;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--c-text-muted);
margin: 0;
line-height: 1.25;
/* Due righe al massimo, poi taglia: "Ordini Attivi" ridotto a "O..."
non e' un'etichetta, e in 132px ci sta per intero. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
}
/* La riga di spiegazione sotto il nome non serve nella striscia: il nome
e' gia' la spiegazione, e ripeterla raddoppiava l'altezza. */
.home-card-desc { display: none; }
.home-card-count {
order: 2;
font-size: 1.5rem;
font-weight: 700;
color: var(--c-text-darkest);
line-height: 1.05;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* I moduli che scrivono la riga di numeri con .stat-card (venti pagine)
entrano nella stessa striscia: il riquadro bianco con l'ombra e il bordo
colorato, dentro una griglia da un pixel di stacco, diventava un
francobollo per numero. La cornice la fa la striscia; il riquadro no. */
.stats-grid > .stat-card {
background: var(--c-white);
padding: 0.5rem 0.75rem 0.6rem;
border: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
min-width: 0;
max-width: none;
min-height: 58px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.1rem;
transition: background 0.15s;
}
.stats-grid > .stat-card:hover {
transform: none;
box-shadow: none;
background: var(--c-bg-lighter);
}
.stats-grid > .stat-card[data-action],
.stats-grid > .stat-card[data-navigate],
.stats-grid > .stat-card[onclick] {
cursor: pointer;
}
.stats-grid > .stat-card.stat-card-active {
background: var(--c-primary-bg-pale);
box-shadow: inset 0 -3px 0 var(--c-primary);
transform: none;
}
.stats-grid > .stat-card > .stat-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--c-text-muted);
margin: 0;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.stats-grid > .stat-card > .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--c-text-darkest);
line-height: 1.05;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
transition: none;
}
.stats-grid > .stat-card:hover > .stat-value {
transform: none;
}
/* La terza riga di un riquadro della striscia: da dove viene il numero.
Serve dove il numero e' un totale che si scompone ("articoli 1.203 +
spedizioni 84"), e in quel caso e' un dato, non una decorazione. */
.stats-grid > .stat-card > .stat-sub {
font-size: 0.68rem;
color: var(--c-text-lighter);
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Riquadri col segno: entra, esce, e il totale che conta. Il colore non
dice il valore (quello lo dice la cifra) ma di che natura e' la voce,
ed e' l'unico modo per leggere una fila di dieci numeri contabili
senza rileggere ogni etichetta. */
.stats-grid > .stat-card.stat-pos { background: var(--c-success-bg-mint); }
.stats-grid > .stat-card.stat-neg { background: var(--c-danger-bg-light); }
.stats-grid > .stat-card.stat-forte {
background: var(--c-info-bg);
box-shadow: inset 0 -3px 0 var(--c-info);
}
.home-card-count--arrow {
color: var(--c-border-mid);
font-size: 1.8rem;
font-weight: 300;
}
.home-card-sub {
font-size: 0.72rem;
color: var(--c-text-muted);
margin-top: 0.15rem;
}
/* ==================== I MODULI, DA UN MODULO ALL'ALTRO ====================
Il markup e' uno (templates/_barra_moduli.html) e ha sempre i nomi scritti.
Dove finisce lo decide `data-barra` sull'elemento radice, che scrive
js/barra.js su scelta fatta in Utilita':
- `alto` (predefinito): dentro il pannello del pulsante «Moduli», a
griglia. Una fila di sole icone nella banda e' stata provata e buttata:
venticinque disegnini senza nome non li legge nessuno;
- `lato`: la colonna a sinistra, una voce per riga, col pulsante che
sparisce perche' l'elenco e' gia' li'. */
.barra-moduli {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.barra-modulo {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.6rem;
border-radius: var(--radius-sm);
color: var(--c-text);
font-size: 0.86rem;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.barra-modulo:hover { background: var(--c-bg-lighter); }
.barra-modulo.attivo {
background: var(--c-primary-bg-soft);
color: var(--c-primary-dark);
font-weight: 600;
}
.barra-modulo-icona {
width: 1.4rem;
font-size: 1.05rem;
text-align: center;
}
/* Il nome e' la parte che si legge: se il posto non basta si accorcia lui,
invece di allargare la colonna o mandare a capo. */
.barra-modulo-nome {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* L'INGRANAGGIO DELLA CONFIGURAZIONE — icona sola, ultima voce.
La parola "Configurazione" si prendeva lo spazio delle pagine che si
aprono ogni giorno, per una che si apre due volte l'anno. Resta l'icona,
con un bersaglio quadrato perche' da sola sarebbe larga sedici pixel. */
.navbar-voce-ingranaggio > a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
}
/* Il ritorno al Portale sta con gli altri ma non e' un modulo: si stacca. */
.barra-modulo-casa {
font-weight: 600;
border-bottom: 1px solid var(--c-border-light);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
margin-bottom: 0.15rem;
padding-bottom: 0.4rem;
}
/* Il pulsante «Moduli» sta accanto al ritorno al Portale, e le voci del
modulo vanno a destra: sono due navigazioni diverse e si vede. */
.navbar-lanciatore {
position: relative;
margin-left: 1.6rem;
margin-right: auto;
}
.navbar-lanciatore > a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
border-radius: var(--radius-sm);
color: var(--c-white);
font-weight: 500;
line-height: 1.15;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease;
}
.navbar-lanciatore > a:hover { background: rgba(255, 255, 255, 0.15); }
/* --- in alto: il pannello del pulsante «Moduli» --- */
.navbar-submenu-griglia {
right: auto;
left: 0;
min-width: 34rem;
max-width: min(52rem, calc(100vw - 2rem));
max-height: 70vh;
overflow-y: auto;
padding: 0.5rem;
}
.navbar-submenu-griglia .barra-moduli {
display: grid;
grid-template-columns: repeat(3, minmax(9.5rem, 1fr));
gap: 0.1rem 0.35rem;
}
.navbar-submenu-griglia .barra-modulo-casa { grid-column: 1 / -1; }
@media (max-width: 700px) {
.navbar-submenu-griglia { min-width: 0; }
.navbar-submenu-griglia .barra-moduli { grid-template-columns: 1fr 1fr; }
}
/* --- di lato: la colonna a sinistra --- */
:root[data-barra="lato"] .navbar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 12.5rem;
padding: 0.8rem 0.5rem;
overflow-y: auto;
overscroll-behavior: contain;
}
:root[data-barra="lato"] .navbar-container {
flex-direction: column;
align-items: stretch;
gap: 0.45rem;
max-width: none;
flex-wrap: nowrap;
}
:root[data-barra="lato"] .navbar-brand {
font-size: 1.15rem;
padding: 0 0.35rem 0.3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
:root[data-barra="lato"] .navbar-menu {
flex-direction: column;
align-items: stretch;
gap: 0.15rem;
}
:root[data-barra="lato"] .navbar-menu a { justify-content: flex-start; }
/* L'elenco dei moduli viene prima delle voci del modulo, e non e' piu' un
pannello a tendina: e' la colonna. */
:root[data-barra="lato"] .navbar-lanciatore {
margin-right: 0;
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
:root[data-barra="lato"] .navbar-lanciatore > a { display: none; }
:root[data-barra="lato"] .navbar-submenu-griglia,
:root[data-barra="lato"] .navbar-submenu-griglia.open {
display: block;
position: static;
min-width: 0;
max-height: none;
padding: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
:root[data-barra="lato"] .navbar-submenu-griglia .barra-modulo {
color: rgba(255, 255, 255, 0.85);
}
:root[data-barra="lato"] .navbar-submenu-griglia .barra-modulo:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--c-white);
}
:root[data-barra="lato"] .navbar-submenu-griglia .barra-modulo.attivo {
background: rgba(255, 255, 255, 0.2);
color: var(--c-white);
}
:root[data-barra="lato"] .barra-modulo-casa {
border-bottom-color: rgba(255, 255, 255, 0.18);
}
/* Il contenuto si sposta di quanto e' larga la colonna: sul body, cosi'
seguono anche le linguette, il banner del cluster e tutto il resto. */
:root[data-barra="lato"] body { padding-left: 12.5rem; }
/* Su schermo stretto la colonna non ci sta: si torna in alto da soli,
qualunque sia la scelta. */
@media (max-width: 900px) {
:root[data-barra="lato"] .navbar {
position: sticky;
top: 0;
left: auto;
bottom: auto;
width: auto;
padding: 0.75rem 1rem;
overflow: visible;
}
:root[data-barra="lato"] .navbar-container {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
:root[data-barra="lato"] .navbar-brand {
border-bottom: 0;
padding: 0;
}
:root[data-barra="lato"] .navbar-menu {
flex-direction: row;
align-items: center;
}
:root[data-barra="lato"] .navbar-lanciatore {
margin-right: auto;
border-bottom: 0;
padding-bottom: 0;
}
:root[data-barra="lato"] .navbar-lanciatore > a { display: inline-flex; }
:root[data-barra="lato"] .navbar-submenu-griglia {
position: absolute;
display: none;
min-width: 0;
padding: 0.5rem;
background: var(--c-white);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
max-height: 70vh;
overflow-y: auto;
}
:root[data-barra="lato"] .navbar-submenu-griglia.open { display: block; }
:root[data-barra="lato"] .navbar-submenu-griglia .barra-modulo {
color: var(--c-text);
}
:root[data-barra="lato"] body { padding-left: 0; }
}
/* In stampa la navigazione non c'entra niente. */
@media print {
.navbar-lanciatore { display: none; }
:root[data-barra="lato"] body { padding-left: 0; }
}
/* RESPONSIVE - TABLET */
@media (max-width: 1024px) {
.container {
padding: 0 1rem;
margin: 1rem auto;
}
/* La striscia dei numeri si sistema da sola con auto-fit: qui non
serve ne' imporre due colonne ne' rimettere lo stacco fra i
riquadri, che nella striscia e' il separatore da un pixel. */
.table th, .table td {
padding: 0.6rem 0.5rem;
font-size: 0.85rem;
}
.modal-content {
width: 90%;
max-width: 600px;
margin: 1.5rem auto;
}
.card {
padding: 1rem;
}
.card-title {
font-size: 1.15rem;
}
.ricambio-row {
grid-template-columns: 2fr 1fr 1fr auto;
gap: 0.4rem;
}
.manutenzione-buttons {
gap: 0.75rem;
}
}
/* RESPONSIVE - MOBILE (smartphone moderni: 360-430px CSS width) */
@media (max-width: 768px) {
.navbar {
padding: 0.6rem 0.75rem;
}
.navbar-toggle {
display: block;
}
.navbar-brand {
font-size: 1.1rem;
}
.navbar-menu {
display: none;
flex-direction: column;
width: 100%;
gap: 0;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255,255,255,0.2);
}
.navbar-container.menu-open .navbar-menu {
display: flex;
}
.navbar-menu li {
padding: 0.3rem 0;
}
.navbar-menu a {
display: flex;
align-items: center;
padding: 0.5rem 0;
font-size: 0.95rem;
min-height: 44px;
}
.navbar-menu a.active {
padding: 0.5rem 0.5rem;
}
.navbar-menu a.navbar-tile,
.navbar-menu a.navbar-tile.active {
width: 100%;
min-width: 0;
min-height: 44px;
flex-direction: row;
justify-content: flex-start;
gap: 0.55rem;
padding: 0.5rem 0.65rem;
text-align: left;
}
.magazzino-tabs {
flex-wrap: wrap;
padding: 0 0.25rem;
}
.magazzino-tab {
padding: 0.55rem 0.85rem;
font-size: 0.85rem;
}
.container {
padding: 0 0.5rem;
margin: 0.75rem auto;
}
.card {
padding: 0.75rem;
margin-bottom: 0.75rem;
border-radius: 10px;
}
/* ══════════════════════════════════════════════════════════════════
IL CONTORNO SI STRINGE — sul telefono lo schermo e' del contenuto.
Misurato su un telefono da 390x844: in Lavori il primo lavoro
cominciava a 525px, in Consegne Legna il primo ordine a 469px. Piu'
di meta' schermo era contorno: il titolo della pagina col suo
sottotitolo, la striscia dei numeri, e soprattutto la fila dei
filtri che andando a capo diventava tre righe dentro una card con
la sua cornice.
Il titolo si stringe, i filtri e i tasti stanno in una riga sola
che scorre di lato (come la striscia dei numeri: si scorrono col
pollice e restano tutti raggiungibili), e la card che contiene solo
i filtri non aggiunge la propria cornice. */
.card-gradient {
padding: 0.15rem 0 0.45rem;
margin-bottom: 0.5rem;
}
.card-gradient .card-title,
.card-gradient .card-title-white {
font-size: 1.1rem;
margin-bottom: 0.1rem;
}
.card-gradient .card-subtitle,
.card-gradient .card-subtitle-white {
font-size: 0.76rem;
margin: 0;
/* La spiegazione serve a chi arriva la prima volta: due righe al
massimo, poi si taglia. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Una riga sola che scorre, invece di tre righe che vanno a capo. */
.filtri-bar,
.card-header-actions .u-flex,
.card-header-actions .d-flex {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 0.15rem;
}
.filtri-bar::-webkit-scrollbar,
.card-header-actions .u-flex::-webkit-scrollbar,
.card-header-actions .d-flex::-webkit-scrollbar { display: none; }
.filtri-bar > *,
.card-header-actions .u-flex > *,
.card-header-actions .d-flex > * { flex: 0 0 auto; }
/* Il campo di ricerca e' l'unico che vale la sua riga: e' quello che
si usa piu' di tutti, e mezzo campo non si scrive. */
.filtri-bar input[type="search"],
.filtri-bar input[type="text"],
.card-header-actions .u-flex > input[type="search"],
.card-header-actions .u-flex > input[type="text"] {
flex: 1 0 12rem;
min-width: 12rem;
}
/* La card che contiene soltanto la fila dei filtri non e' una card:
e' una barra. Senza la sua cornice si guadagnano trenta pixel. */
.card:has(> .card-header-actions):not(:has(table)):not(:has(.stats-grid)) {
padding: 0.5rem;
margin-bottom: 0.5rem;
}
/* LA BARRA DELLE AZIONI di una lista — ricerca, filtri e il tasto che
apre la cosa nuova. E' scritta come `.card > .page-header-flex`, e
sul telefono diventava tre righe dentro una card con la sua cornice:
194px in Lavori, 298px in Magazzino, prima di vedere il primo dato.
Qui e' una riga sola che scorre di lato, e la card intorno smette di
fare la card: e' una barra. */
.card > .page-header-flex,
.card > .card-header-actions {
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0.4rem;
margin-bottom: 0;
}
.card > .page-header-flex::-webkit-scrollbar,
.card > .card-header-actions::-webkit-scrollbar { display: none; }
.card > .page-header-flex > *,
.card > .card-header-actions > * { flex: 0 0 auto; }
.card > .page-header-flex .d-flex,
.card > .page-header-flex .u-flex,
.card > .card-header-actions .d-flex,
.card > .card-header-actions .u-flex {
flex-wrap: nowrap;
gap: 0.4rem;
}
/* La ricerca resta larga da scriverci dentro - undici rem sono
"Cerca articolo..." per intero - e il resto scorre. Prima ogni campo
si prendeva una riga tutta sua (`flex: 1 1 100%`): con due ricerche,
una tendina e quattro pastiglie facevano duecento pixel. */
.card > .page-header-flex input[type="text"],
.card > .page-header-flex input[type="search"],
.card > .page-header-flex select,
.card > .card-header-actions input[type="text"],
.card > .card-header-actions input[type="search"],
.card > .card-header-actions select {
flex: 0 1 11rem;
width: auto;
min-width: 9rem;
max-width: none;
}
/* I gruppi dentro la barra restano in fila anche loro: il campo col suo
tasto, la tendina che suggerisce, le pastiglie dei filtri. */
.card > .page-header-flex .cp-campo-azione,
.card > .page-header-flex .ac-wrap,
.card > .page-header-flex .cp-filtri,
.card > .card-header-actions .cp-campo-azione,
.card > .card-header-actions .ac-wrap,
.card > .card-header-actions .cp-filtri {
flex: 0 0 auto;
flex-wrap: nowrap;
min-width: 0;
}
.card > .page-header-flex .cp-campo-azione > input,
.card > .card-header-actions .cp-campo-azione > input {
flex: 0 1 11rem;
min-width: 9rem;
}
/* IL TASTO CHE APRE LA COSA NUOVA NON SCORRE VIA. La barra scorre di
lato, ma "+ Nuovo ordine" e' il motivo per cui si apre quella
pagina: appiccicato al bordo destro resta sempre sotto il pollice.
Senza questo, dopo aver stretto la barra in una riga sola, il tasto
finiva oltre il bordo e non lo si trovava piu'. */
.card > .page-header-flex > .btn-primary,
.card > .page-header-flex > .btn-success,
.card > .card-header-actions > .btn-primary,
.card > .card-header-actions > .btn-success {
position: sticky;
right: 0;
z-index: 1;
box-shadow: -10px 0 10px -6px rgba(0, 0, 0, 0.18);
}
/* MA NON DEVE COPRIRE IL RESTO. Appiccicato sopra una barra che scorre,
il tasto si mangiava quello che gli passava sotto: in Fitofarmaci la
ricerca sembrava tagliata a metà e i due tasti «Esporta Metodo» e
«Stato Metodo» erano invisibili, senza niente che dicesse che c'erano.
Quando i filtri stanno in un gruppo loro **e' quel gruppo a scorrere**,
e il tasto sta fuori, alla sua destra: si vede tutta la ricerca, i
tasti nascosti si scoprono scorrendo la striscia, e nulla finisce
sotto il verde. La barra resta pronta a scorrere lei per i casi
stretti (in ordini, dove accanto al tasto ce n'e' un secondo), ma il
tasto non e' piu' appiccicato: meglio scorrere fino a trovarlo che
vederselo sopra le altre cose. Dove i filtri sono figli diretti della
barra, senza un gruppo, non cambia niente. */
.card > .page-header-flex:has(> .d-flex, > .u-flex) > .btn-primary,
.card > .page-header-flex:has(> .d-flex, > .u-flex) > .btn-success,
.card > .card-header-actions:has(> .d-flex, > .u-flex) > .btn-primary,
.card > .card-header-actions:has(> .d-flex, > .u-flex) > .btn-success {
position: static;
box-shadow: none;
}
.card > .page-header-flex > .d-flex,
.card > .page-header-flex > .u-flex,
.card > .card-header-actions > .d-flex,
.card > .card-header-actions > .u-flex {
flex: 1 1 auto;
/* Sotto le otto rem la ricerca non e' piu' una ricerca: si vedono tre
lettere. Se il resto non ci sta e' la barra a scorrere, non il
campo a sparire. */
min-width: 8rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.card > .page-header-flex > .d-flex::-webkit-scrollbar,
.card > .page-header-flex > .u-flex::-webkit-scrollbar,
.card > .card-header-actions > .d-flex::-webkit-scrollbar,
.card > .card-header-actions > .u-flex::-webkit-scrollbar { display: none; }
/* Una card che contiene solo la barra non aggiunge la sua cornice. */
.card:has(> .page-header-flex):not(:has(table)):not(:has(.stats-grid)):not(:has(.cp-lista)) {
padding: 0.4rem 0.5rem;
margin-bottom: 0.5rem;
border-radius: 8px;
}
/* Le linguette e la striscia dei numeri: un filo piu' basse. */
.viste-modulo { margin-bottom: 0.5rem; }
.viste-modulo .vista { min-height: 36px; }
.stats-grid > *,
.home-grid > * { min-height: 46px; }
.card-title {
font-size: 1.05rem;
margin-bottom: 0.5rem;
}
.form-row {
flex-direction: column;
}
/* 16px previene zoom automatico iOS su focus input */
.form-control {
font-size: 16px;
padding: 0.45rem 0.6rem;
}
.table-container,
.table-responsive {
font-size: 0.82rem;
margin-top: 0.5rem;
}
.table th, .table td {
padding: 0.4rem 0.3rem;
font-size: 0.82rem;
}
/* Variante opt-in: ogni td espone data-label e diventa una riga-card. */
.table-responsive--cards {
overflow: visible;
}
.table-responsive--cards .table thead {
display: none;
}
.table-responsive--cards .table,
.table-responsive--cards .table tbody,
.table-responsive--cards .table tr,
.table-responsive--cards .table td {
display: block;
width: 100%;
}
.table-responsive--cards .table tr {
margin-bottom: 0.75rem;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
background: var(--c-white);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.table-responsive--cards .table td {
display: grid;
grid-template-columns: minmax(7rem, 38%) 1fr;
gap: 0.75rem;
text-align: right;
}
.table-responsive--cards .table td::before {
content: attr(data-label);
color: var(--c-text-muted);
font-weight: 600;
text-align: left;
}
/* Nasconde colonne non essenziali su mobile */
.hide-mobile {
display: none !important;
}
/* Card header actions - stack vertically */
.card-header-actions {
flex-direction: column;
gap: 0.4rem;
align-items: stretch;
}
/* Le file di filtri e di pulsanti vanno a capo invece di uscire dallo
schermo: su un telefono sei controlli con la loro misura minima
fanno seicento pixel, e l'ultimo finiva oltre il bordo destro
insieme a "Nuovo ordine". */
.card-header-actions .u-flex,
.card-header-actions .d-flex,
.filtri-bar {
flex-wrap: wrap;
gap: 0.4rem;
}
.card-header-actions .u-flex > .form-control,
.card-header-actions .u-flex > label {
flex: 1 1 auto;
}
/* Page header flex (title + button) → stack */
.page-header-flex {
flex-direction: column;
gap: 0.4rem;
align-items: stretch;
}
/* LA RIGA DEI NUMERI SUL TELEFONO — una striscia che scorre di lato.
Andando a capo, dieci numeri diventavano quattro righe: mezzo
schermo speso prima di vedere il primo ordine. In fila si scorrono
col pollice, e la lista comincia subito sotto. Sta qui e non in
compatto.css perche' la riga di numeri ce l'hanno tutti i moduli,
anche quelli che non caricano il foglio del telefono. */
.home-grid,
.stats-grid {
display: flex;
grid-template-columns: none;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.home-grid::-webkit-scrollbar,
.stats-grid::-webkit-scrollbar { display: none; }
.home-grid > *,
.stats-grid > * {
flex: 0 0 auto;
width: 116px;
max-width: none;
scroll-snap-align: start;
}
.home-card-icon {
font-size: 1.3rem;
}
.home-card-info {
min-width: 0;
overflow: hidden;
}
.home-card-title {
font-size: 0.88rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-card-desc {
font-size: 0.68rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-card-count {
font-size: 1.2rem;
min-width: 28px;
text-align: right;
}
.home-card-count--arrow {
font-size: 1.1rem;
}
/* ══════════════════════════════════════════════════════════════════
IL MODAL SUL TELEFONO — un foglio che sale dal basso.
Vale per **tutti** i modal, non solo per le pagine che caricano il
foglio del telefono: se sono tutti figli dello stesso modal, sul
telefono si devono comportare tutti allo stesso modo. Prima non era
cosi': dieci template dichiaravano `.compatto` e i loro modal
diventavano un foglio dal basso con la maniglia, il piede
appiccicato e una colonna sola; tutti gli altri restavano un
riquadro da scrivania rimpicciolito al 98% della larghezza, con i
campi affiancati a centosettanta pixel l'uno.
══════════════════════════════════════════════════════════════════ */
.modal.active,
.modal:not(.hidden) {
align-items: flex-end;
padding: 0;
}
.modal-content,
.modal-content.modal-sm,
.modal-content.modal-md,
.modal-content.modal-lg,
.modal-content.modal-xl {
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
/* Non 100vh: sopra resta una striscia di velo, che dice che sotto
c'e' ancora la pagina e si puo' tornare indietro. */
max-height: 92vh;
margin: 0;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
/* ══════════════════════════════════════════════════════════════════
IL FORM IN MEZZO — perche' i modal non scorrevano.
Meta' dei modal del portale (sopralluoghi, robot, clienti, ricambi,
utenti...) infilano un