/* The controls the three Razor Pages hosts share, drawn to match the coordinator site's
   MudBlazor components without any of MudBlazor in them.

   Every colour here is a custom property written by ThemeCss, which takes its values from the
   same RotaPalette that seeds MudTheme. So a button here and a MudButton there are the same
   button, and a palette change reaches both.

   Load order is theme.css, this, then the host's own stylesheet — a host can still overrule
   anything below, and two of them do. */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--mud-typography-default-family);
    font-size: 1rem;
    line-height: var(--mud-typography-default-lineheight);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
}

a { color: var(--mud-palette-primary); }

/* 3px rather than the browser default, because the default ring is invisible against the app bar
   and against a filled button, which between them are most of what gets tabbed to. */
:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Fields ---------------------------------------------------------------
   MudTextField's outlined variant: a 1px rule that thickens to the brand colour on focus,
   rather than a box that changes colour and shifts everything beside it by a pixel. */

label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin: .75rem 0 .2rem;
    color: var(--mud-palette-text-primary);
}

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=url], input[type=search], input[type=date],
input[type=time], select, textarea {
    width: 100%;
    /* No max-width: how wide a field is, is the host's layout and not this file's business.
       Capping it here silently narrowed every field on the portal above phone width. */
    /* 44px, the minimum target every one of these apps is held to. */
    min-height: 44px;
    padding: .5rem .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);
    transition: border-color .15s, box-shadow .15s;
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--mud-palette-text-secondary);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    outline: none;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

input:disabled, select:disabled, textarea:disabled {
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-lines-default);
}

input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] {
    border-color: var(--mud-palette-error);
}

textarea { display: block; resize: vertical; }

/* ---- The file field -------------------------------------------------------
   The browser default here is a grey chip and the words "No file chosen", which is the one
   control on these hosts that still looked like a 1998 form. MudFileUpload draws a button and
   the chosen filename beside it, so this does too — with ::file-selector-button rather than the
   usual trick of hiding the input behind a label, because that trick loses the filename, the
   keyboard focus ring and the validation message all at once. */

input[type=file] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .35rem .5rem;
    font: inherit;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
}

input[type=file]:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-table-hover);
}

input[type=file]::file-selector-button {
    margin-right: .75rem;
    /* Matches MudButton's outlined variant: the pack is reviewed before it changes anything, so
       the button that picks one is not the button that commits it. */
    min-height: 34px;
    padding: .3rem .85rem;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: background-color .15s;
}

input[type=file]::file-selector-button:hover {
    background: var(--mud-palette-table-hover);
}

input[type=file]:disabled, input[type=file]:disabled::file-selector-button {
    color: var(--mud-palette-text-disabled);
    border-color: var(--mud-palette-lines-default);
    cursor: default;
}

/* ---- Buttons --------------------------------------------------------------
   MudButton: sentence case, 6px, .8125rem at 600. Material's SHOUTING is markedly harder to
   scan in a toolbar of eight controls, and this is the same decision RotaTheme's Typography
   makes for the coordinator site. */

button, .button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem 1rem;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: 1px solid transparent;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: background-color .15s;
}

button:hover:not(:disabled), .button-link:hover { background: var(--mud-palette-primary-darken); }

button:disabled {
    color: var(--mud-palette-text-disabled);
    background: var(--mud-palette-action-disabled-background);
    cursor: default;
}

/* The outlined variant, for anything destructive enough to want a moment's pause. */
button.quiet {
    color: var(--mud-palette-error);
    background: transparent;
    border-color: var(--mud-palette-error);
}

button.quiet:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* ---- Surfaces -------------------------------------------------------------- */

.card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--mud-palette-table-lines); }
th { color: var(--mud-palette-text-secondary); font-weight: 600; }
tbody tr:hover { background: var(--mud-palette-table-hover); }

/* ---- Messages -------------------------------------------------------------
   MudAlert's outlined severity variant. The tints are mixed from the status colours rather
   than written out, so they follow the scheme instead of needing a dark-mode copy each. */

.note, .warn, .bad, .good {
    padding: .65rem .85rem;
    margin: 1rem 0;
    font-size: .875rem;
    border: 1px solid;
    border-radius: var(--mud-default-borderradius);
}

.note {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-lines-default);
}

.warn {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

.bad {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
}

.good {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-success) 40%, transparent);
}

.hint { font-weight: 400; color: var(--mud-palette-text-secondary); font-size: .8125rem; }
.field-error { display: block; color: var(--mud-palette-error); font-size: .8125rem; }
.validation-summary-valid { display: none; }

/* A checkbox and its wording are one target, and the target is 44px. */
.check { display: flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 400; }
.check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--mud-palette-primary); }

code {
    padding: .05rem .3rem;
    font-size: .875rem;
    background: var(--mud-palette-background-gray);
    border-radius: 3px;
}