/* Multi-line text truncation */
.text-truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* WCAG 2.4.1 (Level A) — Skip to main content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-to-content:focus {
    position: fixed;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 8px 16px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* WCAG 2.4.7 (Level AA) — Focus visible indicators */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* FocusOnNavigate (App.razor) sets tabindex="-1" on the page h1 after every
   route change so screen readers announce it. Suppress the visible ring -
   the heading is not interactive and the outline reads as a UI glitch. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* App Bar — Company logo responsive sizing */
.app-logo {
    max-width: 120px;
}

@media (max-width: 599.98px) {
    .app-logo {
        max-width: 80px;
        max-height: 32px;
    }
}

/* ColourPickerField — the end-adornment swatch shows the bound colour (--swatch-colour on the
   wrapper). The visible square keeps an outline so an empty or pale swatch still has a visible
   edge (WCAG 1.4.11); the icon's invisible 24x24 bounding rect gets no outline. */
.nova-colour-picker .mud-input-adornment-end .mud-svg-icon {
    color: var(--swatch-colour, transparent);
}

.nova-colour-picker .mud-input-adornment-end .mud-svg-icon rect:not([fill="none"]) {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1px;
}

/* WCAG 2.2.2 (Level A) — Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode — targeted overrides applied via .nova-high-contrast on MudLayout */

/* Containers + inputs */
.nova-high-contrast .mud-input-outlined .mud-input-outlined-border,
.nova-high-contrast .mud-paper,
.nova-high-contrast .mud-card,
.nova-high-contrast .mud-table {
    border-width: 2px !important;
    border-color: currentColor !important;
}

/* Buttons */
.nova-high-contrast .mud-button-outlined,
.nova-high-contrast .mud-icon-button {
    border: 2px solid currentColor !important;
}
.nova-high-contrast .mud-button-text:hover,
.nova-high-contrast .mud-button-text:focus-visible {
    text-decoration: underline !important;
}

/* Chips */
.nova-high-contrast .mud-chip {
    border: 2px solid currentColor !important;
}

/* Alerts and snackbars */
.nova-high-contrast .mud-alert,
.nova-high-contrast .mud-snackbar {
    border: 2px solid currentColor !important;
}
.nova-high-contrast .mud-alert-message {
    color: inherit !important;
    opacity: 1 !important;
}

/* Switches, checkboxes, radios — make the off state visible */
.nova-high-contrast .mud-switch-track {
    border: 2px solid currentColor !important;
    opacity: 1 !important;
}
.nova-high-contrast .mud-checkbox .mud-icon-root,
.nova-high-contrast .mud-radio .mud-icon-root {
    color: currentColor !important;
}

/* Tabs active indicator */
.nova-high-contrast .mud-tab-slider {
    height: 4px !important;
    background-color: currentColor !important;
}

/* Links and underlines */
.nova-high-contrast a,
.nova-high-contrast .mud-link {
    text-decoration: underline !important;
}

/* Secondary / muted text */
.nova-high-contrast .mud-text-secondary,
.nova-high-contrast .mud-typography-caption,
.nova-high-contrast .mud-input-helper-text {
    color: inherit !important;
    opacity: 1 !important;
}

/* Disabled state — bump from ~38% to 70% so it remains readable */
.nova-high-contrast .mud-disabled,
.nova-high-contrast [disabled],
.nova-high-contrast .mud-button-disabled {
    opacity: 0.7 !important;
}

/* Focus rings */
.nova-high-contrast *:focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 2px !important;
}