:root {
    color-scheme: light;
    --brand-navy: #192a41;
    --brand-navy-dark: #101b2b;
    --brand-bronze: #947551;
    --brand-bronze-light: #b3936a;
    --brand-cream: #f7f5f1;
    --surface-page: #f7f5f1;
    --surface-elevated: #ffffff;
    --surface-subtle: #f0ede7;
    --surface-sidebar: #101b2b;
    --text-primary: #26344a;
    --text-secondary: #5b6779;
    --text-on-dark: #ffffff;
    --border-color: #e1ddd4;
    --focus-color: #7b5b37;
    --success-color: #2f7d50;
    --warning-color: #9a6310;
    --danger-color: #b33a32;
    --shadow-soft: 0 1px 3px rgba(16, 27, 43, .08);
    --shadow-raised: 0 12px 30px rgba(16, 27, 43, .14);
    --radius-sm: .35rem;
    --radius-md: .6rem;
    --radius-lg: .85rem;
    --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --font-display: "Fraunces", Georgia, serif;
    --rz-primary: #192a41;
    --rz-primary-light: #30435d;
    --rz-primary-lighter: #e7ebef;
    --rz-primary-dark: #101b2b;
    --rz-secondary: #947551;
    --rz-base-background-color: #ffffff;
    --rz-body-background-color: #f7f5f1;
    --rz-text-color: #26344a;
    --rz-text-title-color: #192a41;
    --rz-text-secondary-color: #5b6779;
    --rz-base-50: #faf9f7;
    --rz-base-100: #f7f5f1;
    --rz-base-200: #efede8;
    --rz-base-300: #e1ddd4;
    --rz-base-400: #c4beb3;
    --rz-base-500: #8a8378;
    --rz-success: #2f7d50;
    --rz-warning: #9a6310;
    --rz-danger: #b33a32;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #0c1522;
    --surface-elevated: #152338;
    --surface-subtle: #1c2d45;
    --surface-sidebar: #080f19;
    --text-primary: #f5f2ec;
    --text-secondary: #b9c1cc;
    --text-on-dark: #ffffff;
    --border-color: #314158;
    --focus-color: #d1af82;
    --success-color: #65bd83;
    --warning-color: #e4b15f;
    --danger-color: #ef7c74;
    --shadow-soft: 0 1px 4px rgba(0, 0, 0, .35);
    --shadow-raised: 0 16px 36px rgba(0, 0, 0, .42);
    --rz-primary: #b3936a;
    --rz-primary-light: #c8aa84;
    --rz-primary-lighter: #2b3340;
    --rz-primary-dark: #947551;
    --rz-secondary: #b3936a;
    --rz-base-background-color: #152338;
    --rz-body-background-color: #0c1522;
    --rz-text-color: #f5f2ec;
    --rz-text-title-color: #ffffff;
    --rz-text-secondary-color: #b9c1cc;
    --rz-base-50: #101b2b;
    --rz-base-100: #152338;
    --rz-base-200: #1c2d45;
    --rz-base-300: #314158;
    --rz-base-400: #58677a;
    --rz-base-500: #8995a5;
    --rz-success: #65bd83;
    --rz-warning: #e4b15f;
    --rz-danger: #ef7c74;
}

* { box-sizing: border-box; }
/* MainLayout owns the horizontal page spacing, including all loading states. */
.rz-body { padding-inline: 0; }
.rz-body:has(.companies-chart-page) { padding-bottom: 0; }
html, body { min-height: 100%; }
html { background: var(--surface-page); }

body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.theme-logo {
    display: block;
    content: url("/branding/denali-logo.png");
}

:root[data-theme="dark"] .theme-logo {
    content: url("/branding/denali-logo-white.png");
}

.sidebar-brand img,
.theme-mark {
    display: block;
    content: url("/branding/denali-mark.png");
}

:root[data-theme="dark"] .sidebar-brand img,
:root[data-theme="dark"] .theme-mark {
    content: url("/branding/denali-mark-white.png");
}

button, input, select, textarea { font-family: inherit; }
a { color: var(--rz-primary); }
h1, h2, h3 { color: var(--rz-text-title-color); font-family: var(--font-display); letter-spacing: -.01em; }
h1:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 1rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success-color); }
.invalid { outline: 1px solid var(--danger-color); }
.validation-message { color: var(--danger-color); font-size: .82rem; margin-top: .25rem; }

#blazor-error-ui {
    background: var(--surface-elevated);
    border-top: 2px solid var(--danger-color);
    bottom: 0;
    box-shadow: var(--shadow-raised);
    color: var(--text-primary);
    display: none;
    left: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; }

.skeleton {
    animation: skeleton-pulse 1.35s ease-in-out infinite;
    background: linear-gradient(90deg, var(--surface-subtle), var(--border-color), var(--surface-subtle));
    background-size: 220% 100%;
    border-radius: var(--radius-sm);
    display: block;
}

.page-skeleton { display: grid; gap: 1.25rem; width: 100%; }
.skeleton-header { display: grid; gap: .65rem; padding-block: .25rem .75rem; }
.skeleton-title { height: 2.1rem; max-width: 19rem; width: 45%; }
.skeleton-subtitle { height: .9rem; max-width: 31rem; width: 70%; }
.skeleton-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.skeleton-card { height: 6.2rem; }
.skeleton-panel { background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); display: grid; gap: .85rem; padding: 1.2rem; }
.skeleton-row { height: 2.4rem; width: 100%; }
.skeleton-row:nth-child(2n) { width: 88%; }
.skeleton-row:nth-child(3n) { width: 94%; }

@keyframes skeleton-pulse {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .skeleton { animation: none; }
}

/* Radzen exposes a narrow resize target at each header edge. Keep it unobtrusive until used. */
.rz-data-grid {
    --rz-grid-column-resizer-width: 12px;
    --rz-grid-column-resizer-helper-width: 2px;
    --rz-grid-column-resizer-helper-background-color: var(--focus-color);
}
.rz-data-grid .rz-column-resizer { touch-action: none; }
.rz-data-grid .rz-column-resizer::after {
    background-color: transparent;
    border-radius: 2px;
    height: auto;
    inset-block: .5rem;
}
.rz-data-grid .rz-column-resizer:hover::after,
.rz-data-grid .rz-column-resizer:active::after,
.rz-data-grid .rz-column-resizer:focus-visible::after,
.rz-data-grid th.rz-state-focused .rz-column-resizer::after,
/* Radzen expands the active resize target to the header width until mouse/touch release. */
.rz-data-grid .rz-column-resizer[style*="width: 100%"]::after {
    background-color: var(--focus-color);
}
@media (pointer: coarse) {
    .rz-data-grid { --rz-grid-column-resizer-width: 20px; }
}