/* B-911 Phase 4 (WCAG 1.4.3): the vivid legacy brand accents survive here as DECORATIVE-ONLY
   tokens. The MudBlazor theme (Nexstate.Web/Theming/NexstateTheme.cs) now uses contrast-safe
   shades for all text/label roles; these bright values are for LARGE, NON-text surfaces only
   (hero flourishes, illustration fills ≥24px) where 1.4.3 does not apply. Never use them for text. */
:root {
    --nexstate-brand-green: #00C853;
    --nexstate-brand-blue: #42A5F5;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Serif font for onboarding/pricing pages (similar to Anthropic Serif) */
.pricing-page,
.pricing-page *,
.pricing-page .mud-typography,
.pricing-page .mud-button-root,
.pricing-page .mud-input,
.pricing-page .mud-input-control,
.pricing-page h1,
.pricing-page h2,
.pricing-page h3,
.pricing-page h4,
.pricing-page p,
.pricing-page span,
.pricing-page button,
.pricing-page div {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif !important;
}

.pricing-page .page-title {
    font-family: 'Source Serif 4', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.pricing-page .plan-name,
.pricing-page .plan-description,
.pricing-page .plan-price,
.pricing-page .feature-item,
.pricing-page .cta-button,
.pricing-page .billing-toggle button {
    font-family: 'Source Serif 4', Georgia, serif !important;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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;
}
/* Screen-reader-only text: visually hidden but announced by assistive tech (the standard sr-only
   pattern). This app loads MudBlazor + app.css but NOT Bootstrap, so `class="visually-hidden"` had
   no definition — the accessible-name spans that use it (e.g. the NotificationBell activator) were
   rendering that text VISIBLY. Defining it here hides it for sighted users while preserving the
   accessible name for screen readers (WCAG 1.1.1 / 4.1.2 — the B-911 accessible-name work). */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* B-1166: the notification bell pulses when a NEW notification arrives (the unread count rises).
   FINITE by design — 3 iterations x 1.2s = 3.6s, then it stops (WCAG 2.2.2 "Pause, Stop, Hide": the
   former `infinite` pulse moved endlessly while anything was unread); NotificationBell also removes the
   class after PulseDuration (4s). The red icon + count badge stay as the persistent cue. Pinned by
   NotificationBellPulseCssTests. */
@keyframes notification-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.notification-pulse {
    animation: notification-pulse 1.2s ease-in-out 3;
}

/* B-1164: the chat FAB pulses when a colleague's team-chat message arrives. FINITE by design —
   3 iterations x 1.2s = 3.6s, then it stops (WCAG 2.2.2 "Pause, Stop, Hide": no motion lasting more
   than 5 seconds); ChatWidget also removes the class after FabPulseDuration (4s). The red count badge
   stays. Decorative only: the same information reaches assistive tech via the widget's polite live
   region. Global (not scoped *.razor.css) because the class lands on MudFab's own <button>, which a
   scoped rule can only reach through ::deep. Pinned by ChatWidgetArrivalPulseCssTests. */
@keyframes nx-chat-fab-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.nx-chat-fab-pulse {
    animation: nx-chat-fab-pulse 1.2s ease-in-out 3;
}

/* Users who asked the OS for reduced motion get no animation — badge (+ the chat's live-region text) only. */
@media (prefers-reduced-motion: reduce) {
    .nx-chat-fab-pulse,
    .notification-pulse {
        animation: none;
    }
}

/* B-251c: dashboard Liegenschaften click-to-expand KPI tile (Copilot R2 #1
   redo). The wrapper is now the MudPaper itself with role="button" +
   tabindex + @onkeydown handler — wrapping MudPaper / MudStack / MudText
   inside a native <button> produces invalid HTML (block-level inside
   button). Only CSS left: pointer cursor + focus-visible ring so the
   tile still reads as interactive. */
.b251c-kpi-button {
    cursor: pointer;
}

.b251c-kpi-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #594ae2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* B-257a: fixed-size slot for the reprocess button / progress spinner conditional in
   ReviewQueue. Prevents row-height jitter caused by intrinsic-size differences between
   MudIconButton Size="Small" and MudProgressCircular Size="Small". */
.b257a-reprocess-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

/* WCAG 2.4.1 (Bypass Blocks) — Phase 1 skip link (audit finding G4).
   Visually hidden (positioned off-screen, not display:none — display:none/
   visibility:hidden would take it out of the tab order and defeat the purpose)
   until it receives keyboard focus, at which point it becomes visible at the
   top-left, above the appbar. Rendered by <SkipLink/> as the FIRST focusable
   element in each shell layout. Theme-aware + WCAG 1.4.3 contrast-safe via the
   B-911 accessible palette tokens (surface / text-primary); the primary-colour
   outline is the WCAG 2.4.7 focus indicator. */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 3000;
}

.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-surface, #ffffff);
    color: var(--mud-palette-text-primary, #1a1a27);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    outline: 3px solid var(--mud-palette-primary, #594ae2);
    outline-offset: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}