/*
   Nauralta huisstijl — design tokens and the mapping of those tokens onto Radzen's own
   CSS variables. Loaded after the Radzen base theme (material-dark-base.css), which
   declares every --rz-* variable in :root; everything below simply re-points them at
   the brand palette so stock Radzen components come out in the house style.

   Values come straight from the design handoff
   (Webapp design huisstijl-handoff.zip -> _ds/.../tokens/*.css). Keep them in sync.
*/

/* ─────────────────────────────────────────────────────────────
   Brand tokens
   ───────────────────────────────────────────────────────────── */
:root {
    /* Brand core */
    --brand-indigo: #9084E0;        /* left stem + dot */
    --brand-purple: #8F2AC9;        /* diagonal (start) */
    --brand-purple-deep: #8245C9;   /* right stem */
    --brand-pink: #DB56D0;          /* diagonal (end) */
    --brand-pink-soft: #E29CD6;     /* arcs (end) */
    --brand-ink: #14121F;

    /* Dark surfaces — the portal is dark-first */
    --bg-0: #14121F; /* page */
    --bg-1: #1B1929; /* raised */
    --bg-2: #232037; /* card */
    --bg-3: #2C2942; /* hover / active */
    --line: #302D46;
    --line-strong: #423C5E;

    /* Text on dark */
    --text-hi: #F5F4FA;
    --text: #C9C7D6;
    --text-mut: #9C9AAC;
    --text-dim: #6E6C82;

    /* Semantic */
    --accent: #DB56D0;
    --accent-2: #9084E0;
    --success: #35C08A;
    --warning: #E8B23F;
    --danger: #E5537B;
    --focus-ring: rgba(219, 86, 208, 0.55);

    /* Signature gradients */
    --grad-brand: linear-gradient(135deg, #8F2AC9 0%, #DB56D0 100%);
    --grad-signal: linear-gradient(135deg, #9084E0 0%, #8F2AC9 52%, #DB56D0 100%);
    --grad-wave: linear-gradient(90deg, #9084E0 0%, #8F2AC9 50%, #DB56D0 100%);

    /* Type */
    --font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
    --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Shadows and the signature glow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.50);
    --glow-accent: 0 8px 30px rgba(219, 86, 208, 0.28);
    --glow-indigo: 0 8px 30px rgba(144, 132, 224, 0.30);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 120ms;
    --dur: 200ms;

    /* Shell metrics, shared by the layout CSS and the responsive rules below. */
    --shell-sidebar-width: 252px;
    --shell-topbar-height: 62px;
}

/* ─────────────────────────────────────────────────────────────
   Radzen palette — the base scale drives nearly every component,
   so most of the house style falls out of these alone.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-base: var(--bg-3);
    --rz-base-50: var(--text-hi);
    --rz-base-100: var(--text-mut);
    --rz-base-200: var(--text-dim);
    --rz-base-300: #55526B;
    --rz-base-400: var(--line-strong);
    --rz-base-500: var(--line-strong);
    --rz-base-600: var(--line);
    --rz-base-700: var(--bg-1);
    --rz-base-800: var(--bg-2);
    --rz-base-900: var(--bg-0);
    --rz-base-light: var(--text-mut);
    --rz-base-lighter: var(--text-hi);
    --rz-base-dark: var(--bg-1);
    --rz-base-darker: var(--brand-ink);
    --rz-base-background-color: var(--bg-2);
    --rz-body-background-color: var(--bg-0);

    --rz-primary: var(--brand-pink);
    --rz-primary-light: var(--brand-pink-soft);
    --rz-primary-lighter: rgba(219, 86, 208, 0.16);
    --rz-primary-dark: var(--brand-purple);
    --rz-primary-darker: #7A24AB;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: var(--brand-pink);

    --rz-secondary: var(--brand-indigo);
    --rz-secondary-light: #A79DE8;
    --rz-secondary-lighter: rgba(144, 132, 224, 0.16);
    --rz-secondary-dark: var(--brand-purple-deep);
    --rz-secondary-darker: #6C3AA6;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: var(--brand-indigo);

    --rz-info: var(--brand-indigo);
    --rz-info-light: #A79DE8;
    --rz-info-lighter: rgba(144, 132, 224, 0.16);
    --rz-info-dark: var(--brand-purple-deep);
    --rz-info-darker: #6C3AA6;
    --rz-on-info-lighter: var(--brand-indigo);

    --rz-success: var(--success);
    --rz-success-light: #5ACFA3;
    --rz-success-lighter: rgba(53, 192, 138, 0.16);
    --rz-success-dark: #2A9A6E;
    --rz-success-darker: #22805C;
    --rz-on-success-lighter: var(--success);

    --rz-warning: var(--warning);
    --rz-warning-light: #EEC468;
    --rz-warning-lighter: rgba(232, 178, 63, 0.16);
    --rz-warning-dark: #BA8E32;
    --rz-warning-darker: #96732A;
    --rz-on-warning-lighter: var(--warning);

    --rz-danger: var(--danger);
    --rz-danger-light: #EB7595;
    --rz-danger-lighter: rgba(229, 83, 123, 0.16);
    --rz-danger-dark: #C43F63;
    --rz-danger-darker: #A03351;
    --rz-on-danger-lighter: var(--danger);

    --rz-text-color: var(--text);
    --rz-text-title-color: var(--text-hi);
    --rz-text-secondary-color: var(--text-mut);
    --rz-text-tertiary-color: var(--text-dim);
    --rz-text-disabled-color: var(--text-dim);

    --rz-text-font-family: var(--font-sans);
    --rz-body-font-size: 0.9375rem; /* 15px — the design's body size */
    --rz-border-radius: var(--r-sm);
    --rz-outline-color: var(--brand-pink);

    --rz-shadow-1: var(--shadow-sm);
    --rz-shadow-2: var(--shadow-sm);
    --rz-shadow-3: var(--shadow-md);
    --rz-shadow-4: var(--shadow-md);
    --rz-shadow-6: var(--shadow-md);
    --rz-shadow-9: var(--shadow-lg);
    --rz-shadow-10: var(--shadow-lg);
}

/* ─────────────────────────────────────────────────────────────
   Typography — Space Mono carries every heading and label,
   IBM Plex Sans carries running text.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-text-h1-font-size: 2rem;
    --rz-text-h2-font-size: 1.875rem;
    --rz-text-h3-font-size: 1.625rem;
    --rz-text-h4-font-size: 1.875rem; /* page titles use H4 throughout the app */
    --rz-text-h5-font-size: 1.375rem;
    --rz-text-h6-font-size: 1.0625rem;
    --rz-text-h1-letter-spacing: -0.02em;
    --rz-text-h2-letter-spacing: -0.02em;
    --rz-text-h3-letter-spacing: -0.02em;
    --rz-text-h4-letter-spacing: -0.02em;
    --rz-text-h5-letter-spacing: -0.01em;
    --rz-text-h6-letter-spacing: 0;
    --rz-text-h1-font-weight: 700;
    --rz-text-h2-font-weight: 700;
    --rz-text-h3-font-weight: 700;
    --rz-text-h4-font-weight: 700;
    --rz-text-h5-font-weight: 700;
    --rz-text-h6-font-weight: 700;
    --rz-text-body1-letter-spacing: 0;
    --rz-text-body2-letter-spacing: 0;
    --rz-text-subtitle1-letter-spacing: 0;
    --rz-text-subtitle2-letter-spacing: 0;
}

.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
}

/* Radzen's own "muted" helper predates the palette above. */
.rz-color-muted, .rz-text-tertiary-color {
    color: var(--text-mut) !important;
}

/* ─────────────────────────────────────────────────────────────
   Buttons — primary is the brand gradient with its glow.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-button-border-radius: var(--r-sm);
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;
    --rz-button-focus-gradient: none;
}

.rz-button {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}

.rz-button:not(.rz-state-disabled):hover {
    transform: translateY(-1px);
}

.rz-button.rz-primary,
.rz-button.rz-shade-default.rz-primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--glow-accent);
    border-color: transparent;
}

.rz-button.rz-primary:not(.rz-state-disabled):hover {
    box-shadow: 0 12px 34px rgba(219, 86, 208, 0.42);
}

/* "Light" is the app's secondary button: a raised surface with a visible edge.
   The shade-qualified selector matches the theme's own specificity, which is what
   RadzenButton emits by default (Shade.Default). */
.rz-button.rz-light,
.rz-button.rz-shade-default.rz-light {
    background-color: var(--bg-2);
    color: var(--text-hi);
    border: 1px solid var(--line-strong);
}

.rz-button.rz-shade-default.rz-light:not(.rz-state-disabled):hover {
    background-color: var(--bg-3);
}

.rz-button.rz-shade-default.rz-danger:not(.rz-state-disabled):hover {
    box-shadow: 0 10px 28px rgba(229, 83, 123, 0.4);
}

/* Text buttons read as ghosts: no fill until they are hovered. */
.rz-button.rz-variant-text:not(.rz-state-disabled):hover {
    background: var(--bg-2);
}

/* ─────────────────────────────────────────────────────────────
   Badges — pill-shaped mono caps, tinted rather than filled.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-badge-border-radius: var(--r-pill);
    --rz-badge-pill-border-radius: var(--r-pill);
    --rz-badge-padding: 4px 10px;
    --rz-badge-pill-padding: 4px 10px;
    --rz-badge-font-size: 0.6875rem;
    --rz-badge-font-weight: 700;
    --rz-badge-letter-spacing: 0.08em;
}

.rz-badge {
    font-family: var(--font-mono);
    line-height: 1rem;
}

.rz-badge.rz-badge-success { background-color: rgba(53, 192, 138, 0.16); color: var(--success); }
.rz-badge.rz-badge-danger { background-color: rgba(229, 83, 123, 0.16); color: var(--danger); }
.rz-badge.rz-badge-warning { background-color: rgba(232, 178, 63, 0.16); color: var(--warning); }
.rz-badge.rz-badge-info { background-color: rgba(144, 132, 224, 0.16); color: var(--brand-indigo); }
.rz-badge.rz-badge-primary { background-color: rgba(219, 86, 208, 0.16); color: var(--brand-pink); }
.rz-badge.rz-badge-secondary { background-color: rgba(144, 132, 224, 0.16); color: var(--brand-indigo); }
.rz-badge.rz-badge-light { background-color: var(--bg-3); color: var(--text-mut); }

/* ─────────────────────────────────────────────────────────────
   Cards, panels and dialogs
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-card-background-color: var(--bg-2);
    --rz-card-flat-background-color: var(--bg-2);
    --rz-card-border: 1px solid var(--line);
    --rz-card-border-radius: var(--r-lg);
    --rz-card-shadow: none;
    --rz-card-padding: 1.375rem 1.5rem;

    --rz-panel-background-color: var(--bg-2);
    --rz-panel-border: 1px solid var(--line);
    --rz-panel-border-radius: var(--r-lg);

    --rz-dialog-background-color: var(--bg-2);
    --rz-dialog-title-background-color: var(--bg-2);
    --rz-dialog-border-radius: var(--r-xl);
    --rz-dialog-title-color: var(--text-hi);
    --rz-dialog-title-font-size: 1.25rem;
    --rz-dialog-title-font-weight: 700;
    --rz-dialog-mask-background-color: #0A0910;
}

.rz-card {
    color: var(--text);
}

/* The dialog wears the brand wave along its top edge, as in the design. */
.rz-dialog {
    border: 1px solid var(--line-strong);
    overflow: hidden;
}

.rz-dialog-titlebar {
    position: relative;
    font-family: var(--font-mono);
}

.rz-dialog-titlebar::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--grad-wave);
}

.rz-dialog-title {
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

.rz-dialog-mask {
    backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────────
   Form controls — recessed fields with a pink focus ring.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-input-background-color: var(--bg-1);
    --rz-input-focus-background-color: var(--bg-1);
    --rz-input-color: var(--text-hi);
    --rz-input-border: 1px solid var(--line-strong);
    --rz-input-border-block-end: 1px solid var(--line-strong);
    --rz-input-border-radius: var(--r-sm);
    --rz-input-focus-border: 1px solid var(--brand-pink);
    --rz-input-focus-border-block-end: 1px solid var(--brand-pink);
    --rz-input-focus-shadow: 0 0 0 3px var(--focus-ring);
    --rz-input-focus-outline: none;
    --rz-input-placeholder-color: var(--text-dim);

    --rz-form-field-label-color: var(--text-mut);
    --rz-form-field-focus-label-color: var(--brand-pink);
    --rz-form-field-outlined-background-color: var(--bg-1);
    --rz-form-field-label-floating-background-color: var(--bg-1);
    --rz-form-field-filled-background-color: var(--bg-1);
    --rz-form-field-filled-hover-background-color: var(--bg-3);
}

.rz-form-field-label,
.rz-label {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

/* Dropdown and date-picker popups sit above the page, so they need the card surface
   rather than the transparent one they inherit. */
.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-datepicker-popup,
.rz-autocomplete-panel {
    background-color: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
}

.rz-dropdown-item.rz-state-highlight,
.rz-multiselect-item.rz-state-highlight {
    background-color: var(--bg-3);
    color: var(--text-hi);
}

/* ─────────────────────────────────────────────────────────────
   Data grids — the hairline table from the design: one card, mono
   caps headers, hairline row rules, a lift on hover.
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-grid-background-color: var(--bg-2);
    --rz-grid-header-background-color: transparent;
    --rz-grid-header-color: var(--text-dim);
    --rz-grid-header-font-size: 0.625rem;
    --rz-grid-header-font-weight: 400;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-cell-border-bottom: 1px solid var(--line);
    --rz-grid-cell-border: none;
    --rz-grid-bottom-cell-border: 1px solid var(--line);
    --rz-grid-cell-color: var(--text);
    --rz-grid-cell-font-size: 0.875rem;
    --rz-grid-cell-padding: 1rem 0.5rem;
    --rz-grid-header-cell-padding: 0.875rem 0.5rem;
    --rz-grid-hover-background-color: var(--bg-1);
    --rz-grid-hover-color: var(--text-hi);
    --rz-grid-selected-background-color: rgba(219, 86, 208, 0.12);
    --rz-grid-selected-color: var(--text-hi);
    --rz-grid-foot-background-color: var(--bg-1);
    --rz-grid-filter-background-color: var(--bg-1);
    --rz-grid-toolbar-background-color: transparent;
    --rz-paginator-background-color: transparent;
    --rz-paginator-border: none;
}

.rz-datatable,
.rz-data-grid {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.rz-datatable .rz-column-title,
.rz-data-grid .rz-column-title {
    font-family: var(--font-mono);
    letter-spacing: 0.16em;
}

/* The design insets the outermost columns from the card edge by 24px; the grid itself
   only knows about a uniform cell padding, so the edges are nudged here. */
.rz-datatable th:first-child,
.rz-datatable td:first-child,
.rz-data-grid th:first-child,
.rz-data-grid td:first-child {
    padding-inline-start: 1.5rem;
}

.rz-datatable th:last-child,
.rz-datatable td:last-child,
.rz-data-grid th:last-child,
.rz-data-grid td:last-child {
    padding-inline-end: 1.5rem;
}

.rz-datatable tbody tr:last-child td,
.rz-data-grid tbody tr:last-child td {
    border-bottom: none;
}

/* Amounts, codes, dates and other tabular figures are set in the mono face. */
.rz-datatable .rz-text-align-right,
.rz-data-grid .rz-text-align-right {
    font-family: var(--font-mono);
}

.rz-pager {
    background: transparent;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────
   Misc components
   ───────────────────────────────────────────────────────────── */
:root {
    --rz-link-color: var(--brand-pink);
    --rz-link-hover-color: var(--brand-pink-soft);
    --rz-link-hover-text-decoration: none;

    --rz-notification-background-color: var(--bg-2);
    --rz-tooltip-background-color: var(--bg-3);
    --rz-tooltip-color: var(--text-hi);
    --rz-splitter-bar-background-color: var(--bg-1);
}

.rz-notification-item {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-2);
    box-shadow: var(--shadow-lg);
}

.rz-alert {
    border-radius: var(--r-md);
}

.rz-progressbar-circular-value {
    stroke: var(--brand-pink);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bg-3);
    border-radius: 10px;
}