/* ============================================================================
   SZ Dashboard — Design system
   Palette ispirata al WordPress admin: sidebar slate scura, body grigio chiaro,
   accent #007cba (admin theme color), accent secondario #7a00df per elementi
   "synced/linked" (es. badge del sito di riferimento).
   ============================================================================ */

:root {
    /* WP palette ufficiale fornita dall'utente */
    --wp-block-synced-color: #7a00df;
    --wp-block-synced-color--rgb: 122, 0, 223;
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color--rgb: 0, 124, 186;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-20: #005a87;
    --wp-admin-border-width-focus: 2px;

    /* Mappa SZ */
    --sz-primary:        var(--wp-admin-theme-color);
    --sz-primary-hover:  var(--wp-admin-theme-color-darker-10);
    --sz-primary-active: var(--wp-admin-theme-color-darker-20);
    --sz-accent-synced:  var(--wp-block-synced-color);

    /* Gradient "brand" — riservato a elementi premium puntuali (brand mark,
       avatar super-admin, eventuali CTA hero). Niente bg massivi. */
    --sz-gradient-brand: linear-gradient(26deg, #2b80b1 0%, #3b93c7 30%, #d12071 100%);

    /* Bootstrap override coerente */
    --bs-primary:        var(--sz-primary);
    --bs-primary-rgb:    var(--wp-admin-theme-color--rgb);
    --bs-link-color:     var(--sz-primary);
    --bs-link-hover-color: var(--sz-primary-hover);
    --bs-border-color:   #dcdcde;

    /* Tipografia: system stack moderno + numeri tabulari */
    --sz-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --sz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ────────────────────────────────────────────────────────────────────────────
   Tema LIGHT (default) — WordPress admin vibe
   ──────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="light"], :root {
    --bs-body-bg:        #f6f7f7;
    --bs-body-color:     #1d2327;
    --bs-secondary-color:#50575e;
    --bs-tertiary-bg:    #ffffff;
    --bs-border-color:   #dcdcde;

    --sz-sidebar-bg:     #1d2327;
    --sz-sidebar-fg:     #c3c4c7;
    --sz-sidebar-fg-strong: #ffffff;
    --sz-sidebar-hover-bg:  rgba(255, 255, 255, 0.05);
    --sz-sidebar-active-bg: rgba(0, 124, 186, 0.20);
    --sz-sidebar-section:#8c8f94;
    --sz-sidebar-divider: rgba(255, 255, 255, 0.07);

    --sz-topbar-bg:      #ffffff;
    --sz-topbar-border:  #dcdcde;
    --sz-card-bg:        #ffffff;
    --sz-card-border:    #dcdcde;
    --sz-muted:          #646970;
    --sz-soft-bg:        #f0f0f1;
}

/* ────────────────────────────────────────────────────────────────────────────
   Tema DARK (secondario) — toni più tecnici
   ──────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg:        #0e1115;
    --bs-body-color:     #e4e6eb;
    --bs-secondary-color:#9aa0a6;
    --bs-tertiary-bg:    #161a1f;
    --bs-border-color:   #23272e;

    --sz-sidebar-bg:     #0b0e12;
    --sz-sidebar-fg:     #9aa0a6;
    --sz-sidebar-fg-strong: #ffffff;
    --sz-sidebar-hover-bg:  rgba(255, 255, 255, 0.04);
    --sz-sidebar-active-bg: rgba(0, 124, 186, 0.20);
    --sz-sidebar-section:#646970;
    --sz-sidebar-divider: rgba(255, 255, 255, 0.05);

    --sz-topbar-bg:      #161a1f;
    --sz-topbar-border:  #23272e;
    --sz-card-bg:        #161a1f;
    --sz-card-border:    #23272e;
    --sz-muted:          #8a9099;
    --sz-soft-bg:        #1a1e24;
}

/* ────────────────────────────────────────────────────────────────────────────
   Base
   ──────────────────────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--sz-font-sans);
    font-feature-settings: "ss01", "cv01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.011em;
    color: var(--bs-body-color);
}

code, pre, .font-mono { font-family: var(--sz-font-mono); }

/* Bootstrap primary override */
.btn-primary {
    --bs-btn-bg: var(--sz-primary);
    --bs-btn-border-color: var(--sz-primary);
    --bs-btn-hover-bg: var(--sz-primary-hover);
    --bs-btn-hover-border-color: var(--sz-primary-hover);
    --bs-btn-active-bg: var(--sz-primary-active);
    --bs-btn-active-border-color: var(--sz-primary-active);
    --bs-btn-focus-shadow-rgb: var(--wp-admin-theme-color--rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--sz-primary);
    --bs-btn-border-color: var(--sz-primary);
    --bs-btn-hover-bg: var(--sz-primary);
    --bs-btn-hover-border-color: var(--sz-primary);
    --bs-btn-active-bg: var(--sz-primary-active);
}

a { color: var(--sz-primary); }
a:hover { color: var(--sz-primary-hover); }

/* Focus ring stile WP (2px) */
*:focus-visible {
    outline: var(--wp-admin-border-width-focus) solid var(--sz-primary) !important;
    outline-offset: 1px;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .btn:focus {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) rgba(var(--wp-admin-theme-color--rgb), 0.25);
}

/* ────────────────────────────────────────────────────────────────────────────
   Shell: topbar + sidebar + main
   ──────────────────────────────────────────────────────────────────────────── */
.sz-shell { min-height: calc(100vh - 56px); }
.sz-main {
    background: var(--bs-body-bg);
    padding: 24px 28px;
    /* Flex-child accanto alla sidebar: senza min-width:0 si allargherebbe fino al
       min-content dei discendenti (es. un .text-truncate con testo lungo e nowrap),
       sforando lo schermo e generando scroll orizzontale. Con 0 resta nella
       larghezza disponibile e i .text-truncate tagliano davvero. */
    min-width: 0;
}

/* Topbar — pulita, niente filling colorato */
.sz-topbar {
    background: var(--sz-topbar-bg);
    border-bottom: 1px solid var(--sz-topbar-border) !important;
    padding: 10px 20px;
    min-height: 56px;
}
.sz-topbar .navbar-brand {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bs-body-color);
    letter-spacing: -0.01em;
}
.sz-topbar .navbar-brand .sz-logo {
    display: inline-block;
    width: auto;
    height: 26px;
}
.sz-topbar .navbar-brand .sz-logo-mark { height: 28px; }
/* Su topbar scura il navy del logo sparirebbe: lo rendiamo bianco. */
[data-bs-theme="dark"] .sz-topbar .navbar-brand .sz-logo {
    filter: brightness(0) invert(1);
}
.sz-topbar .btn-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--bs-secondary-color);
    padding: 0;
}
.sz-topbar .btn-icon:hover {
    background: var(--sz-soft-bg);
    color: var(--bs-body-color);
}

/* Avatar tondo con iniziali */
.sz-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sz-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: uppercase;
    user-select: none;
}
.sz-avatar.sz-avatar-sa { background: var(--sz-gradient-brand); }

/* ────────────────────────────────────────────────────────────────────────────
   Sidebar — slate scura, tipografia gerarchica, niente bordi colorati casuali
   ──────────────────────────────────────────────────────────────────────────── */
.sz-sidebar {
    background: var(--sz-sidebar-bg);
    color: var(--sz-sidebar-fg);
    border-right: 1px solid transparent !important;
    width: 264px;
    min-width: 264px;
    max-width: 264px;
    padding: 14px 0;
}
.sz-sidebar a, .sz-sidebar .nav-link {
    color: var(--sz-sidebar-fg);
}
.sz-sidebar .sz-section-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sz-sidebar-section);
    padding: 14px 18px 6px;
    margin: 0;
}
.sz-sidebar .nav-pills {
    --bs-nav-pills-link-active-bg: transparent;
    --bs-nav-pills-link-active-color: var(--sz-sidebar-fg-strong);
    margin: 0;
    padding: 0 8px;
    gap: 1px !important;
}
.sz-sidebar .nav-pills .nav-link {
    color: var(--sz-sidebar-fg);
    background: transparent;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    border-left: 2px solid transparent;
}
.sz-sidebar .nav-pills .nav-link:hover {
    background: var(--sz-sidebar-hover-bg);
    color: var(--sz-sidebar-fg-strong);
}
.sz-sidebar .nav-pills .nav-link.active {
    background: var(--sz-sidebar-active-bg);
    color: var(--sz-sidebar-fg-strong);
    border-left-color: var(--sz-primary);
    font-weight: 500;
}
.sz-sidebar .nav-pills .nav-link .bi { font-size: 1rem; opacity: .85; }
.sz-sidebar .nav-pills .nav-link.active .bi { opacity: 1; color: var(--sz-primary); }

/* Sub-voci (Home/Task/Messaggi/Membri + Tool del reparto) → tree con guida verticale */
.sz-sidebar .sz-sub-nav {
    padding-left: 22px;
    margin: 2px 8px 4px 18px;
    border-left: 1px solid var(--sz-sidebar-divider);
    list-style: none;
}
.sz-sidebar .sz-sub-nav .nav-link {
    font-size: 0.825rem;
    padding: 5px 10px;
    color: var(--sz-sidebar-fg);
}
.sz-sidebar .sz-sub-nav .nav-link.active {
    background: var(--sz-sidebar-hover-bg);
    color: var(--sz-sidebar-fg-strong);
    border-left-color: transparent;
}
.sz-sidebar .sz-sub-nav .nav-link.active::before {
    content: ""; position: absolute;
    left: -22px; top: 50%;
    width: 12px; height: 1px;
    background: var(--sz-primary);
    transform: translateY(-50%);
}
.sz-sidebar .sz-subgroup-title {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sz-sidebar-section);
    padding: 10px 0 4px 28px;
}

/* Punto colorato per "membro di questo reparto" — sostituisce il badge 'mio' */
.sz-dot-mine {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sz-primary);
    display: inline-block;
    margin-left: auto;
    flex-shrink: 0;
}

/* Header di contesto del reparto attivo in cima alla sidebar */
.sz-sidebar .sz-dept-context {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 18px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sz-sidebar-fg-strong);
}
.sz-sidebar .sz-dept-context .bi { color: var(--sz-primary); }

/* Selettore delle "stanze" (reparti) in cima alla sidebar — dropdown */
.sz-sidebar .sz-dept-selector { padding: 2px 12px 12px; }
.sz-sidebar .sz-room-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--sz-sidebar-divider);
    border-radius: 10px;
    background: var(--sz-sidebar-hover-bg);
    color: var(--sz-sidebar-fg-strong);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.sz-sidebar .sz-room-btn:hover { border-color: rgba(var(--wp-admin-theme-color--rgb), 0.55); }
.sz-sidebar .sz-room-btn .sz-room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-sidebar .sz-room-btn .bi-building { color: var(--sz-primary); }
.sz-sidebar .sz-room-btn .sz-room-caret { margin-left: auto; font-size: 0.7rem; opacity: 0.7; }
.sz-sidebar .sz-room-menu {
    --bs-dropdown-bg: var(--sz-card-bg);
    --bs-dropdown-border-color: var(--sz-card-border);
    --bs-dropdown-link-hover-bg: var(--sz-soft-bg);
    --bs-dropdown-link-active-bg: var(--sz-primary);
    max-height: 60vh; overflow-y: auto; min-width: 240px;
}
.sz-sidebar .sz-room-menu .dropdown-item { display: flex; align-items: center; gap: 8px; border-radius: 8px; }
.sz-sidebar .sz-room-menu .dropdown-item .bi-check2 { margin-left: auto; color: var(--sz-primary); }

/* Separatore orizzontale tra blocco reparto e Amministrazione */
.sz-section-divider {
    height: 1px;
    background: var(--sz-sidebar-divider);
    margin: 12px 18px;
}

/* Voce collassabile (Amministrazione): caret che ruota */
.sz-sidebar .sz-collapse-toggle .sz-collapse-caret {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.sz-sidebar .sz-collapse-toggle.collapsed .sz-collapse-caret { transform: rotate(-90deg); }

/* Alpine: nasconde gli elementi finché il componente non è inizializzato */
[x-cloak] { display: none !important; }

/* ── Switcher topbar (reparto / sito) come dropdown curato ─────────────────── */
.sz-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 6px 10px;
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--sz-topbar-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.sz-switcher-btn:hover {
    border-color: var(--sz-primary);
    background: var(--sz-soft-bg);
}
.sz-switcher-btn[aria-expanded="true"] {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.15);
}
.sz-switcher-btn:disabled { opacity: .65; cursor: progress; }

/* larghezza fissa per swap icona↔spinner senza shift */
.sz-switcher-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; flex-shrink: 0;
    color: var(--sz-primary);
}
.sz-switcher-icon .spinner-border-sm {
    width: 0.85rem; height: 0.85rem; border-width: 0.14em;
}
.sz-switcher-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sz-switcher-caret { font-size: .7rem; opacity: .5; margin-left: 2px; flex-shrink: 0; }

.sz-switcher-menu {
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--sz-card-border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    max-height: 70vh;
    overflow-y: auto;
}
.sz-switcher-menu-head {
    font-size: .65rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sz-muted);
    padding: 4px 10px 6px;
}
.sz-switcher-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: .85rem;
}
.sz-switcher-menu .dropdown-item > .bi:first-child { opacity: .6; font-size: .9rem; }
.sz-switcher-menu .dropdown-item .ms-auto { color: var(--sz-primary); }
.sz-switcher-menu .dropdown-item:hover { background: var(--sz-soft-bg); }
.sz-switcher-menu .dropdown-item.active,
.sz-switcher-menu .dropdown-item:active {
    background: var(--sz-sidebar-active-bg);
    color: var(--bs-body-color);
    font-weight: 500;
}

/* Indicatore presenza online/offline (usato nelle liste membri/utenti) */
.sz-presence-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    background: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    vertical-align: middle;
    flex-shrink: 0;
}
.sz-presence-dot.off {
    background: #9aa0a6;
    box-shadow: none;
}

/* Footer sidebar (site switcher) */
.sz-sidebar-footer {
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid var(--sz-sidebar-divider);
}
.sz-sidebar-footer .form-select {
    background: rgba(255,255,255,0.06);
    color: var(--sz-sidebar-fg-strong);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.825rem;
}
.sz-sidebar-footer .form-select:focus {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 1px rgba(var(--wp-admin-theme-color--rgb), 0.4);
}

/* ────────────────────────────────────────────────────────────────────────────
   Cards — morbide e ariose (vibe Basecamp/Trello), interazione opt-in
   ──────────────────────────────────────────────────────────────────────────── */
.card {
    background: var(--sz-card-bg);
    border: 1px solid var(--sz-card-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.card .card-body { padding: 20px 22px; }
.sz-main .row.g-3 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
/* Header di sezione calmi e leggibili (vibe Basecamp/Trello), coerenti in TUTTI
   i reparti: niente più micro-maiuscolo grigio, ma un titolo leggibile. */
.card h2.h6, .card .h6 {
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
    font-weight: 600;
    margin-bottom: 14px;
}
.card h2.h6 > .bi:first-child,
.card .h6 > .bi:first-child { color: var(--sz-primary); }

/* ── Skeleton di caricamento (corpo widget reparto caricato via AJAX) ───────── */
.sz-skel {
    position: relative;
    overflow: hidden;
    background: var(--sz-soft-bg);
    border-radius: 8px;
}
.sz-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(var(--wp-admin-theme-color--rgb), 0.08), transparent);
    animation: sz-shimmer 1.3s ease-in-out infinite;
}
.sz-skel-title { height: 1rem; width: 38%; }
.sz-skel-kpi   { height: 4.5rem; }
.sz-skel-chart { height: 230px; }
@keyframes sz-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sz-skel::after { animation: none; } }

/* ── Cloud file-manager ────────────────────────────────────────────────────── */
.sz-space-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(var(--wp-admin-theme-color--rgb), 0.10);
    color: var(--sz-primary); font-size: 1.4rem;
}
.sz-folder-card { transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease; }
.sz-folder-card.is-over {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 2px rgba(var(--wp-admin-theme-color--rgb), 0.18) inset;
    background: var(--sz-soft-bg);
}
[data-file-board][data-board-manage] .sz-task-card { cursor: grab; }
[data-file-board][data-board-manage] .sz-task-card:active { cursor: grabbing; }
/* Drop target "inline" (breadcrumb / radice spazio): evidenzia al passaggio */
a[data-folder-drop].is-over {
    outline: 2px dashed var(--sz-primary);
    outline-offset: 3px;
    border-radius: 6px;
    background: rgba(var(--wp-admin-theme-color--rgb), 0.10);
}
.sz-space-chat { position: sticky; top: 1rem; }
.sz-space-chat-msgs { overflow-y: auto; max-height: 52vh; min-height: 180px; padding-right: 4px; }
.sz-chat-bubble {
    display: inline-block; max-width: 92%;
    padding: 7px 11px; border-radius: 12px; font-size: 0.88rem;
    border: 1px solid var(--sz-card-border); background: var(--sz-soft-bg);
}
.sz-chat-bubble.user { background: var(--sz-primary); color: #fff; border-color: var(--sz-primary); }

/* Picker documenti (ricerca + cartelle) */
.sz-doc-picker-panel {
    position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--sz-card-bg); border: 1px solid var(--sz-card-border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); overflow: hidden;
}
.sz-doc-picker-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.sz-doc-picker-group {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--sz-muted); padding: 8px 8px 2px; font-weight: 600;
}

/* Tagbox assegnatari (multi) */
.sz-tagbox { position: relative; }
.sz-tagbox-field {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    min-height: 38px; padding: 5px 8px; cursor: text;
    border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--sz-card-bg);
}
.sz-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(var(--wp-admin-theme-color--rgb), 0.10);
    color: var(--sz-primary-active);
    border: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.25);
    border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 0.82rem; white-space: nowrap;
}
.sz-tag-x { border: 0; background: transparent; line-height: 1; color: inherit; cursor: pointer; padding: 0 4px; font-size: 1rem; }
.sz-tag-x:hover { color: var(--sz-primary); }
.sz-tagbox-input { border: 0; outline: 0; background: transparent; flex: 1 1 90px; min-width: 90px; font-size: 0.88rem; color: var(--bs-body-color); }
.sz-tagbox-menu {
    position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 220px; overflow-y: auto;
    background: var(--sz-card-bg); border: 1px solid var(--sz-card-border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 4px;
}

/* Titolo colonna kanban (riusato da graphic/video/international/support/…) */
.sz-kanban-col-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
}

/* ── Board task (kanban, stile Trello) ─────────────────────────────────────── */
.sz-board-col { transition: border-color 0.12s ease, background-color 0.12s ease; }
.sz-board-col.is-over {
    border-color: var(--sz-primary);
    box-shadow: 0 0 0 2px rgba(var(--wp-admin-theme-color--rgb), 0.18) inset;
}
.sz-board-dropzone { min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.sz-task-card {
    background: var(--sz-card-bg);
    border: 1px solid var(--sz-card-border);
    border-radius: 10px;
    padding: 10px 12px;
    transition: box-shadow 0.12s ease, transform 0.06s ease, border-color 0.12s ease;
}
[data-board-manage] .sz-task-card { cursor: grab; }
[data-board-manage] .sz-task-card:active { cursor: grabbing; }
.sz-task-card:hover { border-color: rgba(var(--wp-admin-theme-color--rgb), 0.45); box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.sz-task-card.is-dragging { opacity: 0.5; transform: scale(0.98); }
/* Task scaduto: bordo rosso + accento a sinistra, visibile sin da subito */
.sz-task-card.is-overdue { border-color: var(--bs-danger, #dc3545); box-shadow: inset 3px 0 0 var(--bs-danger, #dc3545); }
.sz-task-card.is-overdue:hover { border-color: var(--bs-danger, #dc3545); }
.sz-overdue-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--bs-danger, #dc3545);
    background: rgba(220, 53, 69, 0.12);
}
/* Assegnatari su card: icona occhio + conteggio, popover all'hover con i nomi interi */
.sz-assignees { position: relative; display: inline-flex; align-items: center; gap: 3px; color: var(--sz-muted); cursor: default; font-size: 0.8rem; }
.sz-assignees:hover, .sz-assignees:focus { color: var(--sz-primary); outline: none; }
.sz-assignees-count { font-weight: 600; }
.sz-assignees-pop {
    position: absolute; z-index: 30; right: 0; top: calc(100% + 6px);
    display: none; min-width: 160px; max-width: 240px;
    background: var(--sz-card-bg); border: 1px solid var(--sz-card-border);
    border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    padding: 7px 11px; font-size: 0.82rem; color: var(--bs-body-color);
    white-space: normal; text-align: left; line-height: 1.5;
}
.sz-assignees-pop-title { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sz-muted); font-weight: 600; margin-bottom: 3px; }
.sz-assignees:hover .sz-assignees-pop,
.sz-assignees:focus .sz-assignees-pop,
.sz-assignees:focus-within .sz-assignees-pop { display: block; }

.sz-task-title { color: var(--bs-body-color); font-weight: 500; display: block; }
.sz-task-title:hover { color: var(--sz-primary); }
.sz-board-add { border-style: dashed; color: var(--sz-muted); }
.sz-board-add:hover { color: var(--sz-primary); border-color: var(--sz-primary); }

/* Numeri grandi su KPI card */
.sz-kpi-value {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}
.sz-kpi-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Sostituzione legacy `.sz-kpi-card` (rimuovo l'effetto lift) */
.sz-kpi-card { transition: none; }
.sz-kpi-card:hover { transform: none; }

/* ── Header sezione "calmo" e arioso (sostituisce gli header d-flex densi) ──── */
.sz-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;        /* titolo + azioni vanno a capo su schermi stretti */
    min-width: 0;
}
.sz-section-head h2,
.sz-section-head .sz-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--bs-body-color);
    margin: 0;
}
.sz-section-head .bi { color: var(--sz-primary); }
.sz-section-head .sz-section-sub { font-size: 0.8rem; color: var(--sz-muted); font-weight: 400; }
.sz-section-head .sz-section-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Affordance "cliccabile per il dettaglio" ──────────────────────────────── */
.sz-clickable {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    position: relative;
}
.sz-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--wp-admin-theme-color--rgb), 0.45);
}
.sz-clickable:focus-visible {
    outline: 2px solid var(--sz-primary);
    outline-offset: 2px;
}
/* Chevron discreto in alto a destra che appare all'hover delle card */
.sz-clickable.sz-clickable--card::after {
    content: "\F285"; /* bi-chevron-right */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 12px; right: 14px;
    font-size: 0.8rem;
    color: var(--sz-muted);
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.sz-clickable.sz-clickable--card:hover::after { opacity: 0.8; transform: translateX(2px); }

/* Variante inline per righe di tabella / numeri */
.sz-clickable--inline { cursor: pointer; transition: background-color 0.12s ease; }
.sz-clickable--inline:hover { background: var(--sz-soft-bg); }
tr.sz-clickable--inline:hover td:first-child { box-shadow: inset 3px 0 0 var(--sz-primary); }

/* Numero/contatore cliccabile (KPI inline) */
.sz-stat {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.sz-stat.sz-clickable:hover { background: var(--sz-soft-bg); border-color: var(--sz-card-border); transform: none; box-shadow: none; }

/* ── Modal dettaglio + output spiegazione AI ───────────────────────────────── */
.sz-detail-headline { padding-bottom: 12px; border-bottom: 1px solid var(--sz-card-border); }
.sz-detail-value {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.sz-detail-value-label { font-size: 0.85rem; margin-top: 2px; }
.sz-explain-out {
    background: var(--sz-soft-bg);
    border: 1px solid var(--sz-card-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.sz-source-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sz-primary-active);
    background: rgba(var(--wp-admin-theme-color--rgb), 0.10);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ── Testo markdown renderizzato dall'AI (View::md / SZ.md) ──────────────────
   Spaziatura compatta: i blocchi vivono dentro card/alert già con padding. */
.sz-md > :first-child { margin-top: 0; }
.sz-md > :last-child  { margin-bottom: 0; }
.sz-md p  { margin: 0 0 0.5rem; }
.sz-md ul { margin: 0 0 0.5rem; padding-left: 1.15rem; }
.sz-md li { margin-bottom: 0.15rem; }
.sz-md strong { font-weight: 600; }
.sz-md code {
    font-size: 0.85em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--sz-soft-bg);
}
/* Variante una-riga per le anteprime troncate (widget PM).
   Il contenitore DEVE restare block con min-width:0 perché .text-truncate
   (overflow:hidden + ellipsis) funzioni; solo gli eventuali blocchi interni
   diventano inline così non spezzano la riga né allargano il box. */
.sz-md-inline {
    display: block;
    min-width: 0;
    max-width: 100%;
}
.sz-md-inline p, .sz-md-inline ul, .sz-md-inline li {
    display: inline;
    margin: 0;
    padding: 0;
}

/* ── Tooltip custom uniforme (vedi window tooltip in app.js) ─────────────────── */
.sz-tip {
    position: absolute;
    z-index: 3000;
    max-width: min(360px, 90vw);
    padding: 7px 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--sz-card-border);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}

/* ── Alert di sistema: widget PM compatto + accordion pagina ────────────────── */
.sz-sysalert-list { max-height: 320px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.sz-sysalert-row { color: var(--bs-body-color); border-radius: 6px; transition: background-color 0.12s ease; }
/* Gli elementi troncati dentro la riga flex devono poter restringersi,
   altrimenti un titolo/descrizione lungo genererebbe scroll orizzontale. */
.sz-sysalert-row .text-truncate { min-width: 0; }
/* La descrizione si tronca a metà larghezza, non a fine riga. */
.sz-sysalert-msg { max-width: 50%; }
.sz-sysalert-row:hover { background: var(--sz-soft-bg); }
.sz-alert-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sz-alert-dot.level-good { background: #16a34a; }
.sz-alert-dot.level-info { background: #64748b; }
.sz-alert-dot.level-warning { background: #d97706; }
.sz-alert-dot.level-critical { background: #dc2626; }
.sz-alerts-accordion .accordion-button { font-size: 0.95rem; }

/* ── Semaforo reparti: testata visiva "come stanno le aziende" ──────────────── */
/* Chip di SOLA salute (nome area + pallino, nessun dato numerico). */
.sz-area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sz-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-decoration: none;
    color: var(--bs-body-color);
    background: var(--sz-soft-bg);
    border: 1px solid var(--sz-card-border);
    border-left: 4px solid var(--sz-card-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.85rem;
    transition: background-color 0.12s ease, transform 0.12s ease;
}
.sz-area-chip:hover { background: var(--bs-body-bg); transform: translateY(-1px); }
.sz-area-chip.level-critical { border-left-color: #dc2626; }
.sz-area-chip.level-warning  { border-left-color: #d97706; }
.sz-area-chip.level-good     { border-left-color: #16a34a; }
.sz-area-chip.level-info     { border-left-color: #64748b; }
.sz-area-chip.is-empty { opacity: 0.5; }
.sz-area-chip-label { font-weight: 500; }
.sz-area-chip-badge {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
}
.sz-area-chip-badge.is-critical { background: #dc2626; }
.sz-area-chip-badge.is-warning  { background: #d97706; }

/* Righe "carico" compatte e cliccabili (reparto / risorsa). */
.sz-loadrow {
    display: block;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.12s ease;
}
.sz-loadrow + .sz-loadrow { border-top: 1px solid var(--sz-card-border); }
.sz-loadrow:hover { background: var(--sz-soft-bg); }
.sz-loadrow .progress { margin-top: 4px; }

/* Campo "Scadenza" di un task scaduto (popup dettaglio): bordo rosso evidenziato. */
.sz-due-overdue {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--bs-danger-rgb), 0.25) !important;
}
.sz-due-overdue:focus {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.35) !important;
}

/* ── Dashboard PM "one-page": riempie il display, scroll interno alle card ─────
   Attiva solo da ≥lg (desktop). Su mobile le card si impilano e la pagia scorre
   normalmente. Le colonne usano flex esplicito (niente stretch via Bootstrap row,
   che è fragile col wrap) così la catena flex vincola l'altezza e lo scroll parte. */
.sz-onepage { display: flex; flex-direction: column; gap: 1rem; }
.sz-onepage .row { margin-bottom: 0; }

@media (min-width: 992px) {
    .sz-onepage {
        height: calc(100dvh - 170px); /* fallback; szFitOnepage() lo affina via JS */
        min-height: 460px;
        /* Se le card crescono oltre il viewport, scrolla l'area (non la singola card). */
        overflow: hidden auto;
    }
    .sz-onepage-top  { flex: 0 0 auto; max-height: 42%; }
    /* Riga dei 3: altezza naturale (la più alta), le altre colonne si allungano
       per pareggiarla (align-items: stretch di default). */
    .sz-onepage-fill { flex: 0 0 auto; min-height: 0; flex-wrap: nowrap; }
    /* Testata: mantiene le larghezze Bootstrap (7/5), solo flex-column per l'altezza. */
    .sz-onepage-top > [class*="col-"] { min-height: 0; display: flex; flex-direction: column; }
    /* Riga dei 3: colonne uguali che riempiono l'altezza (niente wrap). */
    .sz-onepage-fill > [class*="col-"] {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .sz-onepage .card { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
    .sz-onepage .card-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    /* Contenuto scrollabile dentro la card (header resta fisso sopra). */
    .sz-card-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
    .sz-onepage .sz-sysalert-list { max-height: none; overflow: visible; }
    /* Riga bassa: le card mostrano il contenuto per intero (niente scroll interno)
       e restano tutte alte uguale, allungandosi fino alla più alta. */
    .sz-onepage-fill .card-body { overflow: visible; }
    .sz-onepage-fill .sz-card-scroll { overflow: visible; }
}

/* ── Tom Select (.sz-select): allineamento al tema, anche dark mode ──────────── */
.ts-wrapper { min-width: 150px; }
.ts-control,
.ts-dropdown {
    background: var(--bs-body-bg);
    border-color: var(--sz-card-border);
    color: var(--bs-body-color);
}
.ts-control .item,
.ts-control > input,
.ts-dropdown .option { color: var(--bs-body-color); }
.ts-dropdown .active { background: var(--sz-soft-bg); color: var(--bs-body-color); }
.ts-dropdown .optgroup-header { color: var(--sz-muted); background: transparent; }
.ts-wrapper.single .ts-control { border-radius: 8px; }
.ts-wrapper.focus .ts-control { border-color: var(--sz-primary); box-shadow: 0 0 0 .2rem rgba(var(--wp-admin-theme-color--rgb), .15); }

/* Blocco per azienda: intestazione + chip aree. */
.sz-company-block { margin-bottom: 18px; }
.sz-company-block:last-child { margin-bottom: 0; }
.sz-company-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sz-company-head strong { font-size: 0.98rem; }
.sz-alerts-accordion .accordion-button:not(.collapsed) { background: var(--sz-soft-bg); color: var(--bs-body-color); box-shadow: none; }
.sz-alerts-accordion .accordion-button:focus { box-shadow: none; }

/* ────────────────────────────────────────────────────────────────────────────
   Badge / pill — minimal, outline + dot
   Sostituisce i bg-pieni Bootstrap dove possibile (vedi viste task / alert).
   ──────────────────────────────────────────────────────────────────────────── */
.sz-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--sz-soft-bg);
    color: var(--bs-body-color);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
}
.sz-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--sz-muted);
}
.sz-pill.is-critical, .sz-pill.is-urgent { background: rgba(217, 30, 24, 0.08); color: #b91c1c; border-color: rgba(217, 30, 24, 0.25); }
.sz-pill.is-critical::before, .sz-pill.is-urgent::before { background: #d91e18; }
.sz-pill.is-warning, .sz-pill.is-high { background: rgba(184, 134, 11, 0.08); color: #92400e; border-color: rgba(184, 134, 11, 0.25); }
.sz-pill.is-warning::before, .sz-pill.is-high::before { background: #d97706; }
.sz-pill.is-info, .sz-pill.is-normal { background: rgba(0, 124, 186, 0.08); color: var(--sz-primary-active); border-color: rgba(0, 124, 186, 0.25); }
.sz-pill.is-info::before, .sz-pill.is-normal::before { background: var(--sz-primary); }
.sz-pill.is-success, .sz-pill.is-done { background: rgba(15, 118, 110, 0.08); color: #115e59; border-color: rgba(15, 118, 110, 0.25); }
.sz-pill.is-success::before, .sz-pill.is-done::before { background: #14b8a6; }
.sz-pill.is-muted, .sz-pill.is-low, .sz-pill.is-cancelled { color: var(--sz-muted); }

/* Pill "synced" (accent viola WP) — riservata ai badge che indicano un link
   verso una risorsa esterna (es. sito di riferimento del task). */
.sz-pill-synced {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--wp-block-synced-color--rgb), 0.30);
    background: rgba(var(--wp-block-synced-color--rgb), 0.08);
    color: var(--sz-accent-synced);
    font-size: 0.7rem;
    font-weight: 500;
}
.sz-pill-synced .bi { font-size: 0.8em; }

/* Override globale: bg-* Bootstrap rimangono per casi di compat ma con saturazione ridotta */
.badge.bg-danger  { background-color: #d91e18 !important; }
.badge.bg-warning { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-info    { background-color: var(--sz-primary) !important; color: #fff !important; }
.badge.bg-success { background-color: #14b8a6 !important; }
.badge.bg-primary { background-color: var(--sz-primary) !important; }
.badge.bg-secondary { background-color: #6c757d !important; }

/* ────────────────────────────────────────────────────────────────────────────
   Tabelle — flat, righe alternate molto sottili
   ──────────────────────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: var(--sz-soft-bg);
    margin: 0;
}
.table > thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sz-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
}

/* ────────────────────────────────────────────────────────────────────────────
   Tabs (dept-header) — più puliti
   ──────────────────────────────────────────────────────────────────────────── */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--sz-primary);
    --bs-nav-tabs-link-active-color: var(--sz-primary);
    border-bottom: 1px solid var(--bs-border-color);
}
.nav-tabs .nav-link {
    color: var(--sz-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
    color: var(--bs-body-color);
    border-color: transparent;
    isolation: isolate;
}
.nav-tabs .nav-link.active {
    color: var(--sz-primary);
    border-bottom-color: var(--sz-primary);
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────────────────
   Alert/Forecast row legacy (alleggeriti)
   ──────────────────────────────────────────────────────────────────────────── */
.sz-feed-list .list-group-item {
    background: transparent;
    border-color: var(--bs-border-color);
}
.sz-critical-banner {
    border-left: 3px solid #d91e18;
    box-shadow: none;
    background: rgba(217, 30, 24, 0.04);
}
.sz-critical-banner.alert-warning { border-left-color: #d97706; background: rgba(217, 119, 6, 0.04); }
.sz-critical-banner ul a { font-weight: 500; }

.sz-forecast-row {
    padding: 0.4rem 0.6rem;
    background: var(--sz-soft-bg);
    border-left: 2px solid var(--sz-primary);
    border-radius: 4px;
}
.sz-suggestions { border-top: 1px dashed var(--bs-border-color); padding-top: 0.5rem; }

/* Live dot — più discreto, niente pulsing aggressivo */
.sz-live-pill {
    background: var(--sz-soft-bg);
    color: var(--sz-muted);
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
}
.sz-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #d91e18; display: inline-block; margin-right: 6px;
}

/* ────────────────────────────────────────────────────────────────────────────
   Tool card (dept-tools partial)
   ──────────────────────────────────────────────────────────────────────────── */
.sz-tool-link {
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    background: var(--sz-card-bg);
    border-radius: 6px;
    padding: 12px;
    transition: border-color .12s ease, background .12s ease;
}
.sz-tool-link:hover {
    border-color: var(--sz-primary);
    background: var(--sz-soft-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}
.sz-tool-link .bi { color: var(--sz-primary); }

/* ────────────────────────────────────────────────────────────────────────────
   Dashboard reparto — gerarchia a 3 livelli
   ──────────────────────────────────────────────────────────────────────────── */

/* ① Striscia "Richiede attenzione": bordo-accent caldo, sfondo soft */
.sz-attention {
    background: rgba(184, 134, 11, 0.06);
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-left: 3px solid #d97706;
    border-radius: 6px;
    padding: 12px 16px;
}
.sz-attention-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
    margin-bottom: 6px;
}
[data-bs-theme="dark"] .sz-attention-head { color: #e0a052; }
.sz-attention-item + .sz-attention-item { border-top: 1px solid rgba(184, 134, 11, 0.18); }

/* Card-hero: l'azione primaria del reparto, leggero accent a sinistra */
.sz-hero-card { border-left: 3px solid var(--sz-primary); }

/* Colonna laterale "I miei task": resta visibile in scroll su desktop */
@media (min-width: 992px) {
    .sz-sticky-col { position: sticky; top: 16px; }
}

/* ③ Footer attenuato: membri + i miei reparti */
.sz-dept-footer { padding-top: 4px; }
.sz-dept-footer-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sz-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.sz-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--sz-soft-bg);
    color: var(--bs-body-color);
    font-size: 0.78rem;
    line-height: 1.4;
}
a.sz-member-chip:hover { border-color: var(--sz-primary); color: var(--bs-body-color); }
.sz-member-chip.is-active {
    background: var(--sz-sidebar-active-bg);
    border-color: var(--sz-primary);
    color: var(--sz-primary-active);
    font-weight: 600;
}
.sz-member-chip.is-active .bi { color: var(--sz-primary); }
a.sz-member-chip.is-active:hover { color: var(--sz-primary-active); }

/* Indicatore di trend (Polso siti) — solo colore + freccia, no background */
.sz-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.sz-trend-arrow { font-weight: 700; line-height: 1; }
.sz-trend.is-success  { color: #14b8a6; }
.sz-trend.is-critical { color: #b91c1c; }
.sz-trend.is-muted    { color: var(--sz-muted); }
[data-bs-theme="dark"] .sz-trend.is-success  { color: #2dd4bf; }
[data-bs-theme="dark"] .sz-trend.is-critical { color: #f87171; }

/* ────────────────────────────────────────────────────────────────────────────
   Misc
   ──────────────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.dropdown-item:active, .dropdown-item:focus {
    background-color: var(--sz-primary);
    color: #fff;
}

/* Details/summary guide */
.sz-guide-details > summary {
    list-style: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--sz-card-bg);
    cursor: pointer;
}
.sz-guide-details > summary::-webkit-details-marker { display: none; }
.sz-guide-details[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.sz-guide-details > summary:hover { background: var(--sz-soft-bg); }

/* Campo ricerca inline (es. filtro risorse nel carico) */
.sz-search-box { position: relative; flex: 0 0 auto; }
.sz-search-box > i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
    pointer-events: none;
}
.sz-search-box .form-control { padding-left: 30px; }

@media (max-width: 991.98px) {
    .sz-main { padding: 16px; padding-bottom: 5rem; }
}