h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid var(--gym-danger);
}

.validation-message {
    color: var(--gym-danger);
}

.blazor-error-boundary {
    background: var(--gym-danger);
    color: var(--gym-accent-ink);
    padding: 1rem 1rem 1rem 3.7rem;
    position: relative;
}

    /* Was a base64 SVG with a hard-coded yellow baked into the image. Bootstrap Icons is
       already loaded app-wide, so the warning mark is a glyph that takes the theme colour. */
    .blazor-error-boundary::before {
        content: "\F33A";
        font-family: "bootstrap-icons";
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8rem;
        line-height: 1;
    }

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

.darker-border-checkbox.form-check-input {
    border-color: var(--gym-border-strong);
}

/* Global type normalization: standard sizes, and cap bold at semi-bold (600)
   so <strong>, <b> and headings never render heavier than the rest of the UI. */
strong, b { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

/* Print: show only the receipt, hide app chrome and .no-print elements. */
@media print {
    /* A RECEIPT prints alone — everything else on that page is hidden so an 80mm roll
       gets the receipt and nothing else.

       :has() scopes that isolation to pages where a receipt actually exists. Without it
       `body *` hid every element on EVERY page, so every report printed a blank sheet —
       the Print buttons had never produced anything but paper. :has() is safe here: this
       app already requires a Chromium new enough for color-mix(), which is later. */
    body:has(.receipt-print) * { visibility: hidden; }
    body:has(.receipt-print) .receipt-print,
    body:has(.receipt-print) .receipt-print * { visibility: visible; }
    body:has(.receipt-print) .receipt-print { position: absolute; left: 0; top: 0; width: 80mm; border: none; }
    .no-print { display: none !important; }
}