/* Brand KiLuggage operatore: blu Poste #0047BB + giallo. Mobile-first, tocco a pollice. */
:root {
--kl-blue: #0047BB;
--kl-blue-dark: #00337f;
--kl-yellow: #FFD200;
--kl-bg: #f4f6fa;
--kl-text: #1a2230;
--kl-muted: #6b7280;
--kl-radius: 14px;
}
html, body {
margin: 0;
background: var(--kl-bg);
color: var(--kl-text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
}
/* ---- Shell autenticata ---- */
/* Full-width responsive (mockup): il contenuto si vincola via .kl-content/.kl-topbar-inner. */
.kl-shell {
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--kl-bg);
position: relative;
}
.kl-topbar {
background: var(--kl-blue);
color: #fff;
padding: 16px 16px 14px;
padding-top: max(16px, env(safe-area-inset-top));
position: sticky;
top: 0;
z-index: 10;
}
/* Tre zone come da mockup: titolo+sede | logo centrato | utente/azioni */
.kl-topbar-inner {
max-width: 1140px; margin: 0 auto;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
}
.kl-topbar-left { display: flex; align-items: center; gap: 12px; }
.kl-back {
/* font-size e line-height non servono piu': l'icona e' dimensionata in px qui sotto. */
color: #fff; text-decoration: none;
padding: 6px 10px; border-radius: 8px;
}
.kl-back:active { background: rgba(255,255,255,.15); }
/* La freccia back e' un chevron di KlIcon: `display: block` perche' nell'anchor non c'e' testo,
e un inline-block resterebbe appoggiato alla linea di base lasciando sotto lo spazio del
descender. */
.kl-back .kl-ico { display: block; width: 24px; height: 24px; }
.kl-topbar-title { font-weight: 800; font-size: 1.25rem; line-height: 1.15; color: #fff; }
.kl-topbar-loc { font-size: .85rem; font-weight: 600; margin-top: 8px; white-space: nowrap; color: #fff; }
/* Il colore e la misura del testo qui servono ancora: sono l'aspetto del fallback (l'alt
dell'immagine) se il file del logo non caricasse. */
.kl-logo { font-size: 1.15rem; justify-self: center; color: #fff; text-decoration: none; }
/* Altezza fissa e larghezza in proporzione: il file e' 250x89 (marchio col sottotitolo), a 44px
viene 124x44, cioe' un po' piu' della scritta che c'era prima (95x34). `display: block` perche'
nell'anchor non c'e' testo: un'immagine inline si appoggerebbe alla linea di base lasciando
sotto lo spazio del descender. */
.kl-logo img { display: block; height: 44px; width: auto; }
.kl-userchip {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.18); border-radius: 10px;
padding: 9px 16px; font-size: .95rem; font-weight: 700; white-space: nowrap;
}
/* Il chip col nome resta nascosto fino a 1000px, non solo su telefono. Nella fascia dei tablet i
minimi dei tre blocchi non stavano nella barra: il blocco di sinistra non si comprime sotto il
nome della sede (che e' `white-space: nowrap`, ~230px) piu' la freccia, il logo e' fisso e le
azioni sono anch'esse nowrap. Misurato a 753px, tablet in portrait: 121px di sfondamento col
chip, 0 senza. La soglia e' 1000 e non ~880 perche' `UserLabel` ricade sull'email dai claim
quando il profilo non ha il nome, e un'email allarga il chip di un altro centinaio di pixel. */
@media (max-width: 1000px) { .kl-userchip { display: none; } }
/* Fascia fra il telefono e il desktop (561-720px, tipico di un tablet piccolo o di una finestra
ridimensionata): la barra resta a una riga, ma i due testi di sinistra devono poter cedere.
Con la sede a `nowrap` il blocco di sinistra non scendeva sotto ~297px e i tre blocchi non
stavano nella barra: a 600px erano 124px di sfondamento, e il logo piu' grande peggiorava di
40px un difetto che c'era gia'. Cosi' il minimo di sinistra scende a ~104px e la riga sta. */
/* Il logo centrato sparisce sotto i 680px: a quelle larghezze i suoi 124px sono la differenza
fra una barra che sta e una che sfora (a 561px il resto occupa 452px su 529 disponibili), e il
brand e' comunque nell'icona della PWA. Da 681 in su resta con ~73px di margine. */
@media (max-width: 680px) { .kl-logo { display: none; } }
@media (max-width: 720px) {
.kl-topbar-loc { white-space: normal; }
.kl-topbar-title { overflow-wrap: break-word; }
}
@media (max-width: 560px) {
/* Top bar su due righe (decisione utente 2026-08-20): riga 1 freccia + titolo + badge
operazione, riga 2 sede + toggle apertura + Esci. Con la griglia a tre zone del desktop
a 375px servivano 663px contro i 343 utili: badge, toggle sede ed Esci finivano fuori
dalla barra, quindi irraggiungibili col dito.
`display: contents` scioglie i raggruppamenti pensati per il desktop, cosi' i singoli
pezzi diventano celle di questa griglia senza duplicare il markup. */
.kl-topbar-left, .kl-topbar-titlebox { display: contents; }
/* Il selettore col figlio non e' un vezzo: la regola base di .kl-topbar-right (display: flex)
sta piu' in basso in questo foglio, quindi a pari specificita' vincerebbe per ordine di
sorgente e le azioni resterebbero tutte incollate sulla prima riga. */
.kl-topbar-inner > .kl-topbar-right { display: contents; }
.kl-topbar-inner {
/* minmax(0, 1fr) e non 1fr: altrimenti la colonna non scende sotto la parola piu' lunga
del titolo e sotto i 360px tornava a spingere Esci fuori dalla barra. */
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas:
"back titolo badge badge"
"sede sede toggle esci";
/* Nessun column-gap: senza freccia (Dashboard) la prima colonna collassa a zero e il
titolo resta incolonnato con la sede. Lo stacco fra le azioni lo danno i margini qui
sotto, e la spaziatura della freccia il suo padding. */
column-gap: 0; row-gap: 10px;
}
.kl-back { grid-area: back; }
/* Se lo spazio non basta il titolo spezza la parola: meglio un a-capo brutto che un bottone
fuori schermo. */
.kl-topbar-title { grid-area: titolo; font-size: 1.05rem; overflow-wrap: break-word; }
/* La sede va a capo invece di restare tagliata: su telefono il tooltip col nome completo non
esiste, quindi il nome deve leggersi tutto qui. */
.kl-topbar-loc { grid-area: sede; margin-top: 0; white-space: normal; }
.kl-optype { grid-area: badge; justify-self: end; }
.kl-placetoggle { grid-area: toggle; margin-left: 10px; }
.kl-logout { grid-area: esci; margin-left: 10px; }
}
.kl-logout {
background: rgba(255,255,255,.15); color: #fff; border: 0;
border-radius: 8px; padding: 8px 12px; font-size: .9rem; cursor: pointer;
}
/* Toggle apertura sede in top bar (US-047): pill con pallino di stato, affianco al chip utente. */
.kl-placetoggle {
display: inline-flex; align-items: center; gap: 7px;
border: 0; border-radius: 999px; padding: 8px 14px;
font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.kl-placetoggle-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.kl-placetoggle--open { background: #dcfce7; color: #15803d; }
.kl-placetoggle--closed { background: #fee2e2; color: #b91c1c; }
.kl-content {
flex: 1; width: 100%; max-width: 1140px; margin: 0 auto;
box-sizing: border-box; padding: 18px 16px 32px;
}
/* ---- Tipografia ---- */
/* Titolo di pagina. 1.3rem sta poco sopra il titolo in top bar (1.25) e sopra la sezione
(kl-h2, 1.2): prima erano 1.5rem senza alcuna riduzione su telefono, dove il titolo di
pagina finiva per essere il testo piu' grande della schermata.
Il peso e' dichiarato qui perche' il reboot di Bootstrap mette 500 sugli h1: a 1.5rem la
dimensione lo mascherava, piu' piccolo il titolo risultava piu' leggero della sezione (700)
e del titolo card (800), cioe' il contrario della gerarchia. */
.kl-h1 { font-size: 1.3rem; margin: 4px 0 14px; font-weight: 700; }
@media (max-width: 560px) { .kl-h1 { font-size: 1.15rem; } }
.kl-muted { color: var(--kl-muted); }
.kl-todo {
margin-top: 20px; padding: 12px 14px; background: #fff;
border: 1px dashed #c9d2e3; border-radius: var(--kl-radius);
color: var(--kl-muted); font-size: .9rem;
}
.kl-todo code { color: var(--kl-blue-dark); }
/* ---- Icone SVG (componente KlIcon) ---- */
/* Il default e' in linea e in em perche' e' quello che serve nella grande maggioranza dei punti:
dentro etichette, chip, righe di elenco e testo dei bottoni l'icona deve seguire il corpo del
testo accanto. I pochi contesti che vogliono un'icona grande la ridichiarano qui sotto.
`flex-shrink: 0` serve nei contenitori flex (chip, label), dove altrimenti si schiaccerebbe.
Lo stacco dal testo lo da' lo spazio del markup, o il `gap` del contenitore quando e' flex:
nessun margine qui, altrimenti nei flex si sommerebbe al gap. */
.kl-ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; flex-shrink: 0; }
/* Contesti a icona grande: qui la misura e' in px perche' e' un elemento grafico della card,
non un segno dentro una riga di testo. */
.kl-ac-ico .kl-ico { width: 28px; height: 28px; display: block; } /* azioni Dashboard */
.kl-choice-ico .kl-ico { width: 32px; height: 32px; display: block; } /* scelte Deposito/Ritiro */
.kl-photo-ico .kl-ico { width: 30px; height: 30px; display: block; } /* stato foto documento */
.kl-hero-ok-ico .kl-ico { width: 28px; height: 28px; } /* spunta nel cerchio di fine flusso */
.kl-receipt-check .kl-ico { width: 16px; height: 16px; } /* spunta nel cerchietto ricevuta */
/* ---- Azioni / pulsanti grandi ---- */
.kl-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.kl-action {
display: block; text-decoration: none; text-align: center;
background: #fff; color: var(--kl-text); border: 1px solid #e3e7ee;
border-radius: var(--kl-radius); padding: 18px; font-size: 1.05rem; font-weight: 600;
}
.kl-action--primary { background: var(--kl-blue); color: #fff; border-color: var(--kl-blue); }
.kl-btn-primary, .kl-btn, .kl-btn-outline, .kl-btn-yellow, .kl-btn-red {
width: 100%; border: 0; border-radius: 12px; padding: 16px;
font-size: 1.05rem; font-weight: 600; margin-top: 16px; cursor: pointer;
}
.kl-btn-primary { background: var(--kl-blue); color: #fff; }
.kl-btn-primary:disabled { opacity: .6; }
.kl-btn { background: #e5e7eb; color: var(--kl-text); }
.kl-btn-outline { background: #fff; color: var(--kl-text); border: 1px solid #e3e7ee; }
.kl-btn-outline:disabled { opacity: .6; }
/* Variante a larghezza naturale (es. bottoni secondari dentro card) */
.kl-btn--auto {
display: inline-block; width: auto; padding: 14px 22px;
text-decoration: none; text-align: center;
}
/* Bottone azione gialla full-width (mockup Inventario "Verifica Presenza") */
.kl-btn-yellow { background: var(--kl-yellow); color: var(--kl-text); }
.kl-btn-yellow:disabled { opacity: .6; }
/* Un pulsante spento non deve offrire la mano: il cursore a freccia dice che non c'e' niente da
cliccare, e su un blocco come il check-in fuori finestra quello e' meta' del messaggio. */
.kl-btn-primary:disabled, .kl-btn:disabled, .kl-btn-outline:disabled,
.kl-btn-yellow:disabled, .kl-btn-red:disabled { cursor: default; }
/* ---- Stat ---- */
/* 2 colonne su telefono, 4 su desktop (mockup) */
.kl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 768px) { .kl-stats { grid-template-columns: repeat(4, 1fr); } }
/* Variante a 3 KPI (es. Anomalie): 3 colonne a ogni larghezza */
.kl-stats.kl-stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) { .kl-stats.kl-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.kl-stat {
background: #fff; border: 1px solid #e3e7ee; border-radius: var(--kl-radius);
padding: 16px; text-align: center;
}
.kl-stat b { display: block; font-size: 1.6rem; color: var(--kl-blue); }
.kl-stat span { color: var(--kl-muted); font-size: .85rem; }
/* ---- Form ---- */
.kl-field { margin-bottom: 14px; display: flex; flex-direction: column; }
.kl-field label { font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--kl-muted); }
.kl-field input,
.kl-field select,
.kl-field textarea {
border: 1px solid #cdd4e0; border-radius: 10px; padding: 14px;
font-size: 1rem; background: #fff; font-family: inherit;
}
.kl-field textarea { resize: vertical; min-height: 96px; }
.kl-field input:focus,
.kl-field select:focus,
.kl-field textarea:focus { outline: 2px solid var(--kl-blue); border-color: var(--kl-blue); }
.kl-alert {
background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
border-radius: 10px; padding: 12px; margin-top: 8px; font-size: .92rem;
}
.kl-ok {
background: #dcfce7; color: #166534; border: 1px solid #86efac;
border-radius: 10px; padding: 14px; margin-top: 14px; word-break: break-all;
}
/* ---- Login ---- */
/* Colonna: marchio sul gradiente, poi la card. Il centraggio verticale resta, ora vale per
l'insieme dei due. */
.kl-login-shell {
min-height: 100dvh; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 26px;
background: linear-gradient(160deg, var(--kl-blue), var(--kl-blue-dark)); padding: 20px;
}
/* Il marchio e' l'elemento piu' grande della schermata (56px contro i 34px della top bar):
qui e' il protagonista, non un segnaposto di navigazione. */
.kl-login-brand { display: block; height: 56px; width: auto; }
.kl-login-card {
background: #fff; border-radius: 20px; padding: 28px 22px;
width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
/* La scritta "KiLuggage" nella card non c'e' piu' (sarebbe il marchio due volte): "Area
Operatore" e' la prima riga, quindi niente margine sopra che si somma al padding della card. */
.kl-login-sub { text-align: center; color: var(--kl-muted); margin: 0 0 22px; }
/* ---- Scanner ---- */
.kl-scanner { max-width: 560px; margin: 0 auto; }
.kl-frame {
background: #000; border-radius: var(--kl-radius); overflow: hidden;
aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; margin-top: 8px;
}
.kl-frame video { width: 100%; height: 100%; object-fit: cover; }
/* ---- Splash auth ---- */
.kl-splash { padding: 40px; text-align: center; color: var(--kl-muted); }
/* ---- Badge tipo operazione in top bar (US-031) ---- */
/* justify-self: end -> il blocco utente/azioni aderisce al bordo destro della griglia top bar */
.kl-topbar-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.kl-optype {
font-weight: 700; font-size: .78rem; padding: 5px 11px; border-radius: 999px;
text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
background: var(--kl-yellow); color: var(--kl-blue-dark);
}
.kl-optype--ritiro { background: #fff; color: var(--kl-blue); }
/* ---- Card dettaglio prenotazione (US-033) ---- */
.kl-card {
background: #fff; border: 1px solid #e3e7ee; border-radius: var(--kl-radius);
padding: 6px 16px; margin-bottom: 16px;
}
.kl-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 11px 0; border-bottom: 1px solid #eef1f6;
}
.kl-row:last-child { border-bottom: 0; }
.kl-row span { color: var(--kl-muted); font-size: .9rem; }
.kl-row b { text-align: right; word-break: break-word; }
/* Avviso ambra: stato "gia' fatto" / non-bloccante, distinto dall'errore rosso (kl-alert). */
.kl-warn {
background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
border-radius: 10px; padding: 14px; margin-top: 14px; font-size: .92rem;
}
/* ---- Dashboard ---- */
.kl-h2 { font-size: 1.2rem; margin: 24px 0 10px; font-weight: 700; }
/* Su telefono la scala si comprime tutta insieme, non solo l'h1: 18.4 titolo pagina, 16.8
sezione, 16 titolo card. Ritoccando solo l'h1, la sezione sarebbe diventata piu' grande del
titolo che la contiene. */
@media (max-width: 560px) { .kl-h2 { font-size: 1.05rem; } }
.kl-section-header { display: flex; align-items: baseline; justify-content: space-between; }
.kl-empty { color: var(--kl-muted); margin-top: 8px; font-size: .95rem; }
/* Stat cards colorate (modello mockup) */
.kl-stat--blue { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.kl-stat--yellow { background: #fefce8; border-color: #fde047; color: #713f12; }
.kl-stat--red { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.kl-stat--green { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.kl-stat--blue b, .kl-stat--yellow b, .kl-stat--red b, .kl-stat--green b { color: inherit; }
/* Action cards (Azioni Principali): 1 colonna su telefono, 2+3 da desktop */
.kl-ac-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
/* Da 768px le due azioni di banco (Nuovo Deposito, Ritiro) stanno a meta' riga ciascuna e le
altre tre a un terzo nella riga sotto. Griglia a 6 colonne perche' e' il minimo comune
multiplo di 2 e 3: due righe di larghezze diverse senza sdoppiare il contenitore.
L'ordine delle card conta: le prime due sono le azioni di banco. */
@media (min-width: 768px) {
.kl-ac-list { grid-template-columns: repeat(6, 1fr); }
.kl-ac-list > :nth-child(-n+2) { grid-column: span 3; }
.kl-ac-list > :nth-child(n+3) { grid-column: span 2; }
}
.kl-ac {
display: flex; align-items: center; gap: 16px; text-decoration: none;
border-radius: var(--kl-radius); padding: 20px 22px;
box-shadow: 0 2px 8px rgba(0,0,0,.07); min-height: 88px;
transition: transform .1s, box-shadow .1s;
}
.kl-ac:active { transform: scale(.99); }
.kl-ac--primary { background: var(--kl-blue); color: #fff; }
.kl-ac--yellow { background: var(--kl-yellow); color: var(--kl-text); }
.kl-ac--secondary { background: #fff; color: var(--kl-text); border: 2px solid #e3e7ee; }
.kl-ac-ico { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.kl-ac-title { font-weight: 700; font-size: 1.1rem; }
.kl-ac-desc { font-size: .85rem; opacity: .8; margin-top: 2px; }
/* Quick access: card orizzontali (icona + label) come da mockup; 1 colonna stretta, 2 da 480px */
.kl-quickaccess { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
@media (min-width: 480px) { .kl-quickaccess { grid-template-columns: 1fr 1fr; } }
.kl-ac--compact { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; padding: 16px 18px; }
.kl-ac--compact .kl-ac-ico { font-size: 1.5rem; }
.kl-ac--compact .kl-ac-title { font-size: .95rem; }
/* ---- Hover delle superfici cliccabili (Dashboard) ---- */
/* bootstrap.min.css dichiara `a:hover{color:#0a58ca}` e app.css `a{color:#0071c1}`: specificita'
0,1,1 che batte le nostre varianti a classe singola, percio' al passaggio del mouse il testo
delle card virava al blu, bianco-su-blu e nero-su-giallo compresi. Qui il colore e' ridichiarato
su un selettore piu' specifico (elemento + classe + stato, 0,2,1 contro 0,1,1), non
affidandosi all'ordine di caricamento dei fogli. */
a.kl-ac--primary, a.kl-ac--primary:hover { color: #fff; }
a.kl-ac--yellow, a.kl-ac--yellow:hover { color: var(--kl-text); }
a.kl-ac--secondary, a.kl-ac--secondary:hover { color: var(--kl-text); }
a.kl-stat--blue:hover { color: #1e3a8a; }
a.kl-stat--yellow:hover { color: #713f12; }
a.kl-stat--green:hover { color: #14532d; }
a.kl-stat--red:hover { color: #7f1d1d; }
a.kl-listitem:hover { color: var(--kl-text); }
/* Stessa storia per i link vestiti da bottone, chip o card: il colore lo dice la classe, e il
fatto di essere un non deve cambiarlo al passaggio del mouse. Le coppie base/variante
stanno in quest'ordine di proposito: pari specificita', vince l'ultima scritta. */
a.kl-btn-primary:hover { color: #fff; }
a.kl-btn-outline:hover { color: var(--kl-text); }
a.kl-btn:hover { color: var(--kl-text); }
a.kl-btn-yellow:hover { color: var(--kl-text); }
a.kl-action:hover { color: var(--kl-text); }
a.kl-action--primary:hover { color: #fff; }
a.kl-choice:hover { color: var(--kl-text); }
a.kl-choice--deposito:hover { color: #fff; }
a.kl-board-contact:hover { color: #0369a1; }
/* Il feedback e' un ingrandimento minimo, non un cambio di colore. Solo dove c'e' un puntatore
vero: col dito il tap lascerebbe la card ingrandita fino al tocco successivo. La tessera
Anomalie non e' un e resta fuori, com'e' giusto: non porta da nessuna parte. */
a.kl-stat, a.kl-listitem { transition: transform .1s; }
/* Colonna azioni agganciata a destra SEMPRE, senza piu' soglia di larghezza. Prima era dentro una
@media (max-width:1150px), stima fatta quando il codice pratica andava a capo su desktop. Ora il
codice sta su una riga sola (richiesta utente) e la tabella e' misurata a 1334px, mentre il
contenitore ne offre 1106 (`.kl-content` e' tappato a max-width:1140px): eccede di 228px a
QUALUNQUE larghezza, verificato fino a 1440px di viewport. Con la soglia, sopra i 1150px la
cella tornava `static` e il pulsante di riga scorreva via proprio dove la tabella scorre.
Se un domani la tabella tornasse a starci dentro, questa regola lascerebbe l'ombra visibile
senza niente dietro: e' l'unico caso in cui va rimessa una condizione. */
.kl-table--orders th:last-child, .kl-table--orders td:last-child {
position: sticky; right: 0; background: #fff;
/* L'ombra a sinistra dice che dietro c'e' altro contenuto che scorre. */
box-shadow: -8px 0 8px -8px rgba(15,23,42,.30);
}
.kl-table--orders thead th:last-child { background: #f8fafc; z-index: 3; }
.kl-table--orders tbody td:last-child { z-index: 2; }
@media (hover: hover) {
.kl-ac:hover { transform: scale(1.015); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
a.kl-stat:hover, a.kl-listitem:hover { transform: scale(1.015); }
}
/* ---- Lista ordini (Dashboard / Search) ---- */
.kl-list { display: flex; flex-direction: column; gap: 8px; }
.kl-listitem {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: #fff; border: 1px solid #e3e7ee; border-radius: var(--kl-radius);
padding: 14px 16px; text-decoration: none; color: var(--kl-text);
}
.kl-listitem:active { transform: scale(.99); }
.kl-listitem-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kl-listitem-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-listitem-meta { font-size: .82rem; color: var(--kl-muted); }
.kl-listitem-aside { flex-shrink: 0; }
/* ---- Status chip ---- */
.kl-chip {
font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
white-space: nowrap; text-transform: uppercase; letter-spacing: .02em;
}
.kl-chip--in { background: #dcfce7; color: #166534; }
.kl-chip--out { background: #e0f2fe; color: #0369a1; }
.kl-chip--pending { background: #fef3c7; color: #92400e; }
/* ---- Anomalie (pagina; dati demo in attesa endpoint BE) ---- */
/* Card form "Nuova Segnalazione" (mockup) */
.kl-formcard {
background: #fff; border: 1px solid #e3e7ee; border-radius: var(--kl-radius);
padding: 18px 18px 20px; margin-top: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.kl-form-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
@media (max-width: 560px) { .kl-form-title { font-size: 1rem; } }
/* Riga Annulla | Salva: affiancati, stessa larghezza */
.kl-formrow { display: flex; gap: 12px; }
/* `min-width: 0` e' il paracadute: senza, il minimo automatico di un elemento (per un