/* App-owned SiteManager styles. The SmartAdmin SCSS stays untouched so a future template update
   does not overwrite product changes; see docs/design-docs/smv3-smartadmin-shell.md. */

/* SiteManager logo (706 x 219). The template sizes .app-logo images as a square mark, so the
   width is released here and the height sets the size. */
.app-logo > img.app-logo-image {
    width: auto;
    min-width: 0;
    height: 2.25rem;
    max-width: 100%;
}

/* The minified navigation is too narrow for the full logo. */
.set-nav-minified .app-logo > img.app-logo-image {
    display: none;
}

.auth-logo-image {
    height: 2.5rem;
    width: auto;
}

/* Sign-in and the other identity pages: the fixed top bar no longer overlaps the card on a phone,
   and the height follows the visible viewport, so the card is not cut by the browser's toolbar. */
.hero-section {
    padding-top: 6rem;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Keyboard focus. The template's reset removes the outline from buttons and fields and Bootstrap
   draws focus as a box-shadow the reset cancels, so nothing showed which control had focus. An
   outline ring the reset cannot cancel, on keyboard focus only. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline-offset: 0;
}

.alert:focus-visible,
.alert:focus {
    outline: none;
}

/* The chosen entry of the site, content-language, and interface-language lists: a check mark, so
   it is told apart at a glance in a list of over a hundred sites. */
.dropdown-item[aria-current="true"] {
    font-weight: 600;
}

.dropdown-item[aria-current="true"]::before {
    content: "\2713";
    display: inline-block;
    margin-right: 0.375rem;
    width: 1em;
}

/* The compact mark that stands in for the logo when the menu is minified. */
.app-logo-mark {
    display: none;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bs-primary);
}

.set-nav-minified .app-logo > .app-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Site and content-language selectors. A Super Admin can see well over a hundred sites, so the
   list scrolls on its own, and reaching either end does not scroll the page behind it. The
   heading and the filter box stay visible while the list scrolls. On a phone the menu fits the
   screen; the menus are right-aligned (dropdown-menu-end) because the template keeps a closed
   animated menu in the layout, and a left-aligned one would widen the page past the viewport. */
.shell-context-menu {
    max-height: min(70vh, 32rem);
    min-width: 16rem;
    max-width: calc(100vw - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* No top padding, or scrolled items show in the gap above the sticky heading. */
    padding-top: 0;
}

/* The template animates dropdowns from visibility: hidden, which keeps the filter box unfocusable
   until the animation ends. Opening switches visibility at once; only opacity and scale animate. */
.show + .shell-context-menu {
    transition-property: opacity, transform;
}

.shell-context-menu-head {
    position: sticky;
    top: 0;
    /* Above the item buttons, which the theme positions and would otherwise paint over it. */
    z-index: 3;
    padding-top: 0.5rem;
    background-color: var(--bs-dropdown-bg, var(--bs-body-bg));
}

.shell-context-menu-head > .dropdown-header {
    padding-top: 0.25rem;
}

/* The filter hides items with [hidden]; the site items are d-flex (name, then version badge), and
   Bootstrap's d-flex is !important, so [hidden] needs the same weight or no item ever disappears. */
.shell-context-menu [hidden] {
    display: none !important;
}

/* A closed animated menu stays in the layout (display: block, visibility: hidden) at its static,
   left-aligned position. Right-aligned it extends over the page instead of past its edge, so a
   phone shows no sideways scroll. Popper positions the open menu. */
.shell-context-menu:not(.show) {
    right: 0;
    left: auto;
}

@media (max-width: 767.98px) {
    /* On a phone the site selector is the globe icon alone: no caret, so the header fits 375px. */
    .shell-site-selector .dropdown-toggle::after {
        display: none;
    }

    /* The template gives every header child "scale: 1" for its search animation, which makes each
       one the containing block of a fixed descendant. The selectors take no part in it. The
       selector outweighs the template's ".app-header > :first-child ~ *:not(.dropdown-menu)". */
    .app-header > :first-child ~ .dropdown.shell-context-dropdown {
        scale: none;
    }

    /* The open menu spans the phone's width below the header instead of hanging off its toggle,
       most of it beyond the screen's edge. */
    .shell-context-menu.show {
        position: fixed !important;
        top: calc(var(--app-header-height) + 0.25rem) !important;
        right: 0.75rem !important;
        bottom: auto !important;
        left: 0.75rem !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - var(--app-header-height) - 1.5rem);
    }
}

/* Staging and development are marked in the header (Production shows nothing). The badge is
   hidden on phones, where the header has no room for it. */
.shell-environment-badge {
    background-color: rgba(var(--bs-warning-rgb), 0.18);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.6);
    color: var(--bs-warning-text-emphasis);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* A POST form on its way to the server (shell.js): its buttons stop taking clicks and the one
   that was pressed shows a spinner, so a slow save is never posted twice. */
.btn.is-busy-disabled {
    opacity: 0.65;
    pointer-events: none;
}

.btn.is-busy {
    pointer-events: none;
}

.btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: smv3-spin 0.75s linear infinite;
}

@keyframes smv3-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn.is-busy::before {
        animation-duration: 1.5s;
    }
}

/* Editors: the "unsaved changes" badge beside the actions (content-editor.js). */
.editor-dirty {
    font-weight: 500;
}

/* The site's SiteManager version, as a small badge after its name; v.3 sites stand out. */
.site-version-badge {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 500;
}

.site-version-badge-current {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    color: var(--bs-primary);
}

/* Super Admins also see the site's idSite, as a gold badge beside the version. */
.site-id-badge {
    background-color: rgba(var(--bs-warning-rgb), 0.12);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.45);
    color: var(--bs-warning-text-emphasis);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Content browser (Task 7 step 1): compact category tree beside the content list. */
.category-tree ul {
    padding-left: 1rem;
}

.category-tree-line {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0.375rem;
    list-style: none;
    cursor: default;
    min-width: 0;
}

/* The branch toggle: a <details> holding the chevron alone, so the category's link is not nested in it. */
.category-tree-toggle {
    flex: 0 0 auto;
    display: inline-flex;
}

.category-tree-toggle > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    border-radius: 0.25rem;
}

.category-tree-toggle > summary::-webkit-details-marker {
    display: none;
}

/* The children list follows the toggle's state. */
.category-tree li:has(> .category-tree-line > .category-tree-toggle:not([open])) > ul {
    display: none;
}

.category-tree-line:hover {
    background-color: var(--bs-tertiary-bg);
}

.category-tree-chevron {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

.category-tree details[open] > summary > .category-tree-chevron {
    transform: rotate(90deg);
}

.category-tree-icon {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

.category-tree-link,
.category-tree-container {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.category-tree-link.active {
    font-weight: 600;
}

.category-tree-container {
    color: var(--bs-secondary-color);
}

.category-tree-count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.category-tree li[hidden] {
    display: none;
}

/* The tree is one Tab stop (content-browser.js): the focused category is its li, and the ring goes
   on the category's own line rather than around the whole branch below it. */
.category-tree li[role="treeitem"]:focus {
    outline: none;
}

.category-tree li[role="treeitem"]:focus-visible > details > summary.category-tree-line,
.category-tree li[role="treeitem"]:focus-visible > .category-tree-line {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Hiding the tree gives the list the full width on large screens. */
@media (min-width: 992px) {
    .content-browser--tree-hidden .content-browser-tree-column {
        display: none;
    }

    .content-browser--tree-hidden .content-browser-list-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .content-browser--tree-hidden .content-browser-tree-show {
        display: inline-flex !important;
    }
}

/* Icon buttons keep the icon beside the label; the template icon is otherwise laid out on its own line. */
.btn:has(> .sa-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.content-list-title {
    text-decoration: none;
}

/* Sortable list headers (Content, Catalog, Sales, Customers, and any table with the content-list
   class): the sorted column shows its direction, the other sortable columns show a faint mark on
   hover, so the sort is visible and not only announced through aria-sort. */
.content-list th > a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.content-list th > a:hover,
.content-list th > a:focus-visible {
    text-decoration: underline;
}

.content-list th[aria-sort] > a {
    color: var(--bs-body-color);
    font-weight: 600;
}

.content-list th[aria-sort="ascending"] > a::after {
    content: " \2191";
}

.content-list th[aria-sort="descending"] > a::after {
    content: " \2193";
}

.content-list th:not([aria-sort]) > a::after {
    content: " \2195";
    opacity: 0;
    transition: opacity 0.15s ease;
}

.content-list th:not([aria-sort]) > a:hover::after,
.content-list th:not([aria-sort]) > a:focus-visible::after {
    opacity: 0.6;
}

/* Active list filters as removable chips beside the list title. */
.list-filter-chip {
    align-items: center;
    display: inline-flex;
    font-weight: 500;
    gap: 0.25rem;
    max-width: 18rem;
}

.list-filter-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-filter-chip > a {
    color: inherit;
    line-height: 1;
    padding: 0 0.125rem;
    text-decoration: none;
}

.list-filter-chip > a:hover,
.list-filter-chip > a:focus-visible {
    text-decoration: underline;
}

/* Long titles and underscore-joined internal names wrap, so the actions column stays in view. On
   a phone the title cell takes what is left, so the status and the actions stay on screen. */
.content-list-title-cell {
    min-width: 12rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .content-list-title-cell {
        min-width: 0;
    }

    .catalog-list-thumb-column {
        display: none;
    }
}

/* Bulk actions (bulk-actions.js): the checkbox column and the bar that shows while rows are selected. */
.list-bulk-cell {
    width: 2.5rem;
}

.list-bulk-bar {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg);
}

/* Phone lists: the actions column stays in view while the table scrolls sideways. */
@media (max-width: 767.98px) {
    .content-list th:last-child,
    .content-list td:last-child {
        position: sticky;
        right: 0;
        background-color: var(--bs-card-bg, var(--bs-body-bg));
        box-shadow: -0.375rem 0 0.375rem -0.375rem rgba(0, 0, 0, 0.25);
    }
}

/* Phone header: the template's 1rem gaps and wide toggles push the account button past a 375px
   screen once the search button is there; tighter gaps keep every control on screen. */
@media (max-width: 575.98px) {
    .app-header {
        gap: 0.5rem;
    }

    .app-header .shell-context-dropdown > .dropdown-toggle {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Phone editors: one action bar (the sticky one), on one row, with the delete as an icon and the
   unsaved-changes badge as a dot; its text is still read out. */
@media (max-width: 575.98px) {
    /* !important: the bars carry the template's d-flex and flex-wrap utilities, which are !important too. */
    .editor-actions:not(.sticky-bottom) {
        display: none !important;
    }

    .editor-actions.sticky-bottom {
        flex-wrap: nowrap !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .editor-actions.sticky-bottom .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .editor-actions.sticky-bottom .editor-dirty {
        width: 0.625rem;
        height: 0.625rem;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        flex: 0 0 auto;
    }
}

.content-quick-view {
    --bs-offcanvas-width: min(36rem, 100vw);
}

.content-quick-view-html img {
    max-width: 100%;
    height: auto;
}

/* Media library dialog (_MediaLibraryAssets, media-library.js). Folders reuse the website tree's
   .category-tree styles; files are template cards. On a phone the tree is folded away behind a
   Folders button and, when opened, stays short so the files remain in reach. */
.media-library-body {
    min-height: min(34rem, 70vh);
}

.media-library-tree {
    background-color: var(--bs-tertiary-bg);
    overflow-y: auto;
    max-height: 70vh;
}

@media (max-width: 767.98px) {
    .media-library-tree {
        max-height: 35vh;
    }

    /* Stacked on a phone: the Folders button, the tree when open, then the toolbar and the files,
       which take the spare height (wrapped rows would share it, leaving a gap under the button). */
    .media-library-body {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .media-library-main {
        flex: 1 1 auto;
    }
}

/* The Utilities file manager shows the library as the page (.media-library-page). It fills the
   window below the page header, and the tree and the files scroll on their own, so the status
   line and the Open button stay in view, as the dialog's footer does. */
.media-library-page .media-library-body {
    height: max(26rem, calc(100vh - 16rem));
}

.media-library-page .media-library-main,
.media-library-page .media-library-files {
    min-height: 0;
}

@media (min-width: 768px) {
    .media-library-page .media-library-tree {
        max-height: none;
    }
}

/* A phone's footer wraps the status line above the Open button. */
@media (max-width: 767.98px) {
    .media-library-page .media-library-body {
        height: max(22rem, calc(100vh - 17rem));
    }
}

/* Touch screens: the controls tapped most often meet a 40px target. */
@media (pointer: coarse) {
    .app-header .dropdown > .btn-sm,
    .content-list td .btn-sm,
    .dashboard-latest .btn-sm,
    .pagination .page-link {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }

    .content-list td .btn-sm + .btn-sm {
        margin-left: 0.25rem;
    }

    .category-tree-line {
        min-height: 2.75rem;
    }

    .category-tree-chevron {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
        padding: 0.5rem;
    }
}

.media-library-toggle {
    color: inherit;
    line-height: 1;
}

/* A lazily loaded folder rotates its chevron as the website tree's <details> does. */
.category-tree li[aria-expanded="true"] > .category-tree-line .category-tree-chevron {
    transform: rotate(90deg);
}

.category-tree li.media-library-leaf > .category-tree-line .media-library-toggle {
    visibility: hidden;
}

.media-library-source > .category-tree-line .category-tree-link {
    font-weight: 500;
}

.media-library .category-tree-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

.media-library .category-tree-link.active {
    color: var(--bs-primary);
}

.media-library-filter {
    width: 12rem;
}

.media-library-prompt-input {
    width: 16rem;
}

.media-library-files {
    border: 2px dashed transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.media-library-files.media-library-drop,
.category-tree-line.media-library-drop {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-color: var(--bs-primary);
}

.media-library-loading {
    opacity: 0.6;
    pointer-events: none;
}

.media-library-item {
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.media-library-item:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: var(--bs-box-shadow-sm);
}

.media-library-item-selected,
.media-library-item-selected:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.media-library-item-muted {
    opacity: 0.55;
}

/* Bootstrap's d-flex is !important, so [hidden] needs the same weight inside the dialog. */
.media-library [hidden] {
    display: none !important;
}

/* Thumbnails on a checkerboard, so transparent images stay visible in both themes. The box is a
   Bootstrap .ratio, so every card has the same height whatever the image's shape. */
.media-library-thumb {
    background-color: var(--bs-body-bg);
    background-image:
        linear-gradient(45deg, var(--bs-tertiary-bg) 25%, transparent 25%),
        linear-gradient(-45deg, var(--bs-tertiary-bg) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--bs-tertiary-bg) 75%),
        linear-gradient(-45deg, transparent 75%, var(--bs-tertiary-bg) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border-bottom: 1px solid var(--bs-border-color);
}

.media-library-thumb > img {
    object-fit: contain;
}

.media-library-thumb > .media-library-thumb-icon {
    align-items: center;
    display: flex;
    justify-content: center;
}

.media-library-file-icon {
    color: var(--bs-secondary-color);
    height: 2.5rem;
    width: 2.5rem;
}

/* A folder card in the file grid; entering it opens the folder. */
.media-library-folder .media-library-file-icon {
    color: var(--bs-primary);
}

.media-library-folder .media-library-thumb {
    background-image: none;
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

/* Catalog list: a small product thumbnail, as the template's avatar-sized images. */
.catalog-list-thumb-column {
    width: 3.5rem;
}

.catalog-list-thumb {
    align-items: center;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    object-fit: contain;
    width: 2.5rem;
}

.catalog-quick-view-image {
    background-color: var(--bs-tertiary-bg);
    max-height: 16rem;
    object-fit: contain;
    width: 100%;
}

/* Configuration > Categories: the "+" that creates a subcategory shows on hover or keyboard focus. */
.category-tree-add {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 0.25rem;
    line-height: 1.25;
    opacity: 0;
}

.category-tree-add .sa-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.category-tree-line:hover > .category-tree-add,
.category-tree-add:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .category-tree-add {
        opacity: 1;
    }
}

.configuration-category-tree .category-tree-link {
    flex: 0 1 auto;
}

/* Configuration > Categories: a long site tree scrolls on its own beside the editor. */
@media (min-width: 992px) {
    .configuration-category-tree {
        max-height: 75vh;
        overflow-y: auto;
    }
}

/* Site email preview (site-emails.js): the template with its placeholders filled in, as plain text. */
.mail-preview {
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg);
}

.mail-preview-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 0.9375rem;
}

/* Keyboard shortcuts dialog (_ShortcutsDialog.cshtml): key, then what it does. */
.shell-shortcuts > div {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
}

.shell-shortcuts dt {
    flex: 0 0 9rem;
    font-weight: 500;
    white-space: nowrap;
}

.shell-shortcuts dd {
    margin: 0;
}

/* Command palette (_CommandPalette.cshtml, command-palette.js). */
.command-palette .modal-dialog {
    margin-top: 8vh;
}

.command-palette .modal-header .form-control:focus-visible {
    outline: none;
}

.command-palette-heading {
    letter-spacing: 0.04em;
}

.command-palette-item {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.command-palette-item:hover,
.command-palette-item.active {
    background-color: var(--bs-tertiary-bg);
    color: inherit;
}

.command-palette-item.active {
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.command-palette-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.command-palette-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-subtitle {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-status[hidden] {
    display: none;
}

/* Dashboard: one tile per module, a figure with its facts, then the orders chart and the latest
   orders and contents. */
.dashboard-tile-icon {
    align-items: center;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 0.5rem;
    color: var(--bs-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.dashboard-tile h2 a {
    color: inherit;
    text-decoration: none;
}

.dashboard-tile h2 a:hover,
.dashboard-tile h2 a:focus-visible {
    text-decoration: underline;
}

.dashboard-tile-value {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.1;
}

.dashboard-tile-facts li + li {
    margin-top: 0.25rem;
}

/* The error tile stands out while errors were recorded. */
.dashboard-tile-attention {
    border-color: rgba(var(--bs-warning-rgb), 0.6);
}

.dashboard-tile-attention .dashboard-tile-icon {
    background-color: rgba(var(--bs-warning-rgb), 0.18);
    color: var(--bs-warning-text-emphasis);
}

/* A count that needs attention, such as orders not yet opened. */
.dashboard-attention,
.dashboard-attention a {
    color: var(--bs-warning-text-emphasis);
    font-weight: 500;
}

.dashboard-chart {
    min-height: 240px;
}

.dashboard-latest td {
    border-color: var(--bs-border-color-translucent);
}

.dashboard-latest-list li + li {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Sales and Customers lists (bundle C, 2026-09-28): the customer filter chip's text is itself a link
   to the customer editor, kept in the chip's colour so the chip reads as one control. */
.list-filter-chip > span > a {
    color: inherit;
}


/* Bundle C: content and catalog browsers. The quick view's footer (Edit, Previous, Next) stays
   below the scrolling body. */
.content-quick-view-footer {
    flex: 0 0 auto;
}

/* Bundle C, configuration agent (2026-09-28): the sidebar's child entries under Configuration and
   Utilities use the template's nested list (li > a + ul); their icon stays small so the child label
   lines up as the template's text-only children do. */
.primary-nav ul ul li a .sa-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Utilities export (smv3-export-module.md): the file instructions are a <details> whose summary
   carries the section heading; the chevron turns as the category tree's does. */
.export-help > summary {
    cursor: pointer;
    list-style: none;
}

.export-help > summary::-webkit-details-marker {
    display: none;
}

.export-help-chevron {
    transition: transform 0.15s ease-in-out;
}

.export-help[open] .export-help-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .export-help-chevron {
        transition: none;
    }
}