/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.page[b-ko7kebbawh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ko7kebbawh] {
    flex: 1;
    min-width: 0;
    background: var(--tn-bg-page);
}

/* The sidebar column hosts the design-system .tn-sidebar (AdminNavMenu). */
.sidebar[b-ko7kebbawh] {
    background-color: var(--tn-sidebar-bg);
}

.top-row[b-ko7kebbawh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tn-space-sm);
    height: 3.5rem;
    padding: 0 var(--tn-space-lg);
    background-color: var(--tn-bg-card);
    border-bottom: 1px solid var(--tn-border);
}

@media (max-width: 640.98px) {
    .top-row[b-ko7kebbawh] {
        justify-content: space-between;
    }
}

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

    .sidebar[b-ko7kebbawh] {
        width: var(--tn-sidebar-width);
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

#blazor-error-ui[b-ko7kebbawh] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-ko7kebbawh] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/AdminNavMenu.razor.rz.scp.css */
/* Layout glue around the design-system .tn-sidebar.
   All visual styling comes from design-system/components/nav.css;
   this only handles the responsive collapse inside this app. */

[b-t1o6zhjkej] .tn-sidebar {
    height: 100%;
}

.nav-toggler[b-t1o6zhjkej] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--tn-radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--tn-text-on-dark-bright);
    font-size: 1.1rem;
    cursor: pointer;
}

.nav-scrollable[b-t1o6zhjkej] {
    display: none;
    flex: 1;
    flex-direction: column;
}

.nav-scrollable.is-open[b-t1o6zhjkej] {
    display: flex;
}

@media (min-width: 641px) {
    .nav-toggler[b-t1o6zhjkej] {
        display: none;
    }

    .nav-scrollable[b-t1o6zhjkej] {
        display: flex;
        height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/CompanySelector.razor.rz.scp.css */
/* The switcher itself now uses the design-system tn-menu component (#116); the only
   component-scoped styles left are the first-render loading skeleton. (The former
   .tn-company-selector / __name / __menu rules and the unused .tn-company-label rule
   — which carried the dead var(--tn-text, inherit) — were removed with the tn-menu
   conversion.) */

/* Loading placeholder shown until the active company resolves (smooths first-render). */
.tn-company-selector__skeleton[b-rh3biv5qye] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tn-text-muted);
    opacity: 0.7;
}

.tn-company-selector__skeleton-bar[b-rh3biv5qye] {
    display: inline-block;
    width: 8rem;
    height: 0.85rem;
    border-radius: var(--tn-radius);
    background: var(--tn-border);
    animation: tn-company-skeleton-pulse-b-rh3biv5qye 1.2s ease-in-out infinite;
}

@keyframes tn-company-skeleton-pulse-b-rh3biv5qye {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
.page[b-an5l4lwfh1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-an5l4lwfh1] {
    flex: 1;
    min-width: 0;
    background: var(--tn-bg-page);
}

/* The sidebar column hosts the design-system .tn-sidebar (PortalNavMenu).
   --tn-sidebar-bg is the DARK chrome token and the portal's sidebar is light now
   (.tn-sidebar--light), so this column has to agree with what sits in it - otherwise a dark edge
   shows wherever the nav does not cover the column exactly. Matching the variant's own ground
   rather than picking a colour. */
.sidebar[b-an5l4lwfh1] {
    background-color: var(--tn-bg-card);
}

.top-row[b-an5l4lwfh1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tn-space-sm);
    height: 3.5rem;
    padding: 0 var(--tn-space-lg);
    background-color: var(--tn-bg-card);
    border-bottom: 1px solid var(--tn-border);
}

@media (max-width: 640.98px) {
    .top-row[b-an5l4lwfh1] {
        justify-content: space-between;
    }
}

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

    .sidebar[b-an5l4lwfh1] {
        width: var(--tn-sidebar-width);
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

#blazor-error-ui[b-an5l4lwfh1] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-an5l4lwfh1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* #490: below the bottom-nav breakpoint the sidebar and its stock Blazor hamburger are gone —
   .tn-bottom-nav is the mobile navigation, exactly as in ScanEasy. Two navigations offering the
   same links is worse than one: it doubles the ways to be somewhere and halves the confidence
   that either is the real one. 768px matches bottomnav.css's own breakpoint, so the bar appears
   in the same query the sidebar disappears in and there is never a gap with neither. */
@media (max-width: 768px) {
    .sidebar[b-an5l4lwfh1] {
        display: none;
    }
}
/* /Components/Layout/PortalNavMenu.razor.rz.scp.css */
/* Layout glue around the design-system .tn-sidebar.
   Visual styling comes from design-system/components/nav.css;
   this only handles the responsive collapse inside this app. */

[b-sb2xjhizkm] .tn-sidebar {
    height: 100%;
}

.nav-toggler[b-sb2xjhizkm] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    /* DRAWN FOR A LIGHT GROUND, and all three of these had to move together. This button was
       white-on-white waiting to happen: a 12%-white border, a 6%-white fill and
       --tn-text-on-dark-bright text, which is correct chrome on the dark sidebar it was written
       for and invisible on the light one the portal now uses.

       The old app.css override masked only the TEXT colour, by re-pointing the token - so the
       border and the fill were already all but invisible on the light sidebar before this, and
       removing that override would have taken the glyph with them. The admin panel's copy of this
       button (AdminNavMenu.razor.css) is deliberately untouched: that sidebar is still dark. */
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-sm);
    background: transparent;
    color: var(--tn-text-primary);
    font-size: 1.1rem;
    cursor: pointer;
}

.nav-scrollable[b-sb2xjhizkm] {
    display: none;
    flex: 1;
    flex-direction: column;
}

.nav-scrollable.is-open[b-sb2xjhizkm] {
    display: flex;
}

@media (min-width: 641px) {
    .nav-toggler[b-sb2xjhizkm] {
        display: none;
    }

    .nav-scrollable[b-sb2xjhizkm] {
        display: flex;
        height: calc(100vh - 5.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Admin/ProductDetails.razor.rz.scp.css */
/* Page-specific layout for the role × policy permission matrix.
   The base table styling comes from the design system (.tn-table);
   this file only adds the sticky first/last columns and the policy
   header tooltip — behaviours the shared table component doesn't
   cover. All colors reference design-system tokens. */

.policy-cell[b-d1v10q31oi] {
    cursor: pointer;
    min-height: 42px;
    min-width: 20px;
    max-width: 100px;
    transition: background-color var(--tn-transition);
}

.policy-cell:hover[b-d1v10q31oi] {
    background-color: var(--tn-bg-hover);
}

/* Horizontal-scroll container that frames the matrix like a card. */
.policy-table-container[b-d1v10q31oi] {
    position: relative;
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: var(--tn-space-md);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius-lg);
}

.policy-table[b-d1v10q31oi] {
    margin-bottom: 0;
}

/* Sticky first column (role names). */
.policy-table th:first-child[b-d1v10q31oi],
.policy-table td:first-child[b-d1v10q31oi] {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--tn-bg-card);
    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.06);
}

.policy-table thead th:first-child[b-d1v10q31oi] {
    background-color: var(--tn-bg-page);
}

/* Sticky last column (actions). */
.policy-table th:last-child[b-d1v10q31oi],
.policy-table td:last-child[b-d1v10q31oi] {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--tn-bg-card);
    box-shadow: -2px 0 3px rgba(0, 0, 0, 0.06);
}

.policy-table thead th:last-child[b-d1v10q31oi] {
    background-color: var(--tn-bg-page);
}

/* Hint shown above wide matrices. */
.table-scroll-indicator[b-d1v10q31oi] {
    color: var(--tn-text-secondary);
    font-size: var(--tn-font-size-xs);
    margin-bottom: var(--tn-space-sm);
}

/* Policy header with a hover description tooltip. */
.policy-header[b-d1v10q31oi] {
    position: relative;
    cursor: help;
}

.policy-description[b-d1v10q31oi] {
    display: none;
    position: absolute;
    background-color: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    padding: var(--tn-space-sm);
    width: 200px;
    z-index: 5;
    box-shadow: var(--tn-shadow-md);
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tn-text-secondary);
}

.policy-header:hover .policy-description[b-d1v10q31oi] {
    display: block;
}

/* Truncated policy name in the header. */
.text-truncate[b-d1v10q31oi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}