/* ============================================================
   side-rail.css
   Barra verticale fissa sul bordo destro, sempre visibile per gli
   utenti autenticati. Contiene le icone Notifiche e Chat che hanno
   sostituito i bottoni precedentemente iniettati nell'header XAF.
   I pannelli (notification-sidebar / vp-chatsidebar) si aprono a
   sinistra del rail (right: var(--vp-rail-width)).
   ============================================================ */

:root {
    --vp-rail-width: 48px;
    /* Larghezza unica per TUTTI i widget dello Smart Panel (notifiche, chat,
       ed eventuali futuri): devono avere sempre la stessa larghezza. */
    --vp-smart-panel-width: 420px;
}

/* ============================================================
   Padding-right del body (push del contenuto del portale).
   TUTTE le regole di padding dello Smart Panel sono centralizzate QUI,
   nell'ordine corretto, perche' hanno la stessa specificita' (body.classe)
   e quindi vince l'ultima in ordine di sorgente. Tenere insieme evita i bug
   di precedenza tra file CSS caricati in momenti diversi:
     1) has-side-rail   -> solo larghezza rail (default, rail visibile)
     2) notif/chat pinned -> rail + larghezza pannello (push affiancato)
     3) smart-panel-hidden -> 0 (vince sempre, anche con !important)
   ============================================================ */

/* Il rail e' sempre presente: il body riserva spazio a destra cosi' il
   contenuto del portale XAF non finisce sotto la barra. */
body.vp-has-side-rail {
    padding-right: var(--vp-rail-width);
    box-sizing: border-box;
    transition: padding-right 200ms ease-in-out;
}

/* Pinned mode: il body riserva spazio (rail + larghezza pannello) cosi' il
   contenuto del portale si restringe e il pannello si affianca. Definite
   dopo has-side-rail per vincere a parita' di specificita'. */
body.vp-notif-pinned-mode,
body.vp-chat-pinned-mode,
body.vp-doc-pinned-mode,
body.vp-history-pinned-mode {
    padding-right: calc(var(--vp-rail-width, 48px) + var(--vp-smart-panel-width, 420px));
}

/* Smart Panel nascosto (toggle nell'header): rail e pannelli spariscono e il
   body non riserva piu' spazio a destra. !important + ultima posizione cosi'
   vince anche quando il body e' contemporaneamente in stato pinned. */
body.vp-smart-panel-hidden {
    padding-right: 0 !important;
}

body.vp-smart-panel-hidden .vp-side-rail,
body.vp-smart-panel-hidden .notification-sidebar,
body.vp-smart-panel-hidden .notification-sidebar-overlay,
body.vp-smart-panel-hidden .vp-chatsidebar,
body.vp-smart-panel-hidden .vp-chatsidebar-overlay,
body.vp-smart-panel-hidden .vp-docpanel,
body.vp-smart-panel-hidden .vp-docpanel-overlay,
body.vp-smart-panel-hidden .vp-historypanel,
body.vp-smart-panel-hidden .vp-historypanel-overlay {
    display: none !important;
}

/* ============================================================
   Popup XAF centrato nell'area del corpo (non sotto lo Smart Panel).
   `.dxbl-modal-root` e' un overlay `position: fixed; display: grid` che centra
   il dialog sull'INTERO viewport: essendo fixed ignora il padding-right del
   body, quindi con lo Smart Panel attivo/pinnato il popup finisce sotto il
   pannello. Gli diamo lo STESSO padding-right del body (rail, o rail+pannello
   se pinnato) cosi' il dialog si centra nell'area visibile del corpo.
   Stesso schema d'ordine delle regole di padding del body.
   ============================================================ */
body.vp-has-side-rail .dxbl-modal-root {
    padding-right: var(--vp-rail-width);
    box-sizing: border-box;
}

body.vp-has-side-rail.vp-notif-pinned-mode .dxbl-modal-root,
body.vp-has-side-rail.vp-chat-pinned-mode .dxbl-modal-root,
body.vp-has-side-rail.vp-doc-pinned-mode .dxbl-modal-root,
body.vp-has-side-rail.vp-history-pinned-mode .dxbl-modal-root {
    padding-right: calc(var(--vp-rail-width) + var(--vp-smart-panel-width));
}

body.vp-smart-panel-hidden .dxbl-modal-root {
    padding-right: 0 !important;
}

/* ============================================================
   Popup XAF dell'header sopra lo Smart Panel.
   XAF posiziona il dropdown account (.account-main) e il pannello impostazioni
   (.settings-bar) con right:0 sul viewport e z-index ~1100: con lo Smart Panel
   attivo (rail z-index 10010, pannelli) finirebbero DIETRO/SOTTO al rail o al
   pannello e non sarebbero visibili. Li forziamo a sinistra dell'area riservata
   dallo Smart Panel e sopra il rail. Non si applica quando lo Smart Panel e'
   nascosto (torna al posizionamento nativo XAF).
   ============================================================ */

/* Rail visibile (base): clear del solo rail, sopra il rail (z-index 10100). */
body.vp-has-side-rail .account-container .account-main,
body.vp-has-side-rail .account-container.show-dropdown .account-main {
    position: fixed !important;
    top: 3.1rem !important;
    right: calc(var(--vp-rail-width, 48px) + 10px) !important;
    left: auto !important;
    z-index: 10100 !important;
}

body.vp-has-side-rail .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail .settings-bar {
    right: var(--vp-rail-width, 48px) !important;
    z-index: 10100 !important;
}

/* Pinned (notifiche o chat): clear del rail + pannello. Due classi di stato
   -> piu' specifico del base, vince l'override del right. */
body.vp-has-side-rail.vp-notif-pinned-mode .account-container .account-main,
body.vp-has-side-rail.vp-notif-pinned-mode .account-container.show-dropdown .account-main,
body.vp-has-side-rail.vp-chat-pinned-mode .account-container .account-main,
body.vp-has-side-rail.vp-chat-pinned-mode .account-container.show-dropdown .account-main,
body.vp-has-side-rail.vp-doc-pinned-mode .account-container .account-main,
body.vp-has-side-rail.vp-doc-pinned-mode .account-container.show-dropdown .account-main,
body.vp-has-side-rail.vp-history-pinned-mode .account-container .account-main,
body.vp-has-side-rail.vp-history-pinned-mode .account-container.show-dropdown .account-main {
    right: calc(var(--vp-rail-width, 48px) + var(--vp-smart-panel-width, 420px) + 10px) !important;
}

body.vp-has-side-rail.vp-notif-pinned-mode .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail.vp-notif-pinned-mode .settings-bar,
body.vp-has-side-rail.vp-chat-pinned-mode .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail.vp-chat-pinned-mode .settings-bar,
body.vp-has-side-rail.vp-doc-pinned-mode .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail.vp-doc-pinned-mode .settings-bar,
body.vp-has-side-rail.vp-history-pinned-mode .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail.vp-history-pinned-mode .settings-bar {
    right: calc(var(--vp-rail-width, 48px) + var(--vp-smart-panel-width, 420px)) !important;
}

/* Smart Panel nascosto: rail assente -> il popup torna al bordo destro
   (sotto l'avatar). Due classi di stato + ultima posizione -> vince. */
body.vp-has-side-rail.vp-smart-panel-hidden .account-container .account-main,
body.vp-has-side-rail.vp-smart-panel-hidden .account-container.show-dropdown .account-main {
    right: 0 !important;
}

body.vp-has-side-rail.vp-smart-panel-hidden .theme-settings.show-dropdown .settings-bar,
body.vp-has-side-rail.vp-smart-panel-hidden .settings-bar {
    right: 0 !important;
}

.vp-side-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--vp-rail-width);
    /* Sopra l'overlay notifiche (10000) e il pannello (10001) cosi' il rail
       resta sempre cliccabile mentre un pannello e' aperto. */
    z-index: 10010;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    background: #f3f4f6;
    border-left: 1px solid #e1e1e1;
    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.06);
}

.vp-side-rail-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vp-side-rail-btn:hover {
    background: #e2e8f0;
    color: #0078d4;
}

.vp-side-rail-btn:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: 1px;
}

.vp-side-rail-btn.is-active {
    background: #0078d4;
    color: #ffffff;
    border-color: #0078d4;
}

.vp-side-rail-btn.is-active:hover {
    background: #0064b3;
    color: #ffffff;
}

/* Badge contatore notifiche non lette. */
.vp-side-rail-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e03131;
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0 0 2px #f3f4f6;
}

/* ============================================================
   DARK MODE
   Coerente con gli altri CSS del portale: accetta sia
   data-vp-theme (dashboard-theme-sync.js) sia data-bs-theme (XAF/Bootstrap)
   per evitare il "lampo chiaro" durante la finestra di sync.
   ============================================================ */

[data-vp-theme="dark"] .vp-side-rail,
[data-bs-theme="dark"] .vp-side-rail {
    background: #1e293b;
    border-left-color: #334155;
    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.45);
}

[data-vp-theme="dark"] .vp-side-rail-btn,
[data-bs-theme="dark"] .vp-side-rail-btn {
    color: #b8c1cf;
}

[data-vp-theme="dark"] .vp-side-rail-btn:hover,
[data-bs-theme="dark"] .vp-side-rail-btn:hover {
    background: #334155;
    color: #ffffff;
}

[data-vp-theme="dark"] .vp-side-rail-btn.is-active,
[data-bs-theme="dark"] .vp-side-rail-btn.is-active {
    background: #1971c2;
    color: #ffffff;
    border-color: #1971c2;
}

[data-vp-theme="dark"] .vp-side-rail-btn.is-active:hover,
[data-bs-theme="dark"] .vp-side-rail-btn.is-active:hover {
    background: #1864ab;
}

[data-vp-theme="dark"] .vp-side-rail-badge,
[data-bs-theme="dark"] .vp-side-rail-badge {
    box-shadow: 0 0 0 2px #1e293b;
}

/* ============================================================
   Header: username login + toggle "Hide Smart Panel"
   Iniettati da smart-panel-header.js accanto a .account-container.
   ============================================================ */

.vp-header-username {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #323130;
    white-space: nowrap;
    margin: 0 6px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-smart-panel-toggle {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 4px;
    transition: background 0.15s, color 0.15s;
}

.vp-smart-panel-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0078d4;
}

.vp-smart-panel-toggle:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: 1px;
}

/* Stato "pannello nascosto": l'icona resta come affordance per riaprire. */
.vp-smart-panel-toggle.is-collapsed {
    color: #0078d4;
}

[data-vp-theme="dark"] .vp-header-username,
[data-bs-theme="dark"] .vp-header-username {
    color: #e5e9f0;
}

[data-vp-theme="dark"] .vp-smart-panel-toggle,
[data-bs-theme="dark"] .vp-smart-panel-toggle {
    color: #b8c1cf;
}

[data-vp-theme="dark"] .vp-smart-panel-toggle:hover,
[data-bs-theme="dark"] .vp-smart-panel-toggle:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

/* ============================================================
   MOBILE (smartphone) - SOLO mobile, il desktop resta invariato.
   Problemi corretti:
   1) I pannelli (width:100% + right:rail) sforavano a sinistra del viewport
      tagliando l'header. Qui li ancoriamo da left:0 al rail: occupano tutta
      la larghezza disponibile (viewport meno rail) senza overflow.
   2) Il pin non deve spingere il contenuto su schermo stretto (rimarrebbe
      quasi nulla): su mobile il pannello pinned resta in sovrapposizione,
      il body riserva solo lo spazio del rail.
   3) L'header e' troppo stretto per username + toggle: nascondiamo lo
      username per lasciare sempre visibile il toggle "Hide Smart Panel".
   ============================================================ */
@media (max-width: 600px) {
    /* L'app XAF (.app.main-ribbon-template) e' position:absolute con larghezza
       piena e ignora il padding-right del body: barra azioni/griglia finiscono
       sotto il rail. La restringiamo imponendo la WIDTH (non 'right', che con
       width gia' fissa creerebbe over-constraint e sposterebbe l'app a sinistra
       con left:-48). left:0 + right:auto + width = niente slittamento. I
       container interni hanno overflow-x:auto e la griglia min-width:240, quindi
       si ridimensionano/scrollano nello spazio piu' stretto.
       SOLO quando lo Smart Panel e' visibile: se nascosto la regola non si
       applica e l'app torna a tutta larghezza (il corpo si espande). */
    body.vp-has-side-rail:not(.vp-smart-panel-hidden) .app.main-ribbon-template {
        left: 0 !important;
        right: auto !important;
        width: calc(100% - var(--vp-rail-width, 48px)) !important;
    }

    .notification-sidebar,
    .vp-chatsidebar,
    .vp-docpanel,
    .vp-historypanel {
        left: 0 !important;
        right: var(--vp-rail-width, 48px) !important;
        width: auto !important;
        max-width: none !important;
    }

    body.vp-notif-pinned-mode,
    body.vp-chat-pinned-mode,
    body.vp-doc-pinned-mode,
    body.vp-history-pinned-mode {
        padding-right: var(--vp-rail-width, 48px) !important;
    }

    /* Su mobile i pannelli pinned sono overlay (non spingono): il popup va
       centrato lasciando solo lo spazio del rail, non rail+pannello. */
    body.vp-has-side-rail.vp-notif-pinned-mode .dxbl-modal-root,
    body.vp-has-side-rail.vp-chat-pinned-mode .dxbl-modal-root,
    body.vp-has-side-rail.vp-doc-pinned-mode .dxbl-modal-root,
    body.vp-has-side-rail.vp-history-pinned-mode .dxbl-modal-root {
        padding-right: var(--vp-rail-width, 48px) !important;
    }

    /* Username nascosto: libera spazio nell'header a sinistra dell'avatar dove
       smart-panel-header.js inietta il toggle su mobile. */
    .vp-header-username {
        display: none !important;
    }

    /* Toggle Smart Panel: resta nell'header (inline) ma su mobile e' iniettato
       a SINISTRA dell'avatar (a destra l'avatar e' gia' al bordo). */
    .vp-smart-panel-toggle {
        display: inline-flex !important;
    }

    /* Menu account: su desktop e' riposizionato a sinistra del rail/pannello;
       su mobile quelle coordinate lo mandano fuori posto. Lo riportiamo a
       destra (subito a sinistra del rail) con larghezza che rientra nello
       schermo. I selettori includono gli stati pinned per battere la
       specificita' delle regole desktop. */
    body.vp-has-side-rail.vp-has-side-rail .account-container .account-main,
    body.vp-has-side-rail.vp-has-side-rail .account-container.show-dropdown .account-main {
        position: fixed !important;
        top: 3.1rem !important;
        right: var(--vp-rail-width, 48px) !important;
        left: auto !important;
        /* Bootstrap/Popper applica una transform translate che sposta il menu
           in alto a sinistra: la annulliamo cosi' il menu resta dove lo ancora
           il CSS (sotto l'header, a destra). */
        transform: none !important;
        /* NON forzare min-width:0 (taglierebbe le voci): manteniamo la larghezza
           naturale (min 260px da XAF) e la limitiamo solo se eccede lo schermo. */
        width: auto !important;
        max-width: calc(100vw - var(--vp-rail-width, 48px) - 6px) !important;
        z-index: 10100 !important;
    }

    /* Pannello impostazioni: stessa logica. */
    body.vp-has-side-rail.vp-has-side-rail .settings-bar {
        right: var(--vp-rail-width, 48px) !important;
        max-width: calc(100vw - var(--vp-rail-width, 48px)) !important;
    }

    /* Il menu account (.account-main) e' renderizzato dentro lo stacking
       context dell'app XAF (.app.main-ribbon-template, position:absolute
       z-index:2): il suo z-index 10100 vale solo dentro quel contesto, quindi
       la search box (z-index 900 a livello body) gli finisce davanti. Quando il
       menu account e' aperto abbassiamo la search box sotto l'app, cosi' il
       menu la copre. (Richiede il selettore :has, supportato dai browser moderni.) */
    body:has(.account-container.show-dropdown) .global-search-box {
        z-index: 1 !important;
    }
}