/*
    Application-level CSS is deliberately minimal: MudBlazor and the central GmcTheme own the
    look of the application (FRR §4.4). Anything added here must be a genuine gap in what the
    component library can express — print layout, focus visibility, scroll behaviour — never
    component restyling.
*/

html,
body {
    height: 100%;
    margin: 0;
}

/*
    Keyboard focus must remain clearly visible in both themes (FRR NFR-9, DC-12).

    The bare `:focus-visible` below was being beaten on specificity: MudBlazor qualifies its own
    focus rules with a class (`.mud-button-root:focus-visible`, 0-2-0), so a lone pseudo-class
    (0-1-0) lost regardless of load order, and every button, link and nav item computed to
    `outline-style: none`. The only remaining cue was a 6%-opacity background tint — invisible in
    practice, and TC-9.04 failed on it.

    The component selectors below match MudBlazor's specificity, and `!important` guards the ring
    against any future component style that removes it. A focus indicator is the one thing a
    component library should not be able to take away: without it the application is unusable by
    keyboard, which is a hard accessibility failure rather than a styling preference.
*/
:focus-visible,
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-icon-button:focus-visible,
.mud-list-item:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mud-palette-primary) !important;
    outline-offset: 2px;
}

/*
    Everything above except the text inputs.

    An outlined field draws its border on `.mud-input-outlined-border`, an absolutely positioned
    overlay carrying the field's 6 px radius; the `<input>` inside it has no radius of its own and
    is inset past the start adornment. So the ring above painted a second, square outline 2 px
    outside the rounded one — a box that began to the right of the lock icon and overhung the field
    top and bottom. Reported on the sign-in password field, but it was on every input in the
    application.

    Nothing is lost by standing down here. Focus already thickens the outlined border to 2 px in
    the primary colour, which is the same cue the ring was added to guarantee, in the shape the
    field actually has. The ring is kept for the underline variants, which have no such border.
*/
.mud-input-outlined .mud-input-slot:focus-visible {
    outline: none !important;
}

/*
    Native form controls on the statically rendered portal pages.

    MudBlazor's inputs need a circuit to bind, and the public pages deliberately have none (FRR R5),
    so the tracking feedback form posts real <select> and <textarea> elements. These rules give them
    the theme's surface, border and radius so the page does not visibly change materials halfway
    down. This is the one place a control is styled by hand rather than by the component library,
    and it is because the component library cannot be used there at all.
*/
.gmc-native-select,
.gmc-native-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.gmc-native-select:focus-visible,
.gmc-native-input:focus-visible {
    border-color: var(--mud-palette-primary);
}

/* Wide tables scroll inside their own container rather than pushing the page sideways. */
.gmc-scroll-x {
    overflow-x: auto;
    max-width: 100%;
}

/* Centred card shell for the pre-authentication pages (sign in, password reset, lockout). */
.gmc-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--mud-palette-background-gray);
}

.gmc-auth-card {
    width: 100%;
    max-width: 420px;
}

/* Blazor's built-in reconnect/error banner, restyled to match the theme. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: 0.875rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Print view: acknowledgement slips, case files and registers (FRR FR-4.2, R1/R2). */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    .gmc-no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .gmc-print-block {
        break-inside: avoid;
    }
}

/*
    Tab labels arrive ALL CAPS from MudBlazor's default text-transform. DC-04 asks for sentence
    case throughout — the markup already reads "Divisions", "Zones", "Ward coverage", so only the
    transform needs undoing.
*/
.mud-tabs .mud-tab {
    text-transform: none;
}

/*
    Touch targets (DC-11). MudBlazor's default button heights are 31–42 px, which is fine with a
    mouse and not with a thumb — the My work queue actions a field worker taps outdoors were the
    smallest of them. Applied only at phone widths so the desktop console keeps its density.
*/
@media (max-width: 600px) {
    .mud-button-root,
    .mud-icon-button {
        min-height: 44px;
    }

    .mud-button-root:not(.mud-icon-button) {
        min-width: 44px;
    }
}

/*
    DC-01 puts the app bar at 60 px. MudBlazor's dense toolbar is 45 and its default is 64, so
    neither matches; pin it and keep the main content's offset in step.
*/
.mud-appbar.mud-appbar-dense,
.mud-appbar.mud-appbar-dense .mud-toolbar-dense {
    height: 60px;
    min-height: 60px;
}

.mud-main-content {
    padding-top: 60px !important;
}