/* =====================================================================
 * 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;

    --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;
}

/* 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;
}

/* 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;
}

/* 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);
}


/* =================================================================
   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(122, 90, 248, 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;
}

.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;
    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;
}

.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: 42px;
}

.login-password-toggle {
    position: absolute;
    right: 1px;
    top: 7px;
    bottom: 1px;
    width: 40px;
    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;
}

.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: #0A0D12;
    --rz-base: #F5F5F5;
    --rz-base-50: #FAFAFA;
    --rz-base-100: #F5F5F5;
    --rz-base-200: #E9EAEB;
    --rz-base-300: #D5D7DA;
    --rz-base-400: #A4A7AE;
    --rz-base-500: #717680;
    --rz-base-600: #535862;
    --rz-base-700: #414651;
    --rz-base-800: #252B37;
    --rz-base-900: #181D27;
    --rz-base-light: #FAFAFA;
    --rz-base-lighter: #FFFFFF;
    --rz-base-dark: #535862;
    --rz-base-darker: #252B37;
}


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

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

::-webkit-scrollbar-track {
    background: var(--color-gray-100, #F5F5F5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-300, #D5D7DA);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400, #A4A7AE);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300, #D5D7DA) var(--color-gray-100, #F5F5F5);
}


/* =================================================================
   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, #5925DC);
        --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);
    }

    .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-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 .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-gray-600);
}

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

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

/* 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;
}