/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The frame: a dark side menu with a coloured mark where you are, a band the same colour across the top with the
   working tabs and the avatar (DavidsonHR's), the page below on light grey. The colours are app.css's variables.
   The shell is exactly the window's height: each tab's pane scrolls inside it (workspace.css). */
.app-shell[b-739djkm78g] { height: 100vh; display: flex; }

/* ---- side menu ---- */
.app-side[b-739djkm78g] { width: 224px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 0 10px 12px;
    background: var(--app-grey-dark); color: #fff; transition: width .15s ease; }

/* Standpoint's mark and name (Steven, 2026-10-17) in the 64-pixel band that lines up with the header: the mark on its
   own navy tile and STANDPOINT letter-spaced in white - the company only. */
.app-logo[b-739djkm78g] { display: flex; align-items: center; gap: 11px; height: 64px; padding: 0 8px; margin-bottom: 10px;
    text-decoration: none; border-bottom: 1px solid var(--app-chrome-line); }
.app-mark[b-739djkm78g] { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.app-wordmark[b-739djkm78g] { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; overflow: hidden; }
.app-wordmark .nm[b-739djkm78g] { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .16em; }

[b-739djkm78g] .app-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 4px;
    color: var(--app-chrome-text); text-decoration: none; white-space: nowrap; overflow: hidden; border-left: 3px solid transparent; }
[b-739djkm78g] .app-nav-link:hover { background: var(--app-chrome-hover); color: #fff; }
[b-739djkm78g] .app-nav-link.active { background: var(--app-chrome-on); color: #fff; font-weight: 600; border-left-color: var(--app-accent); }
[b-739djkm78g] .app-nav-icon { flex: none; }
.app-nav-line[b-739djkm78g] { margin: 10px 4px; border: 0; border-top: 1px solid var(--app-chrome-line); opacity: 1; }


.app-shell.collapsed .app-side[b-739djkm78g] { width: 60px; padding-left: 8px; padding-right: 8px; }
.app-shell.collapsed .app-logo[b-739djkm78g] { justify-content: center; padding: 0; }
.app-shell.collapsed .app-wordmark[b-739djkm78g] { display: none; }
.app-shell.collapsed[b-739djkm78g]  .app-nav-text { display: none; }
.app-shell.collapsed[b-739djkm78g]  .app-nav-link { justify-content: center; padding: 9px 0; }
/* A phone-width window: the menu folded to its icons whatever was chosen - the page needs the room. */
@media (max-width: 640px) {
    .app-side[b-739djkm78g] { width: 60px; padding-left: 8px; padding-right: 8px; }
    .app-logo[b-739djkm78g] { justify-content: center; padding: 0; }
    .app-wordmark[b-739djkm78g] { display: none; }
    [b-739djkm78g] .app-nav-text { display: none; }
    [b-739djkm78g] .app-nav-link { justify-content: center; padding: 9px 0; }
}
/* The shrink button: at the foot of the menu, centred, under a light line. */
.app-menu-foot[b-739djkm78g] { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--app-chrome-line); display: flex; justify-content: center; }
.app-menu-toggle[b-739djkm78g] { flex: none; width: 36px; height: 36px; border: 0; border-radius: 6px; background: none;
    color: var(--app-chrome-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.app-menu-toggle:hover[b-739djkm78g] { background: var(--app-chrome-hover); color: #fff; }

/* ---- page ---- */
.app-page[b-739djkm78g] { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* DavidsonHR's top band: the menu's colour carried across, with the same line under it as under the app's name, so
   the top of the window reads as one band. The tabs sit on its bottom edge; the avatar keeps its place on the right. */
.app-header[b-739djkm78g] { display: flex; align-items: center; justify-content: space-between; gap: 22px; height: 64px; flex: none;
    padding: 0 24px 0 6px; background: var(--app-grey-dark); border-bottom: 1px solid var(--app-chrome-line); }
/* The light grey page (their #F3F2F2), so the tabs and white panes stand out from it, as in DavidsonHR. */
.app-main[b-739djkm78g] { flex: 1; min-height: 0; padding: 20px 24px; overflow: auto; background: var(--app-grey-light); }
@media (max-width: 640px) { .app-menu-foot[b-739djkm78g] { display: none; } }   /* folded anyway there */