/*
 * Navigation rail of the back office — Figma "Frame 16" (4683:20875), entries from the
 * "nav-text-bo" component (4683:20836).
 *
 * From 1440px it is the dark column of the maquette — 320px wide, a deliberate product decision
 * widening it past the 380px the maquette draws — full height and sticky, so the eleven sections
 * stay reachable while a long screen scrolls.
 *
 * Below 1440px the maquette says nothing — the back office is drawn on the 1920px canvas only — and
 * the list of sections no longer folds into a horizontally scrollable strip here: it moved to
 * Admin:Drawer, opened from the burger button next to the brand, the same product decision the
 * portal made for its own menu below its own breakpoint. The rail also carries the two identity
 * actions of Admin:Topbar there — the same markup as its gradient card from 1440px up, shared
 * through admin/_topbar_actions.html.twig — so the whole header lives in one dark band instead of
 * a second one underneath it.
 */

.mo-admin-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mo-spacing-sm);
    padding: var(--mo-spacing-sm) var(--mo-spacing-xs);
    background-color: var(--mo-surface-primary);
}

.mo-admin-rail__brand {
    display: flex;
    flex: none;
    text-decoration: none;
}

/*
 * The logo box of the maquette is 220 x 100, exactly the 2.21:1 of the file, so the height alone
 * sizes it. Two classes deep on purpose: `.mo-logo` sets its own height, and specificity — not the
 * import order of the two component stylesheets — is what must decide here.
 */
.mo-admin-rail__brand .mo-logo {
    height: var(--mo-scale-400);
}

/*
 * Below 1440px, the two identity actions of Admin:Topbar and the button that opens Admin:Drawer —
 * see the file header. `.mo-admin-topbar__*` are the shared inner classes of
 * admin/_topbar_actions.html.twig, already responsive from admin-topbar.css; only the toggle button
 * is specific to this location.
 *
 * The gap between the three follows the portal header's own controls (`--mo-header-control-gap` in
 * header.css): `Scale/200` between their boxes, minus the 2px each one's stroke eats — the same
 * reading as the button strokes documented in components/button.css.
 */
.mo-admin-rail__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--mo-scale-200) - 2 * var(--mo-border-width-xs));
}

/* Worded like the portal's own menu button below its own breakpoint (header.css). */
.mo-admin-rail__menu-toggle {
    display: flex;
    height: calc(42px + 2 * var(--mo-border-width-xs));
    flex: none;
    align-items: center;
    gap: var(--mo-spacing-xxs);
    padding-inline: var(--mo-scale-300);
    border: var(--mo-border-width-xs) solid var(--mo-border-action);
    border-radius: var(--mo-radius-sm);
    background-color: var(--mo-surface-default-white);
    color: var(--mo-text-action);
    font-family: inherit;
    font-size: var(--mo-font-size-btn);
    font-weight: var(--mo-font-weight-bold);
    line-height: var(--mo-line-height-btn);
    cursor: pointer;
}

.mo-admin-rail__menu-toggle:hover,
.mo-admin-rail__menu-toggle:focus-visible,
.mo-admin-rail__menu-toggle[aria-expanded='true'] {
    background-color: var(--mo-surface-action-dark);
    color: var(--mo-text-default-light);
}

.mo-admin-rail__menu-toggle svg {
    width: var(--mo-scale-250);
    height: var(--mo-scale-250);
}

/* Below 1440px the section list lives in Admin:Drawer instead — see the file header. */
.mo-admin-rail__nav {
    display: none;
}

.mo-admin-rail__list {
    display: flex;
    margin: 0;
    padding: 0;
    gap: var(--mo-spacing-xxs);
    list-style: none;
}

.mo-admin-rail__item {
    flex: none;
}

/*
 * The three states of "nav-text-bo": transparent with white text, a translucent wash of the action
 * colour on hover, the light surface once selected. The default state carries a transparent border
 * of the same width as the other two, so selecting an entry does not resize it.
 */
.mo-admin-rail__link {
    display: flex;
    align-items: center;
    gap: var(--mo-spacing-xs);
    padding: calc(var(--mo-spacing-xs) - var(--mo-border-width-xs));
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-md);
    color: var(--mo-text-default-light);
    font-size: var(--mo-font-size-h5);
    font-weight: var(--mo-font-weight-h5);
    line-height: var(--mo-line-height-h5);
    text-decoration: none;
    white-space: nowrap;
}

.mo-admin-rail__link:hover,
.mo-admin-rail__link:focus-visible {
    border-color: var(--mo-border-action);
    /* Figma paints the hover as a 20% alpha of the action colour rather than a step of the scale,
     * so it is mixed from the token instead of being written out as a literal. */
    background-color: color-mix(in srgb, var(--mo-surface-action-dark) 20%, transparent);
    color: var(--mo-text-action);
}

.mo-admin-rail__link.is-active {
    border-color: var(--mo-border-action);
    background-color: var(--mo-surface-action-light);
    color: var(--mo-text-action);
}

.mo-admin-rail__icon {
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    flex: none;
}

@media (min-width: 768px) {
    .mo-admin-rail__brand .mo-logo {
        height: var(--mo-scale-500);
    }
}

@media (min-width: 1440px) {
    .mo-admin-rail {
        position: sticky;
        top: 0;
        width: 320px;
        height: 100vh;
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: var(--mo-spacing-md);
        overflow-y: auto;
        padding: var(--mo-spacing-md) var(--mo-spacing-xs);
    }

    .mo-admin-rail__brand .mo-logo {
        height: 100px;
    }

    /* The rail's own copy stands in for Admin:Topbar only below 1440px — its gradient card takes
     * over from here, see admin-topbar.css. */
    .mo-admin-rail__actions {
        display: none;
    }

    .mo-admin-rail__nav {
        display: block;
        width: 100%;
        flex: 0 1 auto;
        overflow-x: visible;
    }

    .mo-admin-rail__list {
        flex-direction: column;
    }

    /* The entries of the maquette are all the width of the rail, so a short label offers the same
     * target as a long one. */
    .mo-admin-rail__item,
    .mo-admin-rail__link {
        width: 100%;
    }
}