@import url('design-tokens.css');
@import url('reports.css');

html {
    scroll-behavior: smooth;
}

html,
body {
    font-family: var(--portal-font-sans);
    background-color: var(--portal-bg);
    color: var(--portal-ink);
}

body {
    margin: 0;
    min-height: 100vh;
}

/* Admin UI redesign: the selection was the light theme's pale blue under light-theme ink, which on the dark
   palette put dark text on a bright band. The brand tint under the theme's own ink reads in both. */
::selection {
    background-color: var(--portal-brand-soft);
    color: var(--portal-ink);
}

a {
    color: var(--portal-brand-dark);
    text-decoration: none;
    transition: color 200ms ease;
}

a:hover {
    color: var(--portal-brand);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--portal-font-sans);
    color: var(--portal-ink);
    letter-spacing: 0.01em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    font-weight: var(--spherene-h1-weight);
    line-height: var(--spherene-h1-line-height);
    margin-bottom: 1rem;
    /* Admin UI redesign: titles are Title Case as written. Upper-casing them made every page shout and
       hid the casing the registry's labels carry. */
}

h2 {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    font-weight: var(--spherene-h2-weight);
    line-height: var(--spherene-h2-line-height);
}

h3 {
    font-size: clamp(1.1rem, 1.4vw, 1.25rem);
    font-weight: var(--spherene-h3-weight);
    line-height: var(--spherene-h3-line-height);
    margin-bottom: 0.9rem;
}

h4 {
    font-size: var(--spherene-h4-size);
    font-weight: var(--spherene-h4-weight);
    line-height: var(--spherene-h4-line-height);
}

h5 {
    font-size: var(--spherene-h5-size);
    font-weight: var(--spherene-h5-weight);
    line-height: var(--spherene-h5-line-height);
}

h6 {
    font-size: var(--spherene-h6-size);
    font-weight: var(--spherene-h6-weight);
    line-height: var(--spherene-h6-line-height);
}

.portal-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.portal-page-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.portal-page-kicker {
    color: var(--portal-muted-soft);
    font-size: var(--spherene-body-xsmall);
    font-weight: var(--spherene-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portal-page-title {
    margin: 0;
}

.portal-page-subtitle {
    color: var(--portal-muted);
    font-size: var(--spherene-body-medium);
    margin: 0;
}

.portal-page-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
}

.portal-table-shell {
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    overflow: hidden;
    box-shadow: var(--portal-shadow-soft);
    background: var(--portal-surface);
}

.portal-table-shell .mud-data-grid,
.portal-table-shell .mud-table {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* SPHER-2440: the proposed request body on the dual-control approval queue. Shown verbatim
   and wrapped rather than truncated — an approver who can only see part of the request is
   approving the part they can see. */
.dual-control-body {
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.65rem;
    max-width: 32rem;
    max-height: 9rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    line-height: 1.35;
    border-radius: var(--spherene-radius-sm, 6px);
    background: var(--portal-surface-muted, rgba(127, 127, 127, 0.08));
}

/* Admin UI redesign: a grid row's actions, at most two icon buttons and the row's "More actions" menu,
   kept on one line so every row's controls line up. */
.row-actions {
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-xs);
    flex-wrap: nowrap;
}

.portal-surface-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    box-shadow: var(--portal-shadow-soft);
}

.portal-inline-note {
    margin-top: 0.8rem;
}

.portal-stats-grid .mud-card {
    border-radius: var(--spherene-radius-lg);
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
    background: linear-gradient(180deg, var(--portal-surface), var(--portal-bg-accent));
}

/* Admin UI redesign: the Bootstrap template's .btn, .btn-primary, .btn-link, .form-control and
   .form-check-input rules are gone. The portal has not loaded Bootstrap since it moved to MudBlazor, nothing
   rendered those classes any more, and the login form styles its own fields (Login.razor.css). The Blazor
   form and error-boundary classes below are the framework's and stay. */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--spherene-success-base);
}

.invalid {
    outline: 1px solid var(--portal-error);
}

.validation-message {
    color: var(--portal-error);
}

.blazor-error-boundary {
    background: var(--spherene-error-dark);
    border: 1px solid var(--spherene-error-main);
    border-radius: var(--spherene-radius-md);
    padding: 1rem 1.2rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ========================
   MudBlazor Component Overrides
   ======================== */
.mud-button {
    border-radius: var(--spherene-radius-md);
    cursor: pointer;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.mud-button:focus-visible {
    outline: 2px solid var(--portal-brand);
    outline-offset: 2px;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--portal-btn-primary-bg);
    color: var(--portal-btn-primary-text);
    box-shadow: var(--spherene-shadow-xs);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--portal-btn-primary-hover);
}

/* Admin UI redesign: secondary is the brand's darker step, as PortalMudTheme's light Secondary is, rather
   than the info palette's navy, which sank into the dark surface. The same step in both themes: white on it
   clears 4.5:1, which the dark theme's lighter brand steps do not. */
.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--spherene-primary-400);
    color: var(--spherene-white);
}

.mud-icon-button {
    border-radius: var(--spherene-radius-md);
    cursor: pointer;
    transition: background-color 200ms ease;
}

.mud-icon-button:focus-visible {
    outline: 2px solid var(--portal-brand);
    outline-offset: 2px;
}

.mud-paper {
    border-radius: var(--spherene-radius-lg);
}

.mud-table,
.mud-data-grid {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    box-shadow: var(--portal-shadow-soft);
    overflow: hidden;
}

.mud-table-container {
    border-radius: var(--spherene-radius-lg);
}

.mud-table-head .mud-table-cell {
    color: var(--portal-muted);
    background: var(--portal-bg-accent);
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--portal-border);
}

/* Admin UI redesign: the row, input and dialog dividers were light-theme greys, bright lines on the dark
   palette; they follow the theme's border tokens now. */
.mud-table-cell {
    border-bottom: 1px solid var(--portal-border);
    font-variant-numeric: tabular-nums;
}

.mud-table-row {
    transition: background-color 150ms ease;
}

.mud-table-row:hover {
    background-color: var(--portal-bg-accent);
}

.mud-table-pagination {
    border-top: 1px solid var(--portal-border);
    background: var(--portal-surface);
}

.mud-input-slot,
.mud-select-input,
.mud-input > input {
    font-family: var(--portal-font-sans);
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--portal-input-border);
    transition: border-color 200ms ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--portal-muted-soft);
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--portal-input-border-focus);
    border-width: 2px;
}

.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--portal-input-border-focus);
}

.mud-input-label {
    font-family: var(--portal-font-label);
    color: var(--portal-input-label);
}

.mud-dialog {
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-xl);
    box-shadow: var(--portal-shadow-strong);
}

.mud-dialog-title {
    border-bottom: 1px solid var(--portal-border);
    font-weight: var(--spherene-weight-bold);
}

.mud-dialog-actions {
    border-top: 1px solid var(--portal-border);
}

.mud-popover .mud-paper {
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
}

/* Status color utilities. Admin UI redesign: the chip tints were the light ramp's pale steps under its
   darkest ink, so a status chip glared on the dark palette; design-tokens.css re-points the chip tokens
   per theme. */
.mud-chip-filled.mud-chip-color-error {
    background-color: var(--portal-chip-error-bg);
    color: var(--portal-chip-error-ink);
}

.mud-chip-filled.mud-chip-color-warning {
    background-color: var(--portal-chip-warning-bg);
    color: var(--portal-chip-warning-ink);
}

.mud-chip-filled.mud-chip-color-info {
    background-color: var(--portal-chip-info-bg);
    color: var(--portal-chip-info-ink);
}

.mud-chip-filled.mud-chip-color-success {
    background-color: var(--portal-chip-success-bg);
    color: var(--portal-chip-success-ink);
}

/* ========================
   Accessibility: Reduced Motion
   ======================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================
   Responsive
   ======================== */
@media (max-width: 640px) {
    h1 {
        font-size: 1.35rem;
    }

    .portal-page-header {
        align-items: flex-start;
    }

    .portal-page-subtitle {
        font-size: var(--spherene-body-small);
    }
}