/* _content/Southland.LoadBoard.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* Application shell — MainLayout only. Tokens come from wwwroot/app.css :root. */

.page[b-d0zot2yxwa] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--stc-page-bg);
}

main[b-d0zot2yxwa] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar[b-d0zot2yxwa] {
    background: linear-gradient(180deg, var(--stc-brand-900) 0%, var(--stc-brand-800) 100%);
    border-right: 1px solid var(--stc-brand-900);
}

/* --- Top bar ------------------------------------------------------------ */

.top-row[b-d0zot2yxwa] {
    display: flex;
    align-items: center;
    gap: var(--stc-space-4);
    height: var(--stc-topbar-height);
    padding: 0 var(--stc-space-6);
    background: var(--stc-surface);
    border-bottom: 1px solid var(--stc-border);
    box-shadow: var(--stc-shadow-xs);
}

.stc-topbar__product[b-d0zot2yxwa] { min-width: 0; }

.stc-topbar__product-name[b-d0zot2yxwa] {
    font-size: var(--stc-text-md);
    font-weight: var(--stc-weight-semibold);
    color: var(--stc-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stc-topbar__user[b-d0zot2yxwa] {
    display: flex;
    align-items: center;
    gap: var(--stc-space-3);
    margin-left: auto;
}

.stc-topbar__identity[b-d0zot2yxwa] {
    display: flex;
    align-items: center;
    gap: var(--stc-space-2);
    min-width: 0;
}

.stc-topbar__name[b-d0zot2yxwa] {
    font-size: var(--stc-text-base);
    font-weight: var(--stc-weight-medium);
    color: var(--stc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.stc-topbar__logout[b-d0zot2yxwa] { display: inline-flex; margin: 0; }

/* --- Content ------------------------------------------------------------ */

.content[b-d0zot2yxwa] {
    flex: 1;
    width: 100%;
    max-width: var(--stc-content-max);
    padding: var(--stc-space-6);
    outline: none;
}

/* --- Navigation toggle (checkbox-driven, no JavaScript) ----------------- */

.stc-nav-toggle[b-d0zot2yxwa] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.stc-nav-toggle-btn[b-d0zot2yxwa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border: 1px solid var(--stc-border-strong);
    border-radius: var(--stc-radius);
    background: var(--stc-surface);
    cursor: pointer;
}

.stc-nav-toggle-btn:hover[b-d0zot2yxwa] { background: var(--stc-surface-hover); }

.stc-nav-toggle:focus-visible ~ main .stc-nav-toggle-btn[b-d0zot2yxwa] {
    outline: 2px solid var(--stc-brand-500);
    outline-offset: 2px;
}

.stc-nav-toggle-btn__bars[b-d0zot2yxwa],
.stc-nav-toggle-btn__bars[b-d0zot2yxwa]::before,
.stc-nav-toggle-btn__bars[b-d0zot2yxwa]::after {
    display: block;
    width: 1rem;
    height: 2px;
    background: var(--stc-text);
    border-radius: 1px;
}

.stc-nav-toggle-btn__bars[b-d0zot2yxwa] { position: relative; }
.stc-nav-toggle-btn__bars[b-d0zot2yxwa]::before { content: ""; position: absolute; top: -5px; }
.stc-nav-toggle-btn__bars[b-d0zot2yxwa]::after { content: ""; position: absolute; top: 5px; }

/* --- Blazor error UI ---------------------------------------------------- */

#blazor-error-ui[b-d0zot2yxwa] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    align-items: center;
    gap: var(--stc-space-4);
    padding: var(--stc-space-3) var(--stc-space-6);
    background: var(--stc-danger-bg);
    border-top: 3px solid var(--stc-danger);
    color: var(--stc-danger);
    font-size: var(--stc-text-base);
    box-shadow: 0 -2px 8px rgba(16, 27, 43, 0.12);
}

.stc-error-ui__text[b-d0zot2yxwa] { font-weight: var(--stc-weight-semibold); }

#blazor-error-ui .dismiss[b-d0zot2yxwa] {
    cursor: pointer;
    margin-left: auto;
    font-size: var(--stc-text-lg);
    line-height: 1;
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 992px) {
    .page[b-d0zot2yxwa] { flex-direction: row; }

    .sidebar[b-d0zot2yxwa] {
        width: var(--stc-sidebar-width);
        flex: none;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }

    .top-row[b-d0zot2yxwa] {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* The rail is always visible at desktop width, so the toggle is hidden. */
    .stc-nav-toggle-btn[b-d0zot2yxwa] { display: none; }

    /*
      The rail's logo already reads "Southland Trailers LoadBoard" immediately to the
      left, so repeating the product name here would be duplicate adjacent branding.
      It stays in the markup because below 992px the rail collapses and its brand block
      is hidden -- there the name is the only brand cue the shell has.
    */
    .stc-topbar__product[b-d0zot2yxwa] { display: none; }
}

/* --- Narrow: collapsible rail ------------------------------------------ */

@media (max-width: 991.98px) {
    .sidebar[b-d0zot2yxwa] {
        display: none;
        width: 100%;
    }

    .stc-nav-toggle:checked ~ .sidebar[b-d0zot2yxwa] { display: block; }

    .top-row[b-d0zot2yxwa] {
        padding: 0 var(--stc-space-4);
        gap: var(--stc-space-3);
    }

    .content[b-d0zot2yxwa] { padding: var(--stc-space-4); }

    .stc-topbar__role[b-d0zot2yxwa] { display: none; }
    .stc-topbar__name[b-d0zot2yxwa] { max-width: 14ch; }
}

@media (max-width: 640.98px) {
    .stc-topbar__product-name[b-d0zot2yxwa] { font-size: var(--stc-text-base); }
    .stc-topbar__name[b-d0zot2yxwa] { display: none; }
}
/* _content/Southland.LoadBoard.Web/Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation rail — NavMenu only. Tokens come from wwwroot/app.css :root. */

.stc-nav[b-9ecuguwhzx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--stc-text-on-brand);
}

/* --- Brand -------------------------------------------------------------- */

.stc-nav__brand[b-9ecuguwhzx] {
    flex: none;
    padding: var(--stc-space-3) var(--stc-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stc-nav__brand-link[b-9ecuguwhzx] {
    display: block;
    border-radius: var(--stc-radius);
    text-decoration: none;
    color: inherit;
}

.stc-nav__brand-link:hover[b-9ecuguwhzx] { text-decoration: none; }

/* The rail is a keyboard stop, so the brand must show focus as clearly as a link. */
.stc-nav__brand-link:focus-visible[b-9ecuguwhzx] {
    outline: 2px solid var(--stc-accent-500);
    outline-offset: 2px;
}

/*
  The asset is a 1536x1024 (3:2) transparent PNG, so the rail's gradient shows straight
  through it and no card or border is needed to seat it -- its white and orange elements
  carry the contrast against the dark rail on their own. Sized in relative units only:
  width fills the rail's content box and height follows the intrinsic ratio, so the mark
  never stretches or clips. max-width caps it if the rail token is ever widened.
*/
.stc-nav__brand-logo[b-9ecuguwhzx] {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

/* --- Scroll region ------------------------------------------------------ */

.stc-nav__scroll[b-9ecuguwhzx] {
    flex: 1;
    overflow-y: auto;
    padding: var(--stc-space-3) 0 var(--stc-space-8);
}

.stc-nav__group[b-9ecuguwhzx] { margin-top: var(--stc-nav-group-gap); }

.stc-nav__group-title[b-9ecuguwhzx] {
    margin: 0 0 var(--stc-space-1);
    padding: 0 var(--stc-space-4);
    font-size: var(--stc-text-xs);
    font-weight: var(--stc-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.48);
}

.stc-nav__list[b-9ecuguwhzx] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stc-nav__item[b-9ecuguwhzx] { margin: 0; }

/* --- Links -------------------------------------------------------------- */

[b-9ecuguwhzx] .stc-nav__link {
    display: block;
    padding: var(--stc-nav-item-y) var(--stc-space-4);
    /* Reserve the active rail so the label never shifts on selection. */
    border-left: 3px solid transparent;
    color: var(--stc-text-on-brand);
    font-size: var(--stc-text-base);
    line-height: 1.45;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

[b-9ecuguwhzx] .stc-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

[b-9ecuguwhzx] .stc-nav__link:focus-visible {
    outline: 2px solid var(--stc-accent-500);
    outline-offset: -2px;
}

/* Blazor adds .active to the matching NavLink. The rail plus the weight and
   colour change mean the current page is not signalled by colour alone. */
[b-9ecuguwhzx] .stc-nav__link.active {
    background: rgba(255, 255, 255, 0.13);
    border-left-color: var(--stc-accent-500);
    color: #ffffff;
    font-weight: var(--stc-weight-semibold);
}

@media (max-width: 991.98px) {
    .stc-nav__scroll[b-9ecuguwhzx] { padding-bottom: var(--stc-space-4); }
    .stc-nav__brand[b-9ecuguwhzx] { display: none; }
}