/**
 * Notion Nav Panel — final overrides (after Tailwind).
 * Desktop (≥960px): wide = fixed icon column (--notion-nav-icon-inset + 20px slot); narrow = centered icons (no horizontal padding).
 * Mobile: full-width overlay; classic 16px padding.
 * Variables mirror NotionNavigationMenu.razor.css for predictable alignment.
 */
html body .notion-nav-menu,
.notion-nav-shell .notion-nav-menu {
    --notion-nav-icon-inset: 22px;
    --notion-nav-icon-size: 20px;
    --notion-nav-icon-gap: 16px;
    --notion-nav-label-start: calc(var(--notion-nav-icon-inset) + var(--notion-nav-icon-size) + var(--notion-nav-icon-gap));
    --notion-nav-left: 16px;
}

/* ── Mobile / tablet overlay (<960px): 16px rail padding ── */
@media (max-width: 959px) {
    html body .notion-nav-shell .notion-nav-menu .mud-nav-link.px-4,
    html body .notion-nav-menu .mud-nav-link.px-4,
    html body .notion-nav-menu .mud-nav-link,
    .notion-nav-shell .notion-nav-menu .mud-nav-link {
        padding-left: 16px !important;
        padding-right: 16px !important;
        display: flex !important;
        align-items: center !important;
        min-height: 32px !important;
    }

    .notion-nav-menu .notion-section-label-wrap {
        padding-left: 16px !important;
        margin-left: 0 !important;
    }
}

/* ── Desktop inline rail (≥960px): wide = inset + label column; narrow = no horizontal padding, centered icons ── */
@media (min-width: 960px) {
    html body .notion-nav-menu.notion-rail-wide .mud-nav-link:not(.mud-nav-link-nested),
    .notion-nav-shell .notion-nav-menu.notion-rail-wide .mud-nav-link:not(.mud-nav-link-nested) {
        padding-left: var(--notion-nav-icon-inset) !important;
        padding-right: 16px !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested),
    .notion-nav-shell .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested) > div,
    .notion-nav-shell .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested) > div {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Section headings align with label column (same as expanded item text start) */
    html body .notion-nav-menu.notion-rail-wide .notion-section-label-wrap,
    .notion-nav-shell .notion-nav-menu.notion-rail-wide .notion-section-label-wrap {
        padding-left: var(--notion-nav-label-start) !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .notion-section-label-wrap,
    .notion-nav-shell .notion-nav-menu.notion-rail-narrow .notion-section-label-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* MudNavGroup container (if used under notion shell): align with nav items on mobile */
.notion-nav-menu .mud-nav-group.px-4,
html body .notion-nav-menu .mud-nav-group.px-4,
html body .notion-nav-scrollable .mud-nav-group.px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 960px) {
    html body .notion-nav-menu.notion-rail-wide .mud-nav-group.px-4 {
        padding-left: var(--notion-nav-icon-inset) !important;
        padding-right: 16px !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .mud-nav-group.px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* MudNavGroup header row: same left inset as top-level links so the asset icon column lines up */
html body .notion-nav-menu .mud-nav-group > .mud-nav-link,
html body .notion-nav-menu .mud-nav-group > button.mud-nav-link,
.notion-nav-shell .notion-nav-menu .mud-nav-group > .mud-nav-link,
html body .notion-nav-scrollable .mud-nav-group > .mud-nav-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 960px) {
    html body .notion-nav-menu.notion-rail-wide .mud-nav-group > .mud-nav-link,
    html body .notion-nav-menu.notion-rail-wide .mud-nav-group > button.mud-nav-link {
        padding-left: var(--notion-nav-icon-inset) !important;
        padding-right: 16px !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .mud-nav-group > .mud-nav-link,
    html body .notion-nav-menu.notion-rail-narrow .mud-nav-group > button.mud-nav-link {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }
}

.notion-nav-group-wrap,
html body .notion-nav-menu .notion-nav-group-wrap,
html body .notion-nav-scrollable .notion-nav-group-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.notion-nav-group-wrap .mud-nav-group,
.notion-nav-group-wrap nav.mud-nav-group,
.notion-nav-group-wrap .mud-nav-group.px-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.notion-nav-group-wrap .mud-nav-group > .mud-nav-link,
.notion-nav-group-wrap .mud-nav-group > button.mud-nav-link,
html body .notion-nav-group-wrap .mud-nav-group > .mud-nav-link {
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
}

@media (min-width: 960px) {
    html body .notion-nav-menu.notion-rail-wide .notion-nav-group-wrap .mud-nav-group > .mud-nav-link,
    html body .notion-nav-menu.notion-rail-wide .notion-nav-group-wrap .mud-nav-group > button.mud-nav-link {
        padding-left: var(--notion-nav-icon-inset) !important;
        padding-right: 16px !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .notion-nav-group-wrap .mud-nav-group > .mud-nav-link,
    html body .notion-nav-menu.notion-rail-narrow .notion-nav-group-wrap .mud-nav-group > button.mud-nav-link {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center !important;
    }
}

.notion-nav-group-wrap .mud-nav-group > .mud-nav-link > .mud-icon-root:first-of-type,
.notion-nav-group-wrap .mud-nav-group > .mud-nav-link > svg:first-of-type {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

.notion-nav-group-wrap .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.notion-nav-group-wrap .mud-nav-group > .mud-nav-link > .mud-nav-link-expand-icon,
.notion-nav-group-wrap .mud-nav-group > .mud-nav-link > .mud-expand-panel-icon {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

html body .notion-nav-menu .mud-nav-link > div,
.notion-nav-shell .notion-nav-menu .mud-nav-link > div {
    display: flex !important;
    align-items: center !important;
}

/* Icons: 20px; gap from margin only when not in desktop top-level .mud-nav-link-text row (see block above) */
html body .notion-nav-menu .mud-nav-link .mud-icon-root,
html body .notion-nav-menu .mud-nav-link .mud-icon,
html body .notion-nav-menu .mud-nav-link > .mud-icon-root,
html body .notion-nav-menu .mud-nav-link > .mud-icon,
html body .notion-nav-menu .mud-nav-link > svg,
html body .notion-nav-menu .mud-nav-link .notion-nav-link-icon,
html body .notion-nav-menu .mud-nav-link .notion-nav-link-icon.mud-icon-root,
.notion-nav-shell .notion-nav-menu .mud-nav-link .mud-icon-root,
.notion-nav-shell .notion-nav-menu .mud-nav-link > .mud-icon-root,
.notion-nav-shell .notion-nav-menu .mud-nav-link > svg,
.notion-nav-shell .notion-nav-menu .mud-nav-link .notion-nav-link-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .notion-nav-menu .mud-nav-group > .mud-nav-link .mud-icon-root:not(.mud-nav-link-expand-icon),
html body .notion-nav-menu .mud-nav-group > .mud-nav-link .mud-icon-root.mud-icon-size-medium:not(.mud-nav-link-expand-icon),
.notion-nav-shell .notion-nav-menu .mud-nav-group > .mud-nav-link .mud-icon-root:not(.mud-nav-link-expand-icon),
.notion-nav-menu .mud-nav-group > .mud-nav-link .notion-nav-link-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    margin-right: 16px !important;
}

/* Nested items */
.notion-nav-menu .mud-nav-group .mud-collapse .mud-nav-link {
    padding-left: 32px !important;
    min-height: 32px !important;
}

/* Expand chevron */
.notion-nav-menu .mud-nav-group .mud-expand-panel-icon .mud-icon-root,
.notion-nav-menu .mud-nav-group .mud-nav-link-expand-icon .mud-icon-root,
.notion-nav-menu .mud-nav-group .mud-expand-panel-icon,
.notion-nav-menu .mud-nav-group .mud-nav-link-expand-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
}

/* Notion nav header/collapse button: unchanged size */
.notion-nav-menu .collapse-btn .mud-icon-root {
    font-size: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/*
 * Must load after the generic icon margin rules above: desktop top-level rows use flex column-gap
 * on .mud-nav-link-text — icon margin-right would widen the slot and mis-center the glyph.
 * Also override Mud link-text justification so icons stay left / centered in the collapsed rail.
 */
@media (min-width: 960px) {
    html body .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) > div,
    .notion-nav-shell .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) > div {
        justify-content: flex-start !important;
    }

    html body .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text,
    .notion-nav-shell .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text {
        justify-content: flex-start !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }

    html body .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text,
    .notion-nav-shell .notion-nav-menu.notion-rail-narrow .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text {
        flex: 0 0 auto !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    html body .notion-nav-menu.notion-rail-wide .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text,
    .notion-nav-shell .notion-nav-menu.notion-rail-wide .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    html body .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text .mud-icon-root,
    html body .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text .notion-nav-link-icon,
    html body .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text > svg.mud-icon-root,
    .notion-nav-shell .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text .mud-icon-root,
    .notion-nav-shell .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text .notion-nav-link-icon,
    .notion-nav-shell .notion-nav-menu .mud-nav-link:not(.mud-nav-link-nested) .mud-nav-link-text > svg.mud-icon-root {
        margin-right: 0 !important;
        margin-inline-end: 0 !important;
    }
}