/* =====================================================================
   CENSEA CLARITY — parte comune ai portali utente (clienti e dipendenti)
   ---------------------------------------------------------------------
   Sopra la base del tema (censea-clarity-base.css): quello che i due
   portali utente hanno e lo staff no (nome azienda in topbar, avatar a
   iniziali nella userchip, briciole AdminLTE 2 delle viste, ...).
   Pubblicato da common\assets\ClarityPortaliAsset. Il colore di un
   portale (dipendenti: verde) sta nel suo web/css/censea-clarity.css.
   ===================================================================== */

/* ---- TOPBAR: nome dell'azienda al posto della ricerca dello staff ---- */
.cc-topbar-azienda {
    font-size: 13.5px; font-weight: 600; color: var(--cc-ink-soft);
    padding: 7px 13px; border-radius: 11px;
    background: var(--cc-bg); border: 1px solid var(--cc-border);
    max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* referente di piu' aziende: il nome apre il menu per cambiarla */
.cc-topbar-azienda--scelta {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
}
.cc-topbar-azienda--scelta:hover, .cc-topbar-azienda--scelta:focus { color: var(--cc-ink); border-color: var(--cc-border-strong); text-decoration: none; }
.cc-topbar-azienda--scelta .i { flex: none; font-size: 12px; }

/* userchip con avatar a iniziali dell'azienda (AvatarHelper) */
.main-header .cc-userchip .cc-uc-av--ini {
    color: #fff; font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}

/* ---- SIDEBAR ---- */
.main-sidebar .brand-link .brand-image {
    float: none; margin: 0; max-height: 44px; width: auto;
    box-shadow: none; opacity: 1;
}
.main-sidebar .user-panel { padding-left: 14px; align-items: center; }
.main-sidebar .user-panel .image { padding-left: 0; }
.main-sidebar .user-panel .info { white-space: normal; line-height: 1.25; }
.main-sidebar .user-panel .info small { display: block; margin-top: 2px; font-size: 11.5px; }
.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info { display: none; }

/* ---- PIE' DI PAGINA ---- */
.main-footer {
    background: var(--cc-surface);
    border-top: 1px solid var(--cc-border);
    color: var(--cc-muted);
    font-size: 12.5px;
}

/* ---- MESSAGGI FLASH e banner notifiche: angoli e bordo del tema ---- */
.content-wrapper .alert { border-radius: var(--cc-radius-sm); border: 1px solid transparent; }
.content-wrapper .alert svg.i { vertical-align: -3px; }

/* ---- TITOLO PAGINA e briciole ---- */
.content-header h1 { font-size: 1.55rem; }
.content-header .breadcrumb { background: transparent; margin: 0; padding: 6px 0; font-size: 13px; }
.content-header .breadcrumb-item.active { color: var(--cc-muted); }

/* ---- Freccia apri/chiudi (ratei dipendenti: riga riepilogo -> dettaglio) ---- */
.toggle-icon { transition: transform .18s; }
.toggle-icon.is-open { transform: rotate(180deg); }

/* ---- Briciole AdminLTE 2 nelle viste (<ol class="breadcrumb"><li>, senza .breadcrumb-item) ---- */
.content-header .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.content-header .breadcrumb > li:not(.breadcrumb-item) + li:not(.breadcrumb-item)::before {
    content: "/"; padding: 0 .5rem; color: var(--cc-muted);
}
.content-header .breadcrumb > li.active { color: var(--cc-muted); }
.content-header .breadcrumb svg.i { margin-right: 3px; }
.content-header h1 small { font-size: 55%; font-weight: 500; color: var(--cc-muted); letter-spacing: 0; margin-left: 4px; }
.content-header h1 > svg.i { color: var(--cc-brand); margin-right: 6px; vertical-align: -3px; }

/* ---- Codici (codice fiscale ecc.): grigio neutro al posto del rosa di Bootstrap ---- */
.content-wrapper code {
    color: var(--cc-ink-soft); background: var(--cc-bg); border: 1px solid var(--cc-border);
    padding: 1px 6px; border-radius: 6px; font-size: .82em; font-variant-numeric: tabular-nums;
}

/* ======================================================================================
   Allineamento al backend e all'app staff (2026-10-06), comune a clienti e dipendenti:
   titolo pagina del layout (.cc-phead--pagina), tasto e scelta del tema giorno/notte,
   barra in alto al buio, testata dell'anteprima dei documenti, filtri a pillola.
   I fogli tema-scuro.css e pwa-tema.css (collegati da backend/web/css) arrivano dopo.
   ====================================================================================== */
/* Filtri a pillola (nav-pills): attivo nel colore del portale (--cc-brand), non nel blu fisso di AdminLTE. */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--cc-brand); color: #fff; }
.nav-pills .nav-link:not(.active):hover { background: var(--cc-brand-tint); color: var(--cc-brand-ink); }

/* Respiro sotto la barra in alto come nel backend, dove sopra le viste c'e' sempre la riga del
   percorso: qui il percorso sta nella testata della pagina, quindi lo spazio lo da' il contenuto. */
.content-wrapper > .content { padding-top: 1.5rem; }
@media (max-width: 767.98px) { .content-wrapper > .content { padding-top: .75rem; } }

/* Sul telefono il titolo della pagina e' nella testata dell'app: sotto resta solo l'azione
   principale (es. «Nuova Richiesta»), se la pagina ne ha una. */
@media (max-width: 768px) {
    .cc-phead--pagina h1 { display: none; }
    .cc-phead--pagina:not(:has(.btn)) { display: none; }
    .cc-phead--pagina { margin: 0 0 .75rem; }
}

/* Tasto giorno/notte nella navbar e scelta nel menu dell'utente */
.cc-tema-toggle {
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--cc-border); border-radius: 10px;
    background: var(--cc-surface); color: var(--cc-ink-soft); margin-right: 10px; padding: 0;
}
.cc-tema-toggle:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-tema-toggle svg.i { width: 18px; height: 18px; }
.dropdown-item[data-tema-scelta].attivo { color: var(--cc-brand-ink); font-weight: 600; background: var(--cc-brand-tint); }

/* Tema notte da computer: la navbar del tema comune ha il bianco scritto a mano (rgba 255 .85). */
html[data-tema="scuro"] .main-header.navbar { background: color-mix(in srgb, var(--cc-surface) 92%, transparent) !important; }
html[data-tema="scuro"] .main-footer { background: var(--cc-surface); border-top-color: var(--cc-border); color: var(--cc-muted); }

/* Anteprima dei documenti (riquadro .cc-riq comune, common/views/scheda/_anteprima-allegato.php):
   testata nel colore del portale (clienti blu, dipendenti verde: --app-azione / --app-azione-viva),
   col tema giorno e notte, da computer e da telefono. Lo staff resta bianco/blu notte.
   Selettori con .modal davanti: pesano piu' delle regole del telefono nella base. */
.modal.cc-riq .cc-riq__testata {
    background: linear-gradient(180deg, var(--app-azione) 0%, var(--app-azione-viva) 100%);
    border-bottom-color: transparent;
    color: #fff;
}
.modal.cc-riq .cc-riq__titolo { color: #fff; }
.modal.cc-riq .cc-riq__sopra { color: rgba(255, 255, 255, .75); }
.modal.cc-riq .cc-riq__chip { color: #fff; background: rgba(255, 255, 255, .18); }
.modal.cc-riq .cc-riq__btn { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.modal.cc-riq .cc-riq__btn:hover,
.modal.cc-riq .cc-riq__btn:focus { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); color: #fff; }
/* Sul telefono il saluto della dashboard e' nella testata dell'app («Ciao, Nome»). */
@media (max-width: 768px) { .cc-phead--dash { display: none; } }

/* Barra in basso dei portali utente: con sei voci su un telefono stretto le etichette lunghe
   («Dipendenti», «Documenti») si toccavano; si accorciano coi puntini dentro la propria voce. */
.pwa-bottom-nav-item > span:not(.pwa-bottom-nav-badge) {
    display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}