:root {
    --color-primary: #125b7c;
    --color-primary-dark: #0d425d;
    --color-accent: var(--color-primary);
    --color-ink: #17303b;
    --color-muted: #667b84;
    --color-border: #dce6e9;
    --color-background: #f4f7f8;
    --color-surface: #fff;
    --color-primary-soft: #eaf2f8;
    --color-border-strong: #b7c8d3;
    --color-danger: #a03030;
    --color-on-primary: #fff;
    --color-focus: color-mix(in srgb, var(--color-primary) 35%, transparent);
    --kendo-color-primary: var(--color-primary);
    --kendo-color-primary-hover: var(--color-primary-dark);
    --kendo-color-primary-active: var(--color-primary-dark);
    --kendo-color-primary-subtle: var(--color-primary-soft);
    --kendo-color-primary-on-subtle: var(--color-primary-dark);
    --kendo-color-primary-on-surface: var(--color-primary);
    --kendo-color-on-primary: var(--color-on-primary);
    --app-background: var(--color-background);
    --app-heading-color: var(--color-ink);
    color-scheme: light;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    background: var(--color-background);
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--color-background);
    color: var(--color-ink);
}

.page {
    min-height: 100vh;
    background: var(--color-background);
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--app-heading-color);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

h1 { font-size: clamp(2rem, 3vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
h3 { font-size: clamp(1.35rem, 1.8vw, 1.85rem); }

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

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 {
    padding: 1rem;
    background: #b32121;
    color: white;
}

.blazor-error-boundary::after { content: "Der opstod en uventet fejl."; }

/* Grid filter popups render at TelerikRootComponent, outside the grid's scoped CSS.
   Remove the built-in slide transition so the complete menu appears immediately. */
.k-child-animation-container:has(.k-filter-menu) {
    transition: none !important;
}