/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-qdl59h99jk] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Top stack (open-check-in reminder bar + nav), pinned together --- */

.app-top[b-qdl59h99jk] {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* --- Top navigation bar --- */
/* Not itself sticky: .app-top above does the pinning. */
.topnav[b-qdl59h99jk] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    min-height: 72px;
    background: var(--ff-surface);
    border-bottom: 1px solid var(--ff-border);
    box-shadow: var(--ff-shadow-sm);
}

.topnav-brand[b-qdl59h99jk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.topnav-logo[b-qdl59h99jk] {
    height: 42px;
    width: auto;
    display: block;
}

/* No .topnav-sub rule: the brand is the VSTECS logo alone. */

.topnav-toggle[b-qdl59h99jk] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    background: var(--ff-surface);
    color: var(--ff-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.topnav-user[b-qdl59h99jk] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.topbar-user[b-qdl59h99jk] {
    color: var(--ff-muted);
    font-size: 0.85rem;
}

.topbar-action[b-qdl59h99jk] {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--ff-ease);
}

.topbar-action:hover[b-qdl59h99jk] {
    background: var(--ff-bg);
}

/* Sign Out is a POST form (a GET sign-out is CSRF-able), so topbar-action is a <button> here.
   Neutralise the browser's button chrome so it looks identical to a topbar-action link. */
.topbar-signout[b-qdl59h99jk] {
    margin: 0;
    display: inline-flex;
}

button.topbar-action[b-qdl59h99jk] {
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.content[b-qdl59h99jk] {
    padding: 1.75rem clamp(1rem, 3vw, 2.5rem);
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

#blazor-error-ui[b-qdl59h99jk] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qdl59h99jk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* --- Mobile: nav collapses behind the hamburger toggle (the ".topnav-nav"/".topnav-menu" mobile
   rules live in the GLOBAL app.css, since NavMenu's own markup lives there) --- */

@media (max-width: 1000px) {
    .topnav[b-qdl59h99jk] {
        flex-wrap: wrap;
    }

    .topnav-toggle[b-qdl59h99jk] {
        display: inline-flex;
        margin-left: auto;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar navigation styles live in the GLOBAL wwwroot/app.css, not here.
   Reason: the primary nav items are <NavLink> COMPONENTS, and Blazor CSS isolation does not stamp
   this component's scope attribute onto the <a> a child component renders, so a scoped `.nav-item`
   rule silently misses them and they fall back to the global `a{}` colour + the browser's default
   underline (they rendered as blue hyperlinks). A global rule in app.css matches the rendered <a>
   regardless of scope. See the "Sidebar navigation" block in app.css. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dakyanuhrb],
.components-reconnect-repeated-attempt-visible[b-dakyanuhrb],
.components-reconnect-failed-visible[b-dakyanuhrb],
.components-pause-visible[b-dakyanuhrb],
.components-resume-failed-visible[b-dakyanuhrb],
.components-rejoining-animation[b-dakyanuhrb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-retrying[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-failed[b-dakyanuhrb],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dakyanuhrb] {
    display: block;
}


#components-reconnect-modal[b-dakyanuhrb] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dakyanuhrb 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dakyanuhrb 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dakyanuhrb 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dakyanuhrb]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dakyanuhrb 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dakyanuhrb {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dakyanuhrb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dakyanuhrb {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dakyanuhrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dakyanuhrb] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dakyanuhrb] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dakyanuhrb] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dakyanuhrb] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-dakyanuhrb] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dakyanuhrb] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dakyanuhrb 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dakyanuhrb] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dakyanuhrb {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Announcements/AnnouncementDetail.razor.rz.scp.css */
/* The notice reads as a single contained "bulletin" card with a slim brand accent bar across its top
   edge (a restrained "this is an announcement" cue - no saturated header band), then the title, a
   bordered meta strip, and the body. Brand indigo accents so a notice reads as "announcement", not a
   stock/compliance health signal (which own the good/watch/bad palette). Shared bits
   (.document-list/.btn/.breadcrumb) live in app.css. */
.ann[b-j26773ko1n] {
    max-width: 820px;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    /* Slim brand accent along the top edge - the card's identity cue. */
    border-top: 3px solid var(--ff-brand);
    border-radius: var(--ff-radius);
    box-shadow: var(--ff-shadow-md);
    overflow: hidden;
}

/* Optional hero cover: the notice's banner image when it has one, full-bleed across the card top. */
.ann-cover[b-j26773ko1n] {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-bottom: 1px solid var(--ff-border);
}

/* Padded card body. */
.ann-content[b-j26773ko1n] {
    padding: clamp(1.15rem, 3vw, 1.9rem);
}

/* Title block (eyebrow + title + status) on the left, the Print action on the right. */
.ann-head[b-j26773ko1n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ann-head-main[b-j26773ko1n] {
    min-width: 0;
}

.ann-head-main h1[b-j26773ko1n] {
    margin: 0.1rem 0 0;
}

.ann-eyebrow[b-j26773ko1n] {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-brand-strong);
}

/* Print: a compact ghost action aligned to the title's top-right. */
.ann-print[b-j26773ko1n] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    background: var(--ff-surface);
    color: var(--ff-muted);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--ff-ease);
}

.ann-print:hover[b-j26773ko1n] {
    background: var(--ff-bg);
    color: var(--ff-text);
    border-color: var(--ff-muted);
}

.ann-print svg[b-j26773ko1n] {
    width: 15px;
    height: 15px;
}

/* Status pills: New / Expires soon / Active. */
.ann-status[b-j26773ko1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ann-pill[b-j26773ko1n] {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ann-pill-new[b-j26773ko1n] {
    background: var(--ff-good-soft);
    color: var(--ff-good-ink);
}

.ann-pill-watch[b-j26773ko1n] {
    background: var(--ff-watch-soft);
    color: var(--ff-watch-ink);
}

.ann-pill-active[b-j26773ko1n] {
    background: var(--ff-brand-soft);
    color: var(--ff-brand-strong);
}

/* Metadata strip: effective / expiry / audience, each with a leading icon, in a bordered band that
   separates the title from the body. */
.ann-meta[b-j26773ko1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.1rem 0 1.25rem;
    padding: 0.7rem 0.9rem;
    background: var(--ff-bg);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-muted);
    font-size: 0.85rem;
}

.ann-meta-item[b-j26773ko1n] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ann-meta-item svg[b-j26773ko1n] {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--ff-brand);
}

/* The date values themselves, emphasised against the muted meta text. */
.ann-meta-date[b-j26773ko1n] {
    font-weight: 600;
    color: var(--ff-text);
}

/* Supporting documents, set off from the body by a divider. */
.ann-docs[b-j26773ko1n] {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ff-border);
}

.ann-docs h2[b-j26773ko1n] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

/* More announcements: the other notices this caller may see, as a compact clickable list. */
.ann-more[b-j26773ko1n] {
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ff-border);
}

.ann-more h2[b-j26773ko1n] {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.ann-more-list[b-j26773ko1n] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
}

.ann-more-list li + li .ann-more-item[b-j26773ko1n] {
    border-top: 1px solid var(--ff-border);
}

.ann-more-item[b-j26773ko1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background var(--ff-ease);
}

.ann-more-item:hover[b-j26773ko1n] {
    background: var(--ff-brand-soft);
}

.ann-more-title[b-j26773ko1n] {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ann-more-date[b-j26773ko1n] {
    flex: 0 0 auto;
    color: var(--ff-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Summary as an emphasised lead paragraph, then the body; the body preserves the author's line breaks. */
.announcement-summary[b-j26773ko1n] {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.65;
    font-weight: 500;
    color: var(--ff-text);
}

.announcement-body[b-j26773ko1n] {
    margin: 0;
    line-height: 1.75;
    color: var(--ff-text);
    white-space: pre-line;
}

/* Print: drop the page chrome and flatten the card so a printed notice is just its content. */
@media print {
    .breadcrumb[b-j26773ko1n],
    .ann-print[b-j26773ko1n],
    .ann-more[b-j26773ko1n] {
        display: none;
    }

    .ann[b-j26773ko1n] {
        box-shadow: none;
        border: none;
    }
}
/* /Components/Pages/Announcements/AnnouncementList.razor.rz.scp.css */
/* The caller's current notices as a clickable list, each with its summary, resolved audience,
   effective date and a New pill when recent. Shares the visual language of the Home board list;
   page-specific here since it is a different component. */
.alist[b-57tc2mwfqj] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 820px;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
}

.alist li + li .alist-item[b-57tc2mwfqj] {
    border-top: 1px solid var(--ff-border);
}

.alist-item[b-57tc2mwfqj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background var(--ff-ease);
}

.alist-item:hover[b-57tc2mwfqj] {
    background: var(--ff-brand-soft);
}

.alist-main[b-57tc2mwfqj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.alist-title[b-57tc2mwfqj] {
    font-weight: 600;
    font-size: 0.95rem;
}

.alist-summary[b-57tc2mwfqj] {
    color: var(--ff-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.alist-audience[b-57tc2mwfqj] {
    color: var(--ff-muted);
    font-size: 0.78rem;
}

.alist-new[b-57tc2mwfqj] {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    background: var(--ff-good-soft);
    color: var(--ff-good-ink);
    white-space: nowrap;
}

.alist-date[b-57tc2mwfqj] {
    flex: 0 0 auto;
    align-self: flex-start;
    color: var(--ff-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.alist-chevron[b-57tc2mwfqj] {
    flex: 0 0 auto;
    display: flex;
    color: var(--ff-muted);
}

.alist-chevron svg[b-57tc2mwfqj] {
    width: 16px;
    height: 16px;
}
/* /Components/Pages/Browse/Chains.razor.rz.scp.css */
/* Marks whichever store row the Store filter above narrowed the dashboard to (chain-list rows never
   get this treatment), so the table visually agrees with what EntityDashboard is currently showing. */
.data-table tbody tr.row-filtered[b-tuprm82neh] {
    background: var(--ff-brand-soft);
}

.data-table tbody tr.row-filtered td[b-tuprm82neh] {
    font-weight: 600;
}

/* Only ever rendered once the dashboard above is narrowed to a single store - gets its own breathing
   room from the module-grid above and the context table below. */
.detail-cta[b-tuprm82neh] {
    margin: 1.25rem 0;
}

/* The "View detailed info" link: a weight-600 indigo link (inherits the global link colour), matching
   the "View X review" links on the dashboard cards rather than a filled button. */
.detail-cta a[b-tuprm82neh] {
    font-weight: 600;
    text-decoration: none;
}

/* Scoped to this page only via Blazor CSS isolation, so Home.razor/StockOverview.razor/Merchandising
   Review.razor's own .filter-bar (all plain single-selects) keep their existing bottom-aligned look -
   only this page's filter bar switches to top-aligned. */
.filter-bar[b-tuprm82neh] {
    /* A picker can grow taller than a plain <select> as its chips wrap onto a second line; top-aligning
       the row keeps every field's label level with its neighbours, rather than drifting apart as one
       field grows and the others don't. */
    align-items: flex-start;
}

.filter-actions[b-tuprm82neh] {
    /* Lines the buttons up with the controls row, not the bar's bottom edge - a blank label in the
       markup gives this block the same label+control structure every other field has, so the button
       sits on the controls' baseline whatever the chips do. */
    align-self: flex-start;
    flex-direction: column;
    /* Match .filter-field's own label->control gap (app.css) exactly - .filter-actions' inherited
       0.5rem left the button sitting ~3px below the inputs' line. */
    gap: 0.3rem;
}

.filter-actions .filter-label[b-tuprm82neh] {
    /* Invisible spacer matching the other fields' label line - see .filter-actions above. */
    visibility: hidden;
}

.filter-actions .btn[b-tuprm82neh] {
    align-self: flex-start;
}

/* Same muted/uppercase small-caption treatment as EntityDashboard's own .entity-dashboard-heading,
   duplicated rather than reused: Blazor's CSS-isolation scope means that class can only ever reach
   EntityDashboard's own markup, never this page's, so this page needs its own rule of the identical
   shape. */
.breakdown-heading[b-tuprm82neh] {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
    color: var(--ff-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* The row count beside the heading (e.g. "(3 stores)") - de-emphasised further than the heading
   itself, which is already muted/uppercase; this drops the uppercase/letter-spacing so it reads as a
   plain aside rather than a second heading. */
.breakdown-count[b-tuprm82neh] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* A separate element from .breakdown-count on purpose: the count label's own text (e.g. "(2 chains)")
   is asserted verbatim by ChainDashboardTests, so the sort note is kept out of that string rather than
   appended inside the same parens. */
.breakdown-sorted-note[b-tuprm82neh] {
    margin-left: 0.5rem;
    color: var(--ff-muted);
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Caps the viewport at roughly 6-8 rows without hiding any - every row is still rendered into the DOM
   underneath. Same idiom as StockOverview.razor.css's .bar-chart (260px); taller here since a
   .data-table row is taller. */
.breakdown-scroll[b-tuprm82neh] {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: auto;   /* also scroll sideways if the columns exceed the viewport, e.g. on a phone */
}

/* No sticky column header here: app.css's shared .data-table rule sets overflow: hidden on the <table>
   itself (needed there to clip its own rounded corners), which makes the browser treat the table as
   the sticky header's containing block instead of this scrolling wrapper - so the header scrolls with
   the body like the rest of the table, matching StockOverview.razor.css's own .bar-chart precedent. */

/* Plain muted text, not a status-badge pill - VM is the score's last-resort tie-break input, never a
   genuine alert like Out of Stock/Low Stock. Reuses --ff-muted, the same token every other
   de-emphasised label on this page already uses. */
.attention-muted[b-tuprm82neh] {
    color: var(--ff-muted);
    font-size: 0.85rem;
}
/* /Components/Pages/Help.razor.rz.scp.css */
/* Help page: a contents list beside the sections on wide screens, stacked above them on narrow ones. */
.help-layout[b-f47bk2o8jz] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
}

.help-toc[b-f47bk2o8jz] {
    position: sticky;
    top: 5rem;
    padding: 1rem 1.1rem;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
}

.help-toc-title[b-f47bk2o8jz] {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.help-toc ol[b-f47bk2o8jz] {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.9;
}

.help-body[b-f47bk2o8jz] {
    min-width: 0;
}

.help-section[b-f47bk2o8jz] {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ff-border);
    scroll-margin-top: 5rem;
    line-height: 1.6;
}

.help-section h3[b-f47bk2o8jz] {
    margin: 1rem 0 0.4rem;
    font-size: 1rem;
}

.help-section li + li[b-f47bk2o8jz] {
    margin-top: 0.3rem;
}

/* The reader's own role column. */
.help-roles .help-you[b-f47bk2o8jz] {
    background: var(--ff-brand-soft);
    font-weight: 600;
}

.help-faq dt[b-f47bk2o8jz] {
    margin-top: 1rem;
    font-weight: 600;
}

.help-faq dd[b-f47bk2o8jz] {
    margin: 0.25rem 0 0;
    color: var(--ff-muted);
}

@media (max-width: 800px) {
    .help-layout[b-f47bk2o8jz] {
        grid-template-columns: 1fr;
    }

    .help-toc[b-f47bk2o8jz] {
        position: static;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home page chrome: the Quick Links row. Shared chrome (.page-head/.page-sub/
   .status-badge/.status-instock etc.) already lives in app.css - this file only
   holds what's unique to Home, matching StockOverview.razor.css's "promote only what's shared"
   convention. The module-summary widget grid (.module-grid/.module-card/etc.) lives in app.css
   instead, since Components/Shared/EntityDashboard.razor needs the identical card shape and, being a
   different component, would never pick up a rule scoped to Home.razor alone. */


/* --- Quick Links --- reuses NavMenu.razor's inline-SVG-icon look, laid out as a row of bordered
   cards instead of a dropdown menu, since these sit directly on the page rather than inside the top
   nav. */
.quick-links[b-3qrj1nymj0] {
    margin: 1.5rem 0;
}

.quick-links h2[b-3qrj1nymj0] {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.quick-links-grid[b-3qrj1nymj0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quick-link[b-3qrj1nymj0] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    background: var(--ff-surface);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    color: var(--ff-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--ff-ease);
}

.quick-link svg[b-3qrj1nymj0] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--ff-brand);
}

.quick-link:hover[b-3qrj1nymj0] {
    border-color: var(--ff-brand);
    background: var(--ff-brand-soft);
    color: var(--ff-brand-strong);
}
/* /Components/Pages/Merchandising/Review.razor.rz.scp.css */
/* Merchandising Review page chrome. Everything this page needs is shared/global already:
   page-head/kpi-strip/kpi-tile/kpi-value/kpi-label/kpi-def/kpi-tile-pending/kpi-pending-note/
   status-badge/btn/empty-state/filter-bar/filter-field/btn-sm/data-table/dashboard-charts/
   chart-card/donut/trend/bar-chart (app.css - see StockOverview.razor.css's identical header
   comment on why this file is intentionally near-empty; the Compliance Status donut and Share of
   Shelf by Store bars reuse those same promoted families rather than introducing anything new).
   No new CSS class is introduced by this page. */
/* /Components/Pages/Stock/StockOverview.razor.rz.scp.css */
/* Stock Inventory Review page chrome. Almost everything this page needs is shared/global already in
   app.css (page-head/kpi-strip/status-badge/filter-bar/dashboard-charts/chart-card/donut/trend/
   bar-chart/tab-strip/data-table); the rules below are specific to this page's Information Captured
   table cells, since nothing else in the portal has this exact table shape. */

/* Small warning glyph on the Closing Stock cell when a line's own arithmetic doesn't reconcile,
   surfaced rather than silently corrected; the title attribute carries the explanation so this never
   relies on the glyph alone. */
.arithmetic-flag[b-wbznpkxq92] {
    margin-left: 0.3rem;
    cursor: help;
}

/* Stock alerts strip: a row of clickable chips above the filter toolbar, each wrapping the existing
   .status-badge in a plain link to the matching status filter, so no new palette is needed here. */
.alerts-strip[b-wbznpkxq92] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.alert-chip[b-wbznpkxq92] {
    text-decoration: none;
}

.alert-chip:hover .status-badge[b-wbznpkxq92] {
    filter: brightness(0.95);
}

/* System Admin/Trade Marketing-only note: a store whose alerts have no assigned Account Manager. */
.unassigned-alerts-note[b-wbznpkxq92] {
    color: var(--ff-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0 0 1rem;
}

/* --- Weekly Sell-Out Trend + Submission Completion by Store ---
   These two real charts share the ".dashboard-charts" row with the Stock Health donut. The .trend-*
   and bar-chart list rules live in app.css instead, since Merchandising Review's own charts reuse the
   same shapes; nothing is left specific to this page's charts. */
/* /Components/Pages/Training/Review.razor.rz.scp.css */
/* Training review page chrome. Everything this page needs is already shared/global in app.css, so
   this file is intentionally near-empty; no new CSS class is introduced by this page. */
/* /Components/Shared/AuditHistory.razor.rz.scp.css */
/* Per-record History section. Scoped to THIS component's own render output only - see
   EntityDashboard.razor.css's identical comment on why a shared component's OWN classes work fine as
   scoped css even though many different host pages embed the component: Blazor stamps the scope
   attribute onto AuditHistory.razor's rendered elements regardless of which page asked for them, so
   these rules always reach it. */
.audit-history[b-dc1lvjd6vf] {
    margin-top: 2rem;
}

.audit-history-list[b-dc1lvjd6vf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-history-list li + li[b-dc1lvjd6vf] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ff-border);
}

.audit-history-summary[b-dc1lvjd6vf] {
    margin: 0;
}
/* /Components/Shared/EntityDashboard.razor.rz.scp.css */
/* EntityDashboard's own small heading (e.g. "Chain overview"/"Store overview") above the shared
   .module-grid (promoted to app.css - see that file's own comment on why: both Home.razor and this
   component need the identical widget-card chrome, and Blazor's CSS-isolation scope attribute means a
   style scoped to Home.razor alone could never reach a different component's elements). Nothing else
   here is unique enough to promote - just this heading's own spacing. */
.entity-dashboard-heading[b-jp9n1c2o9c] {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--ff-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}