/* A shared 72px header keeps the brand and toolbar on the same baseline. */
:root { --shell-header-height: 72px; }
html[data-theme] .sidebar .sidebar-inner {
    padding: 0 16px 20px;
}
html[data-theme] .sidebar .brand-wrapper {
    flex: 0 0 var(--shell-header-height);
    height: var(--shell-header-height);
    min-height: var(--shell-header-height);
    width: calc(100% + 32px);
    margin: 0 -16px 22px;
    padding: 0 26px;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid var(--theme-border-light);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
html[data-theme] .sidebar .brand-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    font-size: 18px;
    display: grid;
    place-items: center;
}
html[data-theme] .sidebar .brand-logo i { display: block; line-height: 1; }
html[data-theme] .sidebar .brand-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
html[data-theme] .sidebar .brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
html[data-theme] .sidebar .brand-sub { font-size: 9px; font-weight: 500; letter-spacing: .035em; line-height: 1.5; margin: 0; white-space: normal; text-transform: none; max-width: 170px; text-wrap: balance; }
html[data-theme] .topbar { height: var(--shell-header-height); min-height: var(--shell-header-height); }
@media (min-width: 992px) {
    html[data-theme] .sidebar.collapsed .sidebar-inner { padding: 0 0 20px; }
    html[data-theme] .sidebar.collapsed .brand-wrapper {
        width: 100%; margin: 0 0 22px; padding: 0; gap: 0;
        align-items: center; justify-content: center;
    }
    html[data-theme] .sidebar.collapsed .brand-text { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    html[data-theme] .menu-toggle { transition: background .16s ease, border-color .16s ease; }
}

/* Account management lives in the dashboard, in one accessible dialog. */
#account-modal { z-index: 500; }
#account-modal .account-editor-panel { max-width: 600px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; }
.account-editor-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.account-editor-heading-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary); font-size: 20px; }
.account-editor-heading-copy { flex: 1; min-width: 0; }
.account-editor-heading-copy .modal-title { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.account-editor-heading-copy p { margin: 5px 0 0; color: var(--theme-text-muted); font-size: 12px; line-height: 1.5; }
#account-modal .form-label { font-size: 12px; }
#account-modal .form-label .text-muted { font-size: 10px; font-weight: 500; }
#account-modal .form-input { min-height: 42px; border-radius: 10px; }
#account-modal #account-owner-context { border-radius: 12px; }
@media (max-width: 640px) {
    #account-modal { padding: 12px; }
    #account-modal .account-editor-panel { padding: 20px 16px; max-height: calc(100dvh - 24px); }
    .account-editor-heading { gap: 10px; }
    .account-editor-heading-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .account-editor-heading-copy .modal-title { font-size: 18px; }
    #account-modal .grid-2 { grid-template-columns: 1fr; }
}

html:has(#account-modal.open), body:has(#account-modal.open) { overflow: hidden; }
#account-modal .account-editor-footer { position: sticky; bottom: -26px; background: var(--theme-bg-primary); padding: 14px 0 4px !important; border-top: 1px solid var(--theme-border-light); margin-top: 18px; }
@media (max-width: 640px) { #account-modal .account-editor-footer { bottom: -20px; padding-bottom: 8px !important; } }

html[data-theme] .page-dashboard .account-actions-mutasi-only { grid-template-columns: minmax(0,1fr); }
html[data-theme] .page-dashboard .account-actions-mutasi-only .btn { grid-column: 1 / -1; min-height: 44px; }