/* ============================================================
   JSTREE — override del tema di default per allinearlo alla
   palette dell'app. Tutto ridisegnato sui token di tokens.css:
   font, indicatore di espansione (Material Symbols al posto dello
   sprite nativo), icone nodo, hover, selezione, scrollbar, stati
   vuoto/errore/caricamento, più una fascia dedicata al mobile.
   ============================================================ */
#categoryTree.jstree-default {
    font-family: var(--font-body);
    font-size: 13.5px;
    background: transparent;
}

/* Lo sprite nativo di jsTree (linee guida, triangolo expand/collapse,
   eventuali icone di stato) viene spento ovunque: lo sostituiamo con
   ::before dedicati (vedi jstree-ocl sotto e l'icona categoria in fondo
   al file), niente più immagini di sfondo a bassa risoluzione. */
#categoryTree.jstree-default .jstree-icon {
    background-image: none !important;
    background: none !important;
}

#categoryTree.jstree-default .jstree-node {
    margin-left: 18px; /* indentazione per livello, più compatta del default */
    margin-bottom: 3px; /* respiro tra una riga e l'altra */
}

/* Riga intera (plugin wholerow): di base TRASPARENTE — senza questa regola
   eredita lo sfondo grigio del tema jsTree di default (visibile su mobile,
   dove risalta di più), invece di restare trasparente sopra il fondo della
   sidebar. Stessi margini orizzontali di .jstree-anchor sotto, cosi hover e
   selezione (che colorano QUESTO elemento, non l'anchor) restano "pillole"
   arrotondate e rientrate invece di bande grigie a tutta larghezza.
   box-shadow/border esplicitamente azzerati: il tema di default ne applica
   uno sull'ultimo figlio di un ramo e su un ramo aperto, visibile come una
   sottile riga/ombra indesiderata sotto quelle righe. */
#categoryTree.jstree-default .jstree-wholerow {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 8px;
    left: 4px;
    right: 4px;
}

#categoryTree.jstree-default .jstree-anchor {
    height: 30px;
    line-height: 30px;
    color: var(--ink-soft);
    font-weight: 600;
    border-radius: 0px;
    padding-left: 4px;
    margin: 1px 4px;
    width: calc(100% - 28px);
    transition: color .12s var(--ease);
    /* Nomi lunghi troncati con ellissi invece di spingere/rompere il layout
       (su schermi stretti i nomi categoria hanno meno spazio a disposizione). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ---- indicatore espandi/comprimi: chevron Material Symbols, ruota di
   90° quando il nodo è aperto. Nascosto sui nodi foglia (nessun figlio).
   Un'unica dichiarazione per l'icona (era duplicata in due punti diversi
   del file con valori diversi — 18px e poi 25px più sotto — la seconda
   vinceva sempre per ordine nel file, rendendo la prima morta e il tutto
   confuso da manutenere: ora la dimensione voluta è dichiarata una volta
   sola, qui). ---- */
#categoryTree.jstree-default .jstree-icon.jstree-ocl {
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    transition: transform .15s var(--ease), color .12s var(--ease);
}
#categoryTree.jstree-default .jstree-icon.jstree-ocl::before {
    font-family: 'Material Symbols Outlined';
    font-size: 25px;
    content: 'chevron_right';
}
#categoryTree.jstree-default .jstree-open > .jstree-icon.jstree-ocl {
    transform: rotate(90deg);
}
#categoryTree.jstree-default .jstree-leaf > .jstree-icon.jstree-ocl::before {
    content: '';
}

/* Icona generica "categoria" davanti a ogni voce (icon:false lato JS
   rimuove l'icona nativa: questa è quella che la sostituisce). */
#categoryTree.jstree-default .jstree-anchor::before {
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
    color: var(--ink-faint);
    content: 'sell';
    margin-right: 7px;
    vertical-align: -3px;
    transition: color .12s var(--ease);
}
/* Il nodo radice "Tutte le categorie" usa un'icona distinta. */
#categoryTree.jstree-default li[data-root] > .jstree-anchor::before {
    content: 'apps';
}
/* Nodo dedicato "I miei Preferiti" (vedi views/categoryTree.js,
   buildCategoryTreeData()): stesso pattern del nodo radice sopra, icona
   bookmark invece dell'icona generica "sell" — MIGLIORAMENTO (richiesta
   esplicita di Antonio): icona bookmark usata ora ovunque nell'app al
   posto del cuore. */
#categoryTree.jstree-default li[data-favorites] > .jstree-anchor::before {
    content: 'bookmark';
}

/* Hover (con plugin wholerow: la riga intera si evidenzia) */
#categoryTree.jstree-default .jstree-hovered,
#categoryTree.jstree-default .jstree-wholerow-hovered {
    background: var(--primary-050);
    border-radius: 8px;
    box-shadow: none;
}
#categoryTree.jstree-default .jstree-hovered { color: var(--primary-700); }
#categoryTree.jstree-default .jstree-hovered::before { color: var(--primary-700); }

/* Selezione: stesso linguaggio di .chip.active */
#categoryTree.jstree-default .jstree-wholerow-clicked {
    background: var(--primary);
    border-radius: 8px;
}
#categoryTree.jstree-default .jstree-clicked {
    background: transparent;
    color: #fff;
    font-weight: 700;
}
#categoryTree.jstree-default .jstree-clicked::before,
#categoryTree.jstree-default .jstree-clicked ~ .jstree-icon.jstree-ocl,
#categoryTree.jstree-default .jstree-wholerow-clicked ~ .jstree-icon.jstree-ocl {
    color: #fff;
}

/* Stato con focus da tastiera (navigazione con le frecce) */
#categoryTree.jstree-default .jstree-anchor:focus {
    outline-offset: -1px;
}

/* Scrollbar del pannello categorie: stesso linguaggio di .scroll-container
   (core.css), qui applicato direttamente al contenitore scrollabile della
   sidebar invece che tramite quella classe (la sidebar ha già un proprio
   overflow-y in sidebar.css). */
.sidebar-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.sidebar-body::-webkit-scrollbar { width: 8px; }
.sidebar-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 100px;
}
.sidebar-body::-webkit-scrollbar-thumb:hover { background: var(--primary-100); }

/* Stato vuoto: nessuna categoria disponibile o errore di caricamento */
.sidebar-tree-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 12.5px;
    line-height: 1.5;
}
.sidebar-tree-empty .material-symbols-outlined {
    font-size: 28px;
    display: block;
    margin: 0 auto 8px;
    color: var(--primary-100);
}
.sidebar-tree-empty button {
    display: block;
    margin: 12px auto 0;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--primary-700);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: all .15s var(--ease);
}
.sidebar-tree-empty button:hover {
    background: var(--primary-050);
    border-color: var(--primary);
}

/* Stato di caricamento (durante la chiamata a GetCategories) */
.sidebar-tree-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 600;
}

/* ============================================================
   MOBILE (drawer off-canvas, vedi css/sidebar.css) — righe più alte,
   testo più leggibile (anche in grassetto pieno, non solo 600) e
   un'area di tocco molto più grande per il chevron espandi/comprimi:
   il container passa a 40px di lato (l'icona resta 25px, centrata),
   invece dei soli 26px della versione desktop — un dito ha margine
   reale per colpirlo, non solo l'icona vera e propria.
   ============================================================ */
@media (max-width: 900px) {
    #categoryTree.jstree-default {
        font-size: 15px;
    }
    #categoryTree.jstree-default .jstree-anchor {
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        font-weight: 700;
    }
    #categoryTree.jstree-default .jstree-icon.jstree-ocl {
        width: 30px; /* area di tocco reale, non solo l'icona visiva */
        height: 30px;
    }
    #categoryTree.jstree-default .jstree-anchor::before {
        font-size: 18px;
    }
    #categoryTree.jstree-default .jstree-node {
        margin-bottom: 4px;
    }
}

.jstree-default-responsive .jstree-anchor {
        font-weight: bold;
        font-size: 1.1em;
            text-shadow: none!important;
    }

.jstree-default-responsive .jstree-node {
    min-height: 30px;
    line-height: 30px;
    margin-left: 40px;
    min-width: 30px;
    white-space: nowrap;
}

.jstree-default .jstree-wholerow {
    height: 30px;
}