/* =====================================================================
   CENSEA CLARITY — base comune dei tre portali (staff, clienti, dipendenti)
   ---------------------------------------------------------------------
   Layer di re-skin sopra AdminLTE 3 / Bootstrap 4. NON sostituisce
   site.css: si carica DOPO e rimappa i token del design system
   "Censea Clarity" sulle classi AdminLTE esistenti, così ogni view
   eredita lo stesso look senza modificarne il markup.

   Pubblicato da common\assets\ClarityAsset. Qui solo cio' che vale per
   tutti i portali; quello di un portale solo sta nel suo web/css
   (backend: censea-clarity.css, webmail/dashboard/chat staff).
   Il colore di accento di un portale si cambia ridefinendo i token
   --cc-brand* e --cc-sb-accent nel suo CSS (dipendenti: verde).

   Convenzioni:
   - Specificità volutamente alta (body.sidebar-mini ...) per vincere
     gli !important legacy di site.css e i blocchi <style> inline dei
     layout main.php.
   - Palette e misure derivate 1:1 dal mockup approvato (2026-07-02).
   ===================================================================== */

:root {
    /* superfici / inchiostri */
    --cc-bg:          #f5f7fa;
    --cc-surface:     #ffffff;
    --cc-surface-2:   #fafbfd;
    --cc-ink:         #10182b;
    --cc-ink-soft:    #39415a;
    --cc-muted:       #71798c;
    --cc-border:      #e7ebf2;
    --cc-border-strong:#dbe0ea;

    /* brand */
    --cc-brand:       #007bff;
    --cc-brand-ink:   #0069d9;
    --cc-brand-tint:  rgba(0,123,255,.10);
    /* icona della voce attiva nella sidebar navy: il brand schiarito */
    --cc-sb-accent:   #6db1ff;

    /* semantici */
    --cc-info:        #0ea5e9;
    --cc-success:     #12b76a;
    --cc-warning:     #f79009;
    --cc-danger:      #f04438;
    --cc-violet:      #7a5af8;

    /* sidebar scura navy */
    --cc-sb-bg:       #121a2e;
    --cc-sb-bg2:      #0e1424;
    --cc-sb-ink:      #aab3c7;
    --cc-sb-ink-dim:  #6b7590;

    /* forma */
    --cc-radius:      15px;
    --cc-radius-sm:   11px;
    --cc-shadow-sm:   0 1px 2px rgba(16,24,43,.05), 0 1px 3px rgba(16,24,43,.05);
    --cc-shadow:      0 4px 18px -6px rgba(16,24,43,.12), 0 2px 6px -2px rgba(16,24,43,.07);

    --cc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ==================================================================
   1. BASE / TIPOGRAFIA
   ================================================================== */
body.hold-transition {
    font-family: var(--cc-font);
    -webkit-font-smoothing: antialiased;
    color: var(--cc-ink);
}
.content-wrapper {
    background-color: var(--cc-bg) !important;
}
.content-header h1,
.content-header .h1 {
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--cc-ink);
}
.page-header h1 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cc-ink);
}
.text-muted { color: var(--cc-muted) !important; }

/* numeri tabellari ovunque siano marcati */
.num, .text-tabular, .small-box .inner h3, .info-box-number {
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   2. SIDEBAR — navy con pill attiva + barra d'accento
   ================================================================== */
body.sidebar-mini .main-sidebar,
.main-sidebar.sidebar-dark-primary {
    background: linear-gradient(185deg, var(--cc-sb-bg), var(--cc-sb-bg2)) !important;
    box-shadow: 0 18px 40px -20px rgba(16,24,43,.55) !important;
}

/* Lo scorrimento del menu sta sul menu, non sulla pagina.
   Il body ha la classe .layout-fixed (layouts/main.php): AdminLTE fissa
   .main-sidebar a tutta altezza di finestra, ma lascia .sidebar con
   overflow-y:initial dandolo per scontato dal plugin OverlayScrollbars,
   che qui non e' caricato — quindi lo scroll interno lo mettiamo noi.
   Niente altezze calcolate, pero': adminlte.css da' alla .sidebar
   calc(100vh - 3.5rem) dando per scontato un logo alto 3.5rem, mentre qui
   il brand-link e' ben piu' alto (logo + mt-3/pb-3/mb-3) e in dev si
   aggiunge la fascia arancione. Quel calcolo sfora in basso e le ultime
   voci — Impostazioni in fondo — non si raggiungono nemmeno scorrendo.
   Con la colonna flex il logo prende quel che gli serve e il menu tutto il
   resto, qualunque sia l'altezza dell'uno o dell'altro. Le barre restano
   invisibili finche' il puntatore non entra nel menu (regole :hover gia'
   presenti in adminlte.css). */
.layout-fixed .main-sidebar {
    display: flex;
    flex-direction: column;
}
.layout-fixed .main-sidebar .brand-link { flex: 0 0 auto; }
.layout-fixed .main-sidebar .sidebar {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* respiro sotto l'ultima voce, altrimenti resta incollata al bordo */
    padding-bottom: 12px;
}

/* brand / logo */
.main-sidebar .brand-link {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* user panel */
.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info .user-profile-link {
    color: #fff !important;
    font-weight: 600;
}
.main-sidebar .user-panel .info small { color: var(--cc-sb-ink-dim) !important; }

/* voci di menu (livello 1) — batte site.css e lo <style> inline del layout.
   Metriche allineate 1:1 al mockup: padding 9/12, font 13.6px, icona 18px. */
body.sidebar-mini .main-sidebar .nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-item > .nav-link {
    color: var(--cc-sb-ink) !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    margin: 1px 8px !important;
    padding: 9px 12px !important;
    font-weight: 500;
    font-size: 13.6px;
    line-height: 1.3;
    position: relative;
    transition: background-color .18s, color .18s;
}
body.sidebar-mini .main-sidebar .nav-sidebar .nav-link .nav-icon,
.nav-sidebar .nav-link > .nav-icon {
    color: var(--cc-sb-ink-dim) !important;
    font-size: 18px;
    width: 1.4rem;
    margin-right: 4px;
    transition: color .18s;
}
/* freccia treeview a destra */
.nav-sidebar .nav-link > p > .right {
    color: var(--cc-sb-ink-dim) !important;
}
/* hover */
body.sidebar-mini .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.nav-sidebar .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,.06) !important;
    color: #fff !important;
}
.nav-sidebar .nav-item > .nav-link:hover .nav-icon { color: #cfd6e6 !important; }

/* attivo — pill tint + accent bar (niente più fondo blu pieno) */
body.sidebar-mini .main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active {
    background-color: var(--cc-brand-tint) !important;
    color: #fff !important;
    font-weight: 640;
    box-shadow: none !important;
}
.nav-sidebar .nav-item > .nav-link.active .nav-icon { color: var(--cc-sb-accent) !important; }
.nav-sidebar .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    left: -8px; top: 7px; bottom: 7px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--cc-brand);
}

/* menu aperto (parent has-treeview attivo) */
.nav-sidebar .nav-item.menu-open > .nav-link {
    background-color: rgba(255,255,255,.04) !important;
    color: #fff !important;
}

/* header di sezione */
.nav-sidebar .nav-header {
    color: var(--cc-sb-ink-dim) !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 16px 16px 7px;
}

/* sottomenu (treeview) */
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255,255,255,.72) !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    margin: 1px 8px 1px 6px !important;
    padding: 7px 12px !important;
    font-size: 13px;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
    color: var(--cc-sb-ink-dim) !important;
    font-size: 14px;
    width: 1.3rem;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover > .nav-icon { color: #cfd6e6 !important; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active > .nav-icon { color: var(--cc-sb-accent) !important; }
.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255,255,255,.06) !important;
    color: #fff !important;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--cc-brand-tint) !important;
    color: #fff !important;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon { color: var(--cc-sb-accent) !important; }

/* badge nella sidebar */
.nav-sidebar .nav-link .badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .28em .55em;
}

/* ==================================================================
   3. TOPBAR — glass
   ================================================================== */
.main-header.navbar {
    background: rgba(255,255,255,.85) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(6px);
    backdrop-filter: saturate(1.4) blur(6px);
    border-bottom: 1px solid var(--cc-border) !important;
    box-shadow: none !important;
}
.main-header .navbar-nav .nav-link {
    color: var(--cc-ink-soft) !important;
    border-radius: 10px;
    transition: background-color .15s, color .15s;
}
.main-header .navbar-nav > .nav-item > .nav-link:hover {
    background-color: var(--cc-bg) !important;
    color: var(--cc-ink) !important;
}
.main-header .navbar-badge {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

/* ==================================================================
   4. CARD morbide
   ================================================================== */
.card {
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    box-shadow: var(--cc-shadow) !important;
    background: var(--cc-surface);
}
.card-header {
    background-color: var(--cc-surface) !important;
    border-bottom: 1px solid var(--cc-border) !important;
    padding: 14px 18px;
}
/* AdminLTE mette un clearfix ::after nelle testate: in una testata flex diventa un terzo
   elemento e justify-content:space-between porta il pulsante a meta' */
.card-header.d-flex::after { display: none; }
.card-title {
    font-weight: 660;
    letter-spacing: -.01em;
    color: var(--cc-ink);
    font-size: 1.02rem;
}
.card-title i, .card-header > .card-title > i,
.card-title svg.i, .card-header > .card-title > svg.i,
.box-title svg.i { color: var(--cc-brand); }

/* card-outline: bordo NEUTRO uniforme su tutto il gestionale.
   Coerenza: niente più righe colorate blu/verde/arancio sparse view-per-view. */
.card.card-outline,
.card-primary.card-outline, .card-secondary.card-outline, .card-success.card-outline,
.card-info.card-outline, .card-warning.card-outline, .card-danger.card-outline {
    border-top: 1px solid var(--cc-border) !important;
}

/* ==================================================================
   5. STAT-BOX (.small-box) -> card bianca con chip icona colorata
   Rimappa i .bg-* saturi in card chiare mantenendo l'identità cromatica.
   ================================================================== */
.small-box {
    background: var(--cc-surface) !important;
    color: var(--cc-ink) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    box-shadow: var(--cc-shadow) !important;
    overflow: hidden !important;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    /* colore d'accento di default; sovrascritto dalle .bg-* sotto */
    --sc: var(--cc-info);
}
.small-box:hover {
    transform: translateY(-3px);
    border-color: var(--cc-border-strong) !important;
}
/* layout coerente con la dashboard (.cc-stat): chip in alto a sinistra, numero sotto */
.small-box > .inner { padding: 68px 18px 14px !important; }
.small-box > .inner h3 {
    color: var(--cc-ink) !important;
    font-weight: 750;
    font-size: 2rem;
    letter-spacing: -.03em;
    margin: 0 0 2px;
}
.small-box > .inner p {
    color: var(--cc-muted) !important;
    font-size: .82rem;
    font-weight: 500;
    margin: 0;
}

/* mappa colore d'accento in base alla classe di sfondo AdminLTE */
.small-box.bg-info, .small-box.bg-primary   { --sc: var(--cc-brand); }
.small-box.bg-success                        { --sc: var(--cc-success); }
.small-box.bg-warning                        { --sc: var(--cc-warning); }
.small-box.bg-danger                         { --sc: var(--cc-danger); }
.small-box.bg-secondary, .small-box.bg-dark  { --sc: var(--cc-violet); }
/* colori AdminLTE extra: mappati per hue così ogni chip ha un colore coerente */
.small-box.bg-purple, .small-box.bg-indigo, .small-box.bg-fuchsia, .small-box.bg-pink { --sc: var(--cc-violet); }
.small-box.bg-teal, .small-box.bg-cyan, .small-box.bg-navy { --sc: var(--cc-info); }
.small-box.bg-orange, .small-box.bg-maroon { --sc: var(--cc-warning); }
.small-box.bg-olive, .small-box.bg-lime { --sc: var(--cc-success); }
/* nomi AdminLTE 2 ancora usati da alcune viste */
.small-box.bg-aqua, .small-box.bg-light-blue { --sc: var(--cc-info); }
.small-box.bg-green { --sc: var(--cc-success); }
.small-box.bg-yellow { --sc: var(--cc-warning); }
.small-box.bg-red { --sc: var(--cc-danger); }

/* icona -> chip colorato in alto a SINISTRA (coerente con la dashboard) */
.small-box > .icon {
    /* AdminLTE posiziona l'<i> e non il contenitore: con l'<i> reso statico (chip) il
       contenitore va posizionato qui, se no il chip cade sotto al numero */
    position: absolute !important;
    color: var(--sc) !important;
    top: 16px !important;
    left: 17px !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
}
.small-box > .icon > i,
.small-box > .icon > i.fa,
.small-box > .icon > i.fas,
.small-box > .icon > i.far,
.small-box > .icon > i.fab,
.small-box > .icon > svg {
    position: static !important;
    font-size: 22px !important;
    width: 44px; height: 44px;
    display: grid !important;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sc) 13%, transparent);
    color: var(--sc) !important;
    top: auto !important; right: auto !important;
}
/* l'<svg> e' insieme chip e disegno: il padding tiene il disegno a ~22px dentro i 44 */
.small-box > .icon > svg { padding: 11px; box-sizing: border-box; overflow: visible; }
.small-box:hover > .icon > i,
.small-box:hover > .icon > svg {
    transform: none !important;
    color: var(--sc) !important;
}

/* sul telefono AdminLTE nasconde l'icona e centra il testo: il chip resta (lo spazio in alto
   e' suo) e il testo resta allineato a sinistra come su desktop */
@media (max-width: 767.98px) {
    .small-box > .icon { display: block !important; }
    .small-box { text-align: left; }
    .small-box > .inner p { font-size: .82rem; }
}

/* footer del small-box -> link discreto col colore d'accento */
.small-box .small-box-footer {
    background: transparent !important;
    color: var(--sc) !important;
    border-top: 1px solid var(--cc-border);
    font-weight: 600;
    font-size: .78rem;
    padding: 9px 18px;
}
.small-box .small-box-footer:hover { color: var(--cc-brand-ink) !important; }

/* info-box: allinea alla stessa grammatica card */
.info-box {
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    box-shadow: var(--cc-shadow) !important;
    background: var(--cc-surface);
}
.info-box .info-box-number { color: var(--cc-ink); font-weight: 700; }
.info-box .info-box-text { color: var(--cc-muted); }

/* ==================================================================
   6. PILL / BADGE semantici (chip morbidi)
   ================================================================== */
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: .34em .7em;
    letter-spacing: .01em;
}
.badge-pill { border-radius: 999px; }

/* chip morbidi Clarity: usare .cc-pill.cc-pill--* nelle view nuove */
.cc-pill {
    --pc: var(--cc-muted);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 640;
    padding: 3px 9px; border-radius: 999px; line-height: 1.4;
    color: var(--pc);
    background: color-mix(in srgb, var(--pc) 13%, transparent);
}
.cc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); }
.cc-pill--info    { --pc: var(--cc-info); }
.cc-pill--success { --pc: var(--cc-success); }
.cc-pill--warning { --pc: var(--cc-warning); }
.cc-pill--danger  { --pc: var(--cc-danger); }
.cc-pill--muted   { --pc: var(--cc-muted); }
.cc-pill--brand   { --pc: var(--cc-brand); }

/* ==================================================================
   7. TABELLE
   ================================================================== */
.table thead th {
    background-color: var(--cc-surface-2) !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--cc-muted) !important;
    border-top: none;
    border-bottom: 1px solid var(--cc-border);
}
.table td { border-top: 1px solid var(--cc-border); vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--cc-surface-2) !important; }

/* ==================================================================
   7b. PAGINAZIONE — una sola per tutti gli elenchi dei tre portali
   Copre sia il markup del pager standard di Yii (GridView senza 'pager':
   <li class="active"><a>) sia quello Bootstrap 4 (li.page-item > a.page-link),
   cosi' non serve configurare le viste una per una.
   ================================================================== */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-left: 0; margin: 14px 0 0; list-style: none; }
.pagination > li { margin: 0; }
.pagination > li > a,
.pagination > li > span,
.pagination .page-item .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px;
    margin: 0 !important; border-radius: 9px !important;
    border: 1px solid var(--cc-border); background: var(--cc-surface);
    color: var(--cc-ink-soft); font-size: 13px; font-weight: 600; line-height: 1;
    text-decoration: none; box-shadow: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
    background: var(--cc-bg); color: var(--cc-brand); border-color: var(--cc-border-strong); outline: none; box-shadow: none;
}
.pagination > li.active > a,
.pagination > li.active > span,
.pagination .page-item.active .page-link {
    background: var(--cc-brand); border-color: var(--cc-brand); color: #fff;
}
.pagination > li.disabled > a,
.pagination > li.disabled > span,
.pagination .page-item.disabled .page-link {
    background: var(--cc-surface); color: var(--cc-muted); border-color: var(--cc-border); opacity: .55; pointer-events: none;
}
.pagination-sm > li > a,
.pagination-sm > li > span,
.pagination.pagination-sm .page-item .page-link { min-width: 30px; height: 30px; padding: 0 8px; font-size: 12.5px; border-radius: 8px !important; }
/* Riepilogo «Mostra 1-20 di 230» delle griglie */
.grid-view > .summary, .list-view > .summary { font-size: 13px; color: var(--cc-muted); margin-bottom: 10px; }
.grid-view > .summary b, .list-view > .summary b { color: var(--cc-ink-soft); }

/* ==================================================================
   8. BOTTONI / FORM
   ================================================================== */
.btn { border-radius: var(--cc-radius-sm); font-weight: 560; }
.btn-primary {
    background-color: var(--cc-brand) !important;
    border-color: var(--cc-brand) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--cc-brand-ink) !important;
    border-color: var(--cc-brand-ink) !important;
}
.btn-outline-primary { color: var(--cc-brand) !important; border-color: var(--cc-brand) !important; }
.btn-outline-primary:hover { background-color: var(--cc-brand) !important; color: #fff !important; }

.form-control, .custom-select {
    border-radius: var(--cc-radius-sm);
    border-color: var(--cc-border-strong);
}
.form-control:focus, .custom-select:focus {
    border-color: var(--cc-brand);
    box-shadow: 0 0 0 .18rem var(--cc-brand-tint);
}

/* link brand */
a { color: var(--cc-brand); }
a:hover { color: var(--cc-brand-ink); }


/* ==================================================================
   10. DASHBOARD CLARITY (scoped .cc-dash) — 1:1 col mockup
   Componenti bespoke: page-head, stat-card chip+sparkline, liste 2 col.
   ================================================================== */
.cc-dash { --sc: var(--cc-info); }

/* page head */
.cc-phead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; margin: 4px 0 20px; flex-wrap: wrap;
}
.cc-phead h1 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.025em; color: var(--cc-ink); }
.cc-phead p { margin: 5px 0 0; color: var(--cc-muted); font-size: 13.5px; }
.cc-phead__date {
    display: flex; align-items: center; gap: 8px; font-size: 13px;
    color: var(--cc-ink-soft); background: var(--cc-surface);
    border: 1px solid var(--cc-border); padding: 8px 13px; border-radius: 11px;
}
.cc-phead__date i { color: var(--cc-muted); }

/* stat cards */
.cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1080px) { .cc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cc-stats { grid-template-columns: 1fr; } }
.cc-stat {
    --sc: var(--cc-info);
    position: relative; overflow: hidden; text-decoration: none; color: inherit;
    background: var(--cc-surface); border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius); padding: 17px 17px 15px;
    box-shadow: var(--cc-shadow); display: block;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cc-stat:hover { transform: translateY(-3px); border-color: var(--cc-border-strong); color: inherit; }
.cc-stat--info { --sc: var(--cc-info); } .cc-stat--brand { --sc: var(--cc-brand); }
.cc-stat--success { --sc: var(--cc-success); } .cc-stat--violet { --sc: var(--cc-violet); }
.cc-stat--warning { --sc: var(--cc-warning); } .cc-stat--danger { --sc: var(--cc-danger); }
.cc-stat__chip {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    font-size: 20px; margin-bottom: 13px;
    background: color-mix(in srgb, var(--sc) 13%, transparent); color: var(--sc);
}
.cc-stat__num { font-size: 29px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--cc-ink); }
.cc-stat__label { color: var(--cc-muted); font-size: 12.5px; font-weight: 500; margin-top: 5px; }
.cc-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--sc); margin-top: 10px; }
.cc-stat__spark { position: absolute; right: 14px; bottom: 14px; width: 90px; height: 32px; opacity: .9; fill: none; }

/* colonne */
.cc-cols { display: grid; grid-template-columns: var(--cc-colsplit, 1.55fr 1fr); gap: 16px; align-items: start; }
@media (max-width: 992px) { .cc-cols { grid-template-columns: 1fr; } }
.cc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* card header interno dashboard */
.cc-dash .card__h {
    display: flex; align-items: center; gap: 10px; padding: 14px 17px;
    border-bottom: 1px solid var(--cc-border);
}
.cc-dash .card__h h3 { margin: 0; font-size: 14.5px; font-weight: 660; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; color: var(--cc-ink); }
.cc-dash .card__h h3 > i { color: var(--cc-brand); font-size: 16px; }
.cc-dash .card__h .link { margin-left: auto; font-size: 12.5px; color: var(--cc-brand); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
/* Intestazione riquadro cliccabile -> gestione modulo */
.cc-dash a.card__h--link { text-decoration: none; justify-content: space-between; transition: background .15s; }
.cc-dash a.card__h--link:hover { background: var(--cc-surface-2); }
.cc-dash .card__h-go { margin-left: auto; color: var(--cc-muted); font-size: 13px; display: inline-flex; align-items: center; transition: color .15s, transform .15s; }
.cc-dash a.card__h--link:hover .card__h-go { color: var(--cc-brand); transform: translateX(2px); }
.cc-dash.is-editing .card__h-go { display: none; } /* evita sovrapposizione coi controlli di modifica */
/* Intero riquadro cliccabile -> gestione (gestito via JS) */
.cc-dash:not(.is-editing) .cc-widget[data-manage] > .card { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cc-dash:not(.is-editing) .cc-widget[data-manage] > .card:hover { border-color: var(--cc-border-strong); box-shadow: var(--cc-shadow); }

/* list group Clarity */
.cc-lg { display: flex; flex-direction: column; }
.cc-lg__item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; border-top: 1px solid var(--cc-border); }
.cc-lg__item:first-child { border-top: 0; }
.cc-lg__item:hover { background: var(--cc-surface-2); color: inherit; }
.cc-avsq { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.cc-lg__ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 15px; background: var(--cc-brand-tint); color: var(--cc-brand); }
.cc-lg__ic.c-i { background: color-mix(in srgb, var(--cc-info) 13%, transparent); color: var(--cc-info); }
.cc-lg__ic.c-s { background: color-mix(in srgb, var(--cc-success) 13%, transparent); color: var(--cc-success); }
.cc-lg__ic.c-w { background: color-mix(in srgb, var(--cc-warning) 15%, transparent); color: var(--cc-warning); }
.cc-lg__ic.c-d { background: color-mix(in srgb, var(--cc-danger) 13%, transparent); color: var(--cc-danger); }
.cc-lg__tx { min-width: 0; flex: 1; }
.cc-lg__tx b { display: block; font-size: 13.4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cc-ink); }
.cc-lg__tx b.unread { font-weight: 750; }
.cc-lg__tx small { color: var(--cc-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }
.cc-lg__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cc-lg__time { font-size: 11.5px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-cbadge { font-size: 11px; font-weight: 700; background: var(--cc-brand); color: #fff; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; }

/* tabella dashboard */
.cc-dash .cc-cli { display: flex; align-items: center; gap: 9px; font-weight: 560; }
.cc-dash .cc-cli .d { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.cc-dash .cc-empty { padding: 26px 16px; text-align: center; color: var(--cc-muted); font-size: 13px; }
.cc-dash .cc-empty i { display: block; font-size: 26px; margin-bottom: 8px; opacity: .5; }

/* ==================================================================
   COMPONENTE RICERCA (pill) — condiviso topbar + modulo Messaggi
   ================================================================== */
.cc-search {
    display: flex; align-items: center; gap: 9px; margin: 0;
    background: var(--cc-bg); border: 1px solid var(--cc-border);
    border-radius: 11px; padding: 7px 13px; color: var(--cc-muted);
}
.cc-search > i { font-size: 14px; flex: none; }
.cc-search input {
    border: 0; background: transparent; outline: none; color: var(--cc-ink);
    font: inherit; font-size: 13.5px; width: 100%; padding: 0; box-shadow: none;
}
.cc-search input::placeholder { color: var(--cc-muted); }
.cc-search:focus-within { border-color: var(--cc-brand); box-shadow: 0 0 0 .15rem var(--cc-brand-tint); }

/* ==================================================================
   11. TOPBAR mockup — icon-button tondi, search, userchip
   ================================================================== */
.main-header.navbar { min-height: 62px; padding: 0 16px; }

/* icone SVG outline (stile mockup) */
svg.i {
    width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.main-header .navbar-nav .nav-link svg.i { width: 21px; height: 21px; }
.cc-search svg.i { width: 16px; height: 16px; }
/* spinner animato (sostituisce fa-spin) */
svg.i.i-spin { animation: cc-icon-spin .8s linear infinite; }
@keyframes cc-icon-spin { to { transform: rotate(360deg); } }
/* icone SVG nella sidebar (nav-icon ora è <svg>) */
.nav-sidebar .nav-link > svg.nav-icon { width: 19px !important; height: 19px !important; vertical-align: -4px; flex: none; }
.nav-sidebar .nav-treeview .nav-link > svg.nav-icon { width: 16px !important; height: 16px !important; }

/* larghezza search in topbar */
.main-header .cc-search { width: 300px; max-width: 34vw; }

/* icon buttons tondi (esclude la userchip) */
.main-header .navbar-nav > .nav-item > .nav-link:not(.cc-userchip) {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; margin: 0 1px; position: relative;
    color: var(--cc-ink-soft) !important;
}
.main-header .navbar-nav > .nav-item > .nav-link:not(.cc-userchip) > i { font-size: 18px; }
.main-header .navbar-nav > .nav-item > .nav-link:not(.cc-userchip):hover {
    background: var(--cc-bg) !important; color: var(--cc-ink) !important;
}
/* badge navbar → puntino di presenza (niente numero).
   Specificità alta + !important per battere lo <style> inline .navbar-nav .navbar-badge. */
.main-header .navbar-nav .navbar-badge {
    top: 7px !important; right: 8px !important;
    min-width: 0 !important; width: 9px !important; height: 9px !important;
    padding: 0 !important; font-size: 0 !important; line-height: 0 !important;
    border-radius: 50% !important; display: inline-block !important;
    overflow: hidden !important; color: transparent !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.95);
}
/* ...ma il badge nascosto dal JS (style="display:none", conteggio a zero) resta nascosto:
   il display:inline-block !important qui sopra lo faceva comparire sempre. */
.main-header .navbar-nav .navbar-badge[style*="display:none"],
.main-header .navbar-nav .navbar-badge[style*="display: none"] {
    display: none !important;
}

/* userchip */
.main-header .cc-userchip {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 12px 5px 6px; border-radius: 12px;
    border: 1px solid var(--cc-border); background: var(--cc-surface);
    margin-left: 6px;
}
.main-header .cc-userchip:hover { background: var(--cc-surface-2) !important; }
.main-header .cc-userchip .cc-uc-av {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: grid; place-items: center; overflow: hidden;
    background: var(--cc-brand-tint); color: var(--cc-brand); font-size: 15px;
}
.main-header .cc-userchip .cc-uc-av img { width: 100%; height: 100%; object-fit: cover; }
.main-header .cc-userchip .cc-uc-tx { text-align: left; line-height: 1.15; }
.main-header .cc-userchip .cc-uc-tx b { font-size: 13px; font-weight: 600; color: var(--cc-ink); display: block; }
.main-header .cc-userchip .cc-uc-tx small { font-size: 11px; color: var(--cc-muted); display: block; }
.main-header .cc-userchip .cc-uc-chev { color: var(--cc-muted); font-size: 13px; }
.main-header .navbar-nav .cc-userchip .cc-uc-av svg.i { width: 18px; height: 18px; }
.main-header .navbar-nav .cc-userchip svg.i.cc-uc-chev { width: 14px; height: 14px; stroke-width: 2.2; }
@media (max-width: 640px) { .main-header .cc-userchip .cc-uc-tx { display: none; } }


/* ==================================================================
   13. COMPONENTI CROSS-MODULO — coerenza finestre / menu / tab
   Regole globali: migliorano ogni modulo senza toccare le singole view.
   ================================================================== */

/* ---- FINESTRE (modali) ---- */
.modal-content {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: 0 30px 60px -28px rgba(16,24,43,.42), 0 12px 26px -14px rgba(16,24,43,.28);
    overflow: hidden;
}
.modal-header {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
    padding: 15px 20px;
}
.modal-header .modal-title { font-weight: 660; letter-spacing: -.01em; color: var(--cc-ink); }
/* header colorati (es. bg-warning): AdminLTE usa !important, resta il colore ma testo bianco */
.modal-header.bg-primary, .modal-header.bg-info, .modal-header.bg-success,
.modal-header.bg-warning, .modal-header.bg-danger, .modal-header.bg-dark { color: #fff; }
.modal-header.bg-primary .modal-title, .modal-header.bg-info .modal-title,
.modal-header.bg-success .modal-title, .modal-header.bg-warning .modal-title,
.modal-header.bg-danger .modal-title, .modal-header.bg-dark .modal-title { color: #fff; }
.modal-footer {
    background: var(--cc-surface-2);
    border-top: 1px solid var(--cc-border);
    padding: 12px 18px;
}
.modal-backdrop.show { opacity: .4; }

/* ---- MENU A TENDINA ---- */
.dropdown-menu {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    box-shadow: var(--cc-shadow);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--cc-surface-2); color: var(--cc-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--cc-brand); color: #fff; }
.dropdown-divider { border-color: var(--cc-border); }

/* ---- TAB ---- */
.nav-tabs { border-bottom: 1px solid var(--cc-border); }
.nav-tabs .nav-link {
    color: var(--cc-ink-soft); border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; font-weight: 560; padding: 10px 14px;
}
.nav-tabs .nav-link:hover { color: var(--cc-brand); border-bottom-color: var(--cc-border-strong); }
.nav-tabs .nav-link.active { color: var(--cc-brand); background: transparent; border-bottom: 2px solid var(--cc-brand); }

/* ---- LEGACY AdminLTE2 .box -> look card Clarity ----
   (AdminLTE3 non stila più .box: view come generaf24/default e
   settings/leave-request-types restavano "raw". Le riallineo alle card.) */
.box {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    margin-bottom: 1.5rem;
}
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default {
    border-top: 1px solid var(--cc-border) !important; /* niente barra colorata legacy */
}
.box > .box-header, .box-header.with-border {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
    padding: 14px 18px;
}
.box-header .box-title { font-weight: 660; letter-spacing: -.01em; color: var(--cc-ink); font-size: 1.02rem; margin: 0; }
/* testata AdminLTE 2: titolo a sinistra, strumenti (.box-tools.pull-right) a destra */
.box > .box-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.box > .box-header > .box-tools { margin-left: auto; }
.box-body { padding: 16px 18px; }
.box-footer { background: var(--cc-surface-2); border-top: 1px solid var(--cc-border); padding: 12px 18px; }

/* ---- TITOLO PAGINA uniforme (content-header, page-header, o h1 nudo) ---- */
.content-wrapper h1, .content-wrapper .h1 {
    font-weight: 700; letter-spacing: -.02em; color: var(--cc-ink);
}

/* ---- LISTE / ICONE ---- */
.list-group-item-action:hover { background: var(--cc-surface-2); }
/* allineamento verticale coerente delle icone nei bottoni */
.btn > .fas, .btn > .far, .btn > .fab, .btn > .fal { vertical-align: -1px; }

/* ==================================================================
   14. RIDUZIONE MOTO
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .small-box, .card, .main-header .navbar-nav .nav-link,
    .nav-sidebar .nav-link { transition: none !important; }
    .card { animation: none !important; }
}

/* ==================================================================
   15. BARRA DI CARICAMENTO NAVIGAZIONE (soluzione B)
   ------------------------------------------------------------------
   Feedback sull'ATTESA tra il click e il caricamento della nuova
   pagina — non sull'arrivo. Elemento iniettato via JS (#cc-nav-progress)
   e mostrato solo se l'attesa supera ~140ms, così le pagine veloci
   non lampeggiano. Sostituisce di fatto la transizione di entrata,
   che resta comunque riattivabile col flag PWA.enablePageTransition.
   ================================================================== */
#cc-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 20000;
    background: linear-gradient(90deg, var(--cc-brand), var(--cc-info));
    box-shadow: 0 0 10px color-mix(in srgb, var(--cc-brand) 55%, transparent), 0 0 4px color-mix(in srgb, var(--cc-brand) 40%, transparent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease-out, opacity .3s ease;
    will-change: width, opacity;
}
#cc-nav-progress.cc-np-active {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    /* niente scorrimento animato: resta un indicatore che appare/scompare */
    #cc-nav-progress { transition: opacity .2s ease; }
}

/* ==================================================================
   Giro di adeguamento 2026-09-28: icone sprite al posto di <i> FA,
   empty-state fuori dalla dashboard, bottoni ghost sui token, info-box
   ================================================================== */
.cc-empty { padding: 26px 16px; text-align: center; color: var(--cc-muted); font-size: 13px; }
.cc-empty > i, .cc-empty > svg.i { display: block; margin: 0 auto 8px; font-size: 26px; opacity: .5; }
.cc-dash .card__h h3 > svg.i { color: var(--cc-brand); font-size: 16px; flex-shrink: 0; }
.cc-phead__date svg.i { color: var(--cc-muted); }

/* btn-ghost-*: prima solo in backend/site.css con hex fissi; qui sui token (valgono nei 3 portali e nel tema scuro) */
.btn-ghost-primary, .btn-ghost-secondary, .btn-ghost-success, .btn-ghost-danger,
.btn-ghost-warning, .btn-ghost-info {
    background: transparent; border: none; padding: .35rem .75rem;
    border-radius: .375rem; transition: background .15s, color .15s;
}
.btn-ghost-primary   { color: var(--cc-brand); }
.btn-ghost-secondary { color: var(--cc-muted); }
.btn-ghost-success   { color: var(--cc-success); }
.btn-ghost-danger    { color: var(--cc-danger); }
.btn-ghost-warning   { color: var(--cc-warning); }
.btn-ghost-info      { color: var(--cc-info); }
.btn-ghost-primary:hover   { background: var(--cc-brand-tint); color: var(--cc-brand-ink); }
.btn-ghost-secondary:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.btn-ghost-success:hover   { background: color-mix(in srgb, var(--cc-success) 12%, transparent); color: var(--cc-success); }
.btn-ghost-danger:hover    { background: color-mix(in srgb, var(--cc-danger) 12%, transparent); color: var(--cc-danger); }
.btn-ghost-warning:hover   { background: color-mix(in srgb, var(--cc-warning) 14%, transparent); color: var(--cc-warning); }
.btn-ghost-info:hover      { background: color-mix(in srgb, var(--cc-info) 12%, transparent); color: var(--cc-info); }
.btn-sm[class*="btn-ghost-"] { padding: .25rem .5rem; }
.btn-xs[class*="btn-ghost-"] { padding: .125rem .375rem; }

/* info-box-icon AdminLTE a colore pieno → chip tinta come le stat-card */
.info-box .info-box-icon[class*="bg-"] { --ib: var(--cc-brand); background: color-mix(in srgb, var(--ib) 12%, transparent) !important; color: var(--ib) !important; border-radius: var(--cc-radius-sm); box-shadow: none; }
.info-box .info-box-icon.bg-success, .info-box .info-box-icon.bg-green { --ib: var(--cc-success); }
.info-box .info-box-icon.bg-warning, .info-box .info-box-icon.bg-yellow, .info-box .info-box-icon.bg-orange { --ib: var(--cc-warning); }
.info-box .info-box-icon.bg-danger, .info-box .info-box-icon.bg-red { --ib: var(--cc-danger); }
.info-box .info-box-icon.bg-info, .info-box .info-box-icon.bg-aqua, .info-box .info-box-icon.bg-teal, .info-box .info-box-icon.bg-cyan { --ib: var(--cc-info); }
.info-box .info-box-icon.bg-purple, .info-box .info-box-icon.bg-indigo { --ib: var(--cc-violet); }
.info-box .info-box-icon.bg-secondary, .info-box .info-box-icon.bg-gray, .info-box .info-box-icon.bg-dark { --ib: var(--cc-muted); }

/* .label AdminLTE2 (in Bootstrap 4 non ha stile): come i badge del tema */
.label { display: inline-block; padding: .25em .6em; font-size: 75%; font-weight: 600; line-height: 1; border-radius: 999px; white-space: nowrap; vertical-align: baseline; background: var(--cc-surface-2); color: var(--cc-ink-soft); }
.label-primary { background: var(--cc-brand-tint); color: var(--cc-brand-ink); }
.label-success { background: color-mix(in srgb, var(--cc-success) 13%, transparent); color: var(--cc-success); }
.label-warning { background: color-mix(in srgb, var(--cc-warning) 15%, transparent); color: var(--cc-warning); }
.label-danger  { background: color-mix(in srgb, var(--cc-danger) 13%, transparent); color: var(--cc-danger); }
.label-info    { background: color-mix(in srgb, var(--cc-info) 13%, transparent); color: var(--cc-info); }

/* ==================================================================
   CHAT A DUE COLONNE (staff: modulo multichat; clienti: chat nel portale)
   Elenco a righe come la webmail (.cc-mrow) · conversazione con bolle e
   barra di scrittura. L'altezza la misura la pagina (--cc-chat-off).
   Spostato qui da backend/web/css/censea-clarity.css (sezioni 12 e 16).
   ================================================================== */
.cc-mlist__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cc-border); }
.cc-mlist__top .cc-search { flex: 1; max-width: none; width: auto; }
.cc-mscroll { overflow: auto; flex: 1; }
.cc-mrow { display: flex; gap: 11px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--cc-border); cursor: pointer; position: relative; }
.cc-mrow:hover { background: var(--cc-surface-2); }
.cc-mrow.is-sel { background: var(--cc-brand-tint); }
.cc-mrow.is-sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc-brand); }
.cc-mrow.unread::after { content: ""; position: absolute; left: 6px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-brand); }
.cc-mrow__av { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.cc-mrow__body { min-width: 0; flex: 1; }
.cc-mrow__l1 { display: flex; align-items: center; gap: 8px; }
.cc-mrow__from { font-size: 13.3px; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cc-mrow.unread .cc-mrow__from { font-weight: 750; }
.cc-mrow__time { font-size: 11.5px; color: var(--cc-muted); flex: none; font-variant-numeric: tabular-nums; }
.cc-mrow__prev { font-size: 12.3px; color: var(--cc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cc-mlist__empty { padding: 44px 16px; text-align: center; color: var(--cc-muted); }
.cc-mlist__empty :is(i, svg.i) { font-size: 34px; opacity: .4; display: block; margin-bottom: 10px; }
.cc-read__empty { margin: auto; text-align: center; color: var(--cc-muted); padding: 30px; }
.cc-read__empty :is(i, svg.i) { font-size: 42px; opacity: .35; display: block; margin-bottom: 14px; }

.cc-chat {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: calc(100vh - var(--cc-chat-off, 148px));
    min-height: 420px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}
.cc-chat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--cc-border); }
.cc-chat__pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--cc-surface-2); }

/* pulsanti tondi a icona (stessa famiglia dei pulsanti della topbar) */
.cc-chat__iconbtn {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center; padding: 0; cursor: pointer;
    background: var(--cc-surface); border: 1px solid var(--cc-border);
    color: var(--cc-ink-soft); font-size: 17px; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.cc-chat__iconbtn:hover, .cc-chat__iconbtn:focus { background: var(--cc-bg); color: var(--cc-ink); border-color: var(--cc-border-strong); outline: none; }
.cc-chat__iconbtn:disabled { opacity: .5; cursor: default; }
.cc-chat__iconbtn--send { background: var(--cc-brand); border-color: var(--cc-brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(0,123,255,.6); }
.cc-chat__iconbtn--send:hover, .cc-chat__iconbtn--send:focus { background: var(--cc-brand-ink); border-color: var(--cc-brand-ink); color: #fff; }
.cc-chat__iconbtn--send:disabled { background: var(--cc-brand); color: #fff; box-shadow: none; }
.cc-chat__iconbtn--stop { background: var(--cc-danger); border-color: var(--cc-danger); color: #fff; }
.cc-chat__iconbtn--stop:hover, .cc-chat__iconbtn--stop:focus { background: #d92d20; border-color: #d92d20; color: #fff; }
.cc-chat__iconbtn--cancel:hover { background: color-mix(in srgb, var(--cc-danger) 10%, #fff); color: var(--cc-danger); border-color: color-mix(in srgb, var(--cc-danger) 25%, #fff); }

/* elenco conversazioni */
.cc-chat__list .cc-mlist__top .cc-search { padding-top: 8px; padding-bottom: 8px; font-weight: 400; cursor: text; }
a.cc-mrow.cc-chat__row { color: inherit; text-decoration: none; align-items: center; }
.cc-chat__l2 { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.cc-chat__l2 .cc-mrow__prev { flex: 1; margin-top: 0; }
.cc-chat__row.unread .cc-mrow__prev { color: var(--cc-ink-soft); font-weight: 560; }
.cc-mlist__empty svg.i { font-size: 34px; opacity: .4; display: block; margin: 0 auto 10px; }

/* intestazione conversazione */
.cc-chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--cc-surface); border-bottom: 1px solid var(--cc-border); }
.cc-chat__who { min-width: 0; flex: 1; }
.cc-chat__who b { display: block; font-size: 15px; font-weight: 660; letter-spacing: -.01em; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-chat__who small { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.3px; color: var(--cc-muted); white-space: nowrap; overflow: hidden; }
.cc-chat__back { display: none; }
.cc-chat__head .dropdown-menu svg.i { font-size: 15px; width: 18px; margin-right: 8px; vertical-align: -3px; }
.cc-chat__head .dropdown-header { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }

/* barra di selezione messaggi */
.cc-chat .selection-toolbar {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 18px; font-size: 13px;
    background: var(--cc-brand-tint); color: var(--cc-brand-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--cc-brand) 18%, transparent);
}
.cc-chat .selection-toolbar.active { display: flex; }
.cc-chat .selection-toolbar .selection-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-chat .selection-toolbar .selection-action-label { color: var(--cc-ink-soft); }
.cc-chat .selection-toolbar svg.i { vertical-align: -2px; }

/* messaggi */
.cc-chat .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.cc-chat .message { display: flex; align-items: center; gap: 10px; max-width: 72%; }
.cc-chat .message.incoming { align-self: flex-start; }
.cc-chat .message.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.cc-chat .msg-select-checkbox { display: none; margin: 0; flex: none; }
.cc-chat .selection-mode .msg-select-checkbox { display: flex; }
.cc-chat .msg-select-checkbox input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--cc-brand); }
.cc-chat .selection-mode .message-bubble { cursor: pointer; }
.cc-chat .message.msg-selected .message-bubble { outline: 2px solid var(--cc-brand); outline-offset: 2px; }

.cc-chat .message-bubble {
    min-width: 0; padding: 9px 13px 7px; border-radius: 14px;
    font-size: 13.8px; line-height: 1.5; color: var(--cc-ink);
    background: var(--cc-surface); border: 1px solid var(--cc-border);
    box-shadow: var(--cc-shadow-sm); overflow-wrap: anywhere;
}
.cc-chat .message.incoming .message-bubble { border-bottom-left-radius: 4px; }
.cc-chat .message.outgoing .message-bubble {
    /* sul colore della superficie, non sul bianco: al buio resta scura e il testo si legge */
    background: color-mix(in srgb, var(--cc-brand) 8%, var(--cc-surface));
    border-color: color-mix(in srgb, var(--cc-brand) 17%, var(--cc-surface));
    border-bottom-right-radius: 4px;
}
.cc-chat .message-caption { font-size: 12.3px; color: var(--cc-muted); margin-top: 4px; }
/* chat del portale: quale referente dell'azienda ha scritto */
.cc-chat .message-author { font-size: 11.5px; font-weight: 650; color: var(--cc-brand-ink); margin-bottom: 2px; }
.cc-chat .message-bubble.has-media .message-author { padding: 4px 4px 0; }
/* foto, audio, video e documenti: css/chat-media.css */
.cc-chat .message-meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    margin-top: 3px; font-size: 11px; color: var(--cc-muted); font-variant-numeric: tabular-nums;
}
.cc-chat .message-meta svg.i { font-size: 14px; }
.cc-chat .message-meta .is-read { color: var(--cc-brand); }
.cc-chat .message-meta .is-failed { color: var(--cc-danger); }
.cc-chat__sender {
    width: 18px; height: 18px; border-radius: 50%; flex: none; object-fit: cover;
    display: inline-grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #fff;
}
.cc-chat .message-linked-entities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--cc-border); }
/* Pastiglia con il nome della pratica/comunicazione: una riga, i nomi lunghi coi puntini (intero nel title) */
.cc-chat .message-linked-entities .cc-pill { max-width: 100%; }
.cc-chat .message-linked-entities .cc-pill__tx { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* barra di scrittura */
.cc-chat .chat-input { padding: 12px 16px; background: var(--cc-surface); border-top: 1px solid var(--cc-border); }
.cc-chat .chat-input-form { display: flex; align-items: flex-end; gap: 8px; }
.cc-chat .chat-input-form textarea {
    flex: 1; min-height: 38px; max-height: 120px; resize: none;
    border-radius: 19px; padding: 8px 15px; line-height: 1.45;
}
.cc-chat .recording-ui { align-items: center; }
.cc-chat .recording-info { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; }
.cc-chat .recording-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc-danger); animation: cc-rec-pulse 1s ease-in-out infinite; }
@keyframes cc-rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.cc-chat .recording-timer { min-width: 48px; font-size: 15px; font-weight: 650; color: var(--cc-danger); font-variant-numeric: tabular-nums; }
.cc-chat__file {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    margin-top: 8px; padding: 5px 6px 5px 11px; font-size: 12.5px; color: var(--cc-ink-soft);
    background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: 999px;
}
.cc-chat__file #attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-chat__file button { border: 0; background: transparent; color: var(--cc-muted); padding: 2px; line-height: 1; display: inline-flex; cursor: pointer; }
.cc-chat__file button:hover { color: var(--cc-danger); }

/* conversazione non scelta */
.cc-chat .cc-read__empty svg.i { font-size: 42px; opacity: .35; display: block; margin: 0 auto 14px; }
.cc-chat .cc-read__empty b { display: block; color: var(--cc-ink-soft); font-size: 15px; margin-bottom: 4px; }

/* risultati «Collega a esistente» */
.cc-chat-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--cc-border); cursor: pointer; font-size: 13.5px; color: var(--cc-ink); }
.cc-chat-result:hover { background: var(--cc-brand-tint); }
.cc-chat-result svg.i { color: var(--cc-brand); font-size: 15px; }

/* telefono: una colonna, l'elenco sparisce quando e' aperta una conversazione */
@media (max-width: 767.98px) {
    .cc-chat { grid-template-columns: 1fr; }
    .cc-chat.has-conv .cc-chat__list { display: none; }
    .cc-chat:not(.has-conv) .cc-chat__pane { display: none; }
    .cc-chat__back { display: grid; }
    .cc-chat .message { max-width: 90%; }
    .cc-chat .chat-messages { padding: 14px; }
}

/* ------------------------------------------------------------------
   Chat del cliente con lo studio (frontend/web/js/chat-cliente.js):
   pezzi comuni alla chat a tutto schermo (chat-pwa, chat-clienti.css)
   e a quella dentro il portale (.cc-chat--cliente).
   ------------------------------------------------------------------ */
/* ---- Fasce di stato (connessione, sessione scaduta, notifiche) ---- */
.connection-status {
    display: none; padding: 7px 12px; font-size: 12.5px; font-weight: 600; text-align: center; flex-shrink: 0;
}
.connection-status.offline { display: block; background: #fffaeb; color: #b54708; border-bottom: 1px solid #fedf89; }
.connection-status.reconnecting { display: block; background: #ecfdf3; color: #067647; border-bottom: 1px solid #abefc6; }

.chat-banner {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--cc-border);
}
.chat-banner.show { display: flex; }
.chat-banner > svg.i { font-size: 17px; flex: none; }
.chat-banner__tx { flex: 1; min-width: 160px; }
.chat-banner--info { background: color-mix(in srgb, var(--cc-brand) 7%, var(--cc-surface)); color: var(--cc-brand-ink); }
.chat-banner--danger { background: color-mix(in srgb, var(--cc-danger) 7%, var(--cc-surface)); color: var(--cc-danger); border-bottom-color: color-mix(in srgb, var(--cc-danger) 18%, var(--cc-surface)); }
.chat-banner__btn {
    border: 1px solid transparent; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px;
    font-weight: 650; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.chat-banner__btn--primary { background: var(--cc-brand); color: #fff; }
.chat-banner__btn--primary:hover { color: #fff; background: var(--cc-brand-ink); }
.chat-banner__btn--ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .75; }
.chat-banner--danger .chat-banner__btn--primary { background: var(--cc-danger); }

.sender-avatar {
    width: 20px; height: 20px; border-radius: 6px; flex: none;
    display: inline-grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: -.02em;
}

/* Riferimento a una pratica / comunicazione: barra sopra la scrittura e link nella bolla */
.chat-rif {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; flex-shrink: 0;
    background: var(--cc-brand-tint); color: var(--cc-brand-ink); border-top: 1px solid var(--cc-border); font-size: 13px;
}
.chat-rif[hidden] { display: none; }
.chat-rif__tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rif__x { background: transparent; border: none; color: inherit; display: flex; padding: 4px; cursor: pointer; border-radius: 50%; }
.chat-rif__x:hover { background: color-mix(in srgb, var(--cc-brand) 15%, transparent); }
.message-rif {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 5px 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--cc-brand) 10%, transparent); color: var(--cc-brand-ink);
    font-size: 12px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.message-rif:hover { color: var(--cc-brand-ink); text-decoration: underline; }
.message-rif .i { flex: none; }
.message-bubble.has-media .message-rif { margin: 4px 8px; }

.file-preview {
    display: none; background: var(--cc-surface); padding: 8px 14px; align-items: center; gap: 8px;
    border-top: 1px solid var(--cc-border); flex-shrink: 0; color: var(--cc-ink-soft);
}
.file-preview.show { display: flex; }
.file-preview-name { flex: 1; font-size: 13px; font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-remove { background: transparent; border: none; color: var(--cc-danger); font-size: 20px; cursor: pointer; display: flex; padding: 0; }

/* Dentro il portale, a due colonne come la Chat Clienti dello staff */
.cc-chat--cliente.is-sola { grid-template-columns: 1fr; }
.cc-chat--cliente .recording-ui:not(.show) { display: none; }
.cc-chat--cliente .file-preview { border-top: 0; padding: 8px 0 0; background: transparent; }
.cc-chat--cliente .chat-rif { border-top: 1px solid var(--cc-border); }
/* Telefono: la chat del portale clienti sta tra la testata e la barra in basso, come la chat
   dello staff; il riquadro di una pratica aperto dalla chat occupa lo stesso spazio (le barre
   restano visibili). --chat-su / --chat-giu le misura la pagina (portal/default/chat.php). */
@media (max-width: 767.98px) {
    body.cc-chat-page { overflow: hidden; }
    body.cc-chat-page .cc-chat {
        position: fixed; left: 0; right: 0; top: var(--chat-su, 56px); bottom: var(--chat-giu, 64px);
        height: auto; min-height: 0; z-index: 1030;
        grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none;
    }
    body.cc-chat-page .cc-chat .cc-chat__list { display: none; border-right: 0; }
    body.cc-chat-page .cc-chat.is-elenco .cc-chat__list { display: flex; }
    body.cc-chat-page .cc-chat.is-elenco .cc-chat__pane { display: none; }
    /* una sola barra in alto: titolo, freccia e campanella stanno nella testata dell'app */
    body.cc-chat-page .cc-chat .cc-chat__head,
    body.cc-chat-page .cc-chat .cc-chat__list .cc-mlist__top { display: none; }
    body.cc-chat-page .cc-chat .chat-messages { padding: 14px 12px; }
    body.cc-chat-page .cc-chat .message { max-width: 86%; }
    /* la casella dei messaggi parte da una riga (pwa-tema da' 5.5rem ai textarea dei moduli) */
    body.cc-chat-page .cc-chat .chat-input-form textarea { min-height: 42px; }
    body.cc-chat-page .chat-riq { top: var(--chat-su, 56px); bottom: var(--chat-giu, 64px); z-index: 1032; }
    body.cc-chat-page .chat-riq__box { height: 100%; border-radius: 0; }
}
.cc-chat .message-sender { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; color: var(--cc-brand-ink); margin-bottom: 4px; }
.cc-chat .message-bubble.has-media .message-sender { padding: 4px 8px 0; }
.cc-chat__iconbtn.is-on { color: var(--cc-brand); background: var(--cc-brand-tint); }
.cc-chat__av-studio { background: var(--cc-brand); }
@media (min-width: 992px) {
    body.cc-chat-page { overflow: hidden; }
    body.cc-chat-page .wrapper .content-wrapper { min-height: 0; }
}

/* Riquadro della chat cliente (chat-cliente.js): la pratica o comunicazione di un messaggio sopra
   la chat. Sul telefono quasi a tutto schermo, dal computer una finestra larga al centro. */
.chat-riq { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(16, 24, 43, .5); align-items: flex-end; justify-content: center; }
.chat-riq.show { display: flex; }
.chat-riq__box {
    display: flex; flex-direction: column; width: 100%; height: 94vh; overflow: hidden;
    background: var(--cc-surface); border-radius: 18px 18px 0 0; box-shadow: var(--cc-shadow);
}
.chat-riq__head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--cc-border); color: var(--cc-ink); }
.chat-riq__head > svg.i { color: var(--cc-brand); font-size: 18px; flex: none; }
.chat-riq__tit { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-riq__btn {
    width: 34px; height: 34px; border-radius: 50%; border: 0; flex: none; cursor: pointer; text-decoration: none;
    display: grid; place-items: center; background: var(--cc-bg); color: var(--cc-ink-soft); font-size: 17px;
}
.chat-riq__btn:hover { color: var(--cc-brand); text-decoration: none; }
.chat-riq iframe { flex: 1; width: 100%; border: 0; background: var(--cc-bg); }
@media (min-width: 768px) {
    .chat-riq { align-items: center; padding: 24px; }
    .chat-riq__box { max-width: 1100px; height: calc(100vh - 48px); border-radius: var(--cc-radius); }
}

/* ── Riquadro modale (.cc-riq): pagina del backend (backend js/riquadro-istanza.js) e anteprima
   di un allegato (common/views/scheda/_anteprima-allegato.php, staff e dipendenti) ──
   Testata come le card del tema: chip colorato col tipo, etichetta maiuscola
   sopra il titolo, pulsanti tondi. Sul telefono: testata navy della PWA. */
.cc-riq .modal-dialog { max-width: min(1200px, 94vw); }
.cc-riq .modal-content { background: var(--cc-surface); }
.cc-riq__testata {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px 12px 18px;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-border);
}
.cc-riq__chip {
    --riq: var(--cc-brand);
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center;
    color: var(--riq);
    background: color-mix(in srgb, var(--riq) 12%, transparent);
}
.cc-riq__chip svg.i { width: 19px; height: 19px; }
.cc-riq__testi { flex: 1; min-width: 0; }
.cc-riq__sopra {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cc-muted); line-height: 1.2;
}
.cc-riq__sopra:empty { display: none; }
.cc-riq__titolo {
    margin: 0; font-size: 1.02rem; font-weight: 680; letter-spacing: -.01em; line-height: 1.3;
    color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-riq__btn {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--cc-border); background: var(--cc-surface);
    color: var(--cc-ink-soft); padding: 0;
    transition: background-color .15s, color .15s, border-color .15s;
}
.cc-riq__btn:hover, .cc-riq__btn:focus { background: var(--cc-bg); color: var(--cc-brand); border-color: var(--cc-border-strong); text-decoration: none; outline: none; }
.cc-riq__btn svg.i { width: 17px; height: 17px; }
.cc-riq__indietro { display: none; }
/* Barra di caricamento sul filo della testata, finché la pagina non arriva */
.cc-riq__carica {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cc-brand), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    opacity: 0; transition: opacity .2s;
}
.cc-riq--carica .cc-riq__carica { opacity: 1; animation: cc-riq-carica 1.1s ease-in-out infinite; }
@keyframes cc-riq-carica { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.cc-riq__cornice { display: block; width: 100%; height: 80vh; border: 0; background: var(--cc-bg); }

/* Sul telefono il riquadro prende tutto lo schermo, con la testata della PWA */
@media (max-width: 767.98px) {
    .cc-riq .modal-dialog { max-width: none; width: 100%; height: 100%; margin: 0; }
    .cc-riq .modal-content { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .cc-riq__testata {
        gap: .35rem;
        padding: .5rem .55rem;
        padding-top: calc(.5rem + env(safe-area-inset-top, 0px));
        background: linear-gradient(180deg, var(--app-testata, #121a2e) 0%, var(--app-testata-2, #0e1424) 100%);
        border-bottom: 0;
        color: #fff;
    }
    .cc-riq__chip, .cc-riq__chiudi { display: none; }
    .cc-riq__indietro { display: grid; }
    .cc-riq__sopra { color: rgba(255, 255, 255, .6); }
    .cc-riq__titolo { color: #fff; font-size: 1.05rem; font-weight: 650; }
    .cc-riq__btn { width: 2.5rem; height: 2.5rem; border: 0; background: none; color: #fff; }
    .cc-riq__btn:hover, .cc-riq__btn:focus { background: none; color: #fff; }
    .cc-riq__btn:active { background: rgba(255, 255, 255, .18); }
    .cc-riq__btn svg.i { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
    .cc-riq .modal-body { flex: 1; display: flex; }
    .cc-riq__cornice { height: auto; flex: 1; }
}
/* Anteprima di un allegato nel riquadro (views/scheda/_anteprima-allegato.php) */
.cc-riq__immagine { display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 50vh; background: var(--cc-bg); }
.cc-riq__immagine img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--cc-radius-sm); box-shadow: var(--cc-shadow-sm); }
@media (max-width: 767.98px) {
    .cc-riq__immagine { flex: 1; min-height: 0; }
    .cc-riq__immagine img { max-height: none; }
}