/* ===========================================
   FRESH LAYOUT THEME - LIGHT MODE ONLY
   Dark mode is currently DISABLED (see docs/DarkMode.md)
   =========================================== */

/* Light mode (default) variables */
:root {
    /* Background gradients */
    --fresh-bg-gradient-start: #e8f7f0;
    --fresh-bg-gradient-end: #d4f1e8;
    /* Header/Footer - always same regardless of mode */
    --fresh-header-bg: #f0faf6;
    --fresh-header-border: rgba(125, 211, 192, 0.4);
    --fresh-header-icon-color: #4a5568;
    /* Sidebar */
    --fresh-sidebar-bg: #ffffff;
    --fresh-sidebar-border: rgba(125, 211, 192, 0.2);
    --fresh-sidebar-shadow: rgba(0, 0, 0, 0.04);
    --fresh-sidebar-language-bg: #ffffff;
    /* Panel Menu background */
    --fresh-panel-menu-bg: transparent;
    /* Navigation items */
    --fresh-nav-text: #4a5568;
    --fresh-nav-text-secondary: #64748b;
    --fresh-nav-hover-bg: rgba(125, 211, 192, 0.15);
    --fresh-nav-active-bg: #10793e;
    --fresh-nav-active-text: #ffffff;
    --fresh-nav-active-border: #0d6233;
    --fresh-nav-border-active: #10793e;
    /* Text colors */
    --fresh-text-primary: #2d3748;
    --fresh-text-secondary: #666;
    --fresh-text-tertiary: #94a3b8;
    --fresh-body-text: #2d3748;
    --fresh-heading-text: #1a202c;
    /* Header controls */
    --fresh-header-controls-color: #4a5568;
    /* Cards and surfaces */
    --fresh-card-bg: rgba(255, 255, 255, 0.98);
    --fresh-surface-bg: #ffffff;
    /* Dialogs/Modals */
    --fresh-dialog-bg: #ffffff;
    --fresh-dialog-overlay: rgba(0, 0, 0, 0.6);
    --fresh-dialog-border: rgba(125, 211, 192, 0.2);
    --fresh-dialog-text: #2d3748;
    /* Primary colors */
    --fresh-primary-color: #10793e;
    --fresh-primary-hover: #0d6233;
    --fresh-primary-lighter: #CFE4D8;
    /* Dividers */
    --fresh-divider-color: rgba(125, 211, 192, 0.3);
    --fresh-divider-strong: rgba(125, 211, 192, 0.15);
    /* Shadows */
    --fresh-shadow-sm: rgba(0, 0, 0, 0.04);
    --fresh-shadow-md: rgba(0, 0, 0, 0.08);
    --fresh-shadow-lg: rgba(0, 0, 0, 0.15);
    /* Backdrop */
    --fresh-backdrop-bg: rgba(0, 0, 0, 0.5);
    /* Mobile close button */
    --fresh-close-btn-gradient-start: #667eea;
    --fresh-close-btn-gradient-end: #764ba2;
    --fresh-close-btn-hover-start: #5568d3;
    --fresh-close-btn-hover-end: #6a3f8f;
    --fresh-close-btn-shadow: rgba(102, 126, 234, 0.4);
    /* Radzen Link Variables - Override default blue to rz-primary green */
    --rz-link-color: #10793e;
    --rz-link-hover-color: #0d6233;
    --rz-link-text-decoration: underline;
    --rz-link-text-decoration-color: #10793e;
    /* Additional link color variables to override MaterialBase */
    --rz-text-link-color: #10793e;
    --rz-text-link-hover-color: #0d6233;
    --rz-link-text-color: #10793e;
    --rz-link-hover-text-color: #0d6233;
    /* Radzen layout variables */
    --rz-header-min-height: 50px; /* header height */
    --rz-layout-body-background-color: var(--fresh-bg-gradient-start);
    --rz-sidebar-color: var(--fresh-nav-text);
    --rz-sidebar-z: 1000;
    --rz-sidebar-width: 250px;
    --rz-transition: 0.3s ease;
    --rz-footer-padding: 1rem;
    --rz-footer-border: 1px solid var(--fresh-divider-strong);
    --rz-footer-color: var(--fresh-text-primary);
    --rz-menu-item-transition: all 0.2s ease;
    --rz-panel-menu-padding: 1rem 0;
    --rz-panel-menu-font-size: 0.95rem;
    --rz-panel-menu-font-weight: 500;
    --rz-panel-menu-background-color: transparent;
    --rz-panel-menu-item-2nd-level-active-color: #ffffff;
    --rz-panel-menu-hover-background-color: #10793e;
    --rz-panel-menu-item-2nd-level-hover-color: inherit;
    --rz-panel-menu-item-2nd-level-hover-background-color: #10793e;
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-2nd-level-background-color: transparent;
    --rz-panel-menu-item-2nd-level-color: black;
    --rz-panel-menu-item-3rd-level-hover-background-color: transparent;
    --rz-panel-menu-item-3rd-level-active-background-color: #10793e;
    --rz-panel-menu-item-3rd-level-hover-background-color: #10793e;
    --rz-panel-menu-item-3rd-level-background-color: transparent;
    --rz-panel-menu-item-2nd-level-active-background-color: #10793e;
    --rz-panel-menu-item-line-height: 1.5rem;
    --rz-panel-menu-item-border: 1px solid #eeeeee;
    --rz-panel-menu-color: black;
    --rz-panel-menu-item-active-color: white;
    --rz-sidebar-toggle-hover-background-color: var(--fresh-nav-hover-bg);
    --rz-sidebar-toggle-hover-border-radius: 4px;
    --rz-primary: var(--fresh-primary-color);
    --rz-primary-lighter: var(--fresh-primary-lighter);
    --rz-selectbar-selected-background-color: #58C085;
    /* Fresh nav sizing */
    --fresh-nav-radius: 10px;
    --fresh-nav-padding-y: 0.55rem;
    --fresh-nav-padding-x: 0.9rem;
    --fresh-nav-padding-y-mobile: 0.75rem;
    --fresh-nav-padding-x-mobile: 1rem;
}

/* DARK MODE DISABLED - See PDSComponents/Documentation/DarkMode.md
   The @media (prefers-color-scheme: dark) block has been REMOVED (not just commented out)
   because it was causing CSS specificity issues that prevented component-level overrides 
   from working correctly. This affected button text colors, links, and other UI elements
   across authentication components (ModernLoginControl, AccountDetails, etc.).
   
   When ready to re-enable dark mode:
   1. Restore the @media block from git history or documentation
   2. Fix the CSS cascade/specificity issues (consider CSS @layer or JS-based theming)
   3. Update UISettings:EnableDarkMode to true in appsettings.json
   4. Test all components listed in DarkMode.md
*/

@font-face {
    font-family: 'FreshIcons';
    src: url('../fonts/FreshIcons.woff2') format('woff2'),
         url('../fonts/FreshIcons.woff') format('woff'),
         url('../fonts/FreshIcons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

/* ===========================================
   GLOBAL RESET & BOX SIZING
   =========================================== */

[class^=rz-], [class^=rz-]::before, [class^=rz-]::after, [class^=rz-] *, [class^=rz-] *::before, [class^=rz-] *::after,
[class*=" rz-"], [class*=" rz-"]::before, [class*=" rz-"]::after, [class*=" rz-"] *, [class*=" rz-"] *::before, [class*=" rz-"] *::after {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*, ::after, ::before {
    box-sizing: border-box;
}

/* ===========================================
   HEADER, SIDEBAR, FOOTER (shared across layouts)
   =========================================== */

.rz-header {
    min-height: var(--rz-header-min-height);
    border-bottom: none;
    color: black;
    box-shadow: none;
    background-color: var(--fresh-header-bg);
}

.rz-sidebar {
    background-color: var(--fresh-sidebar-bg);
    color: var(--rz-sidebar-color);
    border-inline-end: none;
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: var(--rz-sidebar-z);
    width: var(--rz-sidebar-width);
    opacity: 1;
    transition: width var(--rz-transition), opacity var(--rz-transition);
}

.rz-footer {
    padding: var(--rz-footer-padding);
    border-top: var(--rz-footer-border);
    background-color: var(--fresh-header-bg);
    color: var(--rz-footer-color);
}

/* ===========================================
   FRESH LAYOUT BODY - RESPONSIVE & CENTERED
   Content is ALWAYS centered relative to the FULL SCREEN WIDTH,
   regardless of sidebar state
   =========================================== */

/* Fresh Layout body - responsive positioning based on sidebar state */
.fresh-layout .rz-body {
    transition: margin-left var(--rz-transition), margin-inline-start var(--rz-transition);
    box-sizing: border-box;
}

/* Desktop (>= 1024px) - Center content to full screen by compensating for body margin */
@media (min-width: 1024px) {
    .fresh-layout .rz-body {
        /* Radzen's RadzenBody component automatically adds inline styles:
           - When Expanded={true}: margin-left: 250px;
           - When Expanded={false}: margin-left: 0;
           DO NOT override these! They prevent content from flowing under sidebar. */
    }
    
    /* Content wrapper - centered relative to FULL VIEWPORT, not available space
       Use CSS transform to shift content left, compensating for the body's margin.
       Transform doesn't affect layout flow, so content won't overflow. */
    .fresh-layout .rz-body > .rz-row {
        max-width: 1440px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        box-sizing: border-box;
        /* Shift content left by half of sidebar width when sidebar would be expanded
           This only applies when body has left margin (sidebar expanded state) */
        transform: translateX(calc(var(--rz-sidebar-width) / -2));
    }
    
    /* When body has no left margin (sidebar collapsed), don't shift content */
    .fresh-layout .rz-body[style*="margin-left: 0"] > .rz-row,
    .fresh-layout .rz-body:not([style*="margin-left"]) > .rz-row {
        transform: translateX(0);
    }
}

/* Tablet and Mobile (< 1024px) - sidebar overlays, simple centering */
@media (max-width: 1023px) {
    .fresh-layout .rz-body {
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        width: 100% !important;
    }
    
    .fresh-layout .rz-body > .rz-row {
        max-width: 1440px;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Ensure content columns use full available width within the centered container */
.fresh-layout .rz-body .rz-column {
    width: 100%;
    box-sizing: border-box;
}

/* Prevent content from being too narrow on very wide screens */
@media (min-width: 1920px) {
    .fresh-layout .rz-body > .rz-row {
        max-width: 1600px; /* Slightly wider on very large screens */
    }
}

/* Mobile backdrop to prevent interaction with content when sidebar is open */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fresh-backdrop-bg);
    z-index: 999; /* Below sidebar (1000) but above content */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

/* Prevent body scroll when mobile sidebar is open */
@media (max-width: 1023px) {
    /* Use modern CSS :has() pseudo-class to detect when sidebar is expanded */
    body:has(.rz-sidebar.rz-sidebar-expanded),
    html:has(.rz-sidebar.rz-sidebar-expanded) {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Fallback for older browsers - use the .sidebar-open class if :has() not supported */
    @supports not (selector(:has(*))) {
        body.sidebar-open,
        html.sidebar-open {
            overflow: hidden !important;
            position: fixed !important;
            width: 100% !important;
            height: 100% !important;
        }
    }
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

p {
    color: #2d3748 !important;
    line-height: 22px;
    font-size: 13px;
}

.pageText {
    font-weight: normal;
    font-size: 0.80rem;
}

.subSectionHeader {
    font-size: 1rem !important;
    font-weight: bold !important;
}

.sectionHeader {
    font-size: 1.25rem !important;
    font-weight: bold !important;
    color: var(--fresh-primary-color) !important;
}

.secondarySectionHeader {
    font-weight: bold !important;
    font-size: 1.125rem !important;
}

.pageHeaderFont {
    font-size: 1.75rem !important;
    color: var(--fresh-heading-text) !important;
    font-weight: bold !important;
}

/* Readonly/Disabled textbox styling - grayed out appearance */
.readonly-textbox,
.readonly-textbox input,
.readonly-textbox .rz-textbox {
    background-color: #f5f5f5 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
    border-color: #d0d0d0 !important;
}

    .readonly-textbox input::placeholder {
        color: #adb5bd !important;
    }
/* ===========================================
   LINKS - ALWAYS RZ-PRIMARY GREEN
   =========================================== */

/* Standard links - ALWAYS rz-primary green */
a {
    color: var(--rz-link-color, #10793e) !important;
    text-decoration: underline;
}

a:hover {
    color: var(--rz-link-hover-color, #0d6233) !important;
}

/* Radzen links - ALWAYS rz-primary green - override MaterialBase with extreme specificity */
.rz-link,
.rz-link-text,
a.rz-link,
rz-link .rz-link-text,
.rz-button.rz-link,
rz-button.rz-link .rz-link-text,
.rz-link.rz-variant-text,
.rz-link.rz-variant-text .rz-link-text,
button.rz-link,
button.rz-link .rz-link-text,
.rz-button.rz-variant-text,
button.rz-variant-text {
    color: var(--rz-link-color, #10793e) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--rz-link-text-decoration-color, #10793e) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rz-link:hover,
.rz-link:hover .rz-link-text,
a.rz-link:hover,
a.rz-link:hover .rz-link-text,
.rz-button.rz-link:hover,
.rz-button.rz-link:hover .rz-link-text,
.rz-link.rz-variant-text:hover,
.rz-link.rz-variant-text:hover .rz-link-text,
button.rz-link:hover,
button.rz-link:hover .rz-link-text,
.rz-button.rz-variant-text:hover,
button.rz-variant-text:hover {
    color: var(--rz-link-hover-color, #0d6233) !important;
    text-decoration-color: var(--rz-link-hover-color, #0d6233) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Override MaterialBase's specific .rz-link color regardless of variant */
.rz-button-text.rz-link,
.rz-variant-text.rz-link,
a[class*="rz-link"],
button[class*="rz-link"] {
    color: var(--rz-link-color, #10793e) !important;
}

.rz-button-text.rz-link:hover,
.rz-variant-text.rz-link:hover,
a[class*="rz-link"]:hover,
button[class*="rz-link"]:hover {
    color: var(--rz-link-hover-color, #0d6233) !important;
}
    
/* ===========================================
   SURFACE UTILITY CLASSES
   Renamed from confusing "light/dark" to semantic names
   - fresh-surface-white: White background with dark text (use in both light AND dark mode)
   - fresh-surface-dark: Dark background with light text (use for accents/features)
   - fresh-surface-gray: Gray background with dark text (use for subtle differentiation)
   
   Note: With the paragraph color fix above, fresh-surface-white is now optional
   for most white backgrounds, but still useful for ensuring consistency.
   =========================================== */

.fresh-surface-white {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #2d3748 !important;
}

    .fresh-surface-white p,
    .fresh-surface-white span:not(.btn-primary span):not(.rz-button span):not(button span):not(a span):not(.rz-link span),
    .fresh-surface-white b,
    .fresh-surface-white .cardGridHeader,
    .fresh-surface-white .rz-label:not(.btn-primary .rz-label) {
        color: #2d3748 !important;
    }

    /* ALL links should ALWAYS be rz-primary green */
    .fresh-surface-white a,
    .fresh-surface-white .rz-link,
    .fresh-surface-white a *,
    .fresh-surface-white .rz-link * {
        color: #10793e !important;
        text-decoration: underline;
    }

    .fresh-surface-white a:hover,
    .fresh-surface-white .rz-link:hover {
        color: #0d6233 !important;
    }

.fresh-surface-dark {
    background-color: rgba(30, 41, 54, 0.95) !important;
    color: #e2e8f0 !important;
}

    .fresh-surface-dark p,
    .fresh-surface-dark span:not(.btn-primary span):not(.rz-button span):not(button span):not(a span):not(.rz-link span),
    .fresh-surface-dark b,
    .fresh-surface-dark .cardGridHeader {
        color: #e2e8f0 !important;
    }

    /* ALL links should ALWAYS be rz-primary green */
    .fresh-surface-dark a,
    .fresh-surface-dark .rz-link,
    .fresh-surface-dark a *,
    .fresh-surface-dark .rz-link * {
        color: #10793e !important;
        text-decoration: underline;
    }

    .fresh-surface-dark a:hover,
    .fresh-surface-dark .rz-link:hover {
        color: #0d6233 !important;
    }

.fresh-surface-gray {
    background-color: #dfdfdf !important;
    color: #1a202c !important;
}

    .fresh-surface-gray p,
    .fresh-surface-gray span:not(.btn-primary span):not(.rz-button span):not(button span):not(a span):not(.rz-link span),
    .fresh-surface-gray b,
    .fresh-surface-gray .cardGridHeader,
    .fresh-surface-gray .rz-label:not(.btn-primary .rz-label):not(button .rz-label) {
        color: #1a202c !important;
    }

    /* ALL links should ALWAYS be rz-primary green */
    .fresh-surface-gray a,
    .fresh-surface-gray .rz-link,
    .fresh-surface-gray a *,
    .fresh-surface-gray .rz-link * {
        color: #10793e !important;
        text-decoration: underline;
    }

    .fresh-surface-gray a:hover,
    .fresh-surface-gray .rz-link:hover {
        color: #0d6233 !important;
    }

    /* Ensure buttons always have white text */
    .fresh-surface-white .btn-primary,
    .fresh-surface-white .btn-primary *,
    .fresh-surface-white button.btn-primary,
    .fresh-surface-white button.btn-primary *,
    .fresh-surface-gray .btn-primary,
    .fresh-surface-gray .btn-primary *,
    .fresh-surface-gray button.btn-primary,
    .fresh-surface-gray button.btn-primary *,
    .fresh-surface-dark .btn-primary,
    .fresh-surface-dark .btn-primary *,
    .fresh-surface-dark button.btn-primary,
    .fresh-surface-dark button.btn-primary * {
        color: #ffffff !important;
    }

/* ===========================================
   PAGINATION CONTROL BUTTONS - GLOBAL FIX
   =========================================== */

/* Fix PaginationControl buttons globally - targets all Light style buttons used in pagination */
.rz-button-light,
.rz-button[style*="--rz-button-background-color: var(--rz-light)"],
.rz-button[style*="background-color: var(--rz-light)"] {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

    .rz-button-light:hover,
    .rz-button[style*="--rz-button-background-color: var(--rz-light)"]:hover,
    .rz-button[style*="background-color: var(--rz-light)"]:hover {
        background-color: #512DA8 !important;
        border-color: #512DA8 !important;
        color: #ffffff !important;
    }

    .rz-button-light:disabled,
    .rz-button[style*="--rz-button-background-color: var(--rz-light)"]:disabled,
    .rz-button[style*="background-color: var(--rz-light)"]:disabled {
        background-color: #d1d5db !important;
        border-color: #d1d5db !important;
        color: #9ca3af !important;
        opacity: 0.6 !important;
    }

/* More specific selector for PaginationControl buttons */
    .rz-card .rz-button[title*="Page"],
.rz-card .rz-button[title="First Page"],
.rz-card .rz-button[title="Previous Page"],
.rz-card .rz-button[title="Next Page"],
.rz-card .rz-button[title="Last Page"] {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

    .rz-card .rz-button[title*="Page"]:hover,
    .rz-card .rz-button[title="First Page"]:hover,
    .rz-card .rz-button[title="Previous Page"]:hover,
    .rz-card .rz-button[title="Next Page"]:hover,
    .rz-card .rz-button[title="Last Page"]:hover {
        background-color: #512DA8 !important;
        border-color: #512DA8 !important;
        color: #ffffff !important;
    }

    .rz-card .rz-button[title*="Page"]:disabled,
    .rz-card .rz-button[title="First Page"]:disabled,
    .rz-card .rz-button[title="Previous Page"]:disabled,
    .rz-card .rz-button[title="Next Page"]:disabled,
    .rz-card .rz-button[title="Last Page"]:disabled {
        background-color: #d1d5db !important;
        border-color: #d1d5db !important;
        color: #9ca3af !important;
        opacity: 0.6 !important;
    }

/* ===========================================
   BUTTONS / HEADER CONTROLS
   =========================================== */

.rz-button-icon-left {
    font-size: 3rem;
}

/* Info icon buttons - ALWAYS transparent background with blue text */
/* Maximum specificity to override Radzen and component styles */
.rz-button[style*="background:transparent"][style*="color:#007bff"],
button[style*="background:transparent"][style*="color:#007bff"],
.info-icon-button,
.rz-button.info-icon-button,
button.info-icon-button,
.rz-card .info-icon-button,
.rz-card .rz-button.info-icon-button,
.rz-card button.info-icon-button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #007bff !important;
}

.rz-button[style*="background:transparent"][style*="color:#007bff"]:hover,
button[style*="background:transparent"][style*="color:#007bff"]:hover,
.info-icon-button:hover,
.rz-button.info-icon:hover,
.rz-button.info-icon-button:hover,
button.info-icon-button:hover,
.rz-card .info-icon-button:hover,
.rz-card .rz-button.info-icon-button:hover,
.rz-card button.info-icon-button:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: #0056b3 !important;
}

.rz-button[style*="background:transparent"][style*="color:#007bff"] .rz-button-icon-left,
button[style*="background:transparent"][style*="color:#007bff"] .rz-button-icon-left,
.info-icon-button .rz-button-icon-left,
.rz-button.info-icon .rz-button-icon-left,
.rz-button.info-icon-button .rz-button-icon-left,
button.info-icon-button .rz-button-icon-left,
.rz-card .info-icon-button .rz-button-icon-left,
.rz-card .rz-button.info-icon-button .rz-button-icon-left,
.rz-card button.info-icon-button .rz-button-icon-left {
    color: #007bff !important;
}

/* Primary buttons - ALWAYS rz-primary green, never purple */
.rz-button.rz-button-md.rz-variant-filled.rz-primary,
.rz-button.rz-variant-filled.rz-primary,
button.rz-button-md.rz-variant-filled.rz-primary,
button.rz-variant-filled.rz-primary,
.rz-button[style*="primary"],
button[style*="primary"],
.btn-primary {
    background-color: #10793e !important;
    border-color: #10793e !important;
    color: white !important;
}

.rz-button.rz-button-md.rz-variant-filled.rz-primary:hover,
.rz-button.rz-variant-filled.rz-primary:hover,
button.rz-button-md.rz-variant-filled.rz-primary:hover,
button.rz-variant-filled.rz-primary:hover,
.btn-primary:hover {
    background-color: #0d6233 !important;
    border-color: #0d6233 !important;
    color: white !important;
}

/* Ensure all text inside primary buttons is white */
.rz-button.rz-variant-filled.rz-primary *,
.rz-button.rz-variant-filled.rz-primary span,
button.rz-variant-filled.rz-primary *,
button.rz-variant-filled.rz-primary span,
.btn-primary *,
.btn-primary span {
    color: white !important;
}

/* Sidebar toggle - dark gray always */
.rz-sidebar-toggle,
.rz-sidebar-toggle .rz-button,
.rz-sidebar-toggle button {
    color: var(--fresh-header-controls-color) !important;
}

    .rz-sidebar-toggle .rz-button-icon-left, .rz-sidebar-toggle .rzi {
        color: var(--fresh-header-controls-color) !important;
    }

    .rz-sidebar-toggle:focus-visible, .rz-sidebar-toggle:hover {
        color: var(--rz-sidebar-toggle-hover-background-color);
        background: none;
        border-radius: var(--rz-sidebar-toggle-hover-border-radius);
    }

/* User menu - dark gray always */
.rz-header .rz-button,
.rz-header button,
.pds-user-menu .rz-button,
.pds-user-menu button {
    color: var(--fresh-header-controls-color) !important;
}

.rz-header .rz-button-icon-left, .rz-header .rzi,
.pds-user-menu .rz-button-icon-left, .pds-user-menu .rzi {
    color: var(--fresh-header-controls-color) !important;
}

/* ===========================================
   PROFILE MENU
   =========================================== */

ul.rz-profile-menu,
.rz-header ul.rz-profile-menu {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding-block: 0;
    padding-inline: 0;
}

ul.rz-profile-menu .rz-navigation-item-icon-children {
    visibility: hidden;
}

/* User menu button - dark gray icon only, no background (TRANSPARENT) 
   CRITICAL: Override material-base.css with extreme specificity 
   MINIMAL PADDING: Just enough for click target, no visual spacing */
.rz-header .rz-profile-menu .rz-button,
.rz-header .rz-profile-menu button,
.rz-profile-menu .rz-button,
.rz-profile-menu button,
.pds-user-menu .rz-button,
.pds-user-menu button,
ul.rz-profile-menu button,
ul.rz-profile-menu .rz-button,
.rz-header ul.rz-profile-menu button,
.rz-header ul.rz-profile-menu .rz-button,
button.rz-button.rz-profile-menu-button,
.rz-button.rz-profile-menu-button {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--fresh-header-controls-color) !important;
    padding: 0.25rem !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
}

.rz-header .rz-profile-menu .rz-button:hover,
.rz-header .rz-profile-menu button:hover,
.rz-profile-menu .rz-button:hover,
.rz-profile-menu button:hover,
.pds-user-menu .rz-button:hover,
.pds-user-menu button:hover,
ul.rz-profile-menu button:hover,
ul.rz-profile-menu .rz-button:hover,
.rz-header ul.rz-profile-menu button:hover,
.rz-header ul.rz-profile-menu .rz-button:hover,
button.rz-button.rz-profile-menu-button:hover,
.rz-button.rz-profile-menu-button:hover {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* User menu icon - dark gray, same size as sidebar toggle */
.rz-header .rz-profile-menu .userIcon,
.rz-profile-menu .userIcon,
.pds-user-menu .userIcon,
ul.rz-profile-menu .userIcon,
.rz-header ul.rz-profile-menu .userIcon {
    color: var(--fresh-header-controls-color) !important;
    font-size: 1.5rem !important;
}

/* ===========================================
   RADZEN PANEL MENU / NAV ITEMS
   =========================================== */

.rz-panel-menu {
    list-style: none;
    padding: var(--rz-panel-menu-padding);
    margin-bottom: 0;
    overflow: visible !important;
    font-size: var(--rz-panel-menu-font-size);
    font-weight: var(--rz-panel-menu-font-weight);
    color: inherit;
    background-color: var(--rz-panel-menu-background-color);
}

    .rz-panel-menu .rz-navigation-item-active,
    .rz-panel-menu .rz-navigation-item-wrapper-active {
        color: var(--rz-panel-menu-item-active-color);
    }

/* Force transparent backgrounds */
.rz-sidebar .rz-panelmenu,
rz-panelmenu-panel,
.rz-panelmenu .rz-panelmenu-panel,
rz-panel .rz-panel-content,
div[class*="panelmenu"],
.rz-sidebar .rz-panelmenu-content,
rz-panelmenu-panel,
.rz-panelmenu .rz-panelmenu-panel,
rz-panel {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* Headers (expandable) */
    .rz-panelmenu-header,
    .rz-panelmenu .rz-panelmenu-header,
    .rz-panelmenu-header-link,
    .rz-panelmenu .rz-panelmenu-header-link {
        background-color: transparent !important;
        border: none !important;
        padding: 0.875rem 1.25rem !important;
        margin: 4px 8px !important;
        border-radius: 8px !important;
        color: var(--fresh-nav-text) !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        gap: 12px !important;
        border-left: 4px solid transparent !important;
    }

        .rz-panelmenu-header:hover,
        .rz-panelmenu-header-link:hover {
            background-color: var(--fresh-nav-hover-bg) !important;
            transform: translateX(2px) !important;
        }

        .rz-panelmenu-header.rz-state-active,
        .rz-panelmenu-header-link.rz-state-active {
            background-color: var(--fresh-nav-active-bg) !important;
            color: var(--fresh-nav-active-text) !important;
            border-left-color: var(--fresh-nav-active-border) !important;
        }

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

/* ===========================================
   NAV ITEMS
   =========================================== */

.rz-navigation-item-wrapper,
.rz-navigation-item-link,
.rz-navigation-item-text {
    transition: var(--rz-menu-item-transition);
}

.rz-navigation-item-text {
    flex: auto;
}

.rz-panel-menu .rz-navigation-item-icon-children.rz-state-expanded {
    visibility: hidden;
}

.rz-panel-menu .rz-navigation-item-text {
    flex: auto;
}

/* Base navigation item styling */
.rz-navigation-item,
.rz-panelmenu .rz-navigation-item,
.rz-sidebar .rz-panel-menu .rz-navigation-item,
.rz-sidebar .rz-panelmenu .rz-navigation-item {
    padding: 0 !important;
    margin: 4px 8px !important;
    border-radius: 8px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    color: var(--fresh-nav-text) !important;
    font-weight: 500 !important;
}

.rz-navigation-item-link,
.rz-panelmenu .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link,
.rz-sidebar .rz-panelmenu .rz-navigation-item-link {
    padding: 0.875rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border-radius: 8px !important;
    gap: 12px !important;
}

.rz-panelmenu .rz-menuitem-text,
.rz-panelmenu-header-text,
.rz-navigation-item-text {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    flex: 1;
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
}

/* Hover background */
.rz-navigation-item:hover:not(.rz-state-active),
.rz-panelmenu .rz-navigation-item:hover:not(.rz-state-active),
.rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active),
.rz-sidebar .rz-panelmenu .rz-navigation-item:hover:not(.rz-state-active) {
    background-color: var(--fresh-nav-hover-bg) !important;
    transform: translateX(2px) !important;
}

/* Active state - LIGHT GREEN BACKGROUND (#C8E6C9) FULL WIDTH with DARK GRAY TEXT */
.rz-navigation-item.rz-state-active,
.rz-panelmenu .rz-navigation-item.rz-state-active,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active {
    background-color: #C8E6C9 !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Active state link - must fill the full width */
.rz-navigation-item.rz-state-active .rz-navigation-item-link,
.rz-panelmenu .rz-navigation-item.rz-state-active .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active .rz-navigation-item-link,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active .rz-navigation-item-link {
    background-color: transparent !important;
    color: #2d3748 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* Dark gray text for active items */
.rz-navigation-item.rz-state-active *,
.rz-panelmenu .rz-navigation-item.rz-state-active *,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active *,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active * {
    color: #2d3748 !important;
}

/* Icons (default) */
.rz-panelmenu .rz-menuitem-icon,
.rz-panelmenu-header .rz-menuitem-icon,
.rz-panelmenu .rzi,
.rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item-icon,
.rz-sidebar .rz-panelmenu .rz-menuitem-icon {
    font-size: 1.25rem !important;
    color: var(--fresh-nav-text-secondary);
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ICON HOVER COLOR (rz-primary green) */
.rz-navigation-item:hover:not(.rz-state-active) .rz-menuitem-icon,
.rz-navigation-item:hover:not(.rz-state-active) .rz-navigation-item-icon,
.rz-navigation-item:hover:not(.rz-state-active) .rzi,
.rz-panelmenu .rz-navigation-item:hover:not(.rz-state-active) .rz-menuitem-icon,
.rz-panelmenu .rz-navigation-item:hover:not(.rz-state-active) .rz-navigation-item-icon,
.rz-panelmenu .rz-navigation-item:hover:not(.rz-state-active) .rzi,
.rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rz-menuitem-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rzi {
    color: var(--rz-primary, var(--fresh-primary-color, #10793e)) !important;
}

/* Icon animation on hover */
.rz-navigation-item:hover .rz-menuitem-icon,
.rz-navigation-item:hover .rz-navigation-item-icon,
.rz-navigation-item:hover .rzi {
    transform: scale(1.1) !important;
}

/* Active item icons - dark gray to match text */
.rz-navigation-item.rz-state-active .rz-menuitem-icon,
.rz-navigation-item.rz-state-active .rz-navigation-item-icon,
.rz-navigation-item.rz-state-active .rzi,
.rz-navigation-item.rz-state-active i,
.rz-navigation-item-link.rz-state-active .rz-menuitem-icon,
.rz-navigation-item-link.rz-state-active .rz-navigation-item-icon,
.rz-navigation-item-link.rz-state-active .rzi,
.rz-navigation-item-link.rz-state-active i,
.rz-panelmenu .rz-navigation-item.rz-state-active .rz-menuitem-icon,
.rz-panelmenu .rz-navigation-item.rz-state-active .rzi,
.rz-panelmenu .rz-navigation-item.rz-state-active .rz-navigation-item-icon,
.rz-panelmenu .rz-navigation-item.rz-state-active i,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active .rz-menuitem-icon,
.rz-sidebar .rz-panel-menu .rz-state-active .rzi,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active .rz-navigation-item-icon,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active i,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active .rz-menuitem-icon,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active .rzi,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active i,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active .rz-navigation-item-icon {
    color: #2d3748 !important;
}

.rz-sidebar .rz-navigation-item.rz-state-active i.rzi,
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active i.rzi,
.rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active i.rzi,
.rz-navigation-item.rz-state-active > .rz-navigation-item-link > i,
.rz-navigation-item.rz-state-active > .rz-navigation-item-link > .rzi,
.rz-navigation-item.rz-state-active .rz-navigation-item-link i,
.rz-navigation-item.rz-state-active .rz-navigation-item-link .rzi,
.rz-navigation-item.rz-state-active .rz-navigation-item-link .rz-menuitem-icon,
.rz-navigation-item.rz-state-active .rz-navigation-item-link .rz-navigation-item-icon {
    color: #2d3748 !important;
}

@media screen and (max-width: 840px) {
    .userIcon {
        font-size: 1.5em;
    }
}

@media (max-width: 762px) {
    .headerPadding {
        padding-left: 15px !important;
    }
}

@media (max-width: 1023px) {
    .rz-navigation-item,
    .rz-panelmenu .rz-navigation-item,
    .rz-sidebar .rz-panel-menu .rz-navigation-item {
        padding: 0 !important;
        font-size: 16px !important;
        min-height: 60px !important;
        margin: 2px 4px !important;
    }

    /* Override for active items - FULL WIDTH on mobile too */
        .rz-navigation-item.rz-state-active,
        .rz-panelmenu .rz-navigation-item.rz-state-active,
        .rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active,
        .rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

    .rz-sidebar .rz-panel-menu .rz-navigation-item-link .rz-icon,
    .rz-navigation-item-icon,
    .rz-panelmenu .rzi {
        font-size: 1.5rem !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* Ensure user menu in header has no padding on mobile */
    .rz-header .rz-profile-menu .rz-navigation-item,
    .rz-header .rz-profile-menu .rz-navigation-item-link {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
    }
}

/* ===========================================
   LIGHT MATERIAL THEME WRAPPERS
   =========================================== */

.rz-sidebar .rz-panel-menu {
    background-color: var(--fresh-panel-menu-bg) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
}

.rz-sidebar .menu-loading-container {
    background-color: var(--fresh-panel-menu-bg) !important;
    padding: 2rem !important;
    text-align: center !important;
}

/* ===========================================
   RADZEN STEPS
   =========================================== */

.rz-steps .rz-steps-item.rz-state-active,
.rz-steps .rz-steps-item.rz-state-highlight {
    border-left: none !important;
    padding-left: 0 !important;
}

.rz-steps .rz-steps-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.rz-steps .rz-menuitem-link {
    padding-left: 0 !important;
}

.rz-steps .rz-steps-title {
    margin-left: 0 !important;
    padding-left: 0.5rem !important;
}

.rz-steps .rz-steps-number {
    display: none !important;
}

.rz-steps .rz-steps-item.rz-state-active,
.rz-steps .rz-steps-item.rz-state-highlight,
.rz-steps-current {
    background-color: transparent !important;
    color: var(--fresh-text-primary) !important;
}

    .rz-steps .rz-steps-item.rz-state-active .rz-steps-title,
    .rz-steps .rz-steps-item.rz-state-highlight .rz-steps-title,
    .rz-steps-current .rz-steps-title,
    .rz-steps .rz-steps-item.rz-state-active span,
    .rz-steps .rz-steps-item.rz-state-highlight span {
        color: var(--fresh-text-primary) !important;
    }

.rz-steps .rz-steps-item.rz-state-active,
.rz-steps .rz-steps-item.rz-state-highlight {
    position: relative;
}

    .rz-steps .rz-steps-item.rz-state-active::after,
    .rz-steps .rz-steps-item.rz-state-highlight::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background-color: #10793e !important;
        border-radius: 2px !important;
    }

    .rz-steps .rz-steps-item.rz-state-active::before,
    .rz-steps .rz-steps-item.rz-state-highlight::before {
        background-color: #10793e !important;
    }
/* ===========================================
   FRESH OVERRIDES FOR PDSBaseStyle (menu links)
   Ensure gray text and green highlights in Fresh layout only
   =========================================== */

/* Scope all menu overrides to .fresh-layout to avoid impacting dark menus */
.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-link {
    color: var(--fresh-nav-text) !important;
    font-weight: 500 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-link .rz-navigation-item-text,
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item .rz-navigation-item-text {
        color: var(--fresh-nav-text) !important;
    }

    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-link:hover,
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item:hover > .rz-navigation-item-link {
        background-color: var(--fresh-nav-hover-bg) !important;
        background-image: none !important;
        color: var(--fresh-nav-text) !important;
    }

    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-link.rz-navigation-item-link-active,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item.rz-state-active > .rz-navigation-item-link {
        background-color: transparent !important;
        background-image: none !important;
        color: #2d3748 !important;
    }

.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active .rz-navigation-item-link * {
    color: #2d3748 !important;
}

.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-icon,
.fresh-layout .rz-sidebar .rz-panel-menu .rz-menuitem-icon {
    color: var(--fresh-nav-text-secondary) !important;
}

.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rz-menuitem-icon,
.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rz-navigation-item-icon,
.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item:hover:not(.rz-state-active) .rzi {
    color: var(--rz-primary, var(--fresh-primary-color, #10793e)) !important;
}

/* Ensure the Radzen navigation item WRAPPER spans full width */
.fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper,
.fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper {
    display: block !important;
    width: 100% !important;
    position: relative !important; /* anchor highlight will sit above */
}

    /* Anchor should stretch inside the wrapper */
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper > .rz-navigation-item-link,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper > .rz-navigation-item-link {
        display: flex !important;
        width: 100% !important;
        background: transparent !important; /* let pseudo-element paint the row */
    }

    /* Paint the active row background on the WRAPPER so it always fills */
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--rz-primary-lighter, #C8E6C9);
        border-radius: var(--fresh-nav-radius);
        pointer-events: none;
        z-index: 0;
    }

    /* Keep the inner content above the highlight */
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper > *,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper > * {
        position: relative;
        z-index: 1;
    }

    /* Expand highlight to bleed over the li horizontal margins */
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before {
        left: -8px; /* match li margin-inline for desktop */
        right: -8px;
    }

@media (max-width: 1023px) {
    /* Fresh layout uses ~6px horizontal margin on mobile */
    .fresh-layout .rz-sidebar .rz-panel-menu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before,
    .fresh-layout .rz-sidebar .rz-panelmenu .rz-navigation-item-wrapper.rz-navigation-item-wrapper-active::before {
        left: -6px;
        right: -6px;
    }
}

/* ===========================================
   MESSAGE COMPOSER DIALOG STYLING
   Modern, clean dialog appearance for messaging
   =========================================== */

/* Dialog container - modern rounded corners and shadow */
.modern-message-dialog .rz-dialog {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--fresh-divider-color) !important;
    overflow: hidden !important;
}

/* Dialog title bar - clean header with subtle border */
.modern-message-dialog .rz-dialog-titlebar {
    background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%) !important;
    border-bottom: 2px solid var(--fresh-divider-color) !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Dialog title text - modern typography */
.modern-message-dialog .rz-dialog-title {
    color: var(--fresh-heading-text) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Close button - subtle and modern */
.modern-message-dialog .rz-dialog-titlebar-icon {
    color: var(--fresh-text-secondary) !important;
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
    padding: 0.5rem !important;
}

    .modern-message-dialog .rz-dialog-titlebar-icon:hover {
        background-color: rgba(125, 211, 192, 0.15) !important;
        color: var(--fresh-primary-color) !important;
        transform: rotate(90deg) !important;
    }

/* Dialog content - clean background */
.modern-message-dialog .rz-dialog-content {
    background-color: #ffffff !important;
    padding: 1.5rem !important;
    color: var(--fresh-text-primary) !important;
}

/* Dialog footer - if used */
.modern-message-dialog .rz-dialog-footer {
    background: linear-gradient(to top, #f8fafb 0%, #ffffff 100%) !important;
    border-top: 1px solid var(--fresh-divider-color) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 12px 12px !important;
}

/* Ensure inputs and controls look good in the dialog */
.modern-message-dialog .rz-textbox,
.modern-message-dialog .rz-dropdown,
.modern-message-dialog .rz-textarea {
    border-color: var(--fresh-divider-color) !important;
    border-radius: 6px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

    .modern-message-dialog .rz-textbox:focus,
    .modern-message-dialog .rz-dropdown:focus,
    .modern-message-dialog .rz-textarea:focus {
        border-color: var(--fresh-primary-color) !important;
        box-shadow: 0 0 0 3px rgba(16, 121, 62, 0.1) !important;
    }

/* Button styling in dialog */
.modern-message-dialog .rz-button-primary,
.modern-message-dialog .rz-button.rz-button-primary {
    background-color: var(--fresh-primary-color) !important;
    border-color: var(--fresh-primary-color) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.2s ease !important;
}

    .modern-message-dialog .rz-button-primary:hover {
        background-color: var(--fresh-primary-hover) !important;
        border-color: var(--fresh-primary-hover) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(16, 121, 62, 0.25) !important;
    }

.modern-message-dialog .rz-button-secondary,
.modern-message-dialog .rz-button.rz-button-secondary {
    background-color: transparent !important;
    border: 1px solid var(--fresh-divider-strong) !important;
    color: var(--fresh-text-secondary) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.2s ease !important;
}

    .modern-message-dialog .rz-button-secondary:hover {
        background-color: var(--fresh-nav-hover-bg) !important;
        border-color: var(--fresh-primary-color) !important;
        color: var(--fresh-primary-color) !important;
    }

/* Labels in dialog */
.modern-message-dialog .rz-label,
.modern-message-dialog label {
    color: var(--fresh-text-primary) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
}

/* Make the dialog overlay slightly lighter */
.modern-message-dialog + .rz-dialog-mask {
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-message-dialog .rz-dialog {
        border-radius: 8px !important;
        margin: 0.5rem !important;
    }

    .modern-message-dialog .rz-dialog-titlebar {
        padding: 1rem !important;
    }

    .modern-message-dialog .rz-dialog-content {
        padding: 1rem !important;
    }

    .modern-message-dialog .rz-dialog-title {
        font-size: 1.125rem !important;
    }
}

/* ===========================================
   RADZEN NOTIFICATIONS - CENTERED
   =========================================== */

/* Center Radzen notifications as a fixed overlay using flex layout */
body :is(.rz-notification, .rz-notification-container,
         .rz-notification-container.rz-notification-top-right,
         .rz-notification-container.rz-notification-top-left,
         .rz-notification-container.rz-notification-top-center,
         .rz-notification-container.rz-notification-bottom-right,
         .rz-notification-container.rz-notification-bottom-left) {
    position: fixed !important;
    top: 10vh !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    transform: none !important;
    inset-inline-end: auto !important;
    inset-inline-start: auto !important;
    z-index: 10002 !important;
    pointer-events: none;
    box-sizing: border-box;
    padding: 0 1rem;
}

body :is(.rz-notification, .rz-notification-container) > * {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    max-width: 600px !important;
    width: auto !important;
    pointer-events: auto;
}

@media (max-width: 767px) {
    body :is(.rz-notification, .rz-notification-container) {
        padding: 0 1rem !important;
    }
    
    body :is(.rz-notification, .rz-notification-container) > * {
        width: calc(100% - 2rem) !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body :is(.rz-notification, .rz-notification-container) > * {
        max-width: 500px !important;
    }
}

@media (min-width: 1024px) {
    body :is(.rz-notification, .rz-notification-container) > * {
        max-width: 600px !important;
    }
}

/* ==================================================================
   END NOTIFICATION POSITIONING
   ================================================================== */

/* ==================================================================
   BLAZOR ERROR UI - GLOBAL ERROR BANNER STYLING
   ================================================================== */

/* Softer red background for better readability */
#blazor-error-ui {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important; /* Light red to medium red */
    color: white !important;
    padding: 1rem !important;
    position: fixed !important;
    z-index: 99999 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 -4px 20px rgba(220,53,69,0.3) !important;
}

/* Ensure all text in error UI is white for readability */
#blazor-error-ui *,
#blazor-error-ui .error-banner-title,
#blazor-error-ui .error-banner-subtitle,
#blazor-error-ui .error-banner-icon,
#blazor-error-ui p,
#blazor-error-ui span,
#blazor-error-ui div {
    color: white !important;
}

/* Reload link styling */
#blazor-error-ui a.reload,
#blazor-error-ui a {
    color: white !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.25) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

#blazor-error-ui a.reload:hover,
#blazor-error-ui a:hover {
    background: rgba(255,255,255,0.35) !important;
    border-color: rgba(255,255,255,0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Error banner content layout */
#blazor-error-ui .error-banner-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    gap: 1rem !important;
}

#blazor-error-ui .error-banner-message {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

#blazor-error-ui .error-banner-icon {
    font-size: 1.75rem !important;
    color: white !important;
}

#blazor-error-ui .error-banner-text {
    display: flex !important;
    flex-direction: column !important;
}

#blazor-error-ui .error-banner-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: white !important;
}

#blazor-error-ui .error-banner-subtitle {
    font-size: 0.875rem !important;
    opacity: 0.95 !important;
    color: white !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #blazor-error-ui .error-banner-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    #blazor-error-ui .error-banner-message {
        flex-direction: column !important;
        width: 100% !important;
    }
}

/* ==================================================================
   END BLAZOR ERROR UI
   ================================================================== */
/* ===========================================
   RADZEN DATAGRID / TABLE STYLING
   Green header with white text for data grids
   =========================================== */

/* RadzenDataGrid header row - rz-primary green background with white text */
.rz-datatable-thead,
.rz-grid-header,
.rz-datagrid-header,
.rz-datatable .rz-datatable-thead,
.rz-datatable thead,
.rz-datagrid thead {
    background-color: #10793e !important;
    color: #ffffff !important;
    border-bottom: 2px solid #0d6233 !important;
}

    /* Header cells */
    .rz-datatable-thead th,
    .rz-datatable-thead .rz-column-title,
    .rz-datagrid thead th,
    .rz-datagrid-header th,
    .rz-datagrid-header .rz-column-title {
        background-color: #10793e !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: 0.75rem 1rem !important;
        text-align: left !important;
        border-color: #0d6233 !important;
    }

    /* Sort icons in header - white */
    .rz-datatable-thead .rz-sortable-column-icon,
    .rz-datagrid thead .rz-sortable-column-icon,
    .rz-datatable-thead .rzi,
    .rz-datagrid thead .rzi {
        color: #ffffff !important;
    }

    /* Header text */
    .rz-datatable-thead span,
    .rz-datagrid thead span,
    .rz-datatable-thead .rz-cell-data,
    .rz-datagrid thead .rz-cell-data {
        color: #ffffff !important;
    }

    /* Hover state for sortable headers */
    .rz-datatable-thead th:hover,
    .rz-datagrid thead th:hover {
        background-color: #0d6233 !important;
        cursor: pointer;
    }