h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hexkoel-auth-background {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(160deg, #0B6E4F 0%, #08532F 45%, #0B3D2C 100%);
}

.hexkoel-auth-card {
    border-radius: 16px !important;
}

.hexkoel-nav-header {
    padding: 20px 16px 12px 16px;
}

.hexkoel-dashboard-card {
    height: 100%;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.hexkoel-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

.hexkoel-dashboard-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* Login form fields use plain Blazor <InputText>/<InputCheckbox>, not MudBlazor
   inputs, because this page must render as static SSR (SignInManager writes the
   auth cookie during request processing) and MudBlazor's form components don't
   emit the name="Input.X" attributes that [SupplyParameterFromForm] needs to
   bind a static form post. Styled by hand to match the rest of the UI. */
.hexkoel-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hexkoel-field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
}

.hexkoel-field-input {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    padding: 10px 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hexkoel-field-input:focus-within {
    border-color: #0B6E4F;
    box-shadow: 0 0 0 2px rgba(11, 110, 79, 0.15);
}

.hexkoel-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
}

.hexkoel-field-error {
    color: #e50000;
    font-size: 0.75rem;
}

.hexkoel-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hexkoel-checkbox-row label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.75);
}
/* Shared data-table look.
   Applied as Class="hexkoel-table" on a MudTable, together with
   Dense="true" Hover="true" FixedHeader="true".

   max-height (not MudTable's Height parameter) is deliberate: Height is a
   FIXED height, so a three-row table would render a mostly-empty box. A
   max-height grows to fit the content and only starts scrolling once the
   table is taller than the cap, while still giving the sticky header a
   scroll container to stick to. */
.hexkoel-table .mud-table-container {
    max-height: 70vh;
}

/* Headers never wrap. Because the header is almost always wider than the
   value beneath it ("Purchase amount" vs "R 12 500.00"), this alone stops
   the numeric and date columns wrapping, with no per-cell styles. Long
   free-text columns (names, addresses) still wrap, which is what keeps the
   overall table width down. */
.hexkoel-table th {
    white-space: nowrap;
}

/* Rows that expand. Applied per row, not to the whole table, so a row with
   nothing underneath it does not advertise a click that does nothing. */
.hexkoel-row-expandable {
    cursor: pointer;
}