#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    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; }

:root {
  font-size: var(--rz-root-font-size);
  /* helps content avoid the notch when in standalone */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  font-family: var(--rz-text-font-family);
  color: var(--rz-text-color);
  font-size: var(--rz-body-font-size);
  line-height: var(--rz-body-line-height);
  background-color: var(--rz-body-background-color);
}

.rz-body { --rz-body-padding: 0; }

a { color: var(--rz-link-color); }

a:hover, a:focus { color: var(--rz-link-hover-color); }

.rz-navigation-item-link-active { color: red; font-weight: bold; }

.filled-icon { font-variation-settings: 'FILL' 1; }

/* Utilities */
.mobile-only { display: none !important; }
.desktop-only { display: inline-flex !important; }

/* Header toolbar */
.header-toolbar { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; max-width: 100%; -webkit-overflow-scrolling: touch; }
.header-toolbar .rz-button { flex: 0 0 auto; border-radius: .5rem; }

/* Base button colors */
.rz-theme-material-dark .header-toolbar .rz-button,
.rz-theme-material .header-toolbar .rz-button { background: transparent; color: var(--rz-header-color, var(--rz-text-color)); }

/* Active (selected) menu button */
.header-toolbar .rz-button.header-btn-active { background: var(--rz-primary) !important; color: var(--rz-primary-contrast) !important; }

/* Non-active buttons: light theme subtle tint only */
.rz-theme-material .header-toolbar .rz-button:not(.header-btn-active) { background: color-mix(in srgb, var(--rz-primary) 20%, transparent) !important; color: color-mix(in srgb, var(--rz-primary-contrast) 80%, var(--rz-text-color)) !important; }

/* Dark theme: active and non-active buttons blend with header */
.rz-theme-material-dark .header-toolbar .rz-button { background: var(--rz-header-background-color, var(--rz-body-background-color)) !important; color: var(--rz-header-color, var(--rz-text-color)) !important; border-color: transparent !important; box-shadow: none !important; }

/* Disabled-looking state helper */
.header-toolbar .rz-button.rz-state-disabled, .header-toolbar .rz-button[disabled] { opacity: .55;}

/* Spacing */
.header-toolbar .rz-button { padding-inline: .85rem; }
.header-toolbar .rz-button .rzi, .header-toolbar .rz-button .material-icons { margin-right: .35rem; }

/* Mobile: icon-only and keep profile visible (legacy narrow breakpoint) */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    /* Prevent right column from shrinking and keep it visible */
    .rz-layout-top .rz-header .rz-column:last-child { flex: 0 0 auto; }
    .rz-layout-top .rz-header .rz-column:first-child { min-width: 0; }

    /* Only the toolbar should scroll, not the entire header row */
    .rz-layout-top .rz-row, .rz-layout-top .rz-header .rz-row { overflow-x: hidden; flex-wrap: nowrap; }

    /* Reserve space for profile column so buttons don't cover it */
    .header-toolbar { max-width: calc(100vw - 64px); }

    /* Icon-only buttons in header on mobile */
    .header-toolbar .rz-button .rz-button-text { display: none !important; }
    .header-toolbar .rz-button { padding-inline: .5rem; }
    .header-toolbar .rz-button .rzi, .header-toolbar .rz-button .material-icons { margin-right: 0; }
}

.header-item-active {
    color: var(--rz-primary) !important;
    font-weight: 600;
}

.header-toolbar .rz-button.header-item-active {
    background-color: var(--rz-primary-light, transparent);
}

/* Header layout resilience (applies always) */
.rz-header .rz-column:first-child { min-width: 0; }          /* allow toolbar column to shrink */
.rz-header .rz-column:last-child { flex: 0 0 auto; }         /* keep profile column visible */

/* Width-only “mobile” header breakpoint (no touch detection) */
@media (max-width: 1080px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  /* Keep header row from scrolling; only the toolbar should scroll */
  .rz-header .rz-row { overflow-x: hidden; flex-wrap: nowrap; }

  /* Constrain toolbar so it can scroll horizontally */
  .header-toolbar { max-width: calc(100vw - 64px); }

  /* Icon-only buttons on mobile */
  .header-toolbar .rz-button .rz-button-text { display: none !important; }
  .header-toolbar .rz-button { padding-inline: .5rem; }
  .header-toolbar .rz-button .rzi, .header-toolbar .rz-button .material-icons { margin-right: 0; }
}

/* Optional: thinner horizontal scrollbar for the toolbar */
.header-toolbar { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.header-toolbar::-webkit-scrollbar { height: 6px; }

/* Disable RadzenDataGrid column freezing on mobile/touch */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    /* Cancel sticky on any frozen cell/header (cover both Radzen class names and inline sticky styles) */
    .rz-data-grid th.rz-frozen-left,
    .rz-data-grid th.rz-frozen-right,
    .rz-data-grid td.rz-frozen-left,
    .rz-data-grid td.rz-frozen-right,
    .rz-grid th.rz-frozen-left,
    .rz-grid th.rz-frozen-right,
    .rz-grid td.rz-frozen-left,
    .rz-grid td.rz-frozen-right,
    .rz-data-grid [style*="position: sticky"],
    .rz-grid [style*="position: sticky"] {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        background: inherit !important;
    }

    /* Remove extra spacing Radzen adds when frozen sections exist */
    .rz-data-grid .rz-grid-scrollable,
    .rz-grid .rz-grid-scrollable,
    .rz-data-grid .rz-grid-content,
    .rz-grid .rz-grid-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure grid can scroll horizontally when it overflows */
    .rz-data-grid,
    .rz-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Unfreeze RadzenDataGrid columns on narrow viewports (width-only) */
@media (max-width: 1200px) {
  /* Turn off sticky for any frozen cell/header */
  .rz-data-grid th.rz-frozen-left,
  .rz-data-grid th.rz-frozen-right,
  .rz-data-grid td.rz-frozen-left,
  .rz-data-grid td.rz-frozen-right,
  .rz-grid th.rz-frozen-left,
  .rz-grid th.rz-frozen-right,
  .rz-grid td.rz-frozen-left,
  .rz-grid td.rz-frozen-right,
  .rz-data-grid .rz-frozen-cell,
  .rz-data-grid .rz-frozen-cell-left,
  .rz-data-grid .rz-frozen-cell-right,
  .rz-grid .rz-frozen-cell,
  .rz-grid .rz-frozen-cell-left,
  .rz-grid .rz-frozen-cell-right,
  /* also catch inline styles Radzen injects */
  .rz-data-grid [style*="position: sticky"],
  .rz-grid [style*="position: sticky"],
  .rz-data-grid [style*="inset-inline-start"],
  .rz-data-grid [style*="inset-inline-end"],
  .rz-grid [style*="inset-inline-start"],
  .rz-grid [style*="inset-inline-end"] {
    position: static !important;
    /* reset logical and physical offsets */
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: inherit !important;
  }

  /* Headers sometimes have sticky top; disable it on narrow widths */
  .rz-data-grid thead th,
  .rz-grid thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Remove spacing Radzen reserves for frozen sections */
  .rz-data-grid .rz-grid-scrollable,
  .rz-grid .rz-grid-scrollable,
  .rz-data-grid .rz-grid-content,
  .rz-grid .rz-grid-content {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }

  /* Ensure grid can scroll horizontally when columns overflow */
  .rz-data-grid,
  .rz-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Profile menu overlay: minimal rules --- */
/* Raise menu above header/content on desktop */
.rz-menu .rz-navigation-menu { z-index: 2000 !important; }

/* Mobile: render profile menu as overlay to avoid clipping */
@media (max-width: 1080px) {
  .rz-menu.rz-profile-menu > li > .rz-navigation-menu {
    position: fixed !important;
    top: var(--rz-header-height, 56px);
    inset-inline-end: 8px;
    max-height: calc(100vh - var(--rz-header-height, 56px) - var(--safe-bottom, 0px));
    overflow: auto;
    z-index: 3000 !important;
    min-width: 220px;
    width: max-content;
  }
}

/* Mobile: Hide text only if the button has an icon */
@media (max-width: 1080px) {
    .rz-button .rz-button-icon-left + .rz-button-text {
        display: none;
    }
}

/* Radzen Tabs: enable horizontal scroll on small screens */
@media (max-width: 1080px) {
  .rz-tabs .rz-tabs-header { overflow-x: auto; white-space: nowrap; }
  .rz-tabs .rz-tab-text { font-size: 0.9rem; }
}