/* Portal styles. No inline styles anywhere (strict CSP): everything that was inline lives here. */
html, body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.portal-loading { padding: 2rem; font-size: 1.1rem; }

#blazor-error-ui {
    background: #fff3cd;
    color: #1f1f1f;
    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: 2000;
}

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

.portal-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #fff;
    color: #000;
    padding: 0.5rem 1rem;
    z-index: 3000;
}

.portal-skip-link:focus { left: 0; }

.portal-grid-actions { white-space: nowrap; }
.portal-spacer { flex-grow: 1; }

/* Page frame (PortalPage): forms are narrow, tables wide. */
.portal-page-narrow { max-width: 30rem; margin: 1.5rem auto; }
.portal-page-wide { width: 100%; }

/* Text for assistive technology only (for example "(opens in a new window)"). */
.portal-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Building blocks */
.portal-error-summary { border: 1px solid var(--mud-palette-error); border-left-width: 4px; border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.portal-error-summary ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.portal-error-summary a { color: var(--mud-palette-text-primary); text-decoration: underline; }
.portal-disabled-reason { display: block; color: var(--mud-palette-text-secondary); margin-top: 0.25rem; }
.portal-loading-area { display: flex; align-items: center; min-height: 2rem; }
.portal-problem-details { margin-top: 0.25rem; }
.portal-catalog-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Layout: footer, brand link; no horizontal scrolling of the page at 360 px (wide tables scroll inside their container, the grid stacks below the Sm breakpoint). */
.portal-brand { white-space: nowrap; }
.portal-footer { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--mud-palette-lines-default); }
.portal-footer a { color: var(--mud-palette-primary); }
.mud-main-content { min-width: 0; }
main { overflow-wrap: anywhere; }
.mud-table-container { overflow-x: auto; }

/* Neutral look (spike risk R4): no upper-case buttons, no shadows on buttons, click targets of at least 40 px. */
.mud-button-root, .mud-button { text-transform: none; letter-spacing: normal; }
.mud-button-filled, .mud-button-filled:hover, .mud-button-filled:active { box-shadow: none; }
.mud-button-root { min-height: 2.5rem; }
.mud-icon-button { min-width: 2.5rem; min-height: 2.5rem; }
.mud-nav-link { min-height: 2.5rem; }

/* Visible keyboard focus on every focusable element (S2, WCAG 2.4.7); the accent comes from the theme token (checked >= 3:1 in light and dark by PortalThemeContrastTests). */
:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mud-button-root:focus-visible, .mud-icon-button:focus-visible, .mud-nav-link:focus-visible, .mud-menu-item:focus-visible, .mud-checkbox:focus-within { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Shared page header: one title, contextual navigation alongside, actions at the right. */
.portal-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.portal-page-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; }
.portal-page-heading h1 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.portal-page-context, .portal-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.portal-page-actions { margin-left: auto; justify-content: flex-end; max-width: 100%; }
@media (max-width: 599.98px) {
    .portal-page-header { align-items: flex-start; gap: 0.5rem; }
    .portal-page-heading h1 { font-size: 1.25rem; }
}