/* Maps Radzen's CSS variables onto SEVERITY5 design tokens and sets app-wide
   base styles. Load order in the host: Radzen base theme, tokens.css, theme.css.
   Override Radzen via variables, never selectors — survives Radzen upgrades. */

:root {
    --rz-primary: var(--s5-color-primary);
    --rz-primary-light: color-mix(in srgb, var(--s5-color-primary) 70%, #ffffff);
    --rz-primary-lighter: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-primary-dark: var(--s5-color-primary-strong);
    --rz-primary-darker: color-mix(in srgb, var(--s5-color-primary-strong) 80%, #000000);

    --rz-secondary: var(--s5-color-accent);
    --rz-success: var(--s5-success);
    --rz-danger: var(--s5-danger);
    --rz-warning: var(--s5-warning);
    --rz-info: var(--s5-info);

    --rz-base-background-color: var(--s5-bg);
    --rz-body-background-color: var(--s5-bg);
    --rz-content-background-color: var(--s5-surface);
    --rz-panel-background-color: var(--s5-surface);

    --rz-text-color: var(--s5-text);
    --rz-text-secondary-color: var(--s5-text-muted);
    --rz-text-title-color: var(--s5-text);
    --rz-text-contrast-color: var(--s5-text-on-primary);

    --rz-border-radius: var(--s5-radius-sm);
    --rz-input-background-color: var(--s5-surface-muted);
    --rz-input-border: 1px solid var(--s5-border);
    --rz-input-value-color: var(--s5-text);
    --rz-input-placeholder-color: var(--s5-text-muted);

    --rz-grid-header-background-color: var(--s5-surface-muted);
    --rz-grid-stripe-background-color: transparent;
    --rz-grid-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 8%, transparent);
    --rz-grid-foot-background-color: var(--s5-surface-muted);
    --rz-grid-foot-cell-color: var(--s5-text);

    /* Modern grid chrome: kill the light default borders that read as
       white hairlines on the dark theme. */
    --rz-grid-border: none;
    --rz-grid-cell-border: none;
    --rz-grid-header-border: 1px solid var(--s5-border);
    --rz-grid-header-cell-border: none;
    --rz-grid-foot-cell-border-top: 1px solid var(--s5-border);
    --rz-grid-frozen-cell-shadow: none;

    /* Dropdown highlight was white-on-white: selected + hover states must
       carry dark-theme colors explicitly. */
    --rz-dropdown-item-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-dropdown-item-hover-color: var(--s5-text);
    --rz-dropdown-item-selected-background-color: color-mix(in srgb, var(--s5-color-primary) 26%, transparent);
    --rz-dropdown-item-selected-color: var(--s5-text);
    --rz-multiselect-item-hover-background-color: color-mix(in srgb, var(--s5-color-primary) 16%, transparent);
    --rz-multiselect-item-hover-color: var(--s5-text);
    --rz-multiselect-item-selected-background-color: color-mix(in srgb, var(--s5-color-primary) 26%, transparent);
    --rz-multiselect-item-selected-color: var(--s5-text);

    --rz-dialog-background-color: var(--s5-surface);
    --rz-notification-content-color: var(--s5-text);
}

/* Row separators: one soft line, no vertical cell rules — the dated
   "spreadsheet border" look came from Radzen's per-cell borders. */
.rz-grid-table td,
.rz-grid-table th {
    border-left: none !important;
    border-right: none !important;
}

.rz-grid-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--s5-border) 60%, transparent) !important;
}

.rz-grid-table tr:last-child td {
    border-bottom: none !important;
}

.rz-data-grid {
    border: 1px solid var(--s5-border) !important;
    border-radius: var(--s5-radius) !important;
    overflow: hidden;
}

body {
    background: var(--s5-bg);
    color: var(--s5-text);
    font-family: var(--s5-font-family);
    margin: 0;
}