/* Herald palette overrides on top of Radzen's material-dark theme */
:root {
    --rz-primary: #7c3aed;
    --rz-primary-light: #a78bfa;
    --rz-primary-dark: #6d28d9;
    --rz-secondary: #06b6d4;
    --rz-info: #3b82f6;
    --rz-success: #10b981;
    --rz-warning: #f59e0b;
    --rz-danger: #ef4444;
    --rz-text-color: #e5e7eb;
    --rz-text-secondary-color: #b0b8c6;
    --rz-border-radius: 4px;
    /* App-specific surface scale. Do NOT reuse --rz-base-100..400 for these:
       Radzen's material-dark theme keys its .rz-text-secondary-color /
       .rz-text-tertiary-color / .rz-text-disabled-color / .rz-color-base-* /
       .rz-border-base-* utility classes off those tokens (light→dark scale,
       base-50 lightest). Overriding them with dark surface values makes every
       "secondary/tertiary/disabled" text element render near-black on a
       near-black background. */
    --app-surface-100: #1a1a2e;
    --app-surface-200: #1e1e3a;
    --app-surface-300: #262648;
    --app-surface-400: #3a3a5c;
    --app-card-border: rgba(124, 58, 237, 0.15);
    --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark theme enhancements */
::selection {
    background-color: #7c3aed;
    color: #e5e7eb;
}

::-moz-selection {
    background-color: #7c3aed;
    color: #e5e7eb;
}

body {
    background-color: #1a1a2e;
}

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

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #3a3a5c;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

.clickable-row {
    cursor: pointer;
}

.clickable-cell {
    cursor: pointer;
    transition: background-color 0.2s;
}

.clickable-cell:hover {
    background-color: rgba(124, 58, 237, 0.1);
}

/* Card visual distinction — border + shadow so cards pop against the page background */
.rz-card {
    border: 1px solid var(--app-card-border);
    box-shadow: var(--app-card-shadow);
}

/* Indeterminate ProgressBar fix — Radzen's indeterminate animation runs on
   :before/:after pseudo-elements positioned inside .rz-progressbar-value, whose
   width is driven by the inline --rz-progressbar-value CSS variable (set from the
   component's Value parameter). When Value is 0 (the default, and what sync pages
   pass before the first SignalR progress event arrives), the containing block is
   zero-width and the animated bar is invisible — the track appears but nothing
   moves. Force the variable to 100% in indeterminate mode so the pseudo-elements
   always have a full-width container to animate across. */
.rz-progressbar-indeterminate .rz-progressbar-value {
    --rz-progressbar-value: 100%;
}

/* Chart canvas background for dark theme */
canvas {
    background-color: transparent;
}

/* Landing page hero */
.landing-hero {
    border-radius: 12px;
    background: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.55), transparent 55%),
                linear-gradient(180deg, rgba(6, 182, 212, 0.22), rgba(26, 26, 46, 0) 60%);
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.landing-hero .rz-text-h2,
.landing-hero .rz-text-h6 {
    text-shadow: 0 0 24px rgba(124, 58, 237, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Inline dialog overlay (custom modal backdrop) */
.rz-dialog-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* DataGrid horizontal scroll — Responsive="false" disables Radzen's reflow card
   stacking. The table keeps its natural content width and scrolls horizontally
   when it exceeds the viewport. min-width:100% ensures it fills the container
   on wide screens. */
.rz-datatable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rz-datatable table {
    width: max-content;
    min-width: 100%;
}

/* Chart tabs horizontal scroll — Radzen's .rz-tabview-nav is a non-wrapping
   flex row with no overflow handling. With many tabs (Dashboard renders up to
   9) the strip overflows its column and produces a page-level horizontal
   scrollbar. Scope the fix to .chart-tabs so the strip scrolls internally and
   tab items keep their intrinsic width instead of being squeezed. */
.chart-tabs .rz-tabview-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}
.chart-tabs .rz-tabview-nav > li {
    flex-shrink: 0;
}

/* Blazor error UI — hidden by default, shown by Blazor's JS on unhandled errors.
   Without display:none the div is visible as plain text at the bottom of the page. */
#blazor-error-ui {
    display: none;
    background: var(--rz-danger);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
}

/* Desktop: Radzen's default grid layout gives the sidebar a real column
   (grid-area: rz-sidebar, position: static) so it never overlaps the body.
   No overrides needed — let the framework layout work as designed. */

/* Mobile: sidebar becomes a fixed overlay drawer that floats over the page
   with a backdrop. --herald-header-height is set by js/layout.js to the real
   header height (content + padding exceeds --rz-header-min-height).
   Breakpoint matches heraldBreakpoint's (max-width: 767px) — keep in sync. */
.rz-header {
    z-index: 11 !important;
}

.sidebar-backdrop {
    position: fixed;
    top: var(--herald-header-height, var(--rz-header-min-height));
    left: var(--rz-sidebar-width);
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
}

@media (max-width: 767px) {
    .rz-layout {
        grid-template-columns: 1fr !important;
        grid-template-areas: "rz-header" "rz-body" "rz-footer" !important;
    }

    .rz-sidebar {
        position: fixed !important;
        top: var(--herald-header-height, var(--rz-header-min-height)) !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 10 !important;
    }
}