/* Metronic Tailwind v9 demo 8, adapted to Blazor + Radzen.
   Vendor CSS supplies the design tokens. Radzen owns component behaviour.
   Keep chart and delta colours aligned with AGENTS.md. */
:root {
    --rz-text-font-family: "Segoe UI", Arial, sans-serif !important;
    --rz-primary: #2563eb;
    --rz-primary-dark: #1d4ed8;
    --rz-primary-darker: #1e40af;
    --rz-primary-light: #bfdbfe;
    --rz-primary-lighter: #eff6ff;
    --rz-on-primary: #fff;
    --rz-on-primary-lighter: #1d4ed8;
    --rz-secondary: #52525b;
    --rz-base-background-color: #f4f4f5;
    --rz-base-50: #fafafa;
    --rz-base-100: #f4f4f5;
    --rz-base-200: #e4e4e7;
    --rz-base-300: #d4d4d8;
    --rz-base-600: #71717a;
    --rz-base-700: #52525b;
    --rz-base-800: #27272a;
    --rz-base-900: #18181b;
    --rz-base-lighter: #fff;
    --rz-text-color: #18181b;
    --rz-text-secondary-color: #52525b;
    --rz-text-tertiary-color: #71717a;
    --rz-card-background-color: #fff;
    --rz-card-border: 1px solid #e4e4e7;
    --rz-card-border-radius: 0.75rem;
    --rz-card-shadow: 0 2px 3px 0 rgb(0 0 0 / 2%);
    --rz-card-padding: 1.5rem;
    --rz-border-radius: 0.5rem;
    --rz-button-border-radius: 0.5rem;
    --rz-input-border-radius: 0.5rem;
    --rz-input-background-color: #fff;
    --rz-input-border: 1px solid #d4d4d8;
    --rz-input-height: 2.65rem;
    --rz-grid-background-color: #fff;
    --rz-grid-header-background-color: #fafafa;
    --rz-grid-header-color: #52525b;
    --rz-grid-stripe-background-color: #fafafa;
    --rz-grid-hover-background-color: #eff6ff;
    --rz-grid-cell-border: 1px solid #f0f0f1;
    --rz-grid-border: 1px solid #e4e4e7;
    --rz-grid-selected-background-color: #eff6ff;
    --rz-grid-selected-color: #1e40af;
    --rz-series-1: #2a78d6;
    --rz-series-2: #eb6834;
    --rz-series-3: #1baf7a;
}
html:has(body.metronic-demo8) { font-size: 14px; }
body.metronic-demo8 {
    margin: 0;
    color: var(--foreground, #18181b);
    background: var(--muted, #f4f4f5);
    font-family: "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
.metronic-demo8 .rz-text { font-family: inherit; }
.demo8-shell { min-height: 100dvh; padding: 20px 20px 20px 90px; }
.demo8-workspace {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 40px);
    min-width: 0;
    background: var(--background, #fff);
    border: 1px solid var(--input, #e4e4e7);
    border-radius: 12px;
}
.demo8-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 101;
    width: 90px;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: auto;
    padding: 28px 10px 18px;
    gap: 24px;
    background: var(--muted, #f4f4f5);
}
.demo8-brand { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; }
.demo8-brand img { width: 42px; height: 42px; object-fit: contain; }
.demo8-nav { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; flex: 1; }
.demo8-nav-link {
    width: 66px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 3px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #52525b;
    text-decoration: none;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    transition: background-color 120ms, color 120ms;
}
.demo8-nav-link .rzi { font-size: 24px; }
.demo8-nav-link:hover, .demo8-nav-link.active { color: #2563eb; background: #fff; border-color: #e4e4e7; text-decoration: none; }
.demo8-nav-link.active { box-shadow: 0 2px 3px rgb(0 0 0 / 3%); }
.demo8-nav-parent { cursor: pointer; background: transparent; font-family: inherit; }
.demo8-nav-parent.is-open:not(.active) { color: #52525b; background: #fff; border-color: #e4e4e7; }
.demo8-nav-parent .demo8-nav-caret { font-size: 14px; margin-top: -3px; }
.demo8-nav-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 4px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #ececee;
}
.demo8-nav-sublink { min-height: 50px; padding: 6px 3px; font-size: 10px; }
.demo8-nav-sublink .rzi { font-size: 20px; }
.demo8-rail-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.demo8-avatar { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #f5d4a8; border-radius: 50%; background: #fff4e5; color: #92400e; font-weight: 600; }
.demo8-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 80px; padding: 18px 32px; border-bottom: 1px solid var(--border, #f0f0f1); }
.demo8-wordmark { width: 125px; height: auto; }
.demo8-toolbar-divider { height: 24px; width: 1px; background: #e4e4e7; margin: 0 6px; }
.demo8-toolbar-title { color: #52525b; font-weight: 500; font-size: 13px; }
.demo8-location { font-size: 12px; color: #71717a; white-space: nowrap; }
.demo8-location .rzi { font-size: 17px; }
.demo8-content { flex: 1; min-width: 0; padding: 32px; }
.demo8-content:focus { outline: none; }
.demo8-content > .rz-stack { min-width: 0; }
.demo8-content h3 { font-weight: 600; font-size: 1.6rem; letter-spacing: -0.025em; }
.demo8-content .rz-breadcrumb { font-size: 12px; }
.demo8-content .rz-card { border: 1px solid #e4e4e7; border-radius: 12px; box-shadow: 0 2px 3px rgb(0 0 0 / 2%); }
.metronic-demo8 .rz-button { text-transform: none; letter-spacing: normal; box-shadow: none; font-weight: 600; }
.metronic-demo8 .rz-data-grid { border-radius: 9px; }
.metronic-demo8 .rz-grid-table thead th { background: #fafafa; }
.metronic-demo8 .rz-grid-table thead th .rz-column-title { font-size: 12px; font-weight: 600; }
.metronic-demo8 .rz-grid-table td { font-size: 13px; }
.metronic-demo8 .rz-label { font-size: 12px; font-weight: 600; color: #52525b; }
.metronic-demo8 .rz-dropdown, .metronic-demo8 .rz-multiselect, .metronic-demo8 .rz-textbox, .metronic-demo8 .rz-datepicker { max-width: 100%; }
.demo8-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 32px; color: #71717a; font-size: 12px; border-top: 1px solid var(--border, #f0f0f1); }
.demo8-overview { max-width: 1260px; margin: 0 auto; }
.demo8-overview .rz-text { margin: 0; }
.demo8-muted { color: #71717a; line-height: 1.65; }
.demo8-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: #71717a; }
.demo8-page-title { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.demo8-section-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.demo8-content .demo8-welcome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 30px; background: #fafafa; }
.demo8-welcome .rz-text-h4 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.demo8-welcome .rz-text-body1 { color: #71717a; max-width: 490px; }
.demo8-welcome .demo8-eyebrow { color: #9a5700; }
.demo8-welcome-icon { display: grid; place-items: center; width: 130px; height: 130px; flex-shrink: 0; border: 1px solid #e4e4e7; border-radius: 24px; background: #fff; color: #2563eb; transform: rotate(-6deg); }
.demo8-welcome-icon .rzi { font-size: 64px; }
.demo8-primary-link { display: inline-flex; align-self: flex-start; flex-direction: row-reverse; gap: 10px; padding: 10px 14px; background: #2563eb; color: #fff !important; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none !important; }
.demo8-primary-link:hover { background: #1d4ed8; }
.demo8-primary-link .rzi { font-size: 17px; }
.demo8-report-card { display: flex; flex-direction: column; height: 100%; gap: 14px; padding: 24px; }
.demo8-report-card .rz-text-h5 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.demo8-report-card .demo8-muted { max-width: 420px; font-size: 13px; flex: 1; }
.demo8-report-icon { display: grid; place-items: center; width: 43px; height: 43px; font-size: 24px; border: 1px solid #e4e4e7; border-radius: 9px; color: #52525b; background: #fafafa; }
.demo8-report-category { color: #71717a; font-size: 9px; letter-spacing: 0.07em; font-weight: 600; }
.demo8-report-link { display: inline-flex; flex-direction: row-reverse; align-self: flex-start; align-items: center; gap: 8px; color: #2563eb; font-size: 12px; font-weight: 600; margin-top: 4px; }
.demo8-report-link .rzi { font-size: 16px; }
.demo8-content .demo8-note { display: flex; gap: 14px; background: #fafafa; box-shadow: none; }
.demo8-note > .rzi { color: #71717a; font-size: 20px; flex-shrink: 0; }
.demo8-note .rz-text-body2 { font-size: 12px; }
.demo8-mobile-header { display: none; }
.demo8-skip { position: fixed; left: 100px; top: -80px; z-index: 2000; padding: 12px; background: #fff; border: 2px solid #2563eb; border-radius: 6px; }
.demo8-skip:focus { top: 24px; }
.metronic-demo8 a:focus-visible, .metronic-demo8 button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
/* Keep server-rendered account forms and their validation flow intact. */
.metronic-demo8 .login-shell { background: #f4f4f5; font-family: "Segoe UI", Arial, sans-serif; }
.metronic-demo8 .login-brand { background: #fafafa; border-color: #e4e4e7; }
.metronic-demo8 .login-pane { padding: 32px; min-width: 0; }
.metronic-demo8 .login-pane-inner { width: 430px; max-width: 100%; padding: 32px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; box-shadow: 0 2px 3px rgb(0 0 0 / 2%); }
.metronic-demo8 .login-pane-inner { min-width: 0; }
.metronic-demo8 .login-header h3 { color: #18181b; }
.metronic-demo8 .login-header p, .metronic-demo8 .login-field > label, .metronic-demo8 .login-check, .metronic-demo8 .login-text, .metronic-demo8 .login-steps > li { color: #52525b; }
.metronic-demo8 .login-row { flex-wrap: wrap; gap: 12px; }
.metronic-demo8 .login-footer { flex-wrap: wrap; text-align: center; color: #71717a; border-color: #e4e4e7; }
.metronic-demo8 .login-link, .metronic-demo8 .login-text a { color: #1d4ed8; }
.metronic-demo8 .login-version { color: #71717a; }
.metronic-demo8 .login-key { max-width: 100%; overflow-wrap: anywhere; }
.metronic-demo8 .login-submit { background: #2563eb; border-radius: 7px; font-size: 14px; height: 44px; }
.metronic-demo8 .login-submit:hover { background: #1d4ed8; }
.metronic-demo8 .login-input { height: 44px; border-radius: 7px; font-size: 14px; background: #fff; color: #18181b; border-color: #d4d4d8; }
.metronic-demo8 .login-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.metronic-demo8 .login-check input { accent-color: #2563eb; }
.metronic-demo8 .login-link:hover { color: #2563eb; }
@media (min-width: 1600px) { .demo8-content { padding: 40px; } }
@media (max-width: 1023px) {
    .demo8-shell { padding: 70px 12px 12px; }
    .demo8-workspace { min-height: calc(100dvh - 82px); }
    .demo8-mobile-header { display: flex; position: fixed; inset: 0 0 auto; z-index: 102; align-items: center; justify-content: space-between; height: 60px; padding: 10px 20px; background: #f4f4f5; border-bottom: 1px solid #e4e4e7; }
    .demo8-mobile-header img { width: 125px; }
    .demo8-rail { display: none; inset: 60px 12px auto; width: auto; max-height: calc(100dvh - 80px); border: 1px solid #e4e4e7; border-radius: 12px; padding: 16px; box-shadow: 0 8px 20px rgb(0 0 0 / 10%); background: #fff; }
    .demo8-rail.is-open { display: flex; }
    .demo8-rail .demo8-brand { display: none; }
    .demo8-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .demo8-nav-link { width: 100%; min-height: 70px; }
    .demo8-nav-link.active { background: #eff6ff; border-color: #bfdbfe; }
    .demo8-nav-sub { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; }
    .demo8-nav-sublink { min-height: 62px; }
    .demo8-rail-footer { flex-direction: row; width: 100%; justify-content: space-between; }
    .demo8-toolbar { min-height: 62px; padding: 16px 22px; }
    .demo8-toolbar .demo8-wordmark, .demo8-toolbar-divider { display: none; }
    .demo8-content { padding: 24px 22px; }
    .demo8-footer { padding: 20px 22px; }
    .demo8-skip { left: 16px; }
}
@media (max-width: 575px) {
    .demo8-content { padding: 22px 16px; }
    .demo8-toolbar { padding: 14px 16px; gap: 8px; }
    .demo8-toolbar-title, .demo8-location { font-size: 11px; }
    .demo8-page-title { font-size: 24px; }
    .demo8-content .demo8-welcome { padding: 22px; }
    .demo8-welcome-icon { display: none; }
    .demo8-welcome .rz-text-h4 { font-size: 21px; }
    .demo8-footer { padding: 18px 16px; }
    .metronic-demo8 .login-pane { padding: 16px; }
    .metronic-demo8 .login-pane-inner { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { .demo8-nav-link { transition: none; } }
@media print {
    .demo8-rail, .demo8-mobile-header, .demo8-toolbar, .demo8-footer, .demo8-skip { display: none !important; }
    .demo8-shell, .demo8-content { padding: 0; }
    .demo8-workspace { border: 0; min-height: 0; }
    body.metronic-demo8 { background: #fff; }
}