/* =====================================================================
 * FlexOps Shared Radzen Theme Overrides
 * =====================================================================
 * Common Radzen component overrides for all FlexOps Blazor portals.
 * Applies the FlexOps design system to Radzen Material 3 components.
 *
 * Requires: flexops-tokens.css loaded first.
 * Portal-specific rules remain in each portal's theme.css.
 * =====================================================================
 * Copyright (c) 2021-2026 by FlexOps, LLC. All rights reserved.
 * =================================================================== */


/* =================================================================
   1. RADZEN PRIMARY COLOR OVERRIDES
   Map Radzen CSS custom properties to FlexOps brand tokens.
   ================================================================= */

:root {
    /* Icon weight: 300 (thin outlined) to match the Next.js website's
       Untitled UI icon aesthetic. Radzen default is 400. */
    --rz-icon-weight: 300;

    /* Force Radzen components onto the canonical FlexOps font (Inter). Radzen's
       base theme otherwise falls back to Roboto, which left Inter/Roboto/Arial
       mixed across the portals and Ship Manager. One mapping fixes every
       .rz-* component. */
    --rz-text-font-family: var(--font-body);

    --rz-primary: var(--color-brand-600);
    --rz-primary-lighter: var(--color-brand-400);
    --rz-primary-light: var(--color-brand-500);
    --rz-primary-dark: var(--color-brand-700);
    --rz-primary-darker: var(--color-brand-800);

    --rz-secondary: var(--color-gray-600);
    --rz-secondary-lighter: var(--color-gray-400);
    --rz-secondary-light: var(--color-gray-500);
    --rz-secondary-dark: var(--color-gray-700);
    --rz-secondary-darker: var(--color-gray-800);

    --rz-info: var(--color-blue-600);
    --rz-success: var(--color-success-600);
    --rz-warning: var(--color-warning-600);
    --rz-danger: var(--color-error-600);

    --rz-text-color: var(--color-text-primary);
    --rz-text-secondary-color: var(--color-text-secondary);
    --rz-text-tertiary-color: var(--color-text-tertiary);
    --rz-text-disabled-color: var(--color-text-disabled);

    --rz-base-background-color: var(--color-bg-primary);
    --rz-base-900-background-color: var(--color-gray-900);

    --rz-border-color: var(--color-border-secondary);
}


/* =================================================================
   2. SIDEBAR (Light theme)
   ================================================================= */

.rz-sidebar {
    background: var(--color-bg-primary) !important;
    border-right: 1px solid var(--color-border-secondary) !important;
}

/* Nav item text */
.rz-sidebar .rz-navigation-item-text,
.rz-sidebar .rz-panel-menu-item-text {
    color: var(--color-text-secondary) !important;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Nav item icons */
.rz-sidebar .rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu-item-icon {
    color: var(--color-gray-400) !important;
}

/* Active / selected nav item */
.rz-sidebar .rz-state-active > .rz-navigation-item-wrapper,
.rz-panel-menu .rz-navigation-item-wrapper.rz-state-active {
    background: var(--color-bg-brand-primary) !important;
    border-radius: var(--radius-md);
}

.rz-sidebar .rz-state-active .rz-panel-menu-item-text,
.rz-sidebar .rz-state-active > .rz-navigation-item-wrapper .rz-navigation-item-text {
    color: var(--color-brand-700) !important;
    font-weight: 600;
}

.rz-sidebar .rz-state-active .rz-panel-menu-item-icon,
.rz-sidebar .rz-state-active > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    color: var(--color-brand-600) !important;
}

/* Dark theme: brand-700/600 fail AA on the dark active-nav surface
   (~2.0:1). Lift to lighter brand stops. --color-brand-* aliases can't be
   remapped globally because they also drive --rz-primary button fills. */
[data-theme="dark"] .rz-sidebar .rz-state-active .rz-panel-menu-item-text,
[data-theme="dark"] .rz-sidebar .rz-state-active > .rz-navigation-item-wrapper .rz-navigation-item-text {
    color: var(--color-brand-300) !important;
}

[data-theme="dark"] .rz-sidebar .rz-state-active .rz-panel-menu-item-icon,
[data-theme="dark"] .rz-sidebar .rz-state-active > .rz-navigation-item-wrapper .rz-navigation-item-icon {
    color: var(--color-brand-400) !important;
}

/* Hover state */
.rz-sidebar .rz-navigation-item-wrapper:hover,
.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background: var(--color-bg-secondary) !important;
    border-radius: var(--radius-md);
}

.rz-sidebar .rz-navigation-item-wrapper:hover .rz-panel-menu-item-text,
.rz-sidebar .rz-navigation-item-wrapper:hover .rz-navigation-item-text {
    color: var(--color-text-primary) !important;
}

.rz-sidebar .rz-navigation-item-wrapper:hover .rz-panel-menu-item-icon,
.rz-sidebar .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
    color: var(--color-brand-500) !important;
}

/* Sidebar title text */
.rz-sidebar .rz-text.rz-text-subtitle1 {
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

/* Sidebar footer text */
.rz-sidebar .rz-text.rz-text-caption {
    color: var(--color-text-disabled) !important;
}

/* Panel menu expand/collapse arrow */
.rz-sidebar .rz-panel-menu-item-icon-children {
    color: var(--color-gray-400) !important;
}


/* =================================================================
   3. HEADER
   ================================================================= */

.rz-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-secondary);
    box-shadow: var(--shadow-xs);
}


/* =================================================================
   4. BUTTONS
   ================================================================= */

/* Primary button */
.rz-button.rz-primary {
    position: relative;
    background: var(--color-bg-brand-solid);
    border: 1px solid var(--color-bg-brand-solid);
    box-shadow: var(--shadow-xs-skeumorphic);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
}

/* Dark mode: our primary buttons always have a solid brand background, but the
   Flat variant (e.g. the inventory Export split button) keeps brand-colored
   text, which reads as faded purple-on-purple in dark. Force white text/icon on
   any primary button or split button so it stays high-contrast. */
[data-theme="dark"] .rz-button.rz-primary,
[data-theme="dark"] .rz-button.rz-primary .rzi,
[data-theme="dark"] .rz-splitbutton.rz-primary .rz-button,
[data-theme="dark"] .rz-splitbutton .rz-button.rz-primary {
    color: #fff !important;
}

/* Inner gradient border — matches the Next.js website button feel.
   A semi-transparent white border at the top that fades to invisible
   at the bottom, creating a subtle "light reflecting from above" depth. */
.rz-button.rz-primary::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--radius-lg) - 1px);
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
}

.rz-button.rz-primary:hover {
    background: var(--color-bg-brand-solid_hover);
    border-color: var(--color-bg-brand-solid_hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.5px);
}

.rz-button.rz-primary:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
}

/* Danger button also gets the inner gradient border */
.rz-button.rz-danger::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--radius-lg) - 1px);
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
}

/* Secondary / light button */
.rz-button.rz-secondary,
.rz-button.rz-light {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
}

.rz-button.rz-secondary:hover,
.rz-button.rz-light:hover {
    background: var(--color-bg-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.5px);
}

/* Danger button */
.rz-button.rz-danger {
    position: relative;
    background: var(--color-bg-error-solid);
    border: 1px solid var(--color-bg-error-solid);
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.rz-button.rz-danger:hover {
    background: var(--color-error-700);
    border-color: var(--color-error-700);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.5px);
}

.rz-button.rz-danger:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
}

/* All buttons: consistent radius + snappy transitions */
.rz-button {
    border-radius: var(--radius-lg);
    transition: background-color 150ms ease,
                border-color 150ms ease,
                box-shadow 150ms ease,
                transform 100ms ease;
}


/* =================================================================
   5. FORM INPUTS
   ================================================================= */

.rz-textbox,
.rz-inputtext,
.rz-dropdown,
.rz-multiselect,
.rz-datepicker-input,
.rz-textarea {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    box-shadow: var(--shadow-xs);
}

.rz-textbox:focus,
.rz-inputtext:focus,
.rz-dropdown.rz-state-focused,
.rz-multiselect.rz-state-focused,
.rz-datepicker-input:focus,
.rz-textarea:focus {
    border-color: var(--color-border-brand);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.rz-textbox::placeholder,
.rz-inputtext::placeholder,
.rz-textarea::placeholder {
    color: var(--color-text-placeholder);
}

.rz-textbox:disabled,
.rz-inputtext:disabled {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled);
    border-color: var(--color-border-disabled);
    cursor: not-allowed;
}

/* DropDownDataGrid popups should read like one full-width picker, not a narrow
   grid floating inside a wider dropdown panel. */
.rz-popup:has(.rz-data-grid),
.rz-popup:has(.rz-datatable),
.rz-dropdown-panel:has(.rz-data-grid),
.rz-dropdown-panel:has(.rz-datatable) {
    box-sizing: border-box;
}

.rz-popup:has(.rz-data-grid) > *,
.rz-popup:has(.rz-datatable) > *,
.rz-dropdown-panel:has(.rz-data-grid) > *,
.rz-dropdown-panel:has(.rz-datatable) > * {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
}

.rz-popup .rz-data-grid,
.rz-popup .rz-datatable,
.rz-popup .rz-data-grid-data,
.rz-popup .rz-datatable-data,
.rz-popup .rz-datatable-scrollable,
.rz-popup .rz-datatable-scrollable-wrapper,
.rz-popup .rz-datatable-scrollable-view,
.rz-popup .rz-datatable-scrollable-header,
.rz-popup .rz-datatable-scrollable-header-box,
.rz-popup .rz-datatable-scrollable-body,
.rz-popup .rz-datatable-scrollable-table-wrapper,
.rz-popup .rz-datatable-tablewrapper,
.rz-dropdown-panel .rz-data-grid,
.rz-dropdown-panel .rz-datatable,
.rz-dropdown-panel .rz-data-grid-data,
.rz-dropdown-panel .rz-datatable-data,
.rz-dropdown-panel .rz-datatable-scrollable,
.rz-dropdown-panel .rz-datatable-scrollable-wrapper,
.rz-dropdown-panel .rz-datatable-scrollable-view,
.rz-dropdown-panel .rz-datatable-scrollable-header,
.rz-dropdown-panel .rz-datatable-scrollable-header-box,
.rz-dropdown-panel .rz-datatable-scrollable-body,
.rz-dropdown-panel .rz-datatable-scrollable-table-wrapper,
.rz-dropdown-panel .rz-datatable-tablewrapper {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
}

.rz-popup .rz-data-grid .rz-grid-table,
.rz-popup .rz-datatable .rz-grid-table,
.rz-popup .rz-datatable table,
.rz-popup .rz-datatable-scrollable-table,
.rz-dropdown-panel .rz-data-grid .rz-grid-table,
.rz-dropdown-panel .rz-datatable .rz-grid-table,
.rz-dropdown-panel .rz-datatable table,
.rz-dropdown-panel .rz-datatable-scrollable-table {
    min-width: 100% !important;
    table-layout: auto;
    width: 100% !important;
}

.rz-popup .rz-data-grid colgroup,
.rz-popup .rz-datatable colgroup,
.rz-dropdown-panel .rz-data-grid colgroup,
.rz-dropdown-panel .rz-datatable colgroup {
    width: 100% !important;
}

/* DataGrid header (.rz-grid-table thead). The .rz-datatable-thead rule below
   only covers the older DataTable component; RadzenDataGrid renders
   .rz-grid-table, whose header had no override and fell back to a light Radzen
   surface — a white bar in dark mode, on every in-page grid AND DropDownDataGrid
   popup across all portals and Ship Manager. Pin it to the flipping semantic
   tokens (matches the DataTable header, so light mode is consistent too).
   ShipManager's denser .operator-grid header still wins where it applies
   (custom.css loads later at equal specificity). */
.rz-data-grid .rz-grid-table thead th {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

/* The rest of the DataGrid chrome (footer, pager) chains through the same base
   surface vars as the header, so it leaks light in dark mode the same way.
   Dark-scoped overrides — they cannot affect light mode, only force these
   surfaces dark where the overlay theme leaves them light. */
[data-theme="dark"] .rz-grid-table tfoot td {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .rz-pager {
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border-secondary);
}

[data-theme="dark"] .rz-pager .rz-pager-page {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .rz-pager .rz-pager-page.rz-state-active {
    background: var(--color-bg-brand-primary);
    color: var(--color-brand-300);
}

/* Error state */
.rz-textbox.rz-state-invalid,
.rz-inputtext.rz-state-invalid {
    border-color: var(--color-border-error);
    box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.12);
}

/* Labels */
.rz-form-field-label {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
}


/* =================================================================
   6. DATA GRID
   ================================================================= */

.rz-datatable {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-lg);
    overflow: clip;
    box-shadow: var(--shadow-sm);
}

.rz-datatable .rz-datatable-thead > tr > th {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.rz-datatable .rz-datatable-tbody > tr > td {
    border-bottom: 1px solid var(--color-border-tertiary);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    padding: 12px 16px;
}

.rz-datatable .rz-datatable-tbody > tr:hover > td {
    background: var(--color-bg-secondary);
}

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


/* =================================================================
   7. CARDS
   ================================================================= */

.rz-card {
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    background: var(--color-bg-primary);
}

/* Dark mode: shadows are near-invisible on the dark page, so cards lean on a
   stronger border (border-primary, not -secondary) to keep a crisp edge. */
[data-theme="dark"] .rz-card,
[data-theme="dark"] .settings-card {
    border-color: var(--color-border-primary);
}


/* =================================================================
   7b. TABS — WCAG AA contrast fix
   ================================================================= */

.rz-tabview-nav-link {
    color: var(--color-text-primary);
}

.rz-tabview-nav-link.rz-state-active {
    color: var(--color-fg-brand-primary);
}


/* =================================================================
   8. DIALOG / MODAL
   ================================================================= */

.rz-dialog {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-secondary);
}

.rz-dialog-titlebar {
    border-bottom: 1px solid var(--color-border-secondary);
    padding: 16px 24px;
}

.rz-dialog-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rz-dialog-content {
    padding: 24px;
}


/* =================================================================
   9. NOTIFICATION
   ================================================================= */

.rz-notification {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
}

.rz-notification.rz-notification-success {
    border-left: 4px solid var(--color-success-500);
}

.rz-notification.rz-notification-error {
    border-left: 4px solid var(--color-error-500);
}

.rz-notification.rz-notification-warning {
    border-left: 4px solid var(--color-warning-500);
}

.rz-notification.rz-notification-info {
    border-left: 4px solid var(--color-blue-500);
}


/* =================================================================
   10. PROFILE MENU
   ================================================================= */

.rz-profile-menu-button {
    border-radius: var(--radius-full);
}


/* =================================================================
   11. PANEL MENU (Sidebar Nav)
   ================================================================= */

.rz-panel-menu {
    font-family: var(--font-body);
}

.rz-panel-menu .rz-navigation-item-wrapper {
    border-radius: var(--radius-md);
    margin: 2px 8px;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background: rgba(255, 255, 255, 0.08);
}

.rz-panel-menu .rz-navigation-item-wrapper.rz-state-active {
    background: rgba(141, 89, 207, 0.15);
}


/* =================================================================
   12. LOGIN PAGE
   ================================================================= */

.login-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    margin: 0 auto;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 4px 0;
}

/* The auth pages programmatically focus this <h1> on load (Blazor FocusAsync) so
   screen readers announce the page on navigation. It is tabindex=-1 and never
   keyboard-tabbable, so a visible focus ring on it serves no one and reads as a
   bug. A :not(:focus-visible) guard is NOT enough: after a keyboard-initiated
   navigation (and in headless Chromium) the post-load programmatic focus IS
   classified :focus-visible, so the ring still showed. Suppress it
   unconditionally — focus still moves here for screen-reader users, there's just
   no visible box. (Safe per WCAG 2.4.7: the heading is not a control the user
   operates.) */
.login-title:focus,
.login-title:focus-visible {
    outline: none;
}

.login-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    text-align: center;
    margin: 0 0 24px 0;
}

.login-error {
    background: var(--color-bg-error-primary);
    border: 1px solid var(--color-error-200);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    color: var(--color-error-700);
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.login-input {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: var(--shadow-xs);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    margin-top: 6px;
    min-height: 44px;
    box-sizing: border-box;
}

.login-input:focus {
    border-color: var(--color-border-brand);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.login-input-valid {
    border-color: var(--color-success-700);
}

.login-input-valid:focus {
    border-color: var(--color-success-700);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success-700) 15%, transparent);
}

.login-input::placeholder {
    color: var(--color-text-placeholder);
}

.login-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 18px;
    background: var(--color-bg-brand-solid);
    color: var(--color-text-white);
    border: 1px solid var(--color-bg-brand-solid);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    box-shadow: var(--shadow-xs-skeumorphic);
    transition: background 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

.login-button::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: calc(var(--radius-lg) - 1px);
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    pointer-events: none;
}

.login-button:hover {
    background: var(--color-bg-brand-solid_hover);
    border-color: var(--color-bg-brand-solid_hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.5px);
}

.login-button:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
}

.login-link {
    color: var(--color-fg-brand-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.1s ease;
    /* Enlarge the tap target without shifting layout (negative margin cancels
       the added padding). Keeps the visible text identical. */
    display: inline-block;
    padding: 10px 4px;
    margin: -6px -4px;
}

.login-link:hover {
    color: var(--color-bg-brand-solid_hover);
    text-decoration: underline;
}

.login-password-wrapper {
    position: relative;
}

.login-password-wrapper .login-input {
    padding-right: 44px;
}

.login-password-toggle {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    cursor: pointer;
    color: var(--color-text-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.1s ease;
}

.login-password-toggle:hover {
    color: var(--color-text-secondary);
}

.login-password-toggle .rzi {
    font-size: 1.15rem;
}

/* Available to screen readers, clipped from the visual layout. Used for live-region
   status text that would be redundant next to a visible indicator. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.password-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.password-rules li {
    font-size: 0.8rem;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.password-rules .rule-pass {
    color: var(--color-success-700);
}

.password-rules .rule-fail {
    color: var(--color-text-quaternary);
}

.login-success {
    background: var(--color-bg-success-primary);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    color: var(--color-success-700);
    font-size: 0.875rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}


/* =================================================================
   13. ICON RENDERING
   Ensure Material Icons render properly in all Radzen apps.
   Prevents clipping in cards and misaligned icon glyphs.
   ================================================================= */

.rz-icon,
i.rz-icon {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.material-icons,
.rz-icon {
    font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

.rz-card > div {
    overflow: visible !important;
}


/* =================================================================
   14. DATAGRID — HIDE NUMERIC FILTER SPIN BUTTONS
   Convention: ShowUpDown="false" on all RadzenNumeric. For auto-
   generated DataGrid filter rows, CSS is the only enforcement.
   ================================================================= */

.rz-cell-filter .rz-numeric-up,
.rz-cell-filter .rz-numeric-down {
    display: none !important;
}


/* =================================================================
   15. BUTTON NORMALIZATION
   Remove Radzen default uppercase and add consistent micro-
   interactions across all portals.
   ================================================================= */

button.rz-button,
.rz-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.rz-button:active {
    transform: translateY(1px);
}


/* =================================================================
   16. ALERTS & MESSAGES (.rz-message)
   Status-colored alert bars with left border accent.
   ================================================================= */

.rz-message {
    border-radius: var(--radius-xl) !important;
    padding: 16px !important;
    border-left-width: 4px !important;
}

.rz-message.rz-info {
    background-color: var(--color-blue-50) !important;
    border-left-color: var(--color-blue-600) !important;
}

.rz-message.rz-success {
    background-color: var(--color-success-50) !important;
    border-left-color: var(--color-success-600) !important;
}

.rz-message.rz-warning {
    background-color: var(--color-warning-50) !important;
    border-left-color: var(--color-warning-600) !important;
}

.rz-message.rz-error {
    background-color: var(--color-error-50) !important;
    border-left-color: var(--color-error-600) !important;
}


/* =================================================================
   17. PROGRESS BAR
   ================================================================= */

.rz-progressbar {
    border-radius: var(--radius-full) !important;
    height: 8px !important;
    background-color: var(--color-gray-200) !important;
}

.rz-progressbar-value {
    border-radius: var(--radius-full) !important;
    background: linear-gradient(90deg, var(--color-brand-500), var(--color-brand-600)) !important;
}


/* =================================================================
   18. DATAGRID STRIPED ROWS
   ================================================================= */

.rz-datatable-striped .rz-datatable-row:nth-child(even) {
    background-color: var(--color-gray-25, #FBFCFD) !important;
}


/* =================================================================
   19. RADZEN BASE NEUTRAL SCALE
   Align Radzen's internal neutral palette with FlexOps gray tokens.
   ================================================================= */

:root {
    --rz-white: #FFFFFF;
    --rz-black: #110F15;
    --rz-base: #F3F1F5;
    --rz-base-50: #FAF9FB;
    --rz-base-100: #F3F1F5;
    --rz-base-200: #E9E6EC;
    --rz-base-300: #D8D4DD;
    --rz-base-400: #B0ABB8;
    --rz-base-500: #787480;
    --rz-base-600: #635F6B;
    --rz-base-700: #4A4651;
    --rz-base-800: #2C2A33;
    --rz-base-900: #1C1A21;
    --rz-base-light: #FAF9FB;
    --rz-base-lighter: #FFFFFF;
    --rz-base-dark: #635F6B;
    --rz-base-darker: #2C2A33;
}


/* =================================================================
   20. SCROLLBAR
   Thin, neutral scrollbar for all portals.
   ================================================================= */

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

::-webkit-scrollbar-track {
    background: var(--flexops-bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--flexops-border-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--flexops-fg-quaternary);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--flexops-border-primary) var(--flexops-bg-tertiary);
}


/* =================================================================
   21. FOCUS STATES
   Brand purple focus ring on all interactive elements.
   ================================================================= */

.rz-button:focus-visible,
.rz-textbox:focus-visible,
.rz-dropdown:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}


/* =================================================================
   22. HIGH CONTRAST MODE
   ================================================================= */

@media (prefers-contrast: high) {
    :root {
        --rz-primary: var(--color-brand-700, #5C368C);
        --rz-base-200: #CBD5E1;
    }
}


/* =================================================================
   23. REDUCED MOTION — WCAG 2.3.3
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =================================================================
   24. BLAZOR ERROR UI
   ================================================================= */

#blazor-error-ui {
    background: var(--color-bg-warning-primary, #FFFAEB);
    border-top: 2px solid var(--color-warning-400, #FDB022);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

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


/* =================================================================
   25. MOBILE RESPONSIVE LAYOUT
   Radzen component adjustments for tablet and phone viewports.
   ================================================================= */

@media (max-width: 768px) {
    .rz-sidebar {
        position: fixed !important;
        left: -260px;
        top: 0;
        height: 100vh;
        width: 260px;
        transition: left 200ms ease;
        box-shadow: none;
    }

    .rz-sidebar.rz-sidebar-expanded {
        left: 0;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
    }

    /* Dimming scrim behind the open off-canvas drawer. Defined at the same
       768px breakpoint where the drawer becomes off-canvas — previously it
       only existed at <=480px, so 481-768px opened with no backdrop and taps
       fell through to the page behind. */
    .rz-sidebar.rz-sidebar-expanded::after {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 260px;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .rz-body {
        margin-left: 0 !important;
    }

    .rz-header .rz-row > .rz-col-5,
    .rz-header .rz-row > .rz-col-7 {
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .rz-body .rz-row {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .rz-datatable-scrollable-body,
    .rz-data-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rz-card {
        padding: 0.75rem !important;
    }

    .rz-form-field {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rz-stack[data-orientation="horizontal"] {
        flex-wrap: wrap;
    }

    .rz-dialog {
        width: calc(100vw - 2rem) !important;
        max-width: 100% !important;
        margin: 1rem;
    }
}

@media (max-width: 480px) {
    .rz-body .rz-row {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    .rz-header {
        padding: 0.25rem 0.5rem !important;
    }

    .rz-data-grid .rz-cell.hide-mobile {
        display: none !important;
    }

    .rz-button {
        min-height: 44px;
        min-width: 44px;
    }

    .rz-button.rz-button-xs {
        min-height: 36px;
        min-width: 36px;
    }

    .rz-tabview-nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rz-tabview-nav::-webkit-scrollbar {
        display: none;
    }

    .rz-profile-menu .rz-popup {
        right: 0 !important;
        left: auto !important;
        min-width: 200px;
    }

    .rz-panel-menu-item-text {
        padding: 0.75rem 1rem !important;
    }

    .rz-card .rz-stack[data-orientation="horizontal"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .rz-form-field .rz-form-field-label {
        position: static !important;
        transform: none !important;
        margin-bottom: 0.25rem;
    }

    .rz-text-h4 {
        font-size: 1.25rem !important;
    }

    .rz-text-h5 {
        font-size: 1.1rem !important;
    }

    .rz-text-h6 {
        font-size: 1rem !important;
    }
}


/* =================================================================
   26. TOUCH-FRIENDLY ENHANCEMENTS
   ================================================================= */

@media (pointer: coarse) {
    .rz-button,
    .rz-dropdown,
    .rz-textbox {
        min-height: 44px;
    }

    .rz-chkbox,
    .rz-radiobutton {
        min-width: 44px;
        min-height: 44px;
    }

    .rz-data-grid .rz-data-row td {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

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


/* =================================================================
   27. PRINT
   ================================================================= */

@media print {
    .rz-sidebar,
    .rz-header,
    .rz-sidebar-toggle,
    .rz-button {
        display: none !important;
    }

    .rz-body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .rz-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}


/* =================================================================
   28. DESKTOP DENSITY — DataGrid + Sidebar
   Tightens Radzen defaults to ops-tool ergonomics (Linear/Stripe/
   Shippo class). Mobile overrides in each portal's responsive-grid.css
   layer on top via @media (max-width: 767px).
   ================================================================= */

/* DataGrid cells: ~13px text, half the default vertical padding. */
.rz-datatable .rz-cell {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.rz-datatable .rz-cell-data {
    min-height: 32px;
}

/* DataGrid headers: small-caps style for clearer column scanning. */
.rz-datatable .rz-column-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--flexops-text-tertiary);
}

.rz-datatable thead th {
    padding: 0.5rem 0.75rem;
    background: var(--flexops-bg-secondary);
    border-bottom: 1px solid var(--flexops-border-secondary);
}

/* Hairline row dividers. */
.rz-datatable tbody tr {
    border-bottom: 1px solid var(--flexops-border-secondary);
}

/* Tighten in-cell action buttons so they don't inflate row height. */
.rz-datatable .rz-cell .rz-button-sm,
.rz-datatable .rz-cell .rz-button-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Sidebar panel-menu density: ~25% more menu items per viewport. */
.rz-panel-menu .rz-navigation-item-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 32px;
}

.rz-panel-menu .rz-navigation-item-link .rzi,
.rz-panel-menu .rz-navigation-item-link .rz-icon,
.rz-panel-menu .rz-navigation-item-link .material-icons {
    font-size: 1.125rem;
}

/* Headings use the display font (Space Grotesk); body stays Inter. */
h1, h2, h3,
.rz-text-h1, .rz-text-h2, .rz-text-h3,
.rz-text-display-h1, .rz-text-display-h2, .rz-text-display-h3,
.flexops-portal-hero h1,
.flexops h1, .flexops h2, .flexops h3 {
  font-family: var(--flexops-font-display);
  letter-spacing: -0.015em;
}

/* Density (compact): the Radzen grid variables in flexops-tokens.css do the
   heavy lifting; these element-level rules reach what the vars can't —
   the data-cell padding/min-height floor, header padding, and sidebar rows. */
[data-density="compact"] .rz-datatable tbody td {
  padding-block: 0.15rem;
}
[data-density="compact"] .rz-datatable .rz-cell-data {
  min-height: 20px;
}
[data-density="compact"] .rz-datatable thead th {
  padding-block: 0.25rem;
}
[data-density="compact"] .rz-panel-menu .rz-navigation-item-link {
  padding-block: 0.2rem;
  min-height: 26px;
}

/* =====================================================================
 * Theme toggle button + dark-mode chrome fixes
 * ===================================================================== */
/* Shared header icon-button (theme toggle, density toggle, etc.) */
.flexops-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--flexops-radius-md);
  color: var(--flexops-fg-tertiary);
  cursor: pointer;
  transition: background-color var(--flexops-transition-fast), color var(--flexops-transition-fast);
}
.flexops-iconbtn:hover {
  background: var(--flexops-bg-tertiary);
  color: var(--flexops-fg-primary);
}
.flexops-iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--flexops-shadow-focus);
}

/* Sidebar did not flip with the rest of the chrome in the spike — pin it to
 * the dark surface tokens so it tracks the theme. */
[data-theme="dark"] .rz-sidebar {
  background-color: var(--flexops-bg-primary);
  border-color: var(--flexops-border-secondary);
}
[data-theme="dark"] .rz-sidebar .rz-navigation-item-link,
[data-theme="dark"] .rz-sidebar .rz-navigation-item-text {
  color: var(--flexops-text-secondary);
}


/* =================================================================
   RADZEN DATAGRID  (.rz-data-grid / .rz-grid-table)

   The grid styling above targets .rz-datatable — the OLD RadzenDataTable
   component. Every portal uses RadzenDataGrid, which renders .rz-data-grid >
   .rz-grid-table, and only its `thead th` was ever pinned. So all that header/
   row/border work never reached a single grid on screen: 103 grids across the
   four portals have been rendering Radzen's Material defaults.

   That is what makes the screens read as an admin tool — dense rows, gridlines
   on every cell, and a filter row showing "*A*" as the operator.

   Same tokens as .fx-table, so a plain table and a DataGrid look identical.
   ================================================================= */

.rz-data-grid {
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-lg);
  overflow: clip;
  box-shadow: var(--shadow-xs);
}

/* Header. The background/colour is already pinned further up (dark-mode fix);
   this is the type and rhythm. */
.rz-data-grid .rz-grid-table thead th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rz-data-grid .rz-grid-table tbody td {
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
}

.rz-data-grid .rz-grid-table tbody tr:hover td {
  background: var(--color-bg-secondary);
}

.rz-data-grid .rz-grid-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Vertical gridlines are the single biggest "spreadsheet, not product" signal.
   Rows read as records; cells boxed in borders read as a database dump.
   Horizontal rules only. */
.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child),
.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child),
.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) {
  border-inline-end: 0;
}

/* ---- Filter row ----
   Every filterable column renders its operator as the literal text "*A*", which is
   the loudest "this is a debug tool" signal on the screens. Radzen ships a proper
   filter icon in the button and then hides it, showing the glyph instead:

       <button class="rz-filter-button" title="Contains">
         <i class="rzi">filter_alt</i>*A*
       </button>

   The glyph is a BARE TEXT NODE — no element wraps it — so no class selector can
   reach it. font-size:0 on the button is the only way to suppress it; the icon gets
   its size back explicitly. The operator stays discoverable via the button's title
   ("Contains"), and filtering itself is untouched.

   Both rules need .rz-cell-filter + .rz-button to outrank Radzen's own
   `.rz-filter-button .rzi { display: none }` and the .rz-button-md font sizing —
   at equal specificity they lose and this silently does nothing. */
.rz-data-grid .rz-cell-filter .rz-filter-button.rz-button {
  font-size: 0;
}

.rz-data-grid .rz-cell-filter .rz-filter-button.rz-button .rzi {
  display: inline-flex;
  font-size: 1rem;
  color: var(--color-text-tertiary);
}

.rz-cell-filter {
  padding: 0.5rem 0.75rem;
}

.rz-cell-filter .rz-textbox,
.rz-cell-filter .rz-datepicker,
.rz-cell-filter .rz-dropdown {
  font-size: 0.8125rem;
}

/* ---- Pager ---- */
.rz-data-grid .rz-pager {
  border-top: 1px solid var(--color-border-secondary);
  background: var(--color-bg-primary);
  padding: 0.75rem 1rem;
}

.rz-data-grid .rz-pager .rz-pager-element {
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.rz-data-grid .rz-pager .rz-pager-page.rz-state-active {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-weight: 600;
}

.rz-data-grid .rz-pager .rz-pager-summary {
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
}


/* -----------------------------------------------------------------
   Column widths.

   Pages pin every column in pixels — 580 Width="NNNpx" attributes across 66
   files. Addresses.razor sums to 1380px inside a 1265px container. With
   table-layout:fixed those widths are law, so headers truncate to "Compa...",
   "Validati...", "A" and the grid scrolls sideways.

   Treat them as hints instead: auto layout fits the table to its container and
   sizes columns to their content. Address Book goes 1380px -> 1265px (exactly
   fits) and the headers read "Company", "Validation", "Actions".

   Wide grids still scroll — Pricing Plans genuinely needs 1739px for 14 columns
   — but with readable headers rather than truncated ones. Auto layout fixes
   truncation, not overflow.

   EXCLUDES grids with frozen columns. Radzen positions those with sticky offsets
   derived from the column widths, so changing the widths can misalign them.
   :not(:has()) means a browser without :has() drops the rule entirely and falls
   back to today's behaviour — it fails safe. Verified: Shipped Orders (15 frozen
   cells) keeps table-layout:fixed and its cells stay sticky at left:0.
   ----------------------------------------------------------------- */
.rz-data-grid:not(:has(.rz-frozen-cell)) .rz-grid-table {
  table-layout: auto;
  width: 100%;
}

.rz-data-grid:not(:has(.rz-frozen-cell)) .rz-grid-table col {
  width: auto;
}