/* ============================================================
   ArICO.Web — App-level CSS overrides
   ARICO Design System tokens live in /css/arico.css (loaded first).
   This file holds only Blazor-specific framework overrides.
   ============================================================ */

/* Blazor validation states — use ARICO tokens */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--brand);
}

.invalid {
    outline: 1px solid var(--target-500);
}

.validation-message {
    color: var(--target-500);
    font-size: var(--text-xs);
    margin-top: 4px;
}

/* Blazor error boundary — restyled to ARICO tokens */
.blazor-error-boundary {
    background: var(--target-50);
    color: var(--target-700);
    padding: var(--s-6) var(--s-7);
    border-radius: var(--r-xl);
    border: 1px solid var(--target-300, #f17171);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    margin: var(--s-7);
}

.blazor-error-boundary::after {
    content: "오류가 발생했습니다. 페이지를 다시 불러와 주세요.";
    display: block;
    margin-top: 4px;
    color: var(--target-700);
    font-weight: var(--w-semibold);
}

/* Blazor reconnect modal — neutralize default Bootstrap-y styles */
#components-reconnect-modal {
    font-family: var(--font-sans);
}