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

   This is the merchant portal's sidebar, rebuilt for FvOnboard. It is not a
   verbatim copy like fv-auth.css, for one reason: this file is loaded on
   every screen, and the portal's version uses the bare class names .nav,
   .content and .card. Bootstrap owns .nav on this side, and eighteen
   templates already use it for tab strips. A global .nav rule here would
   restyle every one of them as a side effect of changing the sidebar.

   So the values are the portal's and the names are ours: .fv-sidebar (which
   this project already used) and .fv-nav. Nothing here can touch a Bootstrap
   component, which is what makes it safe to load everywhere while the rest
   of the migration happens one screen at a time.

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

/* --- Sidebar -----------------------------------------------------------
   264px, down from 330px. The old width was set when the nav labels sat in
   a 20px font; at the portal's 15px the extra 66px was empty navy, and it
   was 66px the tables could have used.

   Flat --fv-navy rather than --gradient-header. A gradient behind a list of
   links means every row sits on a slightly different shade, so no two
   rows' contrast is quite the same. Flat is the plainer and the more
   legible choice, and it is most of what "less colourful" means here.
   ---------------------------------------------------------------------- */

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

.fv-sidebar__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

/* The approved logo asset at 96px.

   Deliberately NO border-radius. The logo is a square tile with its own
   black keyline; rounding the corners would clip that border, which counts
   as cropping the approved asset. object-fit:contain keeps it undistorted
   whatever box it lands in. */
.fv-sidebar__logo {
    width: 96px;
    height: 96px;
    display: block;
    object-fit: contain;
}

/* "FvOnboard", not "FV ONBOARD". Letter-spacing does the work that shouting
   in capitals was doing before, and the product's name is then spelled the
   way it is spelled everywhere else. */
.fv-sidebar__wordmark {
    color: var(--fv-white);
    font-weight: var(--weight-bold);
    font-size: 15px;
    letter-spacing: var(--tracking-wide);
}

/* --- Navigation --------------------------------------------------------
   Rows, not a bordered list. The old sidebar put a 1px white rule under
   every link, which drew eleven horizontal lines down the panel and made
   the nav read as a table. A rounded fill on the active row says the same
   thing with one mark instead of eleven.
   ---------------------------------------------------------------------- */

.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, so it is the only
   thing the eye lands on. 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);
}

.fv-nav__row:focus-visible {
    outline: 2px solid var(--fv-yellow);
    outline-offset: 2px;
}

/* A fixed width so the labels line up in a column regardless of how wide
   each glyph happens to be. Font Awesome icons are not all the same width. */
.fv-nav__icon {
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
}

.fv-nav__label {
    flex: 1;
}

/* --- Footer ------------------------------------------------------------
   Two rows: the build, and who is signed in. They used to be cards with a
   white gradient fill and a border, which made the quietest information on
   the screen look like the most important. A rule above them separates them
   from the nav and nothing else is needed.
   ---------------------------------------------------------------------- */

.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 on the text column is what lets the ellipsis below work. A
   flex item will not shrink below its content by default, so without it a
   long build string pushes the logout button off the panel instead of
   truncating. */
.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;
}

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

/* Not red. Signing out is not a destructive action and it is not an error;
   it was the loudest colour in the panel for the most ordinary thing in it.
   It goes red-adjacent only on hover, where the intent is already formed. */
.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);
}

/* The button is icon-only, so without a visible ring a keyboard user has no
   indication of where they are. */
.fv-sidebar__logout-btn:focus-visible {
    outline: 2px solid var(--fv-yellow);
    outline-offset: 2px;
}

/* --- Narrow screens ----------------------------------------------------
   The old file had three breakpoints that shrank the sidebar to 200px and
   the labels to 0.75rem — small enough to be hard to read and still wide
   enough to crowd the content. Two steps are enough: narrower, then icons
   only. Below 680px the labels go and the panel becomes a 72px rail, which
   is honest about there being no room rather than pretending there is.
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .fv-sidebar {
        width: 216px;
        flex-basis: 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;
        flex-basis: 72px;
        padding: 16px 8px;
        align-items: center;
    }

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

    /* Hidden, not shrunk. There is no font size at which these labels fit a
       72px rail, and the title attribute on each row still names it. */
    .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;
    }
}

/* --- Content column ----------------------------------------------------
   The class name is this project's own .custom-page, kept so that eighteen
   templates do not have to change to get the new spacing.

   4rem of padding became 32px/40px. Sixty-four pixels of air on every side
   is a lot of the reason the screens felt unfinished: on a 1440px display
   it took 128px off the table width before a single column was drawn.
   ---------------------------------------------------------------------- */

.custom-page {
    flex: 1;
    min-width: 0;
    padding: 32px 40px;
    background: var(--surface-subtle);
    overflow-y: auto;
    height: 100vh;
}

@media (max-width: 680px) {
    .custom-page {
        padding: 20px 16px;
    }
}