/* =====================================================================
   AREA SUPERUSER - barra di navigazione interna
   Il tema (colori, schede, griglie, pulsanti...) è in portale.css.
   ===================================================================== */

/* ----------------------------------------------------------- barra superiore */
.su-topbar {
    position: sticky; top: 0; z-index: 6000;
    background: var(--pt-nav); color: var(--pt-nav-text);
    box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.su-topbar-inner {
    max-width: 1440px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 24px; height: 56px;
}
.su-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.su-brand-mark {
    width: 28px; height: 28px; border-radius: 6px; background: var(--pt-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff; letter-spacing: 0.5px;
}
.su-brand-text { font-size: 14px; font-weight: 500; color: #fff; }
.su-brand-text small { display: block; font-size: 11px; font-weight: 400; color: var(--pt-nav-text); }

.su-nav { display: flex; align-items: stretch; height: 100%; gap: 2px; flex: 1; }
.su-nav > a, .su-nav .su-dropdown > span {
    display: flex; align-items: center; padding: 0 12px; height: 100%;
    color: var(--pt-nav-text); text-decoration: none; font-size: 13px;
    border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.su-nav > a:hover, .su-nav .su-dropdown:hover > span { color: #fff; background: rgba(255,255,255,0.05); }
.su-nav > a.attivo, .su-nav .su-dropdown.attivo > span { color: #fff; border-bottom-color: var(--pt-accent); }

.su-dropdown { position: relative; display: flex; }
.su-dropdown > span::after { content: ""; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.su-dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
    background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); padding: 6px; z-index: 6001;
}
.su-dropdown:hover .su-dropdown-menu, .su-dropdown:focus-within .su-dropdown-menu { display: block; }
.su-dropdown-menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--pt-text); text-decoration: none; }
.su-dropdown-menu a:hover { background: var(--pt-subtle); color: var(--pt-accent); }

.su-search { display: flex; align-items: center; position: relative; }
.su-search input {
    width: 230px; height: 32px; border-radius: 6px; border: 1px solid #39424e;
    background: #262f3a; color: #fff; padding: 0 10px 0 30px; font-size: 13px; outline: none;
}
.su-search input::placeholder { color: #8b96a3; }
.su-search input:focus { border-color: var(--pt-accent); box-shadow: 0 0 0 3px rgba(217,1,14,0.25); }
.su-search svg { position: absolute; left: 9px; width: 14px; height: 14px; fill: #8b96a3; }

.su-user { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.su-user a { color: var(--pt-nav-text); text-decoration: none; padding: 6px 10px; border: 1px solid #39424e; border-radius: 6px; }
.su-user a:hover { color: #fff; border-color: #6b7685; }