/* ------------------------------------------------------------------
   PRISMA — personalizzazione TeamPass
   Colori ufficiali estratti dal logo aziendale (logo-header-bg.svg):
     #00C1AE  turchese brand      -> accenti, bordi, indicatori attivi
     #85E5D7  turchese chiaro     -> sfondi tenui, hover
     #2E2E2E  grigio scuro        -> sidebar, testate
   #00796B e' il turchese scurito usato dove serve testo bianco leggibile
   (contrasto 5.3:1 su bianco; il #00C1AE puro sarebbe 2.3:1 = illeggibile).

   File caricato automaticamente da TeamPass (public/index.php:323)
   -> nessuna modifica al codice del prodotto.
   Creato il 2026-07-22.
   ------------------------------------------------------------------ */

:root {
    --prisma-teal:        #00C1AE;
    --prisma-teal-dark:   #00796B;
    --prisma-teal-darker: #005F55;
    --prisma-teal-light:  #85E5D7;
    --prisma-dark:        #2E2E2E;
}

/* ---------- Pulsanti primari ---------- */
.btn-primary,
.btn-info {
    background-color: var(--prisma-teal-dark) !important;
    border-color: var(--prisma-teal-dark) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--prisma-teal-darker) !important;
    border-color: var(--prisma-teal-darker) !important;
}
.btn-outline-primary {
    color: var(--prisma-teal-dark) !important;
    border-color: var(--prisma-teal-dark) !important;
}
.btn-outline-primary:hover {
    background-color: var(--prisma-teal-dark) !important;
    color: #fff !important;
}

/* ---------- Link ---------- */
a { color: var(--prisma-teal-dark); }
a:hover, a:focus { color: var(--prisma-teal-darker); }

/* ---------- Sfondi/badge "primary" e "info" ---------- */
.bg-primary, .bg-info,
.badge-primary, .badge-info {
    background-color: var(--prisma-teal-dark) !important;
    color: #fff !important;
}
.text-primary, .text-info { color: var(--prisma-teal-dark) !important; }
.border-primary { border-color: var(--prisma-teal) !important; }

/* ---------- Barra superiore e sidebar ---------- */
.main-header.navbar {
    border-bottom: 3px solid var(--prisma-teal) !important;
}
.main-sidebar, .sidebar-dark-primary {
    background-color: var(--prisma-dark) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--prisma-teal-dark) !important;
    color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(0, 193, 174, 0.18) !important;
    color: var(--prisma-teal-light) !important;
}
.brand-link { border-bottom: 1px solid rgba(0, 193, 174, 0.35) !important; }

/* ---------- Testate delle card ---------- */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
    background-color: var(--prisma-teal-dark) !important;
    border-color: var(--prisma-teal-dark) !important;
}
.card-primary.card-outline { border-top: 3px solid var(--prisma-teal) !important; }

/* ---------- Campi in focus ---------- */
.form-control:focus, .custom-select:focus, .select2-container--focus {
    border-color: var(--prisma-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 193, 174, 0.25) !important;
}

/* ---------- Pagina di login ---------- */

/* Sfondo aziendale al posto della foto industriale di serie
   (definita in assets/css/teampass.css:15 -> login_wall_5.jpg).
   custom.css e' caricato DOPO teampass.css, quindi vince senza
   modificare il file originale del prodotto.
   Sfumatura scura grigio->verde-acqua nei colori del brand: il logo
   Prisma e' la variante con wordmark bianco, quindi su fondo scuro
   risalta al massimo. Nessuna immagine = pagina piu' leggera. */
.login-page {
    background:
        radial-gradient(1100px 620px at 14% 8%,  rgba(0, 193, 174, 0.26), transparent 62%),
        radial-gradient(900px 520px at 86% 92%,  rgba(133, 229, 215, 0.16), transparent 62%),
        linear-gradient(135deg, #2E2E2E 0%, #23423D 48%, #00544A 100%) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* La pagina e' gia' un flex centrato, ma ha min-height ~324px invece
   dell'altezza dello schermo: il blocco finiva schiacciato in alto con
   un grande vuoto sotto. Con 100vh si centra davvero in verticale. */
.login-page {
    min-height: 100vh !important;
    justify-content: center !important;
    padding: 6vh 1rem !important;
}
.login-page .login-box {
    margin-top: 0 !important;
    width: 100%;
    max-width: 380px;
}

/* Comparsa morbida all'apertura della pagina */
@keyframes prismaEntrata {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login-page .login-logo { animation: prismaEntrata 0.5s ease both; }
.login-page .login-box .card { animation: prismaEntrata 0.5s ease 0.08s both; }

/* Card piu' morbida e ariosa; il filo turchese in alto resta come richiamo */
.login-box .card {
    border: none;
    border-top: 4px solid var(--prisma-teal);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
}
.login-box .card-body { padding: 1.8rem 1.6rem 1.7rem; }

/* Via l'intestazione "Accedi": il logo sopra dice gia' dove siamo,
   e il pulsante principale diventa la prima cosa che si vede. */
.login-box .card-header { display: none !important; }

/* Campi piu' morbidi */
.login-box .input-group .form-control {
    border-radius: 0 8px 8px 0;
    border-left: none;
    padding: 0.62rem 0.75rem;
    height: auto;
}
.login-box .input-group .input-group-text {
    border-radius: 8px 0 0 8px;
    background-color: #f4f6f7;
    border-color: #dfe4e6;
    color: #6b7b7d;
    min-width: 44px;
    justify-content: center;
}
.login-box .input-group .form-control:focus {
    border-color: var(--prisma-teal) !important;
    box-shadow: 0 0 0 0.18rem rgba(0, 193, 174, 0.22) !important;
}

/* Il logo ha uno stile inline max-width:100px in app/core/login.php:114,
   quindi serve !important per ingrandirlo.
   L'SVG servito e' la versione con lo sfondo #2E2E2E RIMOSSO (trasparente):
   niente riquadro, il logo si appoggia direttamente sulla foto. L'ombra
   e' applicata al disegno (drop-shadow), non a una scatola rettangolare. */
.login-logo img {
    max-width: 320px !important;
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
.login-logo > div:first-child { margin: 6px 30px 14px !important; }

/* Sostituisce la scritta "Teampass" (costante TP_TOOL_NAME, non
   configurabile da impostazioni) con una dicitura aziendale leggibile
   sopra la foto di sfondo. */
.login-logo > div[style*="font-weight"] {
    font-size: 0 !important;
    line-height: 0 !important;
}
.login-logo > div[style*="font-weight"]::after {
    content: "Password Manager";
    display: block;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.26em;
    /* il tracking aggiunge spazio anche dopo l'ultima lettera:
       lo compenso perche' resti otticamente centrata */
    text-indent: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    margin: 4px 0 22px;
}

/* ---------- Marchio nella barra laterale ----------
   In public/index.php:430-431 il logo (teampass-logo2-home.png) e il nome
   (costante TP_TOOL_NAME) sono fissi nel codice: li sostituisco via CSS.
   Uso il monogramma quadrato, che regge bene anche a sidebar ridotta. */
.brand-link .brand-image {
    content: url("../../prisma-favicon.png");
    max-height: 34px !important;
    width: auto !important;
    opacity: 1 !important;
    margin-right: 10px;
}
.brand-link .brand-text { font-size: 0 !important; }
.brand-link .brand-text::after {
    content: "Prisma";
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #ffffff;
}

/* ---------- Tab attive / paginazione ---------- */
.nav-pills .nav-link.active,
.page-item.active .page-link {
    background-color: var(--prisma-teal-dark) !important;
    border-color: var(--prisma-teal-dark) !important;
}
.page-link { color: var(--prisma-teal-dark); }

/* ---------- Barre di avanzamento / spunte ---------- */
.progress-bar { background-color: var(--prisma-teal-dark) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--prisma-teal-dark) !important;
    border-color: var(--prisma-teal-dark) !important;
}

/* ---------- Righe selezionate nelle tabelle ---------- */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td {
    background-color: rgba(133, 229, 215, 0.35) !important;
    color: var(--prisma-dark) !important;
}

/* ---------- Login: SSO principale, credenziali locali a scomparsa ----------
   Le classi sono applicate da assets/js/custom.js. L'ordinamento e' fatto
   qui con flex "order", senza spostare nodi nel DOM (piu' sicuro).
   Se il JS non gira, nessuna di queste regole si attiva e la pagina
   resta quella originale. */
.prisma-login-flex { display: flex; flex-direction: column; }
.prisma-sso-row { order: -3; margin-bottom: 0 !important; }
.prisma-divider { display: none !important; }   /* sostituito dal separatore "oppure" */
/* Apertura/chiusura animata delle credenziali locali.
   max-height la gestisce custom.js (misura l'altezza reale di ogni
   elemento) quindi qui NON va messo !important, altrimenti vincerebbe
   sullo stile inline e l'animazione non partirebbe.
   Le transizioni si attivano solo con .prisma-anim, aggiunta dopo il
   primo disegno: cosi' al caricamento non si vede il form richiudersi. */
.prisma-login-flex.prisma-collapsed .prisma-local {
    opacity: 0;
    visibility: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}
.prisma-login-flex.prisma-anim .prisma-local {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease,
                margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
}
.prisma-login-flex.prisma-anim.prisma-collapsed .prisma-local {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
}
/* l'icona dentro il pulsante SSO */
#but_login_with_oauth2 i { opacity: 0.92; }

/* "Accesso con PRISMA" = azione principale, con sfumatura del brand */
#but_login_with_oauth2 {
    background: linear-gradient(135deg, #00A896 0%, var(--prisma-teal-dark) 100%) !important;
    border: none !important;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.82rem 1rem;
    box-shadow: 0 6px 16px rgba(0, 121, 107, 0.34);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#but_login_with_oauth2:hover, #but_login_with_oauth2:focus {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 121, 107, 0.42);
}
#but_login_with_oauth2:active { transform: translateY(0); }

/* Separatore "oppure": due filetti ai lati del pulsante di apertura */
#prisma-local-toggle-wrap {
    order: -1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.3rem 0 0.35rem;
}
#prisma-local-toggle-wrap::before,
#prisma-local-toggle-wrap::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.14), transparent);
}
#prisma-local-toggle {
    color: #7b8a8c !important;
    text-decoration: none !important;
    font-size: 0.83rem;
    white-space: nowrap;
    padding: 0.15rem 0.2rem;
    transition: color 0.15s ease;
}
#prisma-local-toggle:hover { color: var(--prisma-teal-dark) !important; }

/* Accesso locale = azione secondaria (contorno, non pieno) */
#but_identify_user {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--prisma-teal-dark) !important;
    border: 1px solid var(--prisma-teal-dark) !important;
    border-radius: 9px;
    font-weight: 500;
    padding: 0.58rem 1rem;
    box-shadow: none !important;
}
#but_identify_user:hover, #but_identify_user:focus {
    background: var(--prisma-teal-dark) !important;
    background-color: var(--prisma-teal-dark) !important;
    color: #ffffff !important;
}

/* senza il blocco sopra, il margine originale mt-5 e' eccessivo */
.prisma-login-flex .prisma-local.mt-5 { margin-top: 0.9rem !important; }

/* ---------- Rispetto delle preferenze di accessibilita' ----------
   Chi ha chiesto al sistema di ridurre le animazioni non deve subirle. */
@media (prefers-reduced-motion: reduce) {
    .login-page .login-logo,
    .login-page .login-box .card { animation: none !important; }
    .prisma-login-flex.prisma-anim .prisma-local,
    .prisma-login-flex.prisma-anim.prisma-collapsed .prisma-local { transition: none !important; }
    #but_login_with_oauth2 { transition: none !important; }
}

/* ===== PRISMA-UI-INTERNA: INIZIO (gestito da script) ===== */
/* ==================================================================
   PRISMA — ridisegno interfaccia interna (2026-08-06, TeamPass 3.2.1.4)

   Non e' una ricolorazione: e' un ridisegno di spaziature, tipografia,
   gerarchia e stati. Tutto in CSS, nessuna modifica al codice del
   prodotto, tutto reversibile rimuovendo questa sezione.

   Impianto:
   - scala di spaziature 4/8/12/16/20/24 usata ovunque, niente valori a caso;
   - tipografia: font di sistema (Source Sans Pro e' la cosa che datava di
     piu') e una scala di 4 gradini, non tutto alla stessa dimensione;
   - i colori passano da variabili che si ribaltano sotto `body.dark-mode`
     (classe standard AdminLTE), quindi una regola sola serve i due temi;
   - il blocco LOGIN sta sopra e non va toccato: qui e' tutto incapsulato
     in `body:not(.login-page)`.
   ================================================================== */

/* ---------- Token ---------- */
body:not(.login-page) {
    /* spaziature */
    --p-s1: 4px;  --p-s2: 8px;  --p-s3: 12px;
    --p-s4: 16px; --p-s5: 20px; --p-s6: 24px;

    /* raggi */
    --p-r-card: 16px;
    --p-r-ctl:  10px;
    --p-r-row:  10px;

    /* Altezze delle barre fisse. Stanno qui perche' servono in tre posti
       (barra superiore, margine dell'area contenuti, pie' di pagina) e se
       non coincidono la pagina sfora di pochi pixel: bastano quelli per far
       comparire la barra di scorrimento verticale su ogni schermata. */
    --p-topbar-h: 52px;
    --p-footer-h: 34px;

    /* superfici chiare */
    --p-page:        #eaeef0;
    --p-surface:     #ffffff;
    --p-surface-2:   #f4f7f8;
    --p-border:      rgba(16, 32, 36, 0.08);
    --p-border-hard: rgba(16, 32, 36, 0.15);
    --p-guide:       rgba(16, 32, 36, 0.11);   /* guide di indentazione */

    /* testo */
    --p-text:        #17252a;
    --p-text-2:      #46595d;
    /* #7b8f93 dava solo 3.39:1 su bianco: sotto la soglia di leggibilita'
       WCAG AA (4.5) per il testo piccolo, e le intestazioni di tabella sono
       proprio testo piccolo. #5f7276 arriva a 5.06:1 restando "spento". */
    --p-text-muted:  #5f7276;

    /* accento */
    --p-accent:      #00796B;                  /* leggibile su chiaro, 5.3:1 */
    --p-accent-soft: rgba(0, 193, 174, 0.11);
    --p-accent-sel:  rgba(0, 193, 174, 0.17);

    --p-shadow:    0 1px 2px rgba(16, 32, 36, 0.04),
                   0 8px 24px rgba(16, 32, 36, 0.07);
    --p-shadow-up: 0 2px 6px rgba(16, 32, 36, 0.06),
                   0 16px 36px rgba(16, 32, 36, 0.12);

    font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    color: var(--p-text);
}

body.dark-mode:not(.login-page) {
    --p-page:        #14191c;
    --p-surface:     #212a2e;
    --p-surface-2:   #1a2225;
    --p-border:      rgba(255, 255, 255, 0.08);
    --p-border-hard: rgba(255, 255, 255, 0.16);
    --p-guide:       rgba(255, 255, 255, 0.13);

    --p-text:        #e8eef0;
    --p-text-2:      #b6c6c9;
    --p-text-muted:  #86989c;

    /* su fondo scuro il #00796B sarebbe illeggibile */
    --p-accent:      #3ADFC9;
    --p-accent-soft: rgba(0, 193, 174, 0.14);
    --p-accent-sel:  rgba(0, 193, 174, 0.24);

    --p-shadow:    0 1px 2px rgba(0, 0, 0, 0.4),
                   0 8px 24px rgba(0, 0, 0, 0.32);
    --p-shadow-up: 0 2px 6px rgba(0, 0, 0, 0.45),
                   0 16px 36px rgba(0, 0, 0, 0.4);
}

/* la famiglia va propagata: AdminLTE la fissa su diversi componenti */
body:not(.login-page) .content-wrapper,
body:not(.login-page) .main-sidebar,
body:not(.login-page) .main-header,
body:not(.login-page) .main-footer,
body:not(.login-page) .btn,
body:not(.login-page) .form-control,
body:not(.login-page) .custom-select,
body:not(.login-page) .modal,
body:not(.login-page) .jstree,
body:not(.login-page) .table {
    font-family: inherit;
}

/* ---------- Impaginato generale: aria ---------- */
body:not(.login-page) .content-wrapper {
    background-color: var(--p-page) !important;
}
body:not(.login-page) .content-header {
    padding: var(--p-s6) var(--p-s6) var(--p-s4) !important;
}
body:not(.login-page) .content-header h1 {
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--p-text);
    line-height: 1.2;
}
/* ------------------------------------------------------------------
   GEOMETRIA DELLA PAGINA — il motivo per cui "e' tutto decentrato"

   Il margine laterale non nasce in un punto solo: e' la somma di tre
   catene diverse, e nel prodotto non coincidono.

     intestazione:  24 (.content-header)
                   + 7.5 (.container-fluid)
                   - 7.5 (.row)
                   + 7.5 (.col-*)      =  31.5 px
     card:           8 (section.content)
                   - 7.5 (.row)
                   + 7.5 (.col-*)      =   8   px

   Da qui i 24px di scarto fra il titolo e il bordo delle card, e le card
   quasi attaccate ai lati. Qui le due catene vengono riportate allo
   stesso risultato: gutter di pagina 24px, distanza fra le colonne 20px.

     24 (padding) - 10 (row) + 10 (col) = 24 px  ->  identico per entrambe
   ------------------------------------------------------------------ */
/* Spaziature verticali dell'intestazione: erano 24 sopra e 16 sotto, e su
   schermi bassi bastavano a far sforare la pagina di una decina di pixel,
   cioe' a far comparire la barra di scorrimento solo per il pie' di pagina.
   I margini laterali restano 24, quelli non si toccano. */
body:not(.login-page) .content-header { padding: 18px var(--p-s6) var(--p-s3) !important; }
body:not(.login-page) .content-header > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
body:not(.login-page) section.content { padding: 0 var(--p-s6) 18px !important; }
body:not(.login-page) section.content > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

body:not(.login-page) .content-header .row,
body:not(.login-page) section.content .row,
body:not(.login-page) .card-header .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
/* ⚠️ `[class*="col-"]` col trattino NON aggancia la colonna che si chiama
   solo `col` (Bootstrap la usa per le colonne a larghezza automatica):
   quella restava a 7.5px mentre le `col-6` andavano a 10px, e i due
   contenuti si sfalsavano di 2.5px. Vanno elencate entrambe le forme. */
body:not(.login-page) .content-header .row > [class*="col-"],
body:not(.login-page) .content-header .row > .col,
body:not(.login-page) section.content .row > [class*="col-"],
body:not(.login-page) section.content .row > .col,
body:not(.login-page) .card-header .row > [class*="col-"],
body:not(.login-page) .card-header .row > .col {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* La colonna delle cartelle era col-md-5 (41.7%): troppo per un elenco di
   nomi brevi, e rubava spazio all'elenco degli elementi, che e' il
   contenuto vero. Solo da 1200px in su, sotto resta il comportamento
   originale per non stringere l'albero sugli schermi piccoli.

   ⚠️ Il selettore DEVE essere il fratello adiacente `+`, non quello
   generico `~`: nella stessa riga, dopo la colonna dell'elenco, c'e' anche
   il pannello di dettaglio dell'elemento (`.tp-panel-appearing`, un
   col-md-12 che deve stare a tutta larghezza). Con `~` veniva agganciato
   pure lui e restava inchiodato al 70%, lasciando un buco a destra quando
   si apre un elemento. */
@media (min-width: 1200px) {
    body:not(.login-page) section.content .row > .column-left {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
    body:not(.login-page) section.content .row > .column-left + [class*="col-"] {
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }
}
/* il pannello di dettaglio resta comunque a tutta larghezza, in ogni caso */
body:not(.login-page) section.content .tp-panel-appearing {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    /* ⚠️ Il pannello ha un suo scorrimento interno con altezza fissata dal
       prodotto (519px), calcolata quando a scorrere era l'intera pagina.
       Con l'area contenuti che ora scorre da se', le due barre si
       contendono lo stesso contenuto e il risultato e' che la scheda
       dell'elemento resta tagliata in basso (131px non raggiungibili).
       Il pannello torna ad altezza naturale: una sola barra, quella
       dell'area contenuti, e la scheda si legge tutta. */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Le due colonne sono gia' alte uguali (le stira il flex della .row), ma le
   card dentro no: si fermano alla loro altezza naturale e i due blocchi
   finiscono sfalsati in basso (552 vs 529 px). Le card devono riempire la
   colonna. */
body:not(.login-page) section.content .row > .column-left,
body:not(.login-page) section.content .row > .column-left + [class*="col-"] {
    display: flex;
    flex-direction: column;
}
body:not(.login-page) section.content .row > .column-left > .card,
body:not(.login-page) section.content .row > .column-left + [class*="col-"] > .card {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Briciole di pane: da elenco puntato a percorso leggero */
body:not(.login-page) .content-header .breadcrumb {
    background: transparent !important;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    align-items: center;
}
body:not(.login-page) .content-header .breadcrumb-item,
body:not(.login-page) .content-header .breadcrumb a {
    color: var(--p-text-muted) !important;
    font-weight: 500;
}
body:not(.login-page) .content-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--p-border-hard);
}
body:not(.login-page) .content-header .breadcrumb-item:last-child,
body:not(.login-page) .content-header .breadcrumb-item.active {
    color: var(--p-text) !important;
    font-weight: 650;
}

/* ---------- Card ---------- */
body:not(.login-page) .content-wrapper .card {
    background-color: var(--p-surface) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: var(--p-r-card) !important;
    box-shadow: var(--p-shadow) !important;
    margin-bottom: var(--p-s5);
    overflow: hidden;
}
body:not(.login-page) .content-wrapper .card.card-outline {
    border-top-width: 3px !important;
}
/* Intestazione card: niente filetto, la separazione la fa lo spazio */
body:not(.login-page) .content-wrapper .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: var(--p-s4) var(--p-s5) var(--p-s3) !important;
    min-height: 0;
}
/* Attenzione: in TeamPass `.card-title` non e' sempre un titolo. Sulla card
   degli elementi e' un `div.card-title.w-100` usato come CONTENITORE della
   barra dei pulsanti: applicargli la tipografia da titolo (in particolare
   line-height 1.9) spingeva la barra 2px piu' in basso di quella della card
   accanto. La tipografia va solo dove c'e' davvero un titolo. */
body:not(.login-page) .content-wrapper .card-header .card-title:not(.w-100) {
    font-size: 0.94rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--p-text);
    line-height: 1.4;
}
body:not(.login-page) .content-wrapper .card-header .card-title.w-100 { line-height: normal; }

/* Testate allineate: stessa altezza minima e contenuto centrato in verticale,
   indipendentemente da come e' costruito il markup interno delle due card. */
body:not(.login-page) .content-wrapper .card-header {
    display: flex;
    align-items: center;
}
body:not(.login-page) .content-wrapper .card-header > * {
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body:not(.login-page) .content-wrapper .card-header .row { align-items: center; }
body:not(.login-page) .content-wrapper .card-header .btn-group {
    display: inline-flex;
    vertical-align: middle;
}

/* Le testate delle due card avevano altezze diverse (58 e 65px) perche' a
   destra c'e' il campo di ricerca, piu' alto dei pulsanti: ogni barra si
   centrava nella propria testata e le due finivano sfalsate di 2px.
   Non si rincorre il sintomo: si da' a tutti i controlli della barra la
   stessa altezza, cosi' le testate vengono uguali da sole. */
body:not(.login-page) .content-wrapper .card-header .btn,
body:not(.login-page) .content-wrapper .card-header .form-control {
    min-height: 37px;
}
body:not(.login-page) .content-wrapper .card-body { padding: var(--p-s4) var(--p-s5) var(--p-s5); }

/* La card delle cartelle aveva un titolo "cartella" in minuscolo a
   sinistra e il pulsante spinto a destra: due pesi sbagliati e una
   testata diversa da quella della card a fianco. Il titolo non dice
   nulla che il contenuto non dica gia'. Via il titolo, pulsante a
   sinistra: le due testate diventano identiche. */
body:not(.login-page) .column-left .card-header .card-title { display: none !important; }
body:not(.login-page) .column-left .card-header .row > [class*="col-"]:first-child { display: none !important; }
body:not(.login-page) .column-left .card-header .row > [class*="col-"]:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
body:not(.login-page) .column-left .card-header .btn-group.float-right { float: none !important; }
body:not(.login-page) .content-wrapper .card-body.p-0 { padding: 0 !important; }
body:not(.login-page) .content-wrapper .card-footer {
    background-color: var(--p-surface-2) !important;
    border-top: 1px solid var(--p-border) !important;
    padding: var(--p-s3) var(--p-s5);
}

/* ==================================================================
   ALBERO DELLE CARTELLE
   Il tema jstree disegna la gerarchia con uno sprite di linee
   tratteggiate (32px.png) agganciato a .jstree-ocl: datato, e togliendolo
   e basta la gerarchia sparisce. Va sostituito con delle GUIDE DI
   INDENTAZIONE (un filetto verticale continuo per livello), che e' il
   modo in cui la risolvono oggi gli editor di codice: si legge il livello
   a colpo d'occhio senza rumore visivo.
   ================================================================== */
body:not(.login-page) #jstree {
    padding: var(--p-s2) var(--p-s3) var(--p-s4);
    font-size: 0.875rem;
}

/* via lo sprite ovunque */
body:not(.login-page) .jstree-default .jstree-node,
body:not(.login-page) .jstree-default .jstree-children,
body:not(.login-page) .jstree-default .jstree-container-ul,
body:not(.login-page) .jstree-default .jstree-ocl,
body:not(.login-page) .jstree-default-dark .jstree-node,
body:not(.login-page) .jstree-default-dark .jstree-children,
body:not(.login-page) .jstree-default-dark .jstree-container-ul,
body:not(.login-page) .jstree-default-dark .jstree-ocl {
    background-image: none !important;
}

/* La guida: l'indentazione di jstree e' un margin-left sul <li>; la sposto
   meta' sul <ul> figlio, cosi' il filetto cade sotto la freccia del padre
   e l'indentazione totale per livello resta la stessa (24px). */
body:not(.login-page) .jstree-children {
    margin-left: 12px !important;
    padding-left: 0 !important;
    border-left: 1px solid var(--p-guide);
}
body:not(.login-page) .jstree-node {
    margin-left: 12px !important;
    position: relative;
}
body:not(.login-page) .jstree-container-ul {
    margin-left: 0 !important;
    border-left: none;
}
body:not(.login-page) .jstree-container-ul > .jstree-node { margin-left: 0 !important; }

/* Riga: alta 32px, cliccabile per tutta la larghezza, angoli morbidi */
body:not(.login-page) .jstree-anchor {
    display: inline-flex !important;
    align-items: center;
    gap: var(--p-s2);
    width: calc(100% - 26px);
    height: 27px !important;
    line-height: 27px !important;
    padding: 0 var(--p-s2) 0 var(--p-s1) !important;
    margin: 0;
    border-radius: 7px !important;
    color: var(--p-text-2) !important;
    font-weight: 500;
    transition: background-color 0.13s ease, color 0.13s ease;
}
body:not(.login-page) .jstree-anchor:hover {
    background-color: var(--p-accent-soft) !important;
    box-shadow: none !important;
    color: var(--p-text) !important;
}

/* Gerarchia anche nel peso del testo: il livello si legge due volte,
   dalla guida e dalla tipografia. */
body:not(.login-page) .jstree-anchor[aria-level="1"] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--p-text) !important;
    letter-spacing: -0.005em;
}
body:not(.login-page) .jstree-anchor[aria-level="2"] {
    font-weight: 600;
    color: var(--p-text) !important;
}
body:not(.login-page) .jstree-anchor[aria-level="3"],
body:not(.login-page) .jstree-anchor[aria-level="4"] {
    font-weight: 500;
    color: var(--p-text-2) !important;
}

/* Cartella selezionata: pastiglia piena + barretta di accento a sinistra */
body:not(.login-page) .jstree-anchor.jstree-clicked,
body:not(.login-page) .jstree-anchor.jstree-clicked:hover,
body:not(.login-page) .jstree-anchor.jstree-clicked:focus {
    background: var(--p-accent-sel) !important;
    border: none !important;
    box-shadow: inset 3px 0 0 0 var(--p-accent) !important;
    color: var(--p-accent) !important;
    font-weight: 700 !important;
}
body:not(.login-page) .jstree-wholerow-clicked,
body:not(.login-page) .jstree-wholerow-hovered {
    background: transparent !important;
}

/* Icone cartella: neutre a riposo, accese quando aperte o selezionate.
   Cosi' il colore segnala uno stato invece di essere decorazione. */
body:not(.login-page) .tree-folder {
    color: var(--p-text-muted);
    font-size: 0.95em;
    transition: color 0.13s ease;
    flex: 0 0 auto;
}
body:not(.login-page) .jstree-open > .jstree-anchor .tree-folder,
body:not(.login-page) .jstree-anchor:hover .tree-folder { color: var(--p-accent); }
body:not(.login-page) .jstree-anchor.jstree-clicked .tree-folder { color: var(--p-accent); }

/* Freccia apri/chiudi disegnata in CSS: niente sprite, niente font */
body:not(.login-page) .jstree-ocl {
    position: relative;
    width: 24px !important;
    height: 27px !important;
    vertical-align: top;
    cursor: pointer;
}
body:not(.login-page) .jstree-leaf > .jstree-ocl::before { content: none !important; }
body:not(.login-page) .jstree-open > .jstree-ocl::before,
body:not(.login-page) .jstree-closed > .jstree-ocl::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.8px solid var(--p-text-muted);
    border-bottom: 1.8px solid var(--p-text-muted);
    transform: translate(-70%, -50%) rotate(-45deg);
    transition: transform 0.16s ease, border-color 0.16s ease;
}
body:not(.login-page) .jstree-open > .jstree-ocl::before {
    transform: translate(-50%, -72%) rotate(45deg);
}
body:not(.login-page) .jstree-ocl:hover::before { border-color: var(--p-accent); }

/* Contatore degli elementi: pastiglia discreta, spinta a destra */
body:not(.login-page) .jstree-anchor .badge {
    margin-left: auto !important;
    border-radius: 999px;
    background-color: var(--p-accent-soft) !important;
    color: var(--p-accent) !important;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2em 0.5em;
    flex: 0 0 auto;
}

/* ==================================================================
   LISTA DEGLI ELEMENTI
   Da tabella zebrata a elenco: pastiglia icona a sinistra per dare ritmo
   e scansione verticale, titolo e sottotitolo su due livelli, maniglia di
   trascinamento spostata a destra e visibile solo all'occorrenza.
   ================================================================== */
body:not(.login-page) #table_teampass_items_list { margin-bottom: 0; }

/* via la zebratura: separa il filetto, non il fondo */
body:not(.login-page) #table_teampass_items_list.table-striped tbody tr:nth-of-type(odd),
body:not(.login-page) #table_teampass_items_list.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent !important;
}

/* Intestazione: teampass.css:730 la definisce con `#table_teampass_items_list
   thead th` + !important (selettore con ID), quindi per vincere serve
   pareggiare l'ID. Era blu Bootstrap #007bff/#0056b3, fuori palette. */
body:not(.login-page) #table_teampass_items_list thead th,
body:not(.login-page) .content-wrapper .table thead th {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid var(--p-border) !important;
    padding: var(--p-s3) var(--p-s5) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-text-muted) !important;
}
body:not(.login-page) .content-wrapper .table thead th > i { color: var(--p-accent); }
body:not(.login-page) #count-items-badge {
    background-color: var(--p-accent-soft) !important;
    color: var(--p-accent) !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.68rem;
    padding: 0.25em 0.55em;
}

body:not(.login-page) #teampass_items_list tr.list-item-row {
    border-bottom: 1px solid var(--p-border);
    transition: background-color 0.14s ease;
}
body:not(.login-page) #teampass_items_list tr.list-item-row:last-child { border-bottom: none; }
body:not(.login-page) #teampass_items_list tr.list-item-row:hover {
    background-color: var(--p-accent-soft) !important;
}

body:not(.login-page) #teampass_items_list tr.list-item-row > td.list-item-description {
    display: flex !important;
    align-items: center;
    gap: var(--p-s3);
    border-top: none !important;
    padding: 15px var(--p-s5) !important;
    box-shadow: inset 3px 0 0 0 transparent;
    transition: box-shadow 0.14s ease;
}
body:not(.login-page) #teampass_items_list tr.list-item-row:hover > td.list-item-description {
    box-shadow: inset 3px 0 0 0 var(--p-accent);
}

/* Pastiglia con la chiave: il <td> e' gia' flex, quindi lo ::before
   diventa a tutti gli effetti il primo elemento della riga. */
body:not(.login-page) #teampass_items_list tr.list-item-row > td.list-item-description::before {
    content: "\f084";                       /* fa-key */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    order: -2;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--p-accent-soft);
    color: var(--p-accent);
    font-size: 0.9rem;
    transition: background-color 0.14s ease;
}
body:not(.login-page) #teampass_items_list tr.list-item-row:hover > td.list-item-description::before {
    background: var(--p-accent-sel);
}

/* Titolo sopra, dettaglio sotto: due righe invece di una fila unica */
body:not(.login-page) .list-item-clicktoshow {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1px;
}
body:not(.login-page) .list-item-row-description {
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: -0.008em;
    color: var(--p-text);
    line-height: 1.3;
}
body:not(.login-page) td.list-item-description .text-secondary.small {
    color: var(--p-text-muted) !important;
    font-size: 0.83rem !important;
    line-height: 1.35;
    max-width: 100%;
}
body:not(.login-page) .item-favorite-star { margin-right: var(--p-s1); }

/* La "H" davanti a ogni descrizione e' l'icona `fa-heading` che il prodotto
   usa come marcatore del campo descrizione. Con il titolo e il dettaglio
   ora su due righe distinte il marcatore non aggiunge informazione: e'
   solo una lettera ripetuta su ogni riga. Via. */
body:not(.login-page) td.list-item-description .fa-heading { display: none !important; }

/* Maniglia di trascinamento: a destra, accennata, si accende all'hover.
   Prima erano tre puntini a piena opacita' ripetuti su ogni riga. */
body:not(.login-page) td.list-item-description .icon-container {
    order: 10;
    margin-left: auto;
    flex: 0 0 auto;
}
body:not(.login-page) td.list-item-description .icon-container .dragndrop {
    opacity: 0;
    color: var(--p-text-muted);
    cursor: grab;
    padding: 0 var(--p-s1);
    transition: opacity 0.14s ease, color 0.14s ease;
}
body:not(.login-page) tr.list-item-row:hover .icon-container .dragndrop { opacity: 0.55; }
body:not(.login-page) td.list-item-description .icon-container .dragndrop:hover {
    opacity: 1;
    color: var(--p-accent);
}
body:not(.login-page) td.list-item-description .icon-container .dragndrop:active { cursor: grabbing; }
/* Azioni rapide che compaiono passando sopra la riga: erano sei dischi
   grigi #c4c4c4 (icone Font Awesome impilate: un cerchio pieno con sopra
   il glifo). Portati nella palette, con lo stato pieno al passaggio del
   mouse sul singolo pulsante, cosi' si capisce quale si sta per premere. */
body:not(.login-page) .list-item-actions {
    order: 9;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
body:not(.login-page) .list-item-actions .fa-stack {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
    transition: transform 0.12s ease;
}
body:not(.login-page) .list-item-actions .fa-stack:hover { transform: translateY(-1px); }
/* il disco */
body:not(.login-page) .list-item-actions .fa-stack .fa-stack-2x {
    color: var(--p-accent-sel) !important;
    transition: color 0.14s ease;
}
/* il glifo sopra il disco */
body:not(.login-page) .list-item-actions .fa-stack .fa-stack-1x {
    color: var(--p-accent) !important;
    transition: color 0.14s ease;
}
body:not(.login-page) .list-item-actions .fa-stack:hover .fa-stack-2x {
    color: var(--p-accent) !important;
}
body:not(.login-page) .list-item-actions .fa-stack:hover .fa-stack-1x {
    color: #ffffff !important;
}

/* ==================================================================
   SCHEDA DELL'ELEMENTO (pannello di dettaglio)
   Era rimasta completamente fuori dal ridisegno: titolo centrato mentre
   tutto il resto e' a sinistra, barra azioni resa con una navbar
   Bootstrap `bg-light` (una fascia grigia), pulsanti grigi di serie.
   ================================================================== */

/* Gutter simmetrico. Dentro il pannello i margini negativi delle righe si
   sommano al padding del pannello e il risultato era 24px a sinistra e 34
   a destra. Qui i margini negativi si annullano e la distanza fra le
   colonne la fa `gap`: le percentuali di Bootstrap vanno quindi ridotte
   della meta' del gap, altrimenti la somma supera il 100%. */
body:not(.login-page) section.content .tp-panel-appearing .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    gap: var(--p-s5);
}
body:not(.login-page) section.content .tp-panel-appearing .row > [class*="col-"],
body:not(.login-page) section.content .tp-panel-appearing .row > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body:not(.login-page) section.content .tp-panel-appearing .row > .col-md-7 {
    flex: 0 0 calc(58.3333% - 10px) !important;
    max-width: calc(58.3333% - 10px) !important;
}
body:not(.login-page) section.content .tp-panel-appearing .row > .col-md-5 {
    flex: 0 0 calc(41.6667% - 10px) !important;
    max-width: calc(41.6667% - 10px) !important;
}
body:not(.login-page) section.content .tp-panel-appearing .row > .col-12,
body:not(.login-page) section.content .tp-panel-appearing .row > .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Testata: pulsante indietro, titolo a sinistra, chiusura a destra */
body:not(.login-page) .item-details-card-menu .card-header {
    display: flex !important;
    align-items: center;
    gap: var(--p-s3);
    padding: var(--p-s4) var(--p-s5) !important;
}
body:not(.login-page) .item-details-card-menu .card-header > * { width: auto !important; }
body:not(.login-page) #card-item-label {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--p-text);
    text-align: left;
}
body:not(.login-page) .item-details-card-menu .card-tools {
    margin-left: auto;
    position: static !important;
    float: none !important;
}
body:not(.login-page) .item-details-card-menu .card-tools .btn { margin-top: 0 !important; }

/* I due pulsanti "indietro"/"chiudi" erano grigi pieni di serie */
body:not(.login-page) .but-back-to-list.btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--p-border-hard) !important;
    color: var(--p-text-2) !important;
    box-shadow: none !important;
}
body:not(.login-page) .but-back-to-list.btn-secondary:hover {
    background-color: var(--p-accent-soft) !important;
    border-color: var(--p-accent) !important;
    color: var(--p-accent) !important;
}

/* Barra delle azioni: la navbar `bg-light` diventa una riga di voci
   cliccabili con stato al passaggio, separata solo da un filetto. */
body:not(.login-page) .item-details-card-menu .navbar {
    background-color: transparent !important;
    border-top: 1px solid var(--p-border);
    padding: var(--p-s2) var(--p-s3);
    gap: 2px;
}
body:not(.login-page) .item-details-card-menu .navbar .nav-link,
body:not(.login-page) .item-details-card-menu .navbar .navbar-nav > li > a {
    border-radius: var(--p-s2);
    padding: 6px 10px !important;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--p-text-2) !important;
    transition: background-color 0.14s ease, color 0.14s ease;
}
body:not(.login-page) .item-details-card-menu .navbar .nav-link:hover,
body:not(.login-page) .item-details-card-menu .navbar .navbar-nav > li > a:hover {
    background-color: var(--p-accent-soft);
    color: var(--p-accent) !important;
}

/* Righe della scheda (etichetta a sinistra, valore a destra): erano
   `li.list-group-item` con 12px di padding verticale e un filetto nero
   al 12.5%, troppo marcato. */
body:not(.login-page) .tp-panel-appearing .list-group-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--p-border) !important;
    padding: var(--p-s3) 0 !important;
    font-size: 0.92rem;
}
body:not(.login-page) .tp-panel-appearing .list-group-item:last-child { border-bottom: none !important; }
body:not(.login-page) .tp-panel-appearing .list-group-item > b {
    font-weight: 650;
    color: var(--p-text);
}

/* La password nascosta non e' testo: sono icone Font Awesome `fa-asterisk`
   ripetute, renderizzate alla dimensione piena del carattere -> cinque
   asterischi enormi e spaziati in mezzo alla scheda. Rimpicciolite
   diventano il classico mascheramento a pallini. */
body:not(.login-page) #card-item-pwd {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 20px;
}
body:not(.login-page) #card-item-pwd i {
    font-size: 0.5rem;
    color: var(--p-text-2);
    margin: 0 !important;
}

/* I pulsanti copia/mostra erano grigi pieni: sono azioni di contorno */
body:not(.login-page) .tp-panel-appearing .btn-secondary.btn-sm {
    background-color: transparent !important;
    border: 1px solid var(--p-border-hard) !important;
    color: var(--p-text-2) !important;
    box-shadow: none !important;
}
body:not(.login-page) .tp-panel-appearing .btn-secondary.btn-sm:hover {
    background-color: var(--p-accent-soft) !important;
    border-color: var(--p-accent) !important;
    color: var(--p-accent) !important;
}

/* Pastiglie di stato: uniformo forma e dimensione, NON i colori (li usa
   il prodotto per distinguere debole/scaduta/allegati, ricolorarli
   cancellerebbe l'informazione). */
body:not(.login-page) .tp-panel-appearing .badge {
    border-radius: 999px;
    font-weight: 650;
    font-size: 0.68rem;
    padding: 0.28em 0.55em;
}

/* ---------- Controlli ---------- */
body:not(.login-page) .content-wrapper .btn {
    border-radius: var(--p-r-ctl);
    font-weight: 550;
    font-size: 0.875rem;
    padding: 0.45rem 0.9rem;
    transition: filter 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease;
}
body:not(.login-page) .content-wrapper .btn-primary,
body:not(.login-page) .content-wrapper .btn-info {
    box-shadow: 0 1px 2px rgba(0, 121, 107, 0.2);
}
body:not(.login-page) .content-wrapper .btn-primary:hover,
body:not(.login-page) .content-wrapper .btn-info:hover {
    box-shadow: 0 5px 14px rgba(0, 121, 107, 0.28);
    filter: brightness(1.04);
}
body:not(.login-page) .content-wrapper .btn:active { transform: translateY(1px); }

/* I pulsanti sono `display:block` con padding fisso: un'icona dentro non
   finisce al centro ma dove capita (la lente della ricerca stava 3px piu'
   in alto del centro del suo pulsante). Il centraggio va fatto col flex,
   non sperando che i padding tornino. */
body:not(.login-page) .content-wrapper .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1.2;
}
body:not(.login-page) .content-wrapper .btn > i { line-height: 1; }
/* i margini delle utility Bootstrap sulle icone ora li sostituisce il gap */
body:not(.login-page) .content-wrapper .btn > i.mr-1,
body:not(.login-page) .content-wrapper .btn > i.mr-2 { margin-right: 0 !important; }
body:not(.login-page) .input-group-append > .btn,
body:not(.login-page) .input-group-prepend > .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* ⚠️ Il padding generoso qui sopra va bene per le barre degli strumenti,
   NON per i pulsanti dentro le tabelle: nella pagina Utenti la cella delle
   azioni e' larga 55px e il pulsante, portato a 76px, finiva sopra il testo
   del login della colonna accanto rendendolo illeggibile.
   Nelle tabelle e su .btn-sm si torna compatti. */
body:not(.login-page) .content-wrapper .btn-sm,
body:not(.login-page) .content-wrapper table .btn {
    padding: 0.26rem 0.5rem;
    font-size: 0.8rem;
    gap: 0.25rem;
    min-height: 0;
}
/* rete di sicurezza: un pulsante non deve mai eccedere la propria cella */
body:not(.login-page) .content-wrapper td .btn,
body:not(.login-page) .content-wrapper td .btn-group {
    max-width: 100%;
}

/* Bootstrap fonde gli angoli interni dei gruppi: dopo aver forzato il
   raggio su .btn va rifatto, altrimenti i gruppi si "sbriciolano". */
body:not(.login-page) .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
body:not(.login-page) .input-group > .form-control:not(:last-child),
body:not(.login-page) .input-group-prepend > .btn,
body:not(.login-page) .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body:not(.login-page) .btn-group > .btn:not(:first-child),
body:not(.login-page) .input-group > .form-control:not(:first-child),
body:not(.login-page) .input-group-append > .btn,
body:not(.login-page) .input-group-append > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
body:not(.login-page) .input-group > .form-control:first-child,
body:not(.login-page) .input-group-prepend:first-child > .btn,
body:not(.login-page) .input-group-prepend:first-child > .input-group-text {
    border-top-left-radius: var(--p-r-ctl) !important;
    border-bottom-left-radius: var(--p-r-ctl) !important;
}
body:not(.login-page) .input-group-append:last-child > .btn:last-child,
body:not(.login-page) .input-group-append:last-child > .input-group-text:last-child,
body:not(.login-page) .btn-group > .btn:last-child {
    border-top-right-radius: var(--p-r-ctl) !important;
    border-bottom-right-radius: var(--p-r-ctl) !important;
}

body:not(.login-page) .content-wrapper .form-control,
body:not(.login-page) .content-wrapper .custom-select {
    border-radius: var(--p-r-ctl);
    border-color: var(--p-border-hard);
    background-color: var(--p-surface);
    color: var(--p-text);
    font-size: 0.875rem;
    height: auto;
    padding: 0.45rem 0.8rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
body:not(.login-page) .content-wrapper .form-control::placeholder { color: var(--p-text-muted); }

/* ---------- Testo secondario ----------
   Il prodotto usa le utility Bootstrap per il testo "spento": il grigio di
   serie scendeva sotto la soglia di leggibilita' su alcune schermate
   (pagina Ruoli "Seleziona un ruolo" a 2.85, Rimozioni "Elenco vuoto" a
   3.04). Ricondotte al token, verificato a 5.06 su bianco, che si ribalta
   da solo in tema scuro. */
body:not(.login-page) .content-wrapper .text-muted,
body:not(.login-page) .content-wrapper .text-secondary,
body:not(.login-page) .content-wrapper small.text-muted {
    color: var(--p-text-muted) !important;
}

body:not(.login-page) .content-wrapper .badge {
    border-radius: 999px;
    font-weight: 650;
    padding: 0.32em 0.62em;
}

/* ==================================================================
   BARRA LATERALE
   Prima: fondo piatto, filetto turchese duro sotto il marchio, voci
   attaccate ai bordi, icone di larghezza variabile (le etichette non si
   allineavano), stato attivo come fascia piena da bordo a bordo.
   ================================================================== */
/* ⚠️ Il difetto piu' visibile: `.brand-link` ha di suo il fondo AdminLTE
   #343a40, diverso dal fondo della sidebar -> in cima si vedeva una fascia
   grigia stonata larga quanto la barra. Va reso trasparente, cosi' eredita.
   Colore unico e piatto: sulla sidebar la sfumatura faceva solo sporco. */
body:not(.login-page) .main-sidebar,
body:not(.login-page) .main-sidebar .sidebar {
    background-color: #232b2d !important;
    background-image: none !important;
}
/* MARCHIO — stesso trattamento della pagina di accesso: marchio Prisma
   completo (monogramma + logotipo + payoff) e sotto "PASSWORD MANAGER" in
   maiuscoletto spaziato. Prima c'era il solo monogramma quadrato con
   accanto la scritta "Prisma", che si leggeva come la prima voce del menu.
   L'SVG e' lo stesso del login: logotipo bianco su fondo trasparente,
   nato per gli sfondi scuri, quindi qui e' esattamente al suo posto.

   ⚠️ Fra `.brand-link` e il logo c'e' un <a class="tp-brand-home-link">
   che e' a sua volta un flex IN RIGA: mettere flex-direction:column sul
   contenitore esterno non serve a niente (il logo restava di fianco alla
   scritta e sbordava dalla barra). L'impilamento va chiesto all'<a>. */
body:not(.login-page) .brand-link,
body:not(.login-page) .brand-link.tp-brand-link {
    background-color: transparent !important;
    display: block !important;
    padding: 22px 18px 18px !important;
    border-bottom: none !important;
    margin: 0 !important;
    height: auto !important;
    position: relative;
}
body:not(.login-page) .brand-link .tp-brand-home-link {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}
/* filetto RIENTRATO ai lati: separa senza tagliare la barra da parte a parte */
body:not(.login-page) .brand-link::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.09);
}
/* Variante SENZA il payoff "improve your business", generata da
   /root/make_logo.py: nel file originale la classe .st2 serve sia al
   payoff sia alle facce chiare del monogramma, quindi non basta togliere
   .st2 (si sventra il simbolo) — vanno tolti solo i primi 19 elementi, e
   il logotipo va traslato di +12.35 per restare centrato sul monogramma. */
body:not(.login-page) .brand-link .brand-image {
    content: url("../images/prisma-logo-nopayoff.svg");
    width: 150px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    float: none !important;
    opacity: 1 !important;
}
body:not(.login-page) .brand-link .brand-text {
    font-size: 0 !important;
    margin: 11px 0 0 !important;
    padding: 0 !important;
}
body:not(.login-page) .brand-link .brand-text::after {
    content: "PASSWORD MANAGER";
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    /* il tracking aggiunge spazio anche dopo l'ultima lettera: lo compenso
       perche' la scritta resti otticamente centrata sotto il logo */
    text-indent: 0.22em;
    color: rgba(255, 255, 255, 0.45);
}
body:not(.login-page) .main-sidebar {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 1px 0 12px rgba(0, 0, 0, 0.16);
}

/* ==================================================================
   BARRA LATERALE RIDOTTA (solo icone)
   Premendo l'hamburger la barra si stringe a ~62px: il marchio esteso
   messo sopra non ci sta e restava tagliato a meta' ("PRI..."), col
   filetto di separazione fuori posto.
   Ridotta: solo il monogramma quadrato, centrato. Passandoci sopra la
   barra si riapre e torna il marchio intero, quindi vanno ripristinati
   anche gli stili estesi (altrimenti nello stato "aperta al passaggio"
   resterebbe il monogramma in una barra larga).
   ================================================================== */
body.sidebar-collapse:not(.login-page) .brand-link {
    padding: 14px 8px !important;
}
body.sidebar-collapse:not(.login-page) .brand-link .brand-image {
    content: url("../../prisma-favicon.png");
    width: 32px !important;
}
body.sidebar-collapse:not(.login-page) .brand-link .brand-text { display: none !important; }
body.sidebar-collapse:not(.login-page) .brand-link::after { left: 12px; right: 12px; }

/* icone centrate quando non c'e' l'etichetta accanto */
body.sidebar-collapse:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapse:not(.login-page) .main-sidebar .nav-sidebar .nav-link > .nav-icon,
body.sidebar-collapse:not(.login-page) .main-sidebar .nav-sidebar .nav-link > i:first-child {
    margin-right: 0 !important;
}

/* --- barra ridotta ma riaperta passandoci sopra: torna tutto esteso --- */
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .brand-link {
    padding: 22px 18px 18px !important;
}
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .brand-link .brand-image {
    content: url("../images/prisma-logo-nopayoff.svg");
    width: 150px !important;
}
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .brand-link .brand-text { display: block !important; }
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .brand-link::after { left: 24px; right: 24px; }
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link {
    justify-content: flex-start;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .nav-sidebar .nav-link > .nav-icon,
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .nav-sidebar .nav-link > i:first-child {
    margin-right: var(--p-s3) !important;
}
/* Quando la barra e' ridotta, AdminLTE azzera le etichette
   (width:0, opacity:0, visibility:hidden) e le ripristina al passaggio del
   mouse. Con le larghezze esplicite che ho dovuto imporre alle voci per
   centrarle, quel ripristino non scatta piu' e la barra riaperta mostrava
   pastiglie vuote, senza testo. Le rimetto io. */
body.sidebar-collapse:not(.login-page) .main-sidebar:hover .nav-sidebar .nav-link > p {
    display: inline-block !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0 !important;
}

/* ⚠️ Le voci erano DECENTRATE: 16px di margine a sinistra e 0 a destra,
   perche' l'elenco sfonda il padding del contenitore e arriva al bordo
   della barra.
   Il rientro va messo sulle VOCI, non sul contenitore: dare padding a
   `.sidebar` (che e' gestito da un plugin di scorrimento) insieme a
   width:100% sull'elenco fa sbordare il contenuto e fa comparire una
   barra di scorrimento orizzontale in fondo alla barra. Quindi: padding
   del contenitore a zero, elenco a zero, margine simmetrico sui <li>. */
/* ⚠️ La barra di scorrimento ORIZZONTALE in fondo alla sidebar compariva
   per UN SOLO pixel: `.main-sidebar` ha overflow-x:auto e si ritrovava
   scrollWidth 250 contro clientWidth 249. Non c'e' niente da "stringere",
   va solo tolto lo scorrimento orizzontale. */
body:not(.login-page) .main-sidebar { overflow-x: hidden !important; }

/* ⚠️ Il vuoto sotto il marchio non era mio: `.sidebar` ha di suo
   `margin-top: 57px`, la compensazione AdminLTE per la barra superiore
   fissa. Ma qui la barra superiore non passa sopra la sidebar, e il
   marchio sta gia' in cima: quei 57px sono spazio morto, e si notavano
   ancora di piu' dopo aver reso il marchio piu' alto. */
body:not(.login-page) .main-sidebar .sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    overflow-x: hidden;
}
body:not(.login-page) .main-sidebar .sidebar > nav { margin-top: 0 !important; }
/* L'elenco risultava ~4px piu' largo della barra: l'eccedenza veniva
   tagliata a destra e i margini uscivano 10 a sinistra / 6 a destra.
   Vincolato alla larghezza esatta del contenitore torna simmetrico. */
body:not(.login-page) .main-sidebar .nav-sidebar {
    padding: 0 10px !important;
    margin: 10px 0 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link { min-width: 0; }
body:not(.login-page) .main-sidebar .nav-sidebar .nav-link > p,
body:not(.login-page) .main-sidebar .nav-sidebar .nav-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* La voce non si stringeva al contenitore (elenco con contenuto 229.2px,
   voce 234px): va vincolata esplicitamente, altrimenti sborda di ~5px a
   destra e i margini vengono 10 a sinistra e 6 a destra. */
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item {
    margin: 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    width: 100% !important;
    box-sizing: border-box;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    border-radius: var(--p-r-ctl);
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72) !important;
    transition: background-color 0.14s ease, color 0.14s ease;
}
/* Colonna icone a larghezza fissa: senza, le etichette partono ognuna
   da un punto diverso a seconda della larghezza del glifo. */
body:not(.login-page) .main-sidebar .nav-sidebar .nav-link > .nav-icon,
body:not(.login-page) .main-sidebar .nav-sidebar .nav-link > i:first-child {
    flex: 0 0 22px;
    width: 22px !important;
    margin-right: var(--p-s3) !important;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.52);
    transition: color 0.14s ease;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    color: #ffffff !important;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover > .nav-icon,
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover > i:first-child {
    color: var(--prisma-teal-light);
}
/* Stato attivo: il turchese trasparente al 16% sopra il fondo scuro dava
   un verde spento e sporco. Colore pieno del brand: netto, leggibile,
   riconoscibile. Niente sfumature ne' ombre marcate. */
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--prisma-teal-dark) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 600;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link.active > .nav-icon,
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link.active > i:first-child {
    color: #ffffff;
}

/* Freccia dei menu a scomparsa: a destra, discreta, ruota all'apertura */
body:not(.login-page) .main-sidebar .nav-sidebar .nav-link > .right {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.45;
    transition: transform 0.18s ease, opacity 0.14s ease;
}
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > .right {
    transform: rotate(-90deg);
    opacity: 0.8;
}

/* Sottovoci: rientrate e agganciate a una guida, come l'albero cartelle */
body:not(.login-page) .main-sidebar .nav-treeview {
    margin: 2px 0 var(--p-s2) 22px;
    padding-left: var(--p-s2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}
body:not(.login-page) .main-sidebar .nav-treeview > .nav-item { margin: 1px 0; }
body:not(.login-page) .main-sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: var(--p-s2);
    padding: 0.42rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 450;
    color: rgba(255, 255, 255, 0.6) !important;
}
body:not(.login-page) .main-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
body:not(.login-page) .main-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(0, 193, 174, 0.18) !important;
    color: var(--prisma-teal-light) !important;
    font-weight: 600;
}

/* Separatore fra le voci d'uso quotidiano e i menu di amministrazione:
   sono due gruppi diversi e prima si leggevano come un elenco unico. */
body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item.has-treeview:first-of-type {
    margin-top: var(--p-s3);
    padding-top: var(--p-s3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Icone in fondo alla barra */
body:not(.login-page) .main-sidebar .os-content > div:last-child i,
body:not(.login-page) .sidebar > div:last-child i { opacity: 0.5; transition: opacity 0.14s ease; }
body:not(.login-page) .main-sidebar .os-content > div:last-child i:hover,
body:not(.login-page) .sidebar > div:last-child i:hover { opacity: 1; }

/* ==================================================================
   BARRA SUPERIORE
   Era rimasta quella di serie: fondo bianco piatto, filetto turchese da
   2px pieno larghezza (che su fondo bianco urla e fa "template"), icone
   senza area di click ne' stato al passaggio.
   Qui: filetto neutro sottile + ombra morbida (il marchio lo porta gia'
   la barra laterale), icone come pulsanti quadrati con stato, chip utente
   a pastiglia. Tutto dalle variabili, quindi segue anche il tema scuro:
   `navbar-white` di AdminLTE inchioderebbe il fondo a bianco.
   ================================================================== */
body:not(.login-page) .main-header.navbar,
body:not(.login-page) .main-header.navbar.navbar-white {
    background-color: var(--p-surface) !important;
    border-bottom: 1px solid var(--p-border) !important;
    box-shadow: 0 1px 3px rgba(16, 32, 36, 0.05), 0 8px 24px rgba(16, 32, 36, 0.04);
    padding: 0 var(--p-s4) 0 var(--p-s2);
    min-height: var(--p-topbar-h);
    height: var(--p-topbar-h);
}

/* L'area contenuti deve partire esattamente sotto la barra e finire
   esattamente sopra il pie' di pagina. AdminLTE la calcola su un'altezza
   di barra sua (57px) che non e' piu' quella giusta, e non tiene conto del
   pie' di pagina: il risultato erano pochi pixel di troppo, quanto basta a
   far comparire la barra di scorrimento verticale su tutte le schermate.
   Impostazione "guscio applicativo": la finestra NON scorre mai, scorre
   solo l'area contenuti. Cosi' barra superiore e pie' di pagina restano
   sempre a vista e non compare la barra di scorrimento della pagina
   quando il contenuto e' appena piu' alto dello schermo.
     52 (barra) + area + 34 (pie') = 100vh, per costruzione. */
body:not(.login-page) .wrapper {
    height: 100vh;
    overflow: hidden;
}
body:not(.login-page) .content-wrapper {
    margin-top: var(--p-topbar-h) !important;
    height: calc(100vh - var(--p-topbar-h) - var(--p-footer-h)) !important;
    max-height: calc(100vh - var(--p-topbar-h) - var(--p-footer-h)) !important;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ⚠️ Effetto collaterale dello scorrimento interno: dove il contenuto e'
   piu' alto dello schermo, la barra si prende 15px e il margine destro
   diventava 39 contro 24 a sinistra — di nuovo decentrato, e per giunta
   in modo incostante (solo sulle pagine lunghe).
   `scrollbar-gutter: stable both-edges` riserva lo spazio della barra su
   ENTRAMBI i lati, sempre: il contenuto resta centrato che la barra ci sia
   o no, e tutte le pagine si comportano allo stesso modo. Il rientro
   scende quindi a 9px, perche' i 15 riservati completano i 24 voluti.
   Sotto `@supports` perche' se il browser non lo conosce si torna al
   comportamento normale con i 24px, senza rompere nulla. */
@supports (scrollbar-gutter: stable) {
    body:not(.login-page) .content-wrapper { scrollbar-gutter: stable both-edges; }
    body:not(.login-page) .content-header { padding-left: 9px !important; padding-right: 9px !important; }
    body:not(.login-page) section.content { padding-left: 9px !important; padding-right: 9px !important; }
}
body.dark-mode:not(.login-page) .main-header.navbar,
body.dark-mode:not(.login-page) .main-header.navbar.navbar-white {
    background-color: var(--p-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Icone della barra: area di click vera (40x40) e stato al passaggio.
   Prima erano glifi nudi, senza bersaglio ne' feedback. */
body:not(.login-page) .main-header .tp-topbar-btn,
body:not(.login-page) .main-header .nav-link[data-widget="pushmenu"] {
    width: 36px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 2px;
    border-radius: var(--p-r-ctl);
    color: var(--p-text-2) !important;
    font-size: 1rem;
    transition: background-color 0.14s ease, color 0.14s ease;
}
body:not(.login-page) .main-header .tp-topbar-btn:hover,
body:not(.login-page) .main-header .nav-link[data-widget="pushmenu"]:hover {
    background-color: var(--p-accent-soft);
    color: var(--p-accent) !important;
}
body:not(.login-page) .main-header .tp-topbar-sep {
    background-color: var(--p-border) !important;
    width: 1px;
    height: 24px !important;
    align-self: center;
    margin: 0 var(--p-s2);
}

/* Chip utente: pastiglia con iniziali nel colore del marchio */
body:not(.login-page) .tp-account-chip {
    display: inline-flex !important;
    align-items: center;
    gap: var(--p-s2);
    background-color: transparent !important;
    border: 1px solid var(--p-border) !important;
    border-radius: 999px !important;
    padding: 4px 12px 4px 4px !important;
    transition: background-color 0.14s ease, border-color 0.14s ease;
}
body:not(.login-page) .tp-account-chip:hover {
    background-color: var(--p-accent-soft) !important;
    border-color: var(--p-accent) !important;
}
body:not(.login-page) .tp-account-avatar {
    background: linear-gradient(135deg, #00A896 0%, var(--prisma-teal-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}
/* Nome e scadenza erano impilati uno sopra l'altro, con il nome piccolo.
   Ora stanno affiancati: il nome piu' grande e leggibile, la scadenza
   della sessione in una pastiglia a se' stante. */
body:not(.login-page) .tp-account-identity {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: var(--p-s2);
    /* il prodotto lo limita a 160px: bastavano per nome e orario impilati,
       ma affiancati schiacciavano il nome a 71px troncandolo */
    max-width: none !important;
}
body:not(.login-page) .tp-account-name {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--p-text) !important;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 230px !important;   /* ellissi solo per nomi davvero lunghi */
}
/* Pastiglia del conto alla rovescia. Cifre a larghezza fissa
   (tabular-nums), altrimenti la pastiglia cambia larghezza a ogni secondo
   e trascina il resto della barra. */
body:not(.login-page) .tp-account-exp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background-color: var(--p-accent-soft);
    color: var(--p-accent) !important;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
body:not(.login-page) .tp-account-exp .countdown-icon {
    font-size: 0.62rem;
    margin-right: 0 !important;
    opacity: 0.85;
}
body:not(.login-page) .tp-account-caret {
    font-size: 0.6rem;
    color: var(--p-text-muted) !important;
    margin-left: var(--p-s1);
}

/* ---------- Paginazione ----------
   In tema scuro i pulsanti usavano il blu di AdminLTE (#3f6791) su fondo
   #343a40: rapporto di contrasto 1.95, praticamente illeggibile (e 2.23
   per lo stato disabilitato). Ricondotti alla palette, funzionano in
   entrambi i temi perche' passano dalle variabili.
   Lo stato attivo NON usa bianco su accento: in tema scuro l'accento e'
   un turchese chiaro e il bianco sopra sarebbe di nuovo poco leggibile. */
body:not(.login-page) .content-wrapper .pagination .page-link {
    background-color: transparent !important;
    border-color: var(--p-border) !important;
    color: var(--p-text-2) !important;
    border-radius: var(--p-s2) !important;
    margin: 0 2px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
body:not(.login-page) .content-wrapper .pagination .page-link:hover {
    background-color: var(--p-accent-soft) !important;
    border-color: var(--p-accent) !important;
    color: var(--p-accent) !important;
}
body:not(.login-page) .content-wrapper .pagination .page-item.active .page-link {
    background-color: var(--p-accent-sel) !important;
    border-color: var(--p-accent) !important;
    color: var(--p-accent) !important;
    font-weight: 700;
}
body:not(.login-page) .content-wrapper .pagination .page-item.disabled .page-link {
    color: var(--p-text-muted) !important;
    border-color: var(--p-border) !important;
    opacity: 0.6;
}
/* AdminLTE ha regole dedicate al tema scuro per la paginazione
   (`.dark-mode .page-item .page-link` = #3f6791, blu scuro su fondo scuro).
   Le si ripete esplicitamente sotto `.dark-mode` invece di affidarsi al solo
   gioco delle variabili: cosi' l'esito non dipende da chi vince nella
   cascata, ed e' verificabile a colpo d'occhio leggendo il CSS. */
body.dark-mode:not(.login-page) .content-wrapper .pagination .page-link,
body.dark-mode:not(.login-page) .content-wrapper .pagination .page-item .page-link {
    color: var(--p-text-2) !important;
}
body.dark-mode:not(.login-page) .content-wrapper .pagination .page-item.active .page-link {
    color: var(--p-accent) !important;
}
body.dark-mode:not(.login-page) .content-wrapper .pagination .page-item.disabled .page-link {
    color: var(--p-text-muted) !important;
}

/* ---------- Tabelle a tutta larghezza ----------
   Diverse tabelle si fermavano a meta' card lasciando un vuoto grande a
   destra (es. pagina Cartelle): il contenuto sembrava sbilanciato. */
body:not(.login-page) .content-wrapper .dataTables_wrapper table.dataTable,
body:not(.login-page) .content-wrapper .table-responsive > table {
    width: 100% !important;
}

/* ---------- Pie' di pagina ---------- */
/* Pie' di pagina: la barra resta, ma bassa. Prima era alta quanto una
   fascia di contenuto per due righe di testo di servizio. */
body:not(.login-page) .main-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--p-border) !important;
    color: var(--p-text-muted);
    /* font-size 0 spegne i nodi di testo del prodotto ("Copyright 2009-2026
       Teampass. All rights reserved."), che sono figli diretti del pie' di
       pagina e non hanno una classe con cui prenderli singolarmente. La
       dicitura aziendale la mette il ::before qui sotto, e la versione si
       riprende la sua dimensione. Nessuna modifica al codice del prodotto. */
    font-size: 0;
    padding: 0 var(--p-s6);
    height: var(--p-footer-h);
    min-height: var(--p-footer-h);
    /* NIENTE flex qui: il pie' di pagina di AdminLTE contiene nodi di testo
       spuri oltre al copyright e alla versione, e con `display:flex` ognuno
       diventa una colonna a se', sparpagliando il contenuto su tre punti.
       Con line-height si centra in verticale lasciando intatti i float. */
    line-height: var(--p-footer-h);
}
body:not(.login-page) .main-footer::before {
    content: "PRISMA Password Manager";
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--p-text-muted);
}
body:not(.login-page) .main-footer .float-right {
    font-size: 0.75rem;
    color: var(--p-text-muted);
}

/* ---------- Focus da tastiera ---------- */
body:not(.login-page) .content-wrapper a:focus-visible,
body:not(.login-page) .content-wrapper button:focus-visible,
body:not(.login-page) .jstree-anchor:focus-visible {
    outline: 2px solid var(--p-accent);
    outline-offset: 2px;
    border-radius: var(--p-s2);
}

/* ==================================================================
   INDICATORE DI CARICAMENTO (pace)
   Il tema di serie ("corner-indicator") e' un quadrato 300x300 di colore
   #29d ruotato di 45 gradi: un triangolone azzurro nell'angolo con due
   anelli che girano. Fuori palette e molto datato.
   Diventa la barra sottile in cima alla pagina che usano oggi quasi tutti.
   Fuori da `body:not(.login-page)` di proposito: vale anche sul login.
   ================================================================== */
.pace .pace-activity {
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg,
                transparent 0%,
                var(--prisma-teal) 38%,
                var(--prisma-teal-light) 50%,
                var(--prisma-teal) 62%,
                transparent 100%) !important;
    background-size: 45% 100% !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    opacity: 0;
    transition: opacity 0.22s ease;
    animation: prismaPaceSlide 1.1s linear infinite;
}
.pace.pace-active .pace-activity { opacity: 1; }
/* i due anelli bianchi del tema originale non servono piu' */
.pace .pace-activity::before,
.pace .pace-activity::after { display: none !important; }

@keyframes prismaPaceSlide {
    0%   { background-position: -45% 0; }
    100% { background-position: 145% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pace .pace-activity {
        animation: none !important;
        background: var(--prisma-teal) !important;
    }
}

/* ---------- Barre di scorrimento ---------- */
body:not(.login-page) .content-wrapper *::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.login-page) .content-wrapper *::-webkit-scrollbar-track { background: transparent; }
body:not(.login-page) .content-wrapper *::-webkit-scrollbar-thumb {
    background-color: var(--p-border-hard);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
body:not(.login-page) .content-wrapper *::-webkit-scrollbar-thumb:hover {
    background-color: var(--p-text-muted);
    background-clip: content-box;
}

/* ==================================================================
   ACCESSO MOSTRATO DENTRO IL GUSCIO DELL'APP (sessione scaduta)

   Caso che lo scoping `body:not(.login-page)` NON intercetta: quando la
   sessione scade, TeamPass non rimanda alla pagina di accesso dedicata ma
   rende il form DENTRO il layout dell'applicazione. In quel caso la classe
   `login-page` sta su un <div> interno, non sul <body>, quindi valgono le
   regole dell'app e sotto la sfumatura restava una fascia bianca (il
   fondo del body e il pie' di pagina dell'app che sbucano).
   `:has()` non e' supportato ovunque: se manca, la regola viene ignorata
   e si torna semplicemente al comportamento di prima. Nessun rischio.
   ================================================================== */
html:has(.login-page),
body:has(.login-page) {
    background-color: #23423D;
}
/* il pie' di pagina dell'app non ha senso sotto una schermata di accesso */
body:has(.login-page) .main-footer { display: none !important; }

/* ---------- Meno animazioni per chi le ha disattivate ---------- */
@media (prefers-reduced-motion: reduce) {
    body:not(.login-page) .content-wrapper .btn,
    body:not(.login-page) #teampass_items_list tr.list-item-row,
    body:not(.login-page) #teampass_items_list tr.list-item-row > td,
    body:not(.login-page) .jstree-anchor,
    body:not(.login-page) .jstree-ocl::before,
    body:not(.login-page) .tree-folder,
    body:not(.login-page) .main-sidebar .nav-sidebar > .nav-item > .nav-link {
        transition: none !important;
    }
}
/* ===== PRISMA-UI-INTERNA: FINE ===== */