/* ── Base reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

h1:focus { outline: none; }

/* ── Utility classes ────────────────────────────────────────────── */
.fade-in  { animation: fadeIn  0.3s ease-in-out; }
.slide-up { animation: slideUp 0.3s ease-out; }

.card-hover { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card-hover:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

@keyframes fadeIn  { from { opacity: 0; }                         to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Blazor error UI ────────────────────────────────────────────── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0; left: 0;
    display: none; width: 100%;
    padding: 0.6rem 1.25rem;
    position: fixed;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    z-index: 1000;
    font-size: 0.875rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Blazor form validation ─────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid hsl(142, 76%, 36%); }
.invalid                              { outline: 1px solid hsl(0, 84%, 60%); }
.validation-message                   { color: hsl(0, 84%, 60%); font-size: 0.8rem; margin-top: 0.25rem; }

/* ── Radzen DatePicker — match Tailwind input look ───────────────
   Radzen renders <.rz-datepicker> as a wrapper and puts the visible
   border + radius on the inner <.rz-inputtext>. Target both. */
.rz-datepicker {
    width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
}
.rz-datepicker > .rz-inputtext {
    border: 1px solid hsl(214, 32%, 91%) !important;
    border-radius: 0.75rem !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
}
.rz-datepicker > .rz-inputtext:focus,
.rz-datepicker:focus-within > .rz-inputtext {
    outline: none !important;
    border-color: hsl(217, 91%, 60%) !important;
    box-shadow: 0 0 0 2px hsla(217, 91%, 60%, 0.3) !important;
}