/* Shell and tree navigation adapted from CntrMngr MainLayout and TreeNavMenu. */
.app-shell { min-height:100dvh; }
.sidebar {
 width:280px; position:fixed; inset:0 0 0 auto; z-index:20;
 display:flex; flex-direction:column; overflow:hidden; padding:0;
 background:var(--sidebar-background); color:var(--sidebar-text);
 box-shadow:-.35rem 0 1.5rem var(--app-shadow);
 transition:width .25s ease,transform .25s ease;
}
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:1.35rem 1.1rem 1rem; border-bottom:1px solid var(--sidebar-border); }
.brand { display:flex; align-items:flex-start; gap:.5rem; color:var(--sidebar-heading); }
.brand>:is(svg,.app-icon) { width:1.35rem; height:1.35rem; margin-top:.2rem; }
.brand strong { display:block; font-size:1.1rem; font-weight:800; line-height:1.5; }
.brand small { display:block; margin-top:.3rem; font-size:.72rem; color:var(--sidebar-muted); white-space:nowrap; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:.25rem; border:0; border-radius:.5rem; background:transparent; color:var(--muted); font-size:1.4rem; line-height:1; }
.icon-button :is(svg,.app-icon) { width:1.05rem; height:1.05rem; }
.icon-button:hover { color:var(--brand); background:var(--brand-soft); }
.sidebar-collapse { flex-shrink:0; color:var(--sidebar-muted); }
.sidebar-collapse :is(svg,.app-icon) { transform:rotate(-90deg); transition:transform .2s; }
.sidebar-user { display:flex; align-items:center; gap:1rem; padding:1.1rem; background:var(--sidebar-user-background); border-bottom:1px solid var(--sidebar-border); }
.avatar { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#818cf8,#7c3aed); box-shadow:0 .5rem 1.25rem rgba(79,70,229,.3); }
.avatar :is(svg,.app-icon) { width:2rem; height:2rem; }
.sidebar-user-info { min-width:0; }
.sidebar-user-info strong { display:block; max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; color:var(--sidebar-heading); }
.sidebar-user-info small { display:block; margin-top:.3rem; color:var(--sidebar-muted); font-size:.72rem; }
.sidebar-menu { flex:1; overflow-y:auto; padding:.9rem .65rem; scrollbar-width:thin; scrollbar-color:var(--sidebar-border) transparent; }
.sidebar .nav-link,.nav-group-toggle {
 position:relative; display:flex; align-items:center; gap:.5rem; width:100%;
 min-height:46px; margin:0 0 .25rem; padding:.75rem .85rem;
 color:var(--sidebar-text); background:transparent; border:0;
 border-right:3px solid transparent; border-radius:.8rem; font:inherit;
 font-size:.88rem; font-weight:400; text-align:right; line-height:1.4;
 transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.sidebar .nav-link>span,.nav-group-toggle>span:not(.nav-chevron) { flex:1; min-width:0; }
.sidebar .nav-link>:is(svg,.app-icon),.nav-group-toggle>:is(svg,.app-icon) { width:1.35rem; height:1.35rem; margin-left:.2rem; }
.sidebar .nav-link:hover,.sidebar .nav-link.active,.nav-group-toggle:hover,.nav-group-toggle[aria-expanded=true] {
 color:var(--sidebar-hover-text); background:var(--sidebar-hover-background); border-right-color:var(--brand); box-shadow:none;
}
.sidebar .nav-link.active { font-weight:700; }
.sidebar .nav-link.active>:is(svg,.app-icon),.nav-group-toggle[aria-expanded=true]>:is(svg,.app-icon) { color:var(--sidebar-accent); }
.nav-chevron { display:flex; margin-right:auto; transition:transform .2s ease; }
.nav-chevron :is(svg,.app-icon) { width:.72rem; height:.72rem; }
.nav-group-toggle[aria-expanded=true] .nav-chevron { transform:rotate(180deg); }
.nav-submenu { margin:.2rem 0 .35rem; padding:.15rem 1rem .15rem 0; border-right:1px solid rgba(79,70,229,.24); }
html[data-theme=dark] .nav-submenu { border-right-color:rgba(165,180,252,.3); }
.nav-submenu[hidden] { display:none; }
.sidebar .nav-submenu .nav-link { min-height:38px; padding:.5rem .7rem; border-right-width:2px; border-radius:.65rem; font-size:.8rem; }
.sidebar .nav-submenu .nav-link>:is(svg,.app-icon) { width:1.15rem; height:1.15rem; margin-left:.15rem; }
.sidebar-footer { padding:1rem .9rem 1.15rem; border-top:1px solid var(--sidebar-border); }
.sidebar-footer form { margin:0; }
.sidebar-footer .button { border:0; border-radius:.75rem; font-size:.85rem; font-weight:700; }
.sidebar-close,.sidebar-backdrop,.mobile-toggle { display:none; }
.main-area { display:flex; flex-direction:column; min-height:100vh; min-width:0; margin-right:280px; width:calc(100% - 280px); }
.topbar { display:flex; align-items:center; justify-content:flex-end; gap:1rem; position:sticky; top:0; z-index:15; padding:.9rem 1.5rem; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 .35rem 1.25rem var(--app-shadow); backdrop-filter:blur(12px); }
.topbar-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.5rem; font-size:.95rem; font-weight:600; }
.topbar-user { color:var(--muted); margin-right:.5rem; }
.topbar-user-icon { color:var(--brand); }
.topbar-user-icon :is(svg,.app-icon) { width:1.5rem; height:1.5rem; }
.topbar .button.outline { border-radius:.375rem; font-size:.875rem; font-weight:400; padding:.25rem .5rem; min-height:2rem; }
.theme-picker { display:inline-flex; align-items:center; gap:.2rem; min-height:2.35rem; padding:.25rem .4rem; background:var(--surface); border:1px solid var(--line); border-radius:.75rem; box-shadow:0 .25rem .8rem rgba(15,23,42,.07); }
.theme-picker .icon-button { width:1.75rem; height:1.75rem; border-radius:50%; }
.theme-picker [aria-pressed=true] { color:#f59e0b; background:rgba(245,158,11,.13); }
.content { flex:1; min-width:0; width:100%; max-width:1600px; margin:0 auto; padding:1.5rem; }
.main-area { background:radial-gradient(circle at 90% 0%,rgba(79,70,229,.07),transparent 28rem),var(--bg); }
.page-footer { padding:1rem 1.5rem; background:var(--surface); border-top:1px solid var(--line); text-align:center; font-size:.85rem; color:var(--muted); }
@media(min-width:992px) {
 .sidebar-collapsed .sidebar { width:76px; }
 .sidebar-collapsed .main-area { margin-right:76px; width:calc(100% - 76px); }
 .sidebar-collapsed .brand,.sidebar-collapsed .sidebar-user-info,.sidebar-collapsed .sidebar-menu .nav-link>span,.sidebar-collapsed .nav-group-toggle>span,.sidebar-collapsed .nav-submenu,.sidebar-collapsed .sidebar-footer .button>span { display:none; }
 .sidebar-collapsed .sidebar-header { justify-content:center; padding-inline:.85rem; }
 .sidebar-collapsed .sidebar-collapse :is(svg,.app-icon) { transform:rotate(90deg); }
 .sidebar-collapsed .sidebar-user { justify-content:center; padding-inline:.85rem; }
 .sidebar-collapsed .sidebar-menu .nav-link,.sidebar-collapsed .nav-group-toggle { justify-content:center; padding-inline:.6rem; }
 .sidebar-collapsed .sidebar-menu :is(svg,.app-icon) { margin:0; }
 .sidebar-collapsed .sidebar-footer { padding-inline:.85rem; }
 .sidebar-collapsed .sidebar-footer .button { padding-inline:.5rem; }
}
@media(max-width:991.98px) {
 .sidebar { transform:translateX(105%); box-shadow:-1rem 0 3rem rgba(15,23,42,.18); }
 .nav-open .sidebar { transform:translateX(0); }
 .main-area { margin-right:0; width:100%; transition:none; }
 .topbar { justify-content:space-between; }
 .mobile-toggle { display:inline-flex; color:var(--brand); }
 .mobile-toggle :is(svg,.app-icon) { width:1.5rem; height:1.5rem; }
 .sidebar-collapse { display:none; }
 .sidebar-close { display:inline-flex; position:absolute; top:1.25rem; left:.65rem; }
 .sidebar-header { padding-left:3rem; }
 .nav-open .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:19; border:0; background:var(--app-overlay); cursor:pointer; }
 .nav-open { overflow:hidden; }
}
@media(max-width:575.98px) {
 .topbar,.content { padding-right:1rem; padding-left:1rem; }
 .topbar { gap:.5rem; }
 .topbar-actions { gap:.35rem; }
 .topbar-user { display:none; }
 .topbar .button.outline { font-size:.76rem; }
 .theme-picker { padding:.2rem; }
 .theme-picker .icon-button { width:1.55rem; height:1.55rem; }
}

.password-dialog {
    width:min(520px,calc(100vw - 32px));
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    position:fixed;
    padding:1.35rem;
    border:1px solid var(--line);
    border-radius:1.1rem;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 1.75rem 4rem var(--app-shadow)
}
.password-dialog::backdrop {
    background:var(--app-overlay);
    backdrop-filter:blur(2px)
}
body:has(.password-dialog[open]),body:has(.management-dialog[open]) {
    overflow:hidden
}
.password-dialog-close {
    position:absolute;
    top:13px;
    left:13px
}
.password-intro {
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:24px;
    padding-left:15px
}
.password-icon {
    width:40px;
    height:40px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    background:var(--brand-soft);
    color:var(--brand);
    border-radius:14px
}
.password-icon :is(svg,.app-icon) {
    width:24px;
    height:24px
}
.password-intro h2 {
    font-size:1.1rem
}
.password-intro p {
    font-size:.76rem;
    margin-top:3px
}
.change-password-form fieldset {
    border:0;
    margin:0;
    padding:0;
    min-width:0
}
.change-password-form fieldset>label:not(.password-visibility) {
    display:block;
    margin:15px 0 7px;
    font-size:.76rem
}
.change-password-form fieldset>input:not([type=checkbox]) {
    height:2.75rem;
    font-size:.8rem
}
.password-visibility {
    display:flex;
    align-items:center;
    gap:9px;
    margin:16px 0;
    font-size:.78rem;
    color:var(--muted);
    cursor:pointer
}
.password-rules {
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:9px;
    padding:12px 14px;
    font-size:.76rem;
    line-height:2
}
.change-password-form .form-actions {
    margin-top:23px;
    gap:10px
}
.change-password-form .form-actions .button {
    min-height:43px;
    font-size:.78rem
}
.change-password-form .validation-errors {
    padding-right:18px;
    font-size:.76rem
}
.password-page-panel {
    max-width:590px;
    padding:30px
}

@media(max-width:600px) {
 .password-dialog { padding:1.35rem; }
 .password-page-panel { padding:1.35rem; }
 .change-password-form .form-actions { flex-wrap:wrap; }
}

.avatar .app-icon { font-size:2rem; }
.topbar-user-icon .app-icon { font-size:1.5rem; }
.nav-chevron .app-icon { font-size:.72rem; }
.sidebar .nav-submenu .app-icon { font-size:.92rem; }
.mobile-toggle .app-icon { font-size:1.5rem; }