/**
 * sidebar.css — START
 * Sidebar verticale collassata (68px) / espansa (240px)
 * Alta specificità su tutto per battere common.css e noqueue-admin.css
 */

#st-sidebar,
#st-sidebar *,
#st-sidebar *::before,
#st-sidebar *::after {
    box-sizing: border-box !important;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    line-height: normal !important;
    list-style: none !important;
    float: none !important;
}

#st-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; width: 68px !important; background: #1a3f78 !important; display: flex !important; flex-direction: column !important; overflow: visible !important; z-index: 9999 !important; box-shadow: 2px 0 16px rgba(0,0,0,0.28) !important; transition: width 0.24s cubic-bezier(0.4,0,0.2,1) !important; border: none !important; margin: 0 !important; padding: 0 !important; }
#st-sidebar.st-expanded { width: 240px !important; }

/* HEAD */
#st-sidebar .st-sb-head { padding: 10px 0 8px !important; flex-shrink: 0 !important; display: block !important; background: transparent !important; margin: 0 !important; }

/* LOGO PILL */
#st-sidebar .st-logo-pill {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    width: calc(100% - 16px) !important;
    height: 42px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 8px !important;
    transition: background 0.15s, border-radius 0.24s cubic-bezier(0.4,0,0.2,1) !important;
}
#st-sidebar .st-logo-pill:hover { background: #f0f4ff !important; }

/* ICONA LOGO — sempre centrata nei 52px */
#st-sidebar .st-logo-icon {
    width: 52px !important;
    min-width: 52px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* TESTO LOGO — appare solo quando espansa */
#st-sidebar .st-logo-text {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding-right: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.12s 0s !important;
    white-space: nowrap !important;
}
#st-sidebar.st-expanded .st-logo-text {
    opacity: 1 !important;
    transition: opacity 0.18s 0.14s !important;
}
#st-sidebar .st-logo-name { font-size: 15px !important; font-weight: 600 !important; color: #1D4F91 !important; line-height: 1 !important; display: block !important; white-space: nowrap !important; }
#st-sidebar .st-logo-by   { font-size: 9px !important; color: #4198B5 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; display: block !important; white-space: nowrap !important; margin: 2px 0 0 !important; }

/* NAV */
#st-sidebar .st-sb-nav { flex: 1 !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 4px 0 !important; background: transparent !important; display: block !important; margin: 0 !important; }
#st-sidebar .st-sec-label { font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.30) !important; padding: 14px 10px 5px 10px !important; white-space: nowrap !important; overflow: hidden !important; opacity: 0 !important; transition: opacity 0.18s !important; display: block !important; background: transparent !important; border: none !important; margin: 0 !important; }
#st-sidebar.st-expanded .st-sec-label { opacity: 1 !important; }

/* VOCE */
#st-sidebar .st-ni { position: relative !important; display: block !important; margin: 0 0 2px !important; background: transparent !important; border: none !important; padding: 0 8px !important; }
#st-sidebar .st-ni-link { display: flex !important; align-items: center !important; height: 42px !important; border-radius: 10px !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-decoration: none !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: background 0.13s !important; width: 100% !important; color: rgba(255,255,255,0.82) !important; padding: 0 !important; margin: 0 !important; }
#st-sidebar .st-ni-link:hover,
#st-sidebar .st-ni-link:focus { background: rgba(255,255,255,0.09) !important; text-decoration: none !important; color: #fff !important; outline: none !important; }

/* ATTIVO */
#st-sidebar .st-ni.st-active .st-ni-link { background: linear-gradient(90deg,#3480a8 0%,#2d6d94 100%) !important; color: #fff !important; }
#st-sidebar .st-ni.st-active::before { content: '' !important; position: absolute !important; left: 0 !important; top: 10% !important; height: 80% !important; width: 3px !important; background: #C5E86C !important; border-radius: 0 3px 3px 0 !important; z-index: 1 !important; padding: 0 !important; margin: 0 !important; }

/* ICONA */
#st-sidebar .st-ic { width: 52px !important; min-width: 52px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.72) !important; flex-shrink: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
#st-sidebar .st-ni.st-active .st-ic,
#st-sidebar .st-ni-link:hover .st-ic { color: #fff !important; }
#st-sidebar .st-ic svg { width: 18px !important; height: 18px !important; display: block !important; }

/* LABEL */
#st-sidebar .st-nl { font-size: 13.5px !important; color: rgba(255,255,255,0.82) !important; flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 0 6px 0 0 !important; background: transparent !important; white-space: nowrap !important; font-weight: 400 !important; margin: 0 !important; border: none !important; }
#st-sidebar .st-ni.st-active .st-nl { color: #fff !important; font-weight: 500 !important; }

/* BADGE */
#st-sidebar .st-badge { background: #C5E86C !important; color: #2a4800 !important; font-size: 10px !important; font-weight: 600 !important; border-radius: 10px !important; padding: 2px 7px !important; flex-shrink: 0 !important; margin: 0 10px 0 0 !important; opacity: 0 !important; transition: opacity 0.18s !important; line-height: 1.4 !important; }
#st-sidebar.st-expanded .st-badge { opacity: 1 !important; }

/* FRECCIA */
#st-sidebar .st-arr { width: 18px !important; min-width: 18px !important; height: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,0.38) !important; flex-shrink: 0 !important; margin: 0 10px 0 0 !important; opacity: 0 !important; transition: opacity 0.18s, color 0.13s !important; background: transparent !important; padding: 0 !important; }
#st-sidebar.st-expanded .st-arr { opacity: 1 !important; }
#st-sidebar .st-ni.st-active .st-arr,
#st-sidebar .st-ni:hover .st-arr { color: rgba(255,255,255,0.70) !important; }

/* ── FLYOUT ────────────────────────────────────────────────────────────
   I flyout vengono spostati via JS in #st-flyout-container (position:fixed)
   quindi left/top vengono impostati via JS. Qui gestiamo solo stile base.
   ──────────────────────────────────────────────────────────────────── */
.st-flyout {
    position: fixed !important;
    background: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.07) !important;
    min-width: 210px !important;
    padding: 0 !important;
    z-index: 99999 !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: none !important;
    opacity: 0 !important;
    transform: translateX(-6px) scale(0.98) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    pointer-events: none !important;
}
.st-flyout.st-fly-visible {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: all !important;
}

.st-flyout-title { font-size: 10.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #8a9ab5 !important; padding: 10px 16px 8px !important; border-bottom: 0.5px solid rgba(0,0,0,0.07) !important; margin: 0 !important; white-space: nowrap !important; display: block !important; background: transparent !important; }
.st-flyout .st-fly-items { padding: 6px 0 8px !important; display: block !important; }
.st-flyout .st-fi { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 16px !important; cursor: pointer !important; font-size: 13.5px !important; color: #1a2840 !important; text-decoration: none !important; transition: background 0.12s, color 0.12s !important; white-space: nowrap !important; background: transparent !important; font-weight: 400 !important; border-radius: 0 !important; margin: 0 !important; font-family: 'Inter','Segoe UI',Arial,sans-serif !important; line-height: 1.3 !important; }
.st-flyout .st-fi:hover { background: #f0f6ff !important; color: #1D4F91 !important; text-decoration: none !important; }
.st-flyout .st-fi.st-fi-active { color: #1D4F91 !important; font-weight: 500 !important; background: #e8f0fb !important; }
.st-flyout .st-fi-dot { width: 6px !important; height: 6px !important; min-width: 6px !important; border-radius: 50% !important; background: #4198B5 !important; flex-shrink: 0 !important; opacity: 0.45 !important; padding: 0 !important; margin: 0 !important; transition: opacity 0.12s, background 0.12s !important; }
.st-flyout .st-fi:hover .st-fi-dot { opacity: 0.8 !important; background: #1D4F91 !important; }
.st-flyout .st-fi.st-fi-active .st-fi-dot { opacity: 1 !important; background: #1D4F91 !important; }

/* FOOTER */
#st-sidebar .st-sb-foot { flex-shrink: 0 !important; padding: 10px 8px 14px !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin: 4px 0 0 !important; background: transparent !important; display: block !important; }
#st-sidebar .st-user-row { display: flex !important; align-items: center !important; height: 42px !important; border-radius: 10px !important; cursor: pointer !important; overflow: hidden !important; text-decoration: none !important; transition: background 0.13s !important; margin: 0 0 2px !important; background: transparent !important; border: none !important; padding: 0 !important; width: 100% !important; }
#st-sidebar .st-user-row:hover { background: rgba(255,255,255,0.09) !important; text-decoration: none !important; }
#st-sidebar .st-av-wrap { width: 52px !important; min-width: 52px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
#st-sidebar .st-av { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 50% !important; background: linear-gradient(135deg,#4198B5,#2d6d94) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; font-weight: 600 !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.20) !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; letter-spacing: 0 !important; }
#st-sidebar .st-ui { overflow: hidden !important; display: flex !important; flex-direction: column !important; background: transparent !important; padding: 0 !important; flex: 1 !important; margin: 0 !important; }
#st-sidebar .st-un { font-size: 12.5px !important; color: rgba(255,255,255,0.95) !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; background: transparent !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; border: none !important; }
#st-sidebar .st-uo { font-size: 10px !important; color: rgba(193,214,235,0.55) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; background: transparent !important; line-height: 1.3 !important; margin: 1px 0 0 !important; padding: 0 !important; border: none !important; }
#st-sidebar .st-foot-label { overflow: hidden !important; display: flex !important; flex-direction: column !important; flex: 1 !important; opacity: 0 !important; transition: opacity 0.18s !important; }
#st-sidebar.st-expanded .st-foot-label { opacity: 1 !important; }
#st-sidebar .st-dedalus-row { display: flex !important; align-items: center !important; padding: 0 0 0 8px !important; overflow: hidden !important; opacity: 0 !important; transition: opacity 0.18s !important; background: transparent !important; margin: 0 !important; }
#st-sidebar.st-expanded .st-dedalus-row { opacity: 1 !important; }

/* LAYOUT PRINCIPALE */
body #wrapper #application { margin-left: 68px !important; }
/* Nascondi solo il logo nell'header, non i pulsanti */
body #header #logo { display: none !important; }
/* Se l'header è vuoto (solo logo nascosto) collassalo */
body #header { min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; }
body #header #login-box { display: none !important; }
body #nav { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; height: 0 !important; min-height: 0 !important; overflow: visible !important; }
.legacy-dashboard-status { margin-top: 0 !important; margin-bottom: 14px !important; }

/* SCROLLBAR */
#st-sidebar .st-sb-nav::-webkit-scrollbar { width: 3px; }
#st-sidebar .st-sb-nav::-webkit-scrollbar-track { background: transparent; }
#st-sidebar .st-sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }