/* ═══════════════════════════════════════════════════════════════
   TuttoJob — Sidebar dashboard CUSTOM
   Bootstrap puro + classi proprie (prefisso tj-sb-).
   Nessuna dipendenza da .sidenav/.sidebar di MDB o altri framework.
   Palette: navy #162432 · azzurro #2278C7
   ═══════════════════════════════════════════════════════════════ */

:root {
    --tjsb-width: 240px;
    --tjsb-bg: #162432;
    --tjsb-link: #c3c9d4;
    --tjsb-link-hover-bg: rgba(34, 120, 199, 0.15);
    --tjsb-link-active-bg: #2278C7;
    --tjsb-subheading: #6f7888;
}

/* ─── Layout principale ──────────────────────────────────────────
   .tj-sb-page contiene la navbar (mod_header, piena larghezza) e,
   sotto di essa, .tj-sb-wrap (contenuto). La sidebar è SEMPRE
   position:fixed rispetto al viewport — mai sticky, mai dipendente
   dal contesto di scroll di un genitore. Non si muove mai, punto. */
.tj-sb-page {
    min-height: 100vh;
}

.tj-sb-wrap {
    position: relative;
    padding-left: 0;
}

.tj-sb-content {
    padding: 20px;
}

/* ─── Sidebar — SEMPRE fixed rispetto al viewport ───────────────
   Stessa regola su mobile e desktop: ancorata a top:0/left:0/
   bottom:0, fuori dal flusso del documento. Lo scroll della pagina
   non la tocca mai, in nessun breakpoint. */
.tj-sb {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--tjsb-width);
    background-color: var(--tjsb-bg);
    color: #fff;
    overflow-y: auto;
    z-index: 60000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
}

.tj-sb.tj-sb-show {
    transform: translateX(0);
}

.tj-sb-top {
    background-color: var(--tjsb-bg);
    display: flex;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    padding: 25px 0px 25px 0px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.tj-sb-logo {
    background-color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
}

/* ─── Menu ────────────────────────────────────────────────────── */
.tj-sb-menu {
    list-style: none;
    margin: 0;
    padding: 0px 8px 0px;
    font-size: 14px;
}

.tj-sb-item { position: relative; }

.tj-sb-link {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 11px 20px;
    margin: 1px 8px;
    border-radius: 8px;
    color: var(--tjsb-link);
    text-decoration: none;
    transition: background-color .15s, color .15s;
    cursor: pointer;
}
.tj-sb-link:hover {
    background-color: var(--tjsb-link-hover-bg);
    color: #fff;
    text-decoration: none;
}
.tj-sb-link.active {
    background-color: var(--tjsb-link-active-bg);
    color: #fff;
    box-shadow: 0 2px 8px rgba(34,120,199,.35);
}
.tj-sb-link i:not(.tj-sb-caret) { width: 20px; text-align: center; flex-shrink: 0; }

.tj-sb-caret {
    font-size: 11px;
    transition: transform .2s;
}
.tj-sb-haschild.tj-sb-open > .tj-sb-link .tj-sb-caret {
    transform: rotate(180deg);
}

.tj-sb-subheading {
    color: var(--tjsb-subheading);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: block;
    padding: 18px 20px 6px;
}

/* ─── Sottomenu collassabile ──────────────────────────────────── */
.tj-sb-collapse {
    list-style: none;
    margin: 0 8px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,.18);
    border-radius: 8px;
    transition: max-height .25s ease;
}
.tj-sb-haschild.tj-sb-open > .tj-sb-collapse {
    max-height: 500px;
    padding: 2px 0;
}
.tj-sb-collapse .tj-sb-link { margin: 1px 4px; padding-left: 32px; font-size: 13px; }

/* ─── Bottone toggle (mobile) ─────────────────────────────────── */
.tj-sb-toggle-btn {
    background: none;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    color: #162432;
    font-size: 18px;
    padding: 6px 12px;
    margin-bottom: 14px;
    cursor: pointer;
}
.tj-sb-toggle-btn:hover { background-color: #f3f4f6; }

/* ─── Overlay (mobile, dietro la sidebar aperta) ──────────────── */
.tj-sb-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,.45);
    z-index: 59999;
}
.tj-sb-overlay.tj-sb-overlay-show { display: block; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (sotto 992px): la sidebar è overlay, nascosta di default
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .tj-sb {
        max-width: 85vw;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP (≥992px): sidebar sempre visibile, contenuto spostato
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .tj-sb-toggle-btn { display: none; }
    .tj-sb-overlay { display: none !important; }

    .tj-sb {
        transform: translateX(0); /* sempre visibile, nessuna animazione */
    }

    .tj-sb-wrap {
        padding-left: var(--tjsb-width); /* riserva lo spazio occupato dalla sidebar fixed */
    }
}