/**
 * public/assets/css/layout.css
 * Layout applicazione: sidebar, header, area contenuto principale.
 */

/* ============================================================
   APP SHELL
   ============================================================ */
#app-shell {
    display   : flex;
    min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar {
    width          : var(--sidebar-width);
    min-height     : 100vh;
    background     : linear-gradient(180deg, #0b1021 0%, #0d1224 40%, #0a0f1e 100%);
    color          : var(--color-gray-300);
    display        : flex;
    flex-direction : column;
    position       : fixed;
    top            : 0;
    left           : 0;
    z-index        : 100;
    transition     : width var(--transition), transform var(--transition);
    overflow       : hidden;
    border-right   : 1px solid rgba(255,255,255,0.04);
    box-shadow     : 8px 0 32px -8px rgba(0,0,0,0.6);
}

/* Scrollbar sidebar invisibile ma funzionale */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.sidebar-logo {
    display        : flex;
    align-items    : center;
    gap            : 0.875rem;
    padding        : 1.25rem;
    border-bottom  : 1px solid rgba(255,255,255,0.05);
    min-height     : var(--header-height);
    transition     : border-color var(--transition), padding var(--transition);
    position       : relative;
}

.sidebar-collapse-btn {
    position       : fixed;
    top            : 50%;
    left           : var(--sidebar-width);
    transform      : translate(-50%, -50%);
    z-index        : 101;
    width          : 22px;
    height         : 40px;
    border-radius  : 0 8px 8px 0;
    background     : linear-gradient(180deg, #0b1021 0%, #0d1224 40%, #0a0f1e 100%);
    border         : none;
    color          : rgba(148,163,184,0.7);
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 0;
    transition     : left var(--transition), background .2s, color .2s, box-shadow .2s;
    box-shadow     : 4px 0 12px rgba(0,0,0,0.3);
}
.sidebar-collapse-btn:hover {
    color      : var(--color-white);
    box-shadow : 4px 0 12px rgba(0,0,0,0.4);
}
.sidebar-collapse-btn svg {
    transition: transform var(--transition);
}

/* Quando collassata, il pulsante si sposta sul bordo della sidebar stretta */
#sidebar.collapsed ~ .sidebar-collapse-btn,
#sidebar.collapsed .sidebar-collapse-btn {
    left: var(--sidebar-collapsed-w);
}

/* Ruota freccia quando collassata (la freccia punta a destra → espandi) */
#sidebar.collapsed ~ .sidebar-collapse-btn svg,
#sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}



.sidebar-logo-icon {
    width        : 42px;
    height       : 42px;
    background   : linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 50%;
    display      : flex;
    align-items   : center;
    justify-content: center;
    box-shadow   : 0 6px 20px -4px rgba(37, 99, 235, 0.5),
                   0 0 0 4px rgba(37, 99, 235, 0.12);
    animation    : logoPulseSidebar 3s ease-in-out infinite;
    flex-shrink  : 0;
}
.sidebar-logo-icon svg {
    display: block;
}

@keyframes logoPulseSidebar {
    0%, 100% { box-shadow: 0 6px 20px -4px rgba(37, 99, 235, 0.5), 0 0 0 4px rgba(37, 99, 235, 0.12); transform: scale(1); }
    50%      { box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.7), 0 0 0 6px rgba(37, 99, 235, 0.2); transform: scale(1.03); }
}

.sidebar-logo-text {
    font-size   : var(--font-size-lg);
    font-weight : 700;
    color       : var(--color-white);
    white-space : nowrap;
    overflow    : hidden;
    letter-spacing: -0.01em;
    text-shadow : 0 2px 4px rgba(0,0,0,0.3);
    transition  : opacity var(--transition), width var(--transition);
}

.sidebar-logo-text:empty { opacity:0; }

.sidebar-nav {
    flex      : 1;
    padding   : 0.75rem;
    overflow-y: auto;
}

.sidebar-section-label {
    font-size     : var(--font-size-xs);
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color         : rgba(148, 163, 184, 0.5);
    padding       : 0.75rem 0.875rem 0.5rem;
    white-space   : nowrap;
    transition    : color var(--transition);
}

.sidebar-section-label:hover {
    color: rgba(148, 163, 184, 0.8);
}

.sidebar-link {
    display       : flex;
    align-items   : center;
    gap           : 0.875rem;
    padding       : 0.6rem 0.875rem;
    margin        : 0.125rem 0.5rem;
    color         : var(--color-gray-400);
    transition    : all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size     : var(--font-size-sm);
    white-space   : nowrap;
    overflow      : hidden;
    cursor        : pointer;
    border        : none;
    background    : transparent;
    width         : calc(100% - 1rem);
    text-align    : left;
    text-decoration: none;
    border-radius : 10px;
    position      : relative;
}

.sidebar-link::before {
    content   : '';
    position  : absolute;
    left      : 0;
    top       : 50%;
    transform : translateY(-50%) scaleY(0);
    width     : 3px;
    height    : 60%;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    border-radius: 0 4px 4px 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity   : 0;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.04);
    color     : var(--color-white);
    text-decoration: none;
    transform : translateX(2px);
}

.sidebar-link:hover::before {
    transform: translateY(-50%) scaleY(1);
    opacity  : 0.6;
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.06) 100%);
    color     : var(--color-white);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
    transform : translateX(2px);
}

.sidebar-link.active::before {
    transform: translateY(-50%) scaleY(1);
    opacity  : 1;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

.sidebar-link svg {
    width      : 20px;
    height     : 20px;
    flex-shrink: 0;
    transition : transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    color      : currentColor;
    opacity    : 0.8;
}

.sidebar-link:hover svg {
    transform: scale(1.15);
    opacity  : 1;
}

.sidebar-link.active svg {
    color  : #60a5fa;
    opacity: 1;
}

.sidebar-link-label {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

/* Utente in fondo alla sidebar */
.sidebar-user {
    padding       : 0.875rem 1rem;
    margin        : 0.5rem 0.75rem 0.75rem;
    border-top    : none;
    display       : flex;
    align-items   : center;
    gap           : 0.75rem;
    cursor        : pointer;
    transition    : all var(--transition);
    background    : rgba(255,255,255,0.03);
    border-radius : 12px;
    border        : 1px solid rgba(255,255,255,0.04);
}
.sidebar-user:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    transform : translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(0,0,0,0.2);
}

.sidebar-user-avatar {
    width        : 38px;
    height       : 38px;
    border-radius: 50%;
    background   : linear-gradient(135deg, #2563eb, #1d4ed8);
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : white;
    font-weight  : 700;
    font-size    : var(--font-size-sm);
    flex-shrink  : 0;
    overflow     : hidden;
    box-shadow   : 0 2px 8px rgba(37, 99, 235, 0.3);
}
.sidebar-user-avatar.has-photo { background: transparent; box-shadow: none; border: 2px solid rgba(255,255,255,0.06); }
.sidebar-user-avatar img {
    width        : 100%;
    height       : 100%;
    border-radius: 50%;
    object-fit   : cover;
    display      : block;
}

.sidebar-user-info {
    flex      : 1;
    overflow  : hidden;
    white-space: nowrap;
}

.sidebar-user-name {
    font-size   : var(--font-size-sm);
    font-weight : 600;
    color       : var(--color-white);
    overflow    : hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.sidebar-user-role {
    font-size : var(--font-size-xs);
    color     : var(--color-gray-500);
    margin-top: 1px;
}

.sidebar-logout-btn {
    background : transparent;
    border     : none;
    color      : var(--color-gray-500);
    cursor     : pointer;
    padding    : 0.375rem;
    display    : flex;
    align-items: center;
    transition : all var(--transition);
    flex-shrink: 0;
    border-radius: 8px;
}
.sidebar-logout-btn:hover {
    color       : #f87171;
    background  : rgba(248, 113, 113, 0.1);
    transform   : scale(1.1);
}
.sidebar-logout-btn svg { width: 18px; height: 18px; }

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
#main-content {
    margin-left: var(--sidebar-width);
    flex       : 1;
    min-width  : 0;          /* permette al flex-child di restringersi */
    display    : flex;
    flex-direction: column;
    min-height : 100vh;
    /* `clip` previene overflow laterale SENZA creare uno scroll container,
       così position:sticky sui discendenti (#top-header, #lock-banner, ecc.)
       resta agganciato allo scroll del viewport. */
    overflow-x : clip;
    transition : margin-left var(--transition);
}

/* ============================================================
   TOP HEADER
   ============================================================ */
#top-header {
    height      : var(--header-height);
    background  : rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
    display     : flex;
    align-items : center;
    padding     : 0 1.5rem;
    gap         : 1rem;
    position    : sticky;
    top         : 0;
    z-index     : 50;
    box-shadow  : 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="dark"] #top-header {
    background: rgba(22, 27, 34, 0.85);
    border-bottom-color: rgba(255,255,255,0.06);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.header-title {
    font-size  : var(--font-size-xl);
    font-weight: 700;
    color      : var(--text-primary);
    flex       : 1;
    letter-spacing: -0.025em;
}

.header-breadcrumb {
    display    : flex;
    align-items: center;
    gap        : 0.5rem;
    font-size  : var(--font-size-sm);
    color      : var(--text-muted);
    flex       : 1;
}
.header-breadcrumb .separator { color: var(--color-gray-300); }
.header-breadcrumb .current   { color: var(--text-primary); font-weight: 600; }

/* ============================================================
   PAGE CONTENT
   ============================================================ */
#page-view {
    flex     : 1;
    min-width: 0;
    padding  : 1.5rem;
}

/* ============================================================
   LOCK BANNER (in cima alla scheda quando si è in editing)
   ============================================================ */
#lock-banner {
    background   : linear-gradient(90deg, #e0f2fe 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(2, 132, 199, 0.2);
    padding      : 0.75rem 1.5rem;
    display      : flex;
    align-items  : center;
    gap          : 0.875rem;
    font-size    : var(--font-size-sm);
    color        : #0369a1;
    backdrop-filter: blur(4px);
    position     : sticky;
    top          : var(--header-height);
    z-index      : 49;
}
#lock-banner.hidden { display: none; }
#lock-banner-msg { flex: 1; }

#lock-banner svg {
    color: #0284c7;
    flex-shrink: 0;
}

#lock-release-btn {
    background    : linear-gradient(135deg, #0284c7, #0369a1);
    color         : white;
    border        : none;
    padding       : 0.5rem 1rem;
    border-radius : var(--border-radius);
    cursor        : pointer;
    font-size     : var(--font-size-sm);
    font-weight   : 600;
    box-shadow    : 0 4px 12px -4px rgba(2, 132, 199, 0.35);
    transition    : all var(--transition);
    letter-spacing: 0.01em;
    display       : inline-flex;
    align-items   : center;
    gap           : 0.375rem;
}
#lock-release-btn:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.45);
    transform : translateY(-1px);
}
#lock-release-btn:active {
    transform: translateY(0);
}

/* Dark mode lock banner */
[data-theme="dark"] #lock-banner {
    background: linear-gradient(90deg, rgba(2, 132, 199, 0.18) 0%, rgba(37, 99, 235, 0.12) 100%);
    border-bottom-color: rgba(2, 132, 199, 0.25);
    color: #7dd3fc;
}
[data-theme="dark"] #lock-banner svg { color: #38bdf8; }
[data-theme="dark"] #lock-release-btn {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    box-shadow: 0 4px 12px -4px rgba(14, 165, 233, 0.3);
}
[data-theme="dark"] #lock-release-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    box-shadow: 0 8px 20px -4px rgba(14, 165, 233, 0.4);
}

/* Banner TAKEOVER REQUEST (richiesta di presa in carico ricevuta) */
#takeover-banner {
    background  : linear-gradient(90deg, #fef3c7 0%, #ffedd5 100%);
    border-bottom: 1px solid rgba(217, 119, 6, 0.2);
    padding     : 0.75rem 1.5rem;
    display     : flex;
    align-items : center;
    gap         : 0.875rem;
    font-size   : var(--font-size-sm);
    color       : #92400e;
    backdrop-filter: blur(4px);
    position    : sticky;
    top         : var(--header-height);
    z-index     : 49;
}
#takeover-banner.hidden { display: none; }
#takeover-banner-msg    { flex: 1; }

#takeover-banner svg {
    color: #d97706;
    flex-shrink: 0;
}

#takeover-banner .btn {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1);
}
#takeover-banner .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.15);
}

/* Dark mode takeover banner */
[data-theme="dark"] #takeover-banner {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.18) 0%, rgba(234, 88, 12, 0.12) 100%);
    border-bottom-color: rgba(217, 119, 6, 0.25);
    color: #fcd34d;
}
[data-theme="dark"] #takeover-banner svg { color: #fbbf24; }
#takeover-banner.hidden { display: none; }
#takeover-banner-msg    { flex: 1; }

/* ============================================================
   SIDEBAR: CONTROLLI ASPETTO (tema + dimensione testo)
   ============================================================ */
.sidebar-controls {
    padding        : 0.5rem;
    margin         : 0 0.75rem 0.75rem;
    flex-shrink    : 0;
    display        : flex;
    align-items    : center;
    gap            : 0.375rem;
    background     : rgba(255,255,255,0.03);
    border         : 1px solid rgba(255,255,255,0.06);
    border-radius  : var(--border-radius);
    backdrop-filter: blur(6px);
}

.sidebar-ctrl-btn {
    border         : none;
    outline        : none;
    background     : transparent;
    color          : rgba(148,163,184,0.65);
    cursor         : pointer;
    padding        : 0;
    border-radius  : var(--border-radius-sm);
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    transition     : all 0.2s cubic-bezier(0.4,0,0.2,1);
    position       : relative;
}

/* Pulsante tema — icona circolare grande */
.sidebar-ctrl-btn.theme-btn {
    width           : 36px;
    height          : 36px;
    border-radius   : 50%;
    background      : rgba(255,255,255,0.05);
    box-shadow      : inset 0 0 0 1px rgba(255,255,255,0.08);
}
.sidebar-ctrl-btn.theme-btn:hover {
    background      : rgba(255,255,255,0.1);
    color           : var(--color-white);
    box-shadow      : 0 0 12px rgba(96,165,250,0.25), inset 0 0 0 1px rgba(255,255,255,0.15);
}
.sidebar-ctrl-btn.theme-btn:hover .theme-icon-wrap {
    transform       : rotate(15deg) scale(1.05);
}
.sidebar-ctrl-btn.theme-btn svg {
    width : 18px;
    height: 18px;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.sidebar-ctrl-btn.theme-btn:hover .theme-icon-animate {
    transform: rotate(180deg) scale(1.15);
}

/* Pulsanti dimensione testo — forma pill con icona */
.sidebar-ctrl-btn.font-btn {
    width           : auto;
    min-width       : 30px;
    height          : 30px;
    padding         : 0 0.4rem;
    border-radius   : var(--border-radius);
    font-size       : var(--font-size-xs);
    font-weight     : 700;
    font-family     : inherit;
    line-height     : 1;
    gap             : 0.15rem;
}
.sidebar-ctrl-btn.font-btn:hover {
    background      : rgba(255,255,255,0.08);
    color           : var(--color-white);
}
.sidebar-ctrl-btn.font-btn.active {
    background      : linear-gradient(135deg, rgba(37,99,235,0.55), rgba(29,78,216,0.45));
    color           : var(--color-white);
    box-shadow      : 0 2px 8px -1px rgba(37,99,235,0.35);
}

/* Separatore verticale tra tema e font-btn */
.sidebar-ctrl-separator {
    width         : 1px;
    height        : 22px;
    background    : rgba(255,255,255,0.08);
    margin        : 0 0.1rem;
    flex-shrink   : 0;
}

/* Sezione interna per i bottoni font */
.sidebar-font-btns {
    display    : flex;
    align-items: center;
    gap        : 0.15rem;
    flex       : 1;
    justify-content: center;
}

/* Dark mode: banner takeover usa colore testo hardcoded */
[data-theme="dark"] #takeover-banner {
    color: #FCD34D;
}

/* ============================================================
   MODALE PROFILO UTENTE
   ============================================================ */
.profile-section {
    margin-bottom: 1.25rem;
}
.profile-section-title {
    font-size  : var(--font-size-sm);
    font-weight: 600;
    color      : var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.875rem;
}
.profile-photo-row {
    display    : flex;
    align-items: center;
    gap        : 1.25rem;
}
.profile-photo-preview {
    width          : 72px;
    height         : 72px;
    border-radius  : 50%;
    background     : var(--color-primary);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white;
    font-size      : 1.75rem;
    font-weight    : 700;
    flex-shrink    : 0;
    overflow       : hidden;
}
.profile-photo-preview img {
    width       : 72px;
    height      : 72px;
    border-radius: 50%;
    object-fit  : cover;
    display     : block;
}
.profile-photo-btns {
    display       : flex;
    flex-direction: column;
    gap           : 0.5rem;
    align-items   : flex-start;
}
.profile-photo-status {
    font-size : var(--font-size-xs);
    color     : var(--text-muted);
}
.profile-separator {
    border     : none;
    border-top : 1px solid var(--border-color);
    margin     : 0 0 1.25rem;
}
#profile-modal-backdrop .form-group {
    margin-bottom: 1rem;
}
#profile-modal-backdrop .form-group:last-of-type {
    margin-bottom: 1.25rem;
}

/* Pulsante chiudi modale */
.modal-close-btn {
    background  : transparent;
    border      : none;
    font-size   : 1.5rem;
    line-height : 1;
    color       : var(--text-muted);
    cursor      : pointer;
    padding     : 0 0.25rem;
    margin-left : auto;
}
.modal-close-btn:hover { color: var(--text-primary); }

/* Takeover banner: avatar del richiedente */
.takeover-avatar {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    border-radius  : 50%;
    background     : var(--color-warning);
    color          : #78350F;
    font-size      : var(--font-size-xs);
    font-weight    : 700;
    flex-shrink    : 0;
    overflow       : hidden;
    vertical-align : middle;
    margin-right   : 0.25rem;
}
.takeover-avatar img {
    width       : 28px;
    height      : 28px;
    border-radius: 50%;
    object-fit  : cover;
    display     : block;
}

#sidebar.collapsed .sidebar-logo {
    flex-direction: column;
    gap            : 0.35rem;
    padding        : 0.75rem 0.35rem;
    min-height     : auto;
}
#sidebar.collapsed .sidebar-logo-text {
    display: none;
}

/* ============================================================
   SIDEBAR COLLAPSED STATE
   ============================================================ */
#sidebar.collapsed {
    width: var(--sidebar-collapsed-w);
}

/* Nascondi label navigazione */
#sidebar.collapsed .sidebar-section-label {
    font-size  : 0;
    height     : 1px;
    padding    : 0;
    margin     : 0.5rem 0.75rem;
    background : rgba(255,255,255,0.08);
    opacity    : 1;
    overflow   : hidden;
    align-self : stretch;
    pointer-events: none;
}

#sidebar.collapsed .sidebar-nav {
    padding        : 0.5rem 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
}

#sidebar.collapsed .sidebar-link {
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 0;
    height         : 44px;
    margin         : 0.2rem auto;
    width           : 48px;
    gap            : 0;
    position       : relative;
    color          : #94a3b8 !important;
}
#sidebar.collapsed .sidebar-link svg {
    width : 20px;
    height: 20px;
}
#sidebar.collapsed .sidebar-link-label {
    display: none;
}
#sidebar.collapsed .sidebar-link:hover,
#sidebar.collapsed .sidebar-link.active {
    color     : #ffffff !important;
    background: rgba(255,255,255,0.06);
    transform : none;
}
#sidebar.collapsed .sidebar-link:hover svg,
#sidebar.collapsed .sidebar-link.active svg {
    transform: none;
}
#sidebar.collapsed .sidebar-link svg {
    opacity: 1 !important;
}
#sidebar.collapsed .sidebar-link::before {
    display: none;
}

/* Adatta controlli */
#sidebar.collapsed .sidebar-controls {
    padding    : 0.4rem;
    margin     : 0 0.35rem 0.35rem;
    gap        : 0.25rem;
    flex-wrap  : wrap;
    justify-content: center;
    background : transparent;
    border     : none;
}
#sidebar.collapsed .sidebar-ctrl-separator {
    display: none;
}
#sidebar.collapsed .sidebar-font-btns {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.35rem;
}
#sidebar.collapsed .sidebar-ctrl-btn.font-btn {
    min-width   : 24px;
    height      : 24px;
}

/* Adatta area utente */
#sidebar.collapsed .sidebar-user {
    padding        : 0.5rem 0.35rem;
    margin         : 0.35rem;
    gap            : 0.35rem;
    flex-direction : column;
    align-items    : center;
    background     : transparent;
    border         : none;
    border-top     : 1px solid rgba(255,255,255,0.08);
}
#sidebar.collapsed .sidebar-user:hover {
    transform : none;
    box-shadow: none;
}
#sidebar.collapsed .sidebar-user-info {
    display: none;
}
#sidebar.collapsed .sidebar-user-avatar {
    width : 36px;
    height: 36px;
}
#sidebar.collapsed .sidebar-logout-btn {
    display    : flex;
    padding    : 0.3rem;
}

/* Shift main content when sidebar is collapsed */
#sidebar.collapsed ~ #main-content {
    margin-left: var(--sidebar-collapsed-w);
}

/* ============================================================
   PULSANTE HAMBURGER (visibile solo su mobile)
   ============================================================ */
#mobile-menu-btn {
    display        : none;
    align-items    : center;
    justify-content: center;
    width          : 40px;
    height         : 40px;
    padding        : 0;
    border         : none;
    border-radius  : var(--border-radius);
    background     : transparent;
    color          : var(--text-primary);
    cursor         : pointer;
    flex-shrink    : 0;
    transition     : background var(--transition), color var(--transition);
}
#mobile-menu-btn:hover {
    background: var(--color-gray-100);
}
#mobile-menu-btn svg {
    width : 22px;
    height: 22px;
    display: block;
}
[data-theme="dark"] #mobile-menu-btn:hover {
    background: var(--color-gray-100);
}

/* ============================================================
   OVERLAY SIDEBAR (backdrop su mobile)
   ============================================================ */
#sidebar-overlay {
    display        : none;
    position       : fixed;
    inset          : 0;
    background     : rgba(0,0,0,0.5);
    z-index        : 99;
    backdrop-filter: blur(2px);
    opacity        : 0;
    pointer-events : none;   /* invisibile → non cattura click (fix hamburger) */
    transition     : opacity 0.25s ease;
}
#sidebar-overlay.visible {
    opacity       : 1;
    pointer-events: auto;
}

/* ============================================================
   RESPONSIVE — SCHERMI MEDI (769px–1200px)
   Copre Windows 150% DPI su laptop 1366px → viewport ~910px
   ============================================================ */
@media (max-width: 1200px) and (min-width: 769px) {
    /* Sidebar auto-collassa a icone, main si sposta di conseguenza */
    #sidebar:not(.force-expanded) {
        width: var(--sidebar-collapsed-w);
    }
    #sidebar:not(.force-expanded) .sidebar-logo {
        flex-direction: column;
        gap            : 0.35rem;
        padding        : 0.75rem 0.35rem;
        min-height     : auto;
    }
    #sidebar:not(.force-expanded) .sidebar-logo-text {
        display: none;
    }
    #sidebar:not(.force-expanded) .sidebar-section-label {
        font-size  : 0;
        height     : 1px;
        padding    : 0;
        margin     : 0.5rem 0.75rem;
        background : rgba(255,255,255,0.08);
        overflow   : hidden;
        pointer-events: none;
    }
    #sidebar:not(.force-expanded) .sidebar-nav {
        padding        : 0.5rem 0;
        display        : flex;
        flex-direction : column;
        align-items    : center;
    }
    #sidebar:not(.force-expanded) .sidebar-link {
        display        : flex;
        align-items    : center;
        justify-content: center;
        padding        : 0;
        height         : 44px;
        margin         : 0.2rem auto;
        width          : 48px;
        gap            : 0;
    }
    #sidebar:not(.force-expanded) .sidebar-link-label {
        display: none;
    }
    #sidebar:not(.force-expanded) .sidebar-link::before {
        display: none;
    }
    #sidebar:not(.force-expanded) .sidebar-controls {
        padding         : 0.4rem;
        margin          : 0 0.35rem 0.35rem;
        gap             : 0.25rem;
        flex-wrap       : wrap;
        justify-content : center;
        background      : transparent;
        border          : none;
    }
    #sidebar:not(.force-expanded) .sidebar-ctrl-separator { display: none; }
    #sidebar:not(.force-expanded) .sidebar-font-btns {
        flex-wrap: wrap; justify-content: center; margin-top: 0.35rem;
    }
    #sidebar:not(.force-expanded) .sidebar-ctrl-btn.font-btn {
        min-width: 24px; height: 24px;
    }
    #sidebar:not(.force-expanded) .sidebar-user {
        padding       : 0.5rem 0.35rem;
        margin        : 0.35rem;
        gap           : 0.35rem;
        flex-direction: column;
        align-items   : center;
        background    : transparent;
        border        : none;
        border-top    : 1px solid rgba(255,255,255,0.08);
    }
    #sidebar:not(.force-expanded) .sidebar-user:hover {
        transform : none; box-shadow: none;
    }
    #sidebar:not(.force-expanded) .sidebar-user-info { display: none; }
    #sidebar:not(.force-expanded) .sidebar-user-avatar { width: 36px; height: 36px; }
    #sidebar:not(.force-expanded) .sidebar-collapse-btn {
        left: var(--sidebar-collapsed-w);
    }
    #sidebar:not(.force-expanded) .sidebar-collapse-btn svg {
        transform: rotate(180deg);
    }
    #main-content:not(.force-expanded-content) {
        margin-left: var(--sidebar-collapsed-w);
    }
    /* Se l'utente ha espanso manualmente la sidebar */
    #sidebar.force-expanded { width: var(--sidebar-width); }
    #main-content.force-expanded-content { margin-left: var(--sidebar-width); }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Mostra hamburger, nascondi collapse desktop */
    #mobile-menu-btn    { display: flex; }
    .sidebar-collapse-btn { display: none !important; }

    /* Sidebar diventa drawer fuori schermo — altezza vincolata alla viewport */
    #sidebar {
        transform  : translateX(-100%);
        width      : var(--sidebar-width);
        z-index    : 100;
        height     : 100vh;
        height     : 100dvh;  /* dynamic viewport height: esclude chrome browser su mobile */
        min-height : unset;
        overflow-x : hidden;
        overflow-y : auto;
    }
    /* Sidebar aperta su mobile */
    #sidebar.open {
        transform: translateX(0);
    }
    /* Overlay visibile su mobile */
    #sidebar-overlay { display: block; }

    /* Sidebar "collassata" su mobile diventa quella normale */
    #sidebar.collapsed {
        width    : var(--sidebar-width);
        transform: translateX(-100%);
    }
    #sidebar.collapsed.open {
        transform: translateX(0);
    }
    #sidebar.collapsed ~ #main-content {
        margin-left: 0;
    }

    /* Main content occupa tutto lo schermo */
    #main-content {
        margin-left: 0 !important;
    }

    /* Header mobile: padding ridotto */
    #top-header {
        padding: 0 0.875rem;
        gap    : 0.625rem;
    }
    .header-title {
        font-size: var(--font-size-base);
    }

    /* Page view: padding ridotto */
    #page-view {
        padding: 0.875rem;
    }

    /* Lock/takeover banner: layout verticale su mobile */
    #lock-banner,
    #takeover-banner {
        flex-wrap: wrap;
        gap      : 0.5rem;
        padding  : 0.625rem 0.875rem;
    }
}