.app-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell.sidebar-collapsed { grid-template-columns: 82px minmax(0, 1fr); }

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100vh;
    padding: 1.1rem;
    background: var(--card);
    border-right: 1px solid var(--line);
    z-index: 12;
}

.sidebar-head,
.topbar-actions,
.sidebar-bottom,
.sidebar .nav a,
.sidebar .nav-dropdown > button,
.sidebar .nav-dropdown-menu a {
    display: flex;
    align-items: center;
}

.sidebar-head { justify-content: space-between; min-height: 48px; gap: .7rem; }
.brand-lockup { display: inline-flex; align-items: center; min-width: 0; gap: .7rem; }
.brand-lockup img { max-width: 46px; max-height: 46px; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-copy strong,
.userbar span { display: block; font-weight: 800; }
.brand-copy small,
.userbar small,
.app-shell .topbar small { display: block; color: var(--muted); font-size: .76rem; font-weight: 700; }

.menu-toggle,
.app-shell .theme-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--repinho-green-soft);
    color: var(--repinho-green-dark);
    cursor: pointer;
    font-size: 1.05rem;
}

.sidebar .nav { display: grid; flex: 1; gap: .35rem; align-content: start; }
.sidebar .nav a,
.sidebar .nav-dropdown > button,
.sidebar-bottom a {
    width: 100%;
    min-height: 44px;
    gap: .7rem;
    padding: 0 .75rem;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.sidebar .nav a:hover,
.sidebar .nav a.active,
.sidebar .nav-dropdown > button:hover,
.sidebar .nav-dropdown.is-active > button,
.sidebar-bottom a:hover {
    background: var(--repinho-green-soft);
    color: var(--repinho-green-dark);
}

.sidebar .nav-ico,
.sidebar-bottom .nav-ico {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--repinho-green), var(--repinho-green-dark));
    color: #fff;
    font-size: .85rem;
    line-height: 1;
}

.sidebar .nav-dropdown { position: relative; }
.sidebar .nav-dropdown-menu {
    display: none;
    gap: .2rem;
    margin: .2rem 0 .15rem .75rem;
    padding: .35rem;
    border-left: 1px solid var(--line);
}
.sidebar .nav-dropdown.is-open .nav-dropdown-menu { display: grid; }
.sidebar .nav-dropdown-menu a { min-height: 38px; padding: .55rem .65rem; border-radius: 11px; font-size: .9rem; }
.sidebar-bottom { display: grid; gap: .35rem; }
.sidebar-bottom .logout-link { color: var(--danger); }

.content-panel { min-width: 0; }
.app-shell .topbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.6rem;
    background: color-mix(in srgb, var(--card) 93%, transparent);
    border-bottom: 1px solid var(--line);
    z-index: 8;
    backdrop-filter: blur(12px);
}
.app-shell .topbar h2 { margin: .1rem 0 0; font-size: 1.15rem; }
.topbar-actions { gap: .75rem; }
.userbar { text-align: right; }

.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .sidebar .nav a span:not(.nav-ico),
.app-shell.sidebar-collapsed .sidebar .nav-dropdown > button span:not(.nav-ico),
.app-shell.sidebar-collapsed .sidebar-bottom a span:not(.nav-ico) { display: none; }
.app-shell.sidebar-collapsed .sidebar { align-items: center; padding-inline: 1rem; }
.app-shell.sidebar-collapsed .sidebar .nav a,
.app-shell.sidebar-collapsed .sidebar .nav-dropdown > button,
.app-shell.sidebar-collapsed .sidebar-bottom a { justify-content: center; width: 46px; padding: 0; }
.app-shell.sidebar-collapsed .sidebar .nav-dropdown.is-open .nav-dropdown-menu {
    position: absolute;
    top: 0;
    left: calc(100% + .55rem);
    display: grid;
    min-width: 214px;
    margin: 0;
    padding: .45rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    z-index: 30;
}

@media (max-width: 900px) {
    .app-shell,
    .app-shell.sidebar-collapsed { display: block; }
    .sidebar { position: static; height: auto; padding: .8rem 1rem; }
    .sidebar .nav,
    .sidebar-bottom { display: none; }
    .app-shell.mobile-menu-open .sidebar .nav,
    .app-shell.mobile-menu-open .sidebar-bottom { display: grid; }
    .sidebar .nav { margin-top: .25rem; }
    .app-shell.sidebar-collapsed .brand-copy,
    .app-shell.sidebar-collapsed .sidebar .nav a span:not(.nav-ico),
    .app-shell.sidebar-collapsed .sidebar .nav-dropdown > button span:not(.nav-ico),
    .app-shell.sidebar-collapsed .sidebar-bottom a span:not(.nav-ico) { display: inline; }
    .app-shell.sidebar-collapsed .sidebar { align-items: stretch; padding-inline: 1rem; }
    .app-shell.sidebar-collapsed .sidebar .nav a,
    .app-shell.sidebar-collapsed .sidebar .nav-dropdown > button,
    .app-shell.sidebar-collapsed .sidebar-bottom a { justify-content: flex-start; width: 100%; padding: 0 .75rem; }
    .app-shell .topbar { position: static; padding: .85rem 1rem; }
    .userbar { display: none; }
    .app-shell.sidebar-collapsed .sidebar .nav-dropdown.is-open .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin: .2rem 0 .15rem .75rem;
        padding: .35rem;
        border: 0;
        border-left: 1px solid var(--line);
        border-radius: 0;
        box-shadow: none;
    }
}