/* ------------------------------------------------------------------------
   The app shell: sidebar and content column.

   Ported from FvOnboard's fv-shell.css so the two admin consoles share one
   frame: the same 264px navy sidebar, the same nav rows, the same footer.
   The values are FvOnboard's; three things differ, each marked below:

     1. The frame. FvOnboard puts the sidebar and its content column side by
        side with a flex <body>. Here every page already has a .fv-shell
        wrapper holding the nav, the readiness banner and <main>, in that
        order, so a grid places them without any page changing: the sidebar
        spans the left column, the banner and the page share the right.
     2. The content column is this project's .fv-main.
     3. The footer shows the signed-in person and their roles, which this
        console has (CurrentUserModelAdvice), instead of FvOnboard's build row.

   This replaces the top bar that used to live in app.css under .fv-nav.
   That name is reused here for the sidebar's link list, as in FvOnboard.

   Every colour, radius and duration is a token from tokens.css.
   ------------------------------------------------------------------------ */

/* --- 1. The frame ------------------------------------------------------ */

.fv-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Banner row sizes to its content and is empty (zero high) when there is
       no banner; the page takes the rest. */
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background: var(--surface-subtle);
}

/* The sidebar stays in view while a long page scrolls under it. */
.fv-shell > .fv-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100vh;
}

.fv-shell > .fv-config-banner,
.fv-shell > .fv-main {
    grid-column: 2;
}

/* --- Sidebar ----------------------------------------------------------- */

.fv-sidebar {
    width: 264px;
    background: var(--fv-navy);
    display: flex;
    flex-direction: column;
    padding: 28px 16px;
    /* Seven rows plus the footer can exceed a short viewport, so the sidebar
       scrolls on its own rather than being clipped. */
    overflow-y: auto;
}

/* The brand block is the way home, as it was in the top bar. */
.fv-sidebar__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    text-decoration: none;
    border-radius: 8px;
}

.fv-sidebar__brand:focus-visible {
    outline: 2px solid var(--fv-yellow);
    outline-offset: 4px;
    box-shadow: none;
}

/* The approved logo tile at 96px. No border-radius: the tile has its own
   black keyline, and rounding the corners would clip it. */
.fv-sidebar__logo {
    width: 96px;
    height: 96px;
    display: block;
    object-fit: contain;
}

.fv-sidebar__wordmark {
    color: var(--fv-white);
    font-weight: var(--weight-bold);
    font-size: 15px;
    letter-spacing: var(--tracking-wide);
}

/* --- Navigation -------------------------------------------------------- */

.fv-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.fv-nav__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    text-decoration: none;
    color: var(--fv-slate-400);
    font-weight: var(--weight-regular);
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
}

.fv-nav__row:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--fv-white);
}

/* The active row is the only filled thing in the panel. Weight carries it
   as well as colour, for anyone who cannot separate slate from white. */
.fv-nav__row.is-active {
    background: var(--fv-navy-800);
    color: var(--fv-white);
    font-weight: var(--weight-semibold);
}

/* app.css draws focus as a box-shadow ring in navy, which vanishes on a
   navy panel. Yellow outline instead, as in FvOnboard. */
.fv-nav__row:focus-visible {
    outline: 2px solid var(--fv-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

/* Fixed width so the labels line up whatever each glyph's width. */
.fv-nav__icon {
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
}

.fv-nav__label {
    flex: 1;
}

/* --- 3. Footer: who is signed in ---------------------------------------- */

.fv-sidebar__foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fv-navy-800);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fv-sidebar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fv-sidebar__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fv-yellow);
    color: var(--fv-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 15px;
}

/* min-width:0 lets the ellipsis work: a flex item will not shrink below its
   content otherwise, and a long name would push Sign out off the panel. */
.fv-sidebar__rowtext {
    min-width: 0;
    flex: 1;
}

.fv-sidebar__label {
    color: var(--fv-slate-400);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.fv-sidebar__value {
    color: var(--fv-white);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The roles, under the name. Quieter than the name: they explain a missing
   menu item, they are not who you are. */
.fv-sidebar__roles {
    color: var(--fv-slate-400);
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fv-sidebar__logout {
    margin-left: auto;
}

.fv-sidebar__logout form {
    margin: 0;
}

/* Not red: signing out is neither destructive nor an error. */
.fv-sidebar__logout-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--fv-slate-400);
    font-size: 14px;
    line-height: 1;
    border-radius: 6px;
    transition: background var(--motion-fast) var(--ease),
                color var(--motion-fast) var(--ease);
}

.fv-sidebar__logout-btn:hover {
    color: var(--fv-white);
    background: var(--fv-navy-800);
}

.fv-sidebar__logout-btn:focus-visible {
    outline: 2px solid var(--fv-yellow);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- 2. Content column ------------------------------------------------- */

.fv-main {
    min-width: 0;
    padding: 32px 40px;
}

/* --- Narrow screens ----------------------------------------------------
   Narrower, then icons only, as in FvOnboard. Below 680px the labels go and
   the panel becomes a 72px rail; each row's title attribute still names it.
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .fv-sidebar {
        width: 216px;
        padding: 20px 12px;
    }

    .fv-sidebar__logo {
        width: 72px;
        height: 72px;
    }

    .fv-nav__row {
        padding: 10px 12px;
        font-size: 14px;
    }
}

@media (max-width: 680px) {
    .fv-sidebar {
        width: 72px;
        padding: 16px 8px;
        align-items: center;
    }

    .fv-sidebar__logo {
        width: 44px;
        height: 44px;
    }

    .fv-sidebar__wordmark,
    .fv-nav__label,
    .fv-sidebar__rowtext {
        display: none;
    }

    .fv-nav__row {
        justify-content: center;
        padding: 12px 0;
    }

    .fv-sidebar__row {
        justify-content: center;
    }

    .fv-sidebar__logout {
        margin-left: 0;
    }

    .fv-main {
        padding: 20px 16px;
    }
}