:root {
    color-scheme: light;
    --color-primary: #0F766E;
    --color-primary-hover: #115E59;
    --color-primary-active: #134E4A;
    --color-primary-soft: #E6F4F1;
    --color-primary-ring: rgba(15, 118, 110, 0.18);
    --color-secondary: #2563EB;
    --color-accent: #F59E0B;
    --color-whatsapp: #128C7E;
    --color-bg: #F4F7F6;
    --color-surface: #FFFFFF;
    --color-surface-raised: rgba(255, 255, 255, 0.88);
    --color-surface-subtle: #EEF3F2;
    --color-border: #D6DFDD;
    --color-border-strong: #B9C7C4;
    --color-text: #111827;
    --color-text-muted: #4A5A63;
    --color-disabled-bg: #E5E7EB;
    --color-disabled-text: #94A3B8;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-error: #DC2626;
    --color-info: #0284C7;
    --color-focus: #99F6E4;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(16, 40, 38, 0.06);
    --shadow-sm: 0 1px 2px rgba(16, 40, 38, 0.05), 0 2px 8px rgba(16, 40, 38, 0.05);
    --shadow-md: 0 2px 4px rgba(16, 40, 38, 0.05), 0 10px 24px rgba(16, 40, 38, 0.07);
    --backdrop-pattern: url("images/nomural-backdrop.svg");
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background-color: var(--color-bg);
}

/*
 * App backdrop: a low-contrast neighborhood pattern under two soft color washes.
 * `background-attachment` stays at the default `scroll` on purpose; `fixed` forces
 * repaints on mobile Safari/Chrome and would work against the public feed budget.
 */
body {
    min-height: 100%;
    margin: 0;
    background-color: var(--color-bg);
    background-image:
        radial-gradient(120% 46% at 50% 0%, rgba(15, 118, 110, 0.10) 0%, rgba(15, 118, 110, 0) 64%),
        radial-gradient(80% 32% at 100% 0%, rgba(245, 158, 11, 0.07) 0%, rgba(245, 158, 11, 0) 60%),
        var(--backdrop-pattern);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top center, top right, top left;
    background-size: 100% 32rem, 100% 22rem, 180px 180px;
    color: var(--color-text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

body,
button,
input,
textarea,
select {
    letter-spacing: 0;
}

a {
    color: var(--color-secondary);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

button,
a,
.mud-button-root,
.mud-icon-button {
    min-height: 44px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li {
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    letter-spacing: -0.01em;
}

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

.invalid {
    outline: 1px solid var(--color-error);
}

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

.blazor-error-boundary {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-error);
    color: white;
}

.blazor-error-boundary::after {
    content: "Algo saiu do esperado.";
}

/*
 * Hide Blazor Interactive Server reconnect chrome. Without a custom
 * #components-reconnect-modal host, blazor.web.js injects a default overlay
 * with "Rejoining the server...". The host stays in the document so that
 * default overlay is never created; !important beats the framework's inline
 * host.style.display = "block". Auto-reconnect / retry / reload stay in JS.
 */
#components-reconnect-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Shared auth gate used by AuthorizeRouteView when session is missing.
   Fills the seller layout's flexible row instead of the whole viewport, so the
   layout brand bar does not push it into an overflow. */
.auth-gate {
    display: grid;
    align-content: center;
    justify-items: center;
    width: 100%;
    min-height: 100%;
    padding: var(--space-3) 0;
}

.auth-gate__card {
    width: min(100%, 24rem);
}

.auth-gate__card .app-empty-state {
    flex-direction: column;
    align-items: stretch;
}

.auth-gate__card .app-empty-state__action {
    width: 100%;
}

/* Neutralize MudBlazor main-content app-bar offset on layouts without an app bar. */
.mud-layout > .mud-main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Let the app backdrop read through MudBlazor's own surface defaults. */
.mud-layout,
.mud-main-content {
    background-color: transparent;
}

/* Inputs pick up the softened card language instead of MudBlazor's default grey. */
.mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: var(--color-border);
}

.mud-input-outlined:hover:not(.mud-disabled) > .mud-input-outlined-border {
    border-color: var(--color-border-strong);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}