/* =========================================================================
   CCMSBlazor — global base.
   Token, typography, and component sheets are imported here so a single
   <link> in App.razor pulls in the whole design system.
   ========================================================================= */
@import url('css/tokens.css');
@import url('css/typography.css');
@import url('css/components.css');
@import url('css/calendar.css');
@import url('css/clients.css');
@import url('css/reports.css');
@import url('css/editors.css');
@import url('css/compliance-register.css');
@import url('css/dashboard.css');

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--surface-page);
    color: var(--ink-strong);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Blazor error UI (kept, restyled) ---------- */
#blazor-error-ui {
    background: var(--alert);
    color: white;
    padding: var(--sp-3) var(--sp-4);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    font-family: var(--font-body);
    z-index: 1000;
}

#blazor-error-ui[style*="display: block"] { display: flex !important; gap: var(--sp-4); align-items: center; }

#blazor-error-ui .dismiss {
    margin-left: auto;
    cursor: pointer;
    font-size: 1.2rem;
}

#blazor-error-ui .reload {
    color: white;
    text-decoration: underline;
}

.blazor-error-boundary {
    background: var(--alert-soft);
    color: var(--alert);
    padding: var(--sp-4);
    border: 1px solid var(--alert);
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "An error has occurred. Please reload the page.";
}

/* ---------- Validation classes (Blazor EditForm) ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ok);
    outline-offset: 0;
}

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

.validation-message {
    color: var(--alert);
    font-size: var(--fs-xs);
    margin-top: 4px;
}