:root {
    --env-banner-height: 0px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ValidationSummary on the account pages renders its <ul> with the .alert classes
   so validation errors appear in the same colored box as status messages; drop the
   list bullets the <ul> would otherwise show inside the box. */
ul.validation-alert {
    list-style: none;
}

ul.validation-alert li + li {
    margin-top: 0.25rem;
}

.button-link {
    text-decoration: unset;
}

#blazor-error-ui {
    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 {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

    .title.title-secondary {
        padding-top: 0.313rem;
        padding-bottom: 0;
        color: var(--bs-secondary-color);
    }

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
    /* Optical alignment: at this size a capital's left side bearing is ~0.05em
       (2px), making the title look indented next to body-size text below it. */
    margin-left: -0.05em;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.password-policy-hint {
    /* The title block above contributes 25px of built-in spacing (its own and its
       header's padding plus the layout flex gap) plus line-height slack; pull up
       through it so the visible gap above matches the 0.75rem below. */
    margin-top: -1.25rem;
    margin-bottom: 0.75rem;
    color: var(--bs-gray-700);
}

/* Full-screen blocking scrim shared by the idle-logoff warning overlay below and
   the account submit/passkey busy overlays (account-submit.css). One recipe so the
   dim level, stacking, and geometry cannot drift between them. Deliberately sets
   no `display`: each consumer controls its own visibility. */
.fullscreen-scrim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* Idle-logoff warning modal (IdleTimeoutProvider.razor). Global stylesheet rather
   than scoped CSS so styles apply under dotnet watch, which does not regenerate the
   scoped-CSS bundle for newly added .razor.css files. The element also carries
   .fullscreen-scrim; it is conditionally rendered, so it is simply flex when present. */
.idle-timeout-overlay {
    display: flex;
}

.idle-timeout-modal {
    background: var(--bs-body-bg);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.idle-timeout-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.idle-timeout-modal p {
    margin: 0 0 0.25rem;
    color: var(--bs-gray-700);
    font-size: 0.95rem;
}

.idle-timeout-countdown {
    font-size: 2rem;
    font-weight: 600;
    color: var(--bs-warning);
    margin: 0.5rem 0 1.5rem;
    font-variant-numeric: tabular-nums;
}

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}


.or {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .or .or-line {
        border-bottom: 1px solid var(--bs-body-color);
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem 0px 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: var(--bs-body-color);
        opacity: 0.7;
    }

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--bs-body-color);
        opacity: 0.7;
    }

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary);
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .info-message.info-panel {
        margin-bottom: 0.625rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

.icon-external-provider {
    width: 1rem;
    height: 1rem;
}

.icon-google {
    background-image: url("/images/account/providers/google-logo.svg")
}

.icon-facebook {
    background-image: url("/images/account/providers/facebook-logo.svg")
}

.icon-microsoft {
    background-image: url("/images/account/providers/microsoft-logo.svg")
}

.icon-twitter {
    background-image: url("/images/account/providers/x-logo.svg")
}

/* Treat tablet-width screens (≤1024px, e.g. iPads) as "mobile": hide the desktop-only
   header controls and show the in-drawer mobile equivalents instead. Breakpoint is 1024
   (not 768) so iPad-class devices get the compact layout. */
@media (max-width: 1024px) {
    .display-desktop {
        display: none;     /* Desktop-only elements (e.g. header user info / logout). */
    }

    .display-mobile {
        display: block;    /* Mobile-only elements (e.g. the in-drawer user menu). */
    }

}

/* Hide LastPass icons globally - 2024 selectors */
div[data-lastpass-icon-root],
div[data-lastpass-root],
span[data-lastpass-icon-root],
span[data-lastpass-root] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Fixed form action footer - used for form save/cancel buttons */
.form-action-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    z-index: 1020;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.form-action-footer .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* When desktop sidebar is open (MudDrawer mini-variant), offset footer past the 240px sidebar */
@media (min-width: 769px) {
    .panel-open .form-action-footer {
        left: 240px;
    }
}

/* Spacer so content isn't hidden behind fixed footer */
.form-action-footer-spacer {
    height: 10rem;
}

/* Larger spacer when validation errors are expanded */
.form-action-footer-spacer.validation-expanded {
    height: 28rem;
}

/* Environment banner - displays current environment at top of page */
.environment-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    text-align: center;
    padding: 0.25rem 1rem;
    font-size: 0.6125rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
}

.environment-banner.env-dev {
    background-color: #0d6efd;
}

.environment-banner.env-qa {
    background-color: #fd7e14;
}

.environment-banner.env-test {
    background-color: #198754;
}

.environment-banner.env-uat {
    background-color: #6f42c1;
}

.environment-banner-spacer {
    height: 1.25rem;
    flex-shrink: 0;
}

/* ============================================================
   Mobile-first auth page adaptations (phones ≤480px)
   - 48px touch targets for field workers
   - Scaled typography and tightened spacing
   - Vertically stacked links with large tap areas
   ============================================================ */
@media (max-width: 480px) {
    /* Title scaling */
    .title {
        gap: 0.25rem;
        padding-bottom: 0.375rem;
    }

    .title-header-text {
        font-size: 1.75rem;
        line-height: 2.125rem;
        padding: 0.125rem 0;
    }

    .title-content-text {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .title-content-text-secondary {
        font-size: 1rem;
    }

    /* Spacing */
    .block-content {
        gap: 0.5rem;
    }

    /* Links — stack vertically with large tap targets */
    .links-container {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .links-container a {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--bs-primary);
    }

    .links-container .dot {
        display: none;
    }

    /* "Or" divider — hide on mobile */
    .or {
        display: none;
    }

    .links-area {
        padding-top: 0.25rem;
    }

    /* Status messages */
    .block-content .alert {
        font-size: 0.9375rem;
        padding: 0.875rem 1rem;
        border-radius: 0.375rem;
        line-height: 1.5;
    }

    /* CTA prominence on static pages (Lockout, AccessDenied) */
    .cta-links-container {
        margin-top: 0.75rem;
    }

    .cta-links-container a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3.5rem;
        padding: 0 1.5rem;
        font-size: 1.125rem;
        background-color: var(--bs-primary);
        color: var(--bs-white) !important;
        border-radius: 0.375rem;
        font-weight: 600;
        text-decoration: none;
        width: 100%;
    }
}

/* MudDataGrid / MudTable base styling (.eb-mud-grid)
   ──────────────────────────────────────────────────
   Modern SaaS grid treatment: rounded container with a subtle shadow,
   a muted uppercase header, light row dividers, soft hover, and branded
   links/action icons. Colors reference the --mud-palette-* variables that
   MudThemeProvider emits from AppTheme.cs, so a theme change there propagates
   straight to the grid — AppTheme.cs is the single source of truth. */

.eb-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.eb-record-count {
    background-color: var(--mud-palette-gray-lighter);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9999px;
    color: var(--mud-palette-gray-darker);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.eb-grid-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.eb-grid-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Once wrapped, margin-left: auto would strand the actions away from the filters they act on. */
@media (max-width: 768px) {
    .eb-grid-toolbar-actions {
        margin-left: 0;
    }
}

/* Keep .mud-picker qualified: MudPicker copies Class onto the inner column-flex input too, where an
   unqualified `flex: 0 1 20rem` resolves as a 320px HEIGHT. */
.mud-picker.eb-grid-date-range {
    max-width: 20rem;
    flex: 0 1 20rem;
}

/* Container */
.eb-mud-grid.mud-table {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.eb-mud-grid .mud-table-container {
    overflow-y: auto;
    border-radius: inherit;
}

/* Header */
.eb-mud-grid .mud-table-head .mud-table-row .mud-table-cell {
    background-color: var(--mud-palette-gray-lighter);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    color: var(--mud-palette-gray-darker);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Filter inputs sit inside the head, so they'd otherwise inherit its uppercase bold treatment. */
.eb-mud-grid .mud-table-head .mud-input input {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 0.8125rem;
}

/* Body rows */
.eb-mud-grid tbody tr.mud-table-row,
.eb-mud-grid tbody tr.mud-table-row td {
    height: 72px;
    box-sizing: border-box;
}

.eb-mud-grid .mud-table-body .mud-table-row .mud-table-cell {
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

/* Last row: the container border handles the bottom edge */
.eb-mud-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

/* Row hover is handled by MudBlazor's built-in Hover="true" treatment, which
   uses var(--mud-palette-table-hover) and is correctly gated by
   @media (hover:hover) — no custom rule needed (would duplicate it and break
   touch). */

/* Selected row */
.eb-mud-grid tbody tr.mud-table-row.eb-grid-selected-row,
.eb-mud-grid tbody tr.mud-table-row.eb-grid-selected-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
}

/* Links */
.eb-mud-grid .mud-table-body .mud-table-cell a {
    color: var(--mud-palette-secondary);
    font-weight: 500;
}

.eb-mud-grid .mud-table-body .mud-table-cell a:hover {
    color: var(--mud-palette-primary);
}

/* Row action icons */
.eb-mud-grid .mud-table-body .mud-icon-button {
    color: var(--mud-palette-gray-default);
    transition: color 0.15s ease;
}

.eb-mud-grid .mud-table-body .mud-icon-button:hover {
    color: var(--mud-palette-gray-darker);
    background-color: var(--mud-palette-divider-light);
}

/* .eb-mud-grid--wide — opt-in modifier for declared column widths + compact virtualized rows.
   Applied only to Inspection Submissions so far; the other consumers keep the base treatment until
   each has been checked (UsersSection in particular is deliberately Dense="false"). Selectors are
   doubled up so they outrank the equally-specific base rules regardless of source order. */

/* Without table-layout: fixed the browser ignores the per-column HeaderStyle widths entirely;
   min-width then keeps the table at their sum so it scrolls rather than squeezing. */
.eb-mud-grid.eb-mud-grid--wide .mud-table-root {
    table-layout: fixed;
    min-width: max-content;
}

/* MudDataGrid.razor.cs:126 sets an inline width: max-content here whenever HorizontalScrollbar is
   on; chained with the rule above and MudBlazor's colspan="1000" placeholder cells, that resolved
   to a measured 1,000,000px table. Pinning the width breaks the chain. */
.eb-mud-grid.eb-mud-grid--wide .mud-table-container {
    width: 100% !important;
}

/* Must equal the grid's ItemSize, or the virtualizer's scroll math drifts from the rendered rows. */
.eb-mud-grid.eb-mud-grid--wide tbody tr.mud-table-row,
.eb-mud-grid.eb-mud-grid--wide tbody tr.mud-table-row td {
    height: 44px;
}

/* Fixed widths mean overflowing text would otherwise spill into the neighbouring column. */
.eb-mud-grid.eb-mud-grid--wide .mud-table-body .mud-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Give the filter row its own surface so it reads as an input strip rather than a second header. */
.eb-mud-grid.eb-mud-grid--wide .mud-table-head .filter-header-cell {
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-top: 4px;
    padding-bottom: 4px;
}