/* Sidebar styles — imported by base_app_v3 via app-sidebar.css link.
   Figma source: node 373:591 (layout_A7Y57S)
   Sidebar width: 336px, padding: 20px 60px 60px, nav item h: 72px
*/

.app-sidebar {
    background: var(--color-white);
    border-right: 1px solid var(--color-border, #D7DFF2);
    position: relative; /* anchor for toggle button */
    transition: width .25s ease;
}

.app-sidebar__inner {
    position: sticky;
    top: 0;
    /* `position: sticky` creates a stacking context in Blink/WebKit.
       Without an explicit z-index, `__inner` paints as a single layer with
       auto z-index relative to its sibling `.app-sidebar__toggle` (z: 205).
       The flyout (z: 1000) lives inside this nested context — it can't
       paint above the toggle. Lift `__inner` above the toggle so the whole
       sticky block (with the flyout inside) overlays the toggle button. */
    z-index: var(--z-sidebar-inner);
    min-height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 60px;
}

/* === Logo === */
.app-sidebar__logo {
    padding: 41px 60px 20px 30px;
    flex-shrink: 0;
    height: auto;
    display: flex;
    align-items: center;
    transition: padding .25s ease;
}

.app-sidebar__logo a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.app-sidebar__logo svg,
.app-sidebar__logo img {
    display: block;
    height: 88px;
    width: auto;
    transition: width .25s ease, height .25s ease;
}

/* === Navigation === */
.app-sidebar__nav {
    flex: 1;
    min-height: 0; /* allows flex item to shrink and enable overflow-y scroll */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    margin-top: 40px;
}

.app-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px 10px 30px;
    height: 72px;
    box-sizing: border-box;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    transition: background .2s, color .2s;
    position: relative;
    cursor: pointer;
}

.app-sidebar__link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.app-sidebar__link:hover {
    background: var(--color-table-hover);
    color: var(--color-text);
}

.app-sidebar__link--active {
    color: var(--color-info);
    font-weight: var(--font-weight-bold);
    background: var(--color-primary-hover-bg, rgba(79, 124, 247, .08));
}

.app-sidebar__link--active svg {
    color: var(--color-info);
}

.app-sidebar__link--disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Badge dot */
.app-sidebar__badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--button-primary-background);
    flex-shrink: 0;
    margin-left: auto;
    animation: app-sidebar-badge-pulse 2s ease-out infinite;
}

/* Pulsing ring — expanding, fading box-shadow around the unread dot.
   Ring colour is derived from the badge token --button-primary-background. */
@keyframes app-sidebar-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-primary-background) 55%, transparent);
    }
    70% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--button-primary-background) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-primary-background) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar__badge {
        animation: none;
    }
}

/* === Bottom: avatar + toggle === */
.app-sidebar__bottom {
    padding: 0 0 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    z-index: 1;
}

/* === Toggle button — circle on sidebar/content boundary === */
.app-sidebar__toggle {
    position: fixed;
    top: 50vh;
    left: calc(var(--app-sidebar-width) - 16px);
    transform: translateY(-50%);
    z-index: var(--z-sidebar-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border, #D7DFF2);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-dropdown, 0 2px 8px rgba(20, 28, 48, .10));
    transition: background .2s, box-shadow .2s, color .2s, left .25s ease;
}

.app-sidebar__toggle:hover {
    background: var(--color-info);
    color: var(--color-white);
    box-shadow: var(--shadow-primary, 0 4px 12px rgba(79, 124, 247, .30));
}

.app-sidebar__toggle svg {
    transition: transform .3s ease;
}

.app-sidebar--collapsed .app-sidebar__toggle svg {
    transform: rotate(180deg);
}

/* === Avatar in sidebar === */
.app-sidebar__avatar-wrap {
    position: relative;
}

.app-sidebar__avatar-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 30px;
    cursor: pointer;
    transition: background .2s;
    text-align: left;
}

.app-sidebar__avatar-btn:hover {
    background: var(--color-table-hover);
}

.app-avatar-fallback {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-info-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    transition: width .25s ease, height .25s ease, font-size .25s ease;
}

.app-avatar-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    transition: width .25s ease, height .25s ease;
}

.app-avatar-img-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    transition: width .25s ease, height .25s ease;
}

.app-avatar-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: 'Inter', sans-serif;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar__avatar-btn .icon,
.app-sidebar__avatar-btn .ui-icon {
    flex-shrink: 0;
    transition: transform .25s ease;
}

.header-dropdown.open .app-sidebar__avatar-btn .ui-icon {
    transform: rotate(180deg);
}

.app-avatar-menu {
    min-width: 220px;
    bottom: 100%;
    top: auto;
    left: 0;
    margin-bottom: 4px;
}

.app-avatar-menu-header {
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
}

.app-avatar-menu-header strong {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.app-avatar-menu-header small {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
    word-break: break-all;
}

.app-avatar-menu .header-dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* TASK-000517: .app-avatar-menu .language-select / .header-dropdown-item-static
   удалены вместе с кастомным <select> в меню аватара — переключатель языка
   переехал в шапку на централизованный _language_switcher (ui_dropdown). */

.header-dropdown-item-danger {
    color: var(--color-danger, #dc2626) !important;
}

.header-dropdown-item-danger:hover {
    background: var(--color-danger-bg-light, rgba(220, 38, 38, 0.06));
}

/* === Collapsed state: hide labels === */
.app-sidebar--collapsed .app-sidebar__label,
.app-sidebar--collapsed .app-avatar-name,
.app-sidebar--collapsed .app-sidebar__badge {
    display: none;
}

.app-sidebar--collapsed .app-sidebar__link,
.app-sidebar--collapsed .app-sidebar__group-header {
    justify-content: center;
    padding: 10px;
}

.app-sidebar--collapsed .app-sidebar__avatar-btn {
    justify-content: center;
    padding: 0 10px;
    gap: 4px;
    height: 72px;
}

.app-sidebar--collapsed .app-sidebar__logo {
    padding: 40px 0 40px;
    justify-content: center;
}

.app-sidebar--collapsed .app-sidebar__logo svg,
.app-sidebar--collapsed .app-sidebar__logo img {
    width: 64px;
    height: auto;
}

.app-sidebar--collapsed .app-sidebar__bottom {
    padding: 0 0 60px;
    align-items: stretch;
}

/* Match nav icon size in collapsed sidebar */
.app-sidebar--collapsed .app-avatar-fallback {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xxs);
}

.app-sidebar--collapsed .app-avatar-img,
.app-sidebar--collapsed .app-avatar-img-wrap {
    width: 24px;
    height: 24px;
}

.app-layout--collapsed .app-sidebar__toggle {
    left: calc(var(--app-sidebar-collapsed-width) - 16px);
}

/* === Wide viewport (>1920px): layout is centered — offset toggle by margin === */
@media (min-width: 1921px) {
    .app-sidebar__toggle {
        left: calc((100vw - 1920px) / 2 + var(--app-sidebar-width) - 16px);
    }
    .app-layout--collapsed .app-sidebar__toggle {
        left: calc((100vw - 1920px) / 2 + var(--app-sidebar-collapsed-width) - 16px);
    }
}

/* === Collapsed state (≥1200px): overflow visible so toggle at right:-16px isn't clipped === */
@media (min-width: 1200px) {
    .app-sidebar--collapsed {
        overflow: visible;
    }

    /* Collapsed sidebar drops below content in stacking order; lift it
       unconditionally so avatar dropdown and group flyouts always paint
       above .app-main (photo carousels, content cards, etc.). */
    .app-sidebar--collapsed {
        z-index: var(--z-sidebar);
    }
}

/* === Narrow desktop (768–1199px): always collapsed, hover expands as overlay === */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Sidebar element stays in grid flow — background fills full column to footer */
    .app-sidebar {
        overflow: visible; /* allow __inner to expand beyond column width */
    }

    /* __inner is the actual visual overlay */
    .app-sidebar .app-sidebar__inner {
        position: sticky;
        top: 0;
        width: var(--app-sidebar-collapsed-width);
        background: var(--color-white);
        border-right: 1px solid var(--color-border, #D7DFF2);
        z-index: var(--z-sidebar);
        transition: width .25s ease;
    }

    .app-sidebar .app-sidebar__label,
    .app-sidebar .app-avatar-name,
    .app-sidebar .app-sidebar__badge {
        display: none;
    }

    .app-sidebar .app-sidebar__link {
        justify-content: center;
        padding: 10px;
    }

    /* Collapse group-headers to icon-only in narrow viewports */
    .app-sidebar .app-sidebar__group-header {
        justify-content: center;
        padding: 10px;
    }

    .app-sidebar .app-sidebar__group-label,
    .app-sidebar .app-sidebar__group-arrow {
        display: none;
    }

    .app-sidebar .app-sidebar__group-items {
        display: none;
    }

    /* Mode toggle (super_user) — icons-only stacked vertically, like .app-sidebar--collapsed */
    .app-sidebar .app-sidebar__mode-toggle {
        flex-direction: column;
        margin: 8px 8px 16px;
    }

    /* TD-78 A.6: label span is now canon `.ui-segmented__label` (scoped to the bespoke
       mode-toggle wrapper — button geometry itself comes from `.ui-segmented__item` canon). */
    .app-sidebar .app-sidebar__mode-toggle .ui-segmented__label {
        display: none;
    }

    .app-sidebar .app-sidebar__mode-toggle .ui-segmented__item {
        padding: 8px;
    }

    /* Match .app-sidebar--collapsed: same padding so the logo sits identically
       whether the sidebar is collapsed manually or auto-collapsed by width. */
    .app-sidebar .app-sidebar__logo {
        padding: 40px 0 40px;
        justify-content: center;
    }

    /* Shrink logo to collapsed size — same as .app-sidebar--collapsed */
    .app-sidebar .app-sidebar__logo svg,
    .app-sidebar .app-sidebar__logo img {
        width: 64px;
        height: auto;
    }

    /* Match .app-sidebar--collapsed so the avatar block sits identically
       whether the sidebar is collapsed manually or auto-collapsed by width. */
    .app-sidebar .app-sidebar__bottom {
        padding: 0 0 60px;
        align-items: stretch;
    }

    .app-sidebar .app-sidebar__avatar-btn {
        justify-content: center;
        padding: 0 10px;
        gap: 4px;
        height: 72px;
    }

    /* Shrink user photo to collapsed size — same as .app-sidebar--collapsed */
    .app-sidebar .app-avatar-fallback {
        width: 24px;
        height: 24px;
        font-size: var(--font-size-xxs);
    }

    .app-sidebar .app-avatar-img,
    .app-sidebar .app-avatar-img-wrap {
        width: 24px;
        height: 24px;
    }

    /* Hover: expand __inner as overlay over content — restore full sizes.
       Logo container padding/justify are restored later in this media query
       (search for `.app-sidebar:hover .app-sidebar__logo {`); here we only
       restore the inner svg/img dimensions back to base. */
    .app-sidebar:hover .app-sidebar__logo svg,
    .app-sidebar:focus-within .app-sidebar__logo svg,
    .app-sidebar:hover .app-sidebar__logo img,
    .app-sidebar:focus-within .app-sidebar__logo img {
        width: auto;
        height: 88px;
    }

    .app-sidebar:hover .app-avatar-fallback,
    .app-sidebar:focus-within .app-avatar-fallback,
    .app-sidebar:hover .app-avatar-img,
    .app-sidebar:focus-within .app-avatar-img,
    .app-sidebar:hover .app-avatar-img-wrap,
    .app-sidebar:focus-within .app-avatar-img-wrap {
        width: 72px;
        height: 72px;
    }

    /* Hover: expand __inner as overlay over content */
    .app-sidebar:hover .app-sidebar__inner,
    .app-sidebar:focus-within .app-sidebar__inner {
        width: var(--app-sidebar-width);
        box-shadow: var(--shadow-sidebar, 4px 0 24px rgba(20, 28, 48, .12));
    }

    .app-sidebar:hover .app-sidebar__label,
    .app-sidebar:focus-within .app-sidebar__label,
    .app-sidebar:hover .app-avatar-name,
    .app-sidebar:focus-within .app-avatar-name,
    .app-sidebar:hover .app-sidebar__badge,
    .app-sidebar:focus-within .app-sidebar__badge {
        display: inline;
    }

    .app-sidebar:hover .app-sidebar__link,
    .app-sidebar:focus-within .app-sidebar__link {
        justify-content: flex-start;
        padding: 10px 40px 10px 30px;
    }

    .app-sidebar:hover .app-sidebar__group-header,
    .app-sidebar:focus-within .app-sidebar__group-header {
        justify-content: flex-start;
        padding: 10px 40px 10px 30px;
    }

    /* Restore mode toggle to horizontal with labels on hover */
    .app-sidebar:hover .app-sidebar__mode-toggle,
    .app-sidebar:focus-within .app-sidebar__mode-toggle {
        flex-direction: row;
        margin: 8px 16px 16px;
    }

    .app-sidebar:hover .app-sidebar__mode-toggle .ui-segmented__label,
    .app-sidebar:focus-within .app-sidebar__mode-toggle .ui-segmented__label {
        display: inline;
    }

    .app-sidebar:hover .app-sidebar__mode-toggle .ui-segmented__item,
    .app-sidebar:focus-within .app-sidebar__mode-toggle .ui-segmented__item {
        padding: 6px 10px;
    }

    .app-sidebar:hover .app-sidebar__group-label,
    .app-sidebar:focus-within .app-sidebar__group-label,
    .app-sidebar:hover .app-sidebar__group-arrow,
    .app-sidebar:focus-within .app-sidebar__group-arrow {
        display: inline-flex;
    }

    .app-sidebar:hover .app-sidebar__group--open .app-sidebar__group-items,
    .app-sidebar:focus-within .app-sidebar__group--open .app-sidebar__group-items {
        display: flex;
    }

    .app-sidebar:hover .app-sidebar__logo,
    .app-sidebar:focus-within .app-sidebar__logo {
        padding: 41px 60px 20px 30px;
        justify-content: flex-start;
    }

    .app-sidebar:hover .app-sidebar__bottom,
    .app-sidebar:focus-within .app-sidebar__bottom {
        padding: 0 30px 60px;
        align-items: flex-start;
    }

    .app-sidebar:hover .app-sidebar__avatar-btn,
    .app-sidebar:focus-within .app-sidebar__avatar-btn {
        justify-content: flex-start;
        padding: 10px 0;
    }

    /* Keep sidebar expanded while avatar dropdown is open so it doesn't
       shrink behind the open dropdown and spill into the content area */
    .app-sidebar:has(.header-dropdown.open) .app-sidebar__inner {
        width: var(--app-sidebar-width);
        box-shadow: var(--shadow-sidebar, 4px 0 24px rgba(20, 28, 48, .12));
    }

    .app-sidebar:has(.header-dropdown.open) .app-sidebar__label,
    .app-sidebar:has(.header-dropdown.open) .app-avatar-name,
    .app-sidebar:has(.header-dropdown.open) .app-sidebar__badge {
        display: inline;
    }

    .app-sidebar:has(.header-dropdown.open) .app-sidebar__link {
        justify-content: flex-start;
        padding: 10px 40px 10px 30px;
    }

    .app-sidebar:has(.header-dropdown.open) .app-sidebar__logo {
        padding: 41px 60px 20px 30px;
        justify-content: flex-start;
    }

    .app-sidebar:has(.header-dropdown.open) .app-sidebar__bottom {
        padding: 0 30px 60px;
        align-items: flex-start;
    }

    .app-sidebar:has(.header-dropdown.open) .app-sidebar__avatar-btn {
        justify-content: flex-start;
        padding: 10px 0;
    }

    .app-sidebar__toggle {
        display: none;
    }
}

/* === Mobile (<768px): full-screen overlay === */
@media (max-width: 767px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: var(--z-sidebar-flyout);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
    }

    .app-sidebar .app-sidebar__inner {
        position: static; /* sticky irrelevant inside fixed */
        max-height: none;
        overflow: visible;
        height: 100%;
        padding: 20px 0 40px;
    }

    .app-layout--mobile-open .app-sidebar {
        transform: translateX(0);
    }

    /* Show labels on mobile (override collapsed) */
    .app-sidebar .app-sidebar__label,
    .app-sidebar .app-avatar-name {
        display: inline;
    }

    .app-sidebar .app-sidebar__link {
        justify-content: flex-start;
        padding: 14px 24px;
        height: auto;
    }

    /* Logo is shown in the mobile topbar — hide the duplicate inside the
       sidebar (burger) drawer on mobile. */
    .app-sidebar .app-sidebar__logo {
        display: none;
    }

    .app-sidebar .app-sidebar__bottom {
        padding: 0 24px;
        margin-top: 20px;
    }

    .app-sidebar__toggle {
        display: none;
    }

    /* Mobile topbar action buttons */
    .app-topbar__burger,
    .app-topbar__bell {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        color: var(--color-text);
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .app-topbar__burger svg,
    .app-topbar__bell svg {
        width: 24px;
        height: 24px;
    }

    .app-topbar__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    /* Logo SVG has a viewBox but no width/height attrs — it collapses to 0x0
       inside the flex topbar without an explicit size. Pin the height. */
    .app-topbar__logo svg,
    .app-topbar__logo img {
        height: 56px;
        width: auto;
    }
}

@media (min-width: 768px) {
    .app-topbar {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .app-sidebar__toggle {
        display: flex;
    }
}

/* === Mode visibility ===
   Both user-nav and admin-nav are in DOM; the inactive one is hidden via
   CSS class on parent <aside>. Toggle changes class without re-render. */
.app-sidebar--mode-user .app-sidebar__nav--admin { display: none; }
.app-sidebar--mode-admin .app-sidebar__nav--user { display: none; }

/* === Mode toggle (super_user only) === */
.app-sidebar__mode-toggle {
    display: flex;
    gap: 0;
    margin: 8px 16px 16px;
    padding: 2px;
    background: var(--color-background, #f4f5f7);
    border: 1px solid var(--color-border, #e1e4e8);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0; /* keep height when admin nav grows in flex parent */
}

/* TD-78 A.6: mode-btn geometry (padding/colors/aria-pressed state) now comes from canon
   `.ui-segmented`/`.ui-segmented__item` (public/css/components.css) — the wrapper below only
   carries the outer container look; button-level bespoke styling was removed as dead CSS. */

.app-sidebar__mode-toggle .ui-segmented__label {
    white-space: nowrap;
}

/* Активный сегмент mode-toggle: тёмный («чёрный») текст на светлой пилюле.
   Канон `.ui-segmented__item--active` даёт белый текст (верно для segmented-фильтров с
   цветным фоном), но на светлом mode-toggle-контейнере белый текст невидим —
   скоуплено только сюда (sidebar + topbar), фильтры канон сохраняют. */
.app-sidebar__mode-toggle .ui-segmented__item--active,
.app-topbar__mode-toggle .ui-segmented__item--active {
    background: var(--color-white);
    color: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

/* Collapsed sidebar — show only icons, stack vertically */
.app-sidebar--collapsed .app-sidebar__mode-toggle {
    flex-direction: column;
    margin: 8px 8px 16px;
    align-items: center;
}

.app-sidebar--collapsed .app-sidebar__mode-toggle .ui-segmented__label {
    display: none;
}

.app-sidebar--collapsed .app-sidebar__mode-toggle .ui-segmented__item {
    padding: 8px;
}

/* === Admin nav groups (folders) === */
.app-sidebar__nav--admin .app-sidebar__group {
    display: flex;
    flex-direction: column;
}

.app-sidebar__group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Override Brand Book btn-icon: it's a 36×36 round icon button by default
       (border-radius: 50% via dynamic.css). Here we need a full-width sidebar
       row with square corners and sidebar-native padding/height. */
    width: 100%;
    height: auto;
    padding: 10px 40px 10px 30px;
    min-height: 72px;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    text-align: left;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.app-sidebar__group-header:hover,
.app-sidebar__group--flyout-open > .app-sidebar__group-header {
    background: var(--color-table-hover);
    color: var(--color-text);
}

.app-sidebar__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xl); /* emoji size for admin groups (group.icon is text) */
    flex-shrink: 0;
}

.app-sidebar__group-icon svg {
    width: 24px;
    height: 24px;
}

.app-sidebar__group-label {
    flex: 1;
}

.app-sidebar__group-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.app-sidebar__group-arrow svg {
    width: 16px;
    height: 16px;
}

.app-sidebar__group--open .app-sidebar__group-arrow {
    transform: rotate(180deg);
}

.app-sidebar__group-items {
    display: none;
    flex-direction: column;
    padding-left: 0;
}

.app-sidebar__group--open .app-sidebar__group-items {
    display: flex;
}

.app-sidebar__link--sub {
    padding: 8px 40px 8px 64px;
    min-height: 56px;
    height: auto; /* override .app-sidebar__link fixed 72px so wrapped text grows */
    font-size: var(--font-size-base);
    white-space: normal; /* override .app-sidebar__link nowrap — wrap long labels */
    overflow-wrap: anywhere; /* break ultra-long words without producing overflow */
    line-height: var(--line-height-tight);
}

/* Collapsed sidebar — hide labels, show only group icons; group items don't collapse */
.app-sidebar--collapsed .app-sidebar__group-label,
.app-sidebar--collapsed .app-sidebar__group-arrow {
    display: none;
}

.app-sidebar--collapsed .app-sidebar__group-items {
    /* In collapsed mode, force-hide sub-items to keep sidebar narrow */
    display: none;
    position: relative;
    z-index: var(--z-sidebar-toggle);
    margin-left: -10px;
}

/* === Mobile mode toggle (in topbar) === */
.app-topbar__mode-toggle {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-background, #f4f5f7);
    border-radius: 6px;
    margin: 0 8px;
}

/* === Flyout submenu for collapsed sidebar (≥1200px) === */
@media (min-width: 1200px) {
    /* Allow flyout to escape nav's overflow-y:auto scroll clip */
    .app-sidebar--collapsed .app-sidebar__nav {
        overflow: visible;
    }

    .app-sidebar--collapsed .app-sidebar__group {
        position: relative;
    }

    /* Show flyout on hover OR when sticky-open via JS (`--flyout-open`).
       No margin-left between group-header and flyout — otherwise cursor
       crossing the 4px gap loses :hover and flyout collapses. */
    .app-sidebar--collapsed .app-sidebar__group:hover > .app-sidebar__group-items,
    .app-sidebar--collapsed .app-sidebar__group:focus-within > .app-sidebar__group-items,
    .app-sidebar--collapsed .app-sidebar__group.app-sidebar__group--flyout-open > .app-sidebar__group-items {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 240px;
        max-width: 320px;
        padding: 8px 0;
        background: var(--color-white);
        border: 1px solid var(--color-border, #D7DFF2);
        border-radius: 8px;
        box-shadow: var(--shadow-dropdown, 0 4px 12px rgba(20, 28, 48, .12));
        z-index: var(--z-sidebar-overlay);
    }

    /* When a sticky flyout (--flyout-open) is pinned, suppress hover-flyouts
       on other groups to avoid overlap. Only the pinned one stays visible
       until user clicks outside or clicks another group-header (which
       transfers the pin via JS). */
    .app-sidebar--collapsed:has(.app-sidebar__group--flyout-open)
        .app-sidebar__group:not(.app-sidebar__group--flyout-open):hover > .app-sidebar__group-items,
    .app-sidebar--collapsed:has(.app-sidebar__group--flyout-open)
        .app-sidebar__group:not(.app-sidebar__group--flyout-open):focus-within > .app-sidebar__group-items {
        display: none;
    }

    /* Compact links inside flyout (override base sub-item padding) */
    .app-sidebar--collapsed .app-sidebar__group:hover > .app-sidebar__group-items .app-sidebar__link--sub,
    .app-sidebar--collapsed .app-sidebar__group.app-sidebar__group--flyout-open > .app-sidebar__group-items .app-sidebar__link--sub {
        padding: 8px 16px;
        min-height: auto;
        font-size: var(--font-size-sm);
        justify-content: flex-start; /* override .app-sidebar--collapsed centered link */
    }

    /* Restore labels inside flyout (collapsed sidebar normally hides them).
       Include :focus-within so labels show in any state where items show. */
    .app-sidebar--collapsed .app-sidebar__group:hover > .app-sidebar__group-items .app-sidebar__label,
    .app-sidebar--collapsed .app-sidebar__group:focus-within > .app-sidebar__group-items .app-sidebar__label,
    .app-sidebar--collapsed .app-sidebar__group.app-sidebar__group--flyout-open > .app-sidebar__group-items .app-sidebar__label {
        display: inline;
    }
}