:root {
    --mud-palette-table-lines-sm: rgba(224,224,224, 0.5);
    --mud-palette-primary: #090b7e;
    /* Global tooltip colors - white background for better visibility */
    --mud-tooltip-background-color: white !important;
    --mud-popover-background-color: white !important;
    --tooltip-bg: white !important;
    --tooltip-background: white !important;
}

/* CRITICAL: PersonCard name must be white - highest priority */
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography-body1,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-text,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] *,
/* Target the exact element shown in inspector */
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] p.mud-typography.mud-typography-body1,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] p.mud-typography,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] p[class*="mud-typography"],
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] p[class*="body1"] {
    color: white !important;
}

@media (max-width: 600px) {
    .mud-xs-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: 1px solid var(--mud-palette-table-lines-sm);
    }

    .end-drawer {
        width: 240px !important;
    }
}

.fsh-center-text {
    text-align: center !important;
}

.grey-background {
    background-color: #f0f0f0; /* This is a light grey color */
    min-height: 100vh; /* Make sure it covers the full viewport height */
}

.mud-button-filled {
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 1px 5px 0 rgb(0 0 0 / 10%) !important;
}

.mud-dialog {
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 0), 0 10px 10px 0 rgb(0 0 0 / 5%) !important;
}

.mud-nav-link {
    white-space: normal !important;
    padding: 12px 16px 12px 38px;
    transition: background-color 250ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 0ms,
                box-shadow 250ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 0ms,
                border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .mud-nav-link.active:not(.mud-nav-link-disabled) {
        /* Light gray background for active state */
        background-color: #f0f0f0 !important;
        color: var(--mud-palette-primary) !important;
    }

/* Remove light blue ripple effect on click */
.mud-nav-link .mud-ripple,
.mud-nav-link:focus .mud-ripple,
.mud-nav-link:active .mud-ripple,
.mud-nav-group-header .mud-ripple,
.mud-nav-group-header:focus .mud-ripple,
.mud-nav-group-header:active .mud-ripple {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Remove background color change on focus/active states */
.mud-nav-link:focus,
.mud-nav-link:active,
.mud-nav-link:focus-visible,
.mud-nav-group-header:focus,
.mud-nav-group-header:active,
.mud-nav-group-header:focus-visible {
    background-color: transparent !important;
}

/* Ensure hover doesn't show light blue */
.mud-nav-link:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.mud-nav-group-header:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.mud-nav-link .mud-nav-link-expand-icon, .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    color: white !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: white;
}

.mud-table {
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.mud-card {
    margin-bottom: 20px !important;
}

#blazor-error-ui {
    color: var(--mud-palette-drawer-text);
    background: var(--mud-palette-drawer-background);
}

.mud-overlay-dark {
    backdrop-filter: blur(2px);
}

.mud-card-header .mud-card-header-avatar {
    margin-inline-end: 10px !important;
}

.mud-nav-link {
    padding: 12px 16px 12px 15px;
}

.mud-dialog-content {
    max-height: 75vh !important;
    overflow: auto !important;
    overflow-x: hidden !important;
}

.mud-grid-spacing-xs-3 {
    margin: 0px !important;
    margin-left: -12px !important;
}

.mud-table-toolbar
{
    flex-wrap:wrap;
    margin-bottom:20px!important;
}

::-webkit-scrollbar {
    width: 2px!important;
    height: 6px!important;
}
.fsh-nav-child {
    padding-left: 10px !important;
}

.procure-swift-logo {
    height: 25px;
    margin-left: 10px;
    margin-top: 5px;
}

.ai-assistant-navbar-btn {
    height: 32px !important;
    width: 32px !important;
    margin-top: 2px;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.ai-assistant-navbar-btn:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Ensure MudTooltip is always above sidebar/menu */
.mud-tooltip {
    z-index: 3000 !important;
}

/* Explicitly ensure all icon-related elements in header have no borders */
.mud-app-bar .mud-icon,
.mud-app-bar .mud-icon-button,
.mud-app-bar .mud-button,
.mud-app-bar .mud-badge,
header .mud-icon,
header .mud-icon-button,
header .mud-button,
header .mud-badge {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure MudTooltip wrapper doesn't add borders to icons */
.mud-tooltip .mud-icon,
.mud-tooltip .mud-icon-button,
.mud-tooltip .mud-button,
.mud-tooltip .mud-badge {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Global tooltip styling - white background for better visibility - more specific selectors */
.mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-popover:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button) {
    background-color: white !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Target all MudBlazor tooltip variants - more specific selectors */
.mud-tooltip-root .mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-tooltip-root .mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-tooltip-root .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-popover-root .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) {
    background-color: white !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Browser native tooltips and accessibility tooltips */
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button)::before,
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button)::after {
    background-color: white !important;
}

/* Target potential accessibility overlay tooltips - only tooltip divs */
body > div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
body > div[class*="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
body > div[class*="popover"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button) {
    background-color: white !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Override any grey backgrounds in tooltips - more specific */
div[role="tooltip"][style*="background-color: rgb(97, 97, 97)"],
div[role="tooltip"][style*="background-color: #616161"],
div[class*="tooltip"][style*="background-color: grey"],
div[class*="popover"][style*="background-color: gray"] {
    background-color: white !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Specific tooltip selectors - avoid affecting icons */
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
div[data-testid*="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) {
    background-color: white !important;
    background: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Tooltip text color - primary color - specific selectors */
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
div[role="tooltip"]:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
.mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
.mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
/* Enhanced tooltip text selectors for better coverage */
.mud-tooltip,
.mud-tooltip .mud-typography,
.mud-tooltip .mud-text,
.mud-popover .mud-typography,
.mud-popover .mud-text,
/* Target all MudBlazor tooltip classes */
.mud-tooltip-root .mud-tooltip,
.mud-tooltip-root .mud-tooltip *,
.mud-tooltip-root .mud-popover,
.mud-tooltip-root .mud-popover *,
/* Target tooltips in AppBar specifically */
.mud-app-bar .mud-tooltip,
.mud-app-bar .mud-tooltip *,
.mud-app-bar .mud-popover,
.mud-app-bar .mud-popover *,
/* Target tooltips that appear on hover anywhere */
body > div[role="tooltip"],
body > div[role="tooltip"] *,
body > .mud-tooltip,
body > .mud-tooltip *,
body > .mud-popover,
body > .mud-popover * {
    color: var(--mud-palette-primary) !important;
    color: #090b7e !important;
}

/* Gavel tooltip specific background color - white background for better visibility */
.gavel-tooltip .mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.gavel-tooltip .mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
.gavel-tooltip .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
#gavel-tooltip-unique .mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
#gavel-tooltip-unique .mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button),
#gavel-tooltip-unique .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Gavel tooltip text color - primary color */
.gavel-tooltip .mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
.gavel-tooltip .mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
.gavel-tooltip .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
#gavel-tooltip-unique .mud-tooltip:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
#gavel-tooltip-unique .mud-tooltip-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
#gavel-tooltip-unique .mud-popover-content:not(.mud-icon):not(.mud-button):not(.mud-icon-button) *,
.gavel-tooltip .mud-text,
.gavel-tooltip .mud-typography,
#gavel-tooltip-unique .mud-text,
#gavel-tooltip-unique .mud-typography {
    color: var(--mud-palette-primary) !important;
    color: #090b7e !important;
}

/* Removed tooltip styling - was causing conflicts with icons */

/* Ensure icons in header remain white - aggressive approach */
.mud-app-bar .mud-icon,
.mud-app-bar .mud-icon svg,
.mud-app-bar .mud-icon svg path,
.mud-app-bar .mud-button .mud-icon,
.mud-app-bar .mud-button .mud-icon svg,
.mud-app-bar .mud-button .mud-icon svg path,
.mud-app-bar .mud-badge .mud-icon,
.mud-app-bar .mud-badge .mud-icon svg,
.mud-app-bar .mud-badge .mud-icon svg path,
.mud-app-bar .mud-icon-button .mud-icon,
.mud-app-bar .mud-icon-button .mud-icon svg,
.mud-app-bar .mud-icon-button .mud-icon svg path,
.mud-app-bar .mud-icon-button .mud-icon svg *,
.mud-app-bar .mud-icon svg *,
.mud-app-bar .mud-icon *,
.mud-app-bar .mud-button .mud-icon *,
.mud-app-bar .mud-badge .mud-icon *,
.mud-app-bar * .mud-icon,
.mud-app-bar * .mud-icon svg,
.mud-app-bar * .mud-icon svg path,
.mud-app-bar * .mud-icon svg *,
.mud-app-bar * .mud-icon * {
    color: white !important;
    fill: white !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    stroke: white !important;
}

/* Target specific MudBlazor icon classes */
.mud-app-bar .mud-icon-color-inherit,
.mud-app-bar .mud-icon-color-default,
.mud-app-bar .mud-icon-color-primary,
.mud-app-bar .mud-icon-color-secondary,
.mud-app-bar .mud-icon-color-info,
.mud-app-bar .mud-icon-color-success,
.mud-app-bar .mud-icon-color-warning,
.mud-app-bar .mud-icon-color-error,
.mud-app-bar .mud-icon-color-dark,
.mud-app-bar .mud-icon-color-surface {
    color: white !important;
    fill: white !important;
}

/* Ensure buttons and icon buttons in header have no borders */
.mud-app-bar .mud-button,
.mud-app-bar .mud-icon-button,
header .mud-button,
header .mud-icon-button,
/* Ensure Material symbols don't have borders */
.mud-app-bar .material-symbols-rounded,
header .material-symbols-rounded,
/* Ensure all clickable elements in header are clean */
.mud-app-bar *[class*="material-symbols"],
header *[class*="material-symbols"] {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Ultra aggressive approach - target all icons in top bar */
header .mud-icon,
header .mud-icon svg,
header .mud-icon svg path,
header .mud-icon svg *,
header .mud-icon *,
header .mud-button .mud-icon,
header .mud-button .mud-icon svg,
header .mud-button .mud-icon svg path,
header .mud-button .mud-icon svg *,
header .mud-button .mud-icon *,
header .mud-badge .mud-icon,
header .mud-badge .mud-icon svg,
header .mud-badge .mud-icon svg path,
header .mud-badge .mud-icon svg *,
header .mud-badge .mud-icon *,
header .mud-icon-button .mud-icon,
header .mud-icon-button .mud-icon svg,
header .mud-icon-button .mud-icon svg path,
header .mud-icon-button .mud-icon svg *,
header .mud-icon-button .mud-icon *,
header * .mud-icon,
header * .mud-icon svg,
header * .mud-icon svg path,
header * .mud-icon svg *,
header * .mud-icon * {
    color: white !important;
    fill: white !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    stroke: white !important;
}

/* White text for select component */
.white-text-select .mud-input-control .mud-input-root .mud-input-input {
    color: white !important;
}

.white-text-select .mud-input-control .mud-input-root .mud-input-border {
    border-color: white !important;
}

.white-text-select .mud-input-control .mud-input-root .mud-input-adornment {
    color: white !important;
}

.white-text-select .mud-input-control .mud-input-root .mud-input-adornment svg {
    color: white !important;
    fill: white !important;
}

.white-text-select .mud-input-control .mud-input-root .mud-input-slot {
    color: white !important;
}

.white-text-select .mud-input-root {
    color: white !important;
}

/* More specific selector for MudSelect component */
.mud-select .mud-input-control .mud-input-root .mud-input-input {
    color: white !important;
}

.mud-select .mud-input-control .mud-input-root .mud-input-adornment svg {
    color: white !important;
    fill: white !important;
}

/* Global override for all MudSelect components */
.mud-select .mud-input-control .mud-input-root .mud-input-input-control {
    color: white !important;
}

.mud-select .mud-input-control .mud-input-root .mud-input-input-control input {
    color: white !important;
}

.mud-select .mud-input-control .mud-input-root .mud-input-input-control .mud-input-input {
    color: white !important;
}

.mud-select .mud-input-control .mud-input-root .mud-input-input-control .mud-input-root-outlined {
    color: white !important;
}

.mud-select .mud-input-control .mud-input-root .mud-input-input-control .mud-input-root-outlined .mud-input-input {
    color: white !important;
}

/* Simple override for all input elements within white-text-select */
.white-text-select input {
    color: white !important;
}

.white-text-select * {
    color: white !important;
}

.white-text-select svg {
    fill: white !important;
}

/* Hover state for white-text-select */
.white-text-select:hover .mud-input-control .mud-input-root .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control .mud-input-root:hover .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control .mud-input-root .mud-input-border:hover {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control .mud-input-root-outlined:hover .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control .mud-input-root-outlined:hover .mud-input-border-outlined {
    border-color: #2196f3 !important;
}

/* More specific hover selectors for MudSelect */
.white-text-select .mud-input-control:hover .mud-input-root .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control:hover .mud-input-root-outlined .mud-input-border-outlined {
    border-color: #2196f3 !important;
}

.white-text-select .mud-select:hover .mud-input-control .mud-input-root .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-select:hover .mud-input-control .mud-input-root-outlined .mud-input-border-outlined {
    border-color: #2196f3 !important;
}

/* Focus state as well */
.white-text-select .mud-input-control .mud-input-root:focus-within .mud-input-border {
    border-color: #2196f3 !important;
}

.white-text-select .mud-input-control .mud-input-root-outlined:focus-within .mud-input-border-outlined {
    border-color: #2196f3 !important;
}

/* Custom color for trial billing chip */
.mud-chip-color-success {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Custom color for notification badges - only Color.Info */
.mud-badge-color-info .mud-badge-content {
    background-color: #2196f3 !important;
    color: white !important;
}

.mud-badge-content-info {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Ensure icons have primary color */
.mud-icon-color-primary {
    color: var(--mud-palette-primary) !important;
}

.mud-icon.mud-icon-color-primary {
    color: var(--mud-palette-primary) !important;
}

/* Force icon colors regardless of context */
.mud-badge .mud-icon {
    color: #090b7e !important;
    fill: #090b7e !important;
}

.mud-badge .mud-icon svg {
    color: #090b7e !important;
    fill: #090b7e !important;
}

.mud-badge .mud-icon * {
    color: #090b7e !important;
    fill: #090b7e !important;
}

/* Nuclear option for all icons in badges */
.mud-badge * {
    color: #090b7e !important;
    fill: #090b7e !important;
}

/* Force consistent font weight for all navigation menu items */
.mud-navmenu .mud-nav-link,
.mud-navmenu .mud-nav-group .mud-nav-group-header {
    font-weight: 500 !important;
}

/* Custom styling for badges in navigation menu - white background with blue text */
.mud-navmenu .mud-badge .mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Alternative selector for badge content */
.mud-navmenu .mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Another alternative for all badges in sidebar */
.mud-nav-link .mud-badge .mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Most aggressive selector for ALL badges */
.mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Nuclear option for span elements that look like badges */
span.mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Custom badge styling - white background with blue text */
.custom-badge .mud-badge-content {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Aggressive targeting of all badges in navigation menu */
.mud-navmenu .mud-badge span[class*="mud-badge-content"] {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Target only specific badge spans with positioning */
.mud-nav-link span[class*="badge"][style*="position"] {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Target badge content specifically */
.mud-nav-link span[class*="badge-content"] {
    background-color: white !important;
    color: #2196f3 !important;
}

/* Restore proper text color for menu items */
.mud-nav-link, .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-primary) !important;
}

/* Style expand/collapse arrows (chevrons) in navigation menu */
.mud-nav-group .mud-nav-group-expand-icon {
    color: var(--mud-palette-primary) !important;
}

/* Alternative selector for expand icons */
.mud-navmenu .mud-nav-group .mud-icon-button {
    color: var(--mud-palette-primary) !important;
}

/* Target expand/collapse icons specifically */
.mud-nav-group .mud-expand-panel-icon {
    color: var(--mud-palette-primary) !important;
}

/* More specific targeting for chevron icons */
.mud-navmenu .mud-nav-group .mud-nav-group-content .mud-button .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Nuclear option - target all expand/collapse icons */
.mud-nav-group .mud-nav-group-header .mud-button-root .mud-icon-root,
.mud-nav-group .mud-nav-group-header .mud-button .mud-icon-root,
.mud-nav-group .mud-nav-group-header .mud-icon-button .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* Target expand icons by SVG path */
.mud-nav-group svg[data-testid="ExpandMoreIcon"],
.mud-nav-group svg[data-testid="ChevronRightIcon"] {
    color: var(--mud-palette-primary) !important;
}

/* Universal selector for all SVG icons in nav groups */
.mud-nav-group svg {
    color: var(--mud-palette-primary) !important;
    fill: var(--mud-palette-primary) !important;
}

/* Target expand/collapse buttons specifically */
.mud-nav-group .mud-nav-group-header .mud-button-root {
    color: var(--mud-palette-primary) !important;
}

/* PersonCard text color in user dropdown menu */
.mud-menu .mud-card .mud-card-header .mud-text {
    color: white !important;
}

/* Alternative selector for PersonCard in dropdown */
.mud-menu .mud-card-header-content .mud-text {
    color: white !important;
}

/* Nuclear option - all text in menu with primary background */
.mud-menu div[style*="background-color: var(--mud-palette-primary)"] .mud-text {
    color: white !important;
}

/* Specific targeting for PersonCard name text */
.mud-menu .mud-card .mud-text {
    color: white !important;
}

/* User dropdown menu - Logout button text should be white */
.mud-menu .mud-button[style*="background-color: #2196f3"] .mud-button-label,
.mud-menu .mud-button[style*="background-color: #2196f3"],
.mud-menu .mud-button[style*="color: white"] .mud-button-label,
.mud-menu .mud-button[style*="color: white"],
.mud-menu .mud-button[style*="color: white"] *,
.mud-menu .mud-button[onclick*="Logout"] .mud-button-label,
.mud-menu .mud-button[onclick*="Logout"],
.mud-menu .mud-button[onclick*="Logout"] * {
    color: white !important;
}

/* User dropdown menu - Account and Dashboard menu items should be primary color */
.mud-menu .mud-menu-item .mud-text[color="Color.Primary"],
.mud-menu .mud-menu-item .mud-text,
.mud-menu .mud-menu-item .mud-icon[color="Color.Primary"],
.mud-menu .mud-menu-item .mud-icon {
    color: var(--mud-palette-primary) !important;
    color: #090b7e !important;
}

/* Specific targeting for user menu items with classes */
.mud-menu .user-menu-item .mud-text,
.mud-menu .user-menu-item .mud-icon {
    color: var(--mud-palette-primary) !important;
    color: #090b7e !important;
}

/* User logout button should be white text */
.mud-menu .user-logout-button,
.mud-menu .user-logout-button .mud-button-label,
.mud-menu .user-logout-button *,
.user-logout-button,
.user-logout-button .mud-button-label,
.user-logout-button * {
    color: white !important;
}

/* PersonCard in user menu should have white text */
.mud-menu .user-person-card .mud-text,
.mud-menu .user-person-card .mud-card-header .mud-text,
.mud-menu .user-person-card .mud-card-header-content .mud-text,
.user-person-card .mud-text,
.user-person-card .mud-card-header .mud-text,
.user-person-card .mud-card-header-content .mud-text,
/* More aggressive selectors for PersonCard text */
.mud-menu .user-person-card .mud-typography,
.mud-menu .user-person-card .mud-typography-body1,
.mud-menu .user-person-card p,
.mud-menu .user-person-card span,
.mud-menu .user-person-card div,
.user-person-card .mud-typography,
.user-person-card .mud-typography-body1,
.user-person-card p,
.user-person-card span,
.user-person-card div,
/* Nuclear option - target all text elements in PersonCard */
.mud-menu .user-person-card *,
.user-person-card *,
/* Target PersonCard with primary background specifically */
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] *,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-text,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography-body1,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] p,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] span,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"] div,
/* Override any primary color text in PersonCard area */
.mud-menu div[style*="background-color: var(--mud-palette-primary)"] *,
.mud-menu div[style*="background-color: var(--mud-palette-primary)"] .mud-text,
.mud-menu div[style*="background-color: var(--mud-palette-primary)"] .mud-typography,
.mud-menu div[style*="background-color: var(--mud-palette-primary)"] .mud-typography-body1 {
    color: white !important;
}

/* Style all text in the right menu (end drawer) with primary color */
.end-drawer .mud-text {
    color: var(--mud-palette-primary) !important;
}

/* Style all links in the right menu with primary color */
.end-drawer .mud-link {
    color: var(--mud-palette-primary) !important;
}

/* Style drawer headers in right menu */
.end-drawer .mud-drawer-header .mud-text {
    color: var(--mud-palette-primary) !important;
}

/* Style notification text content */
.end-drawer .mud-card .mud-text {
    color: var(--mud-palette-primary) !important;
}

/* More aggressive selectors for right menu text */
.mud-drawer-end .mud-text, 
.mud-drawer-end .mud-typography {
    color: var(--mud-palette-primary) !important;
}

/* Nuclear option - all text elements in right drawer */
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] .mud-text,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] .mud-typography,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h1,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h2,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h3,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h4,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h5,
.mud-drawer[style*="background-color: var(--mud-palette-surface)"] h6 {
    color: var(--mud-palette-primary) !important;
}

/* Target specific notification text elements */
.mud-drawer[data-anchor="End"] .mud-text,
.mud-drawer[data-anchor="End"] .mud-typography {
    color: var(--mud-palette-primary) !important;
}

/* Universal selector for all text in right drawer */
.mud-drawer[style*="400px"] *,
.mud-drawer[style*="400px"] span,
.mud-drawer[style*="400px"] div,
.mud-drawer[style*="400px"] p,
.mud-drawer[style*="400px"] a {
    color: var(--mud-palette-primary) !important;
}

/* Very specific targeting for right drawer */
.mud-drawer.mud-drawer-end .mud-text,
.mud-drawer.mud-drawer-end .mud-typography,
.mud-drawer.mud-drawer-end span,
.mud-drawer.mud-drawer-end div,
.mud-drawer.mud-drawer-end p,
.mud-drawer.mud-drawer-end a {
    color: var(--mud-palette-primary) !important;
}

/* More specific - target only badge content spans */
.fsh-nav-child span[class*="mud-badge"], 
.mud-nav-link span[class*="mud-badge"] {
    background-color: white !important;
    color: #2196f3 !important;
}

/* White icons in avatar - simple approach */
.mud-avatar .mud-icon svg {
    color: white !important;
    fill: white !important;
}

/* ULTIMATE OVERRIDE: Force PersonCard text to be white */
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] *,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-text,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] .mud-typography-body1,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] p,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] span,
.mud-menu div[style*="min-width: 220px"] .mud-card[style*="background-color: var(--mud-palette-primary)"] div,
/* Target all typography elements with primary background */
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"][style*="color: white"] *,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"][style*="color: white"] .mud-typography,
.mud-menu .mud-card[style*="background-color: var(--mud-palette-primary)"][style*="color: white"] .mud-text {
    color: white !important;
}

/* MudBlazor tooltip overlay - only target the actual tooltip popup */
.mud-overlay .mud-tooltip,
.mud-overlay .mud-tooltip-content,
.mud-overlay .mud-popover-content {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    z-index: 3000 !important;
}

/* MudBlazor tooltip overlay text color - primary color */
.mud-overlay .mud-tooltip *,
.mud-overlay .mud-tooltip-content *,
.mud-overlay .mud-popover-content *,
.mud-overlay .mud-tooltip .mud-text,
.mud-overlay .mud-tooltip .mud-typography,
.mud-overlay .mud-tooltip-content .mud-text,
.mud-overlay .mud-tooltip-content .mud-typography,
.mud-overlay .mud-popover-content .mud-text,
.mud-overlay .mud-popover-content .mud-typography {
    color: var(--mud-palette-primary) !important;
    color: #090b7e !important;
}

/* Ensure tooltip wrappers don't affect their child elements */
.mud-tooltip > *,
.mud-tooltip-root > * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ultra-specific reset for all possible elements in header that might be affected */
.mud-app-bar *,
header * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Re-add necessary borders only where needed */
.mud-app-bar .mud-input,
.mud-app-bar .mud-select,
.mud-app-bar .mud-textfield,
header .mud-input,
header .mud-select,
header .mud-textfield {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

/* Universal tooltip text color fix - covers all possible tooltip scenarios */
/* Target all elements that could be tooltips */
*[role="tooltip"],
*[role="tooltip"] *,
*[data-tooltip],
*[data-tooltip] *,
*[title]:hover::after,
*[title]:focus::after,
/* Target all MudBlazor tooltip-related classes */
.mud-tooltip-root,
.mud-tooltip-root *,
.mud-tooltip-wrapper,
.mud-tooltip-wrapper *,
.mud-tooltip-container,
.mud-tooltip-container *,
/* Target tooltips that might appear as floating divs */
div[style*="position: fixed"][style*="z-index"],
div[style*="position: fixed"][style*="z-index"] *,
div[style*="position: absolute"][style*="z-index"],
div[style*="position: absolute"][style*="z-index"] *,
/* Target browser-generated tooltips */
*::after[content*="attr(title)"],
*::before[content*="attr(title)"] {
    color: var(--mud-palette-primary) !important;
}

/* SAVE BUTTONS STYLING - All save buttons should use #2196f3 */
/* Target all filled buttons with Color.Success (commonly used for save) */
.mud-button-filled.mud-button-color-success {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Target all filled buttons with Color.Primary (commonly used for save) */
.mud-button-filled.mud-button-color-primary {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Target submit buttons (commonly used for save) */
.mud-button-filled[type="submit"] {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Target buttons in modal dialogs (save/update actions) */
.mud-dialog .mud-dialog-actions .mud-button-filled.mud-button-color-success,
.mud-dialog .mud-dialog-actions .mud-button-filled.mud-button-color-primary {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Target buttons with save icon (more specific selector) */
.mud-button-filled .mud-button-start-icon svg[data-testid="SaveIcon"] {
    color: white !important;
}

.mud-button-filled:has(.mud-button-start-icon svg[data-testid="SaveIcon"]) {
    background-color: #2196f3 !important;
    color: white !important;
}

/* Fallback for browsers that don't support :has() */
.mud-button-filled .mud-button-start-icon + .mud-button-label {
    color: white !important;
}

/* Hover states */
.mud-button-filled.mud-button-color-success:hover,
.mud-button-filled.mud-button-color-primary:hover,
.mud-button-filled[type="submit"]:hover {
    background-color: #1976d2 !important;
    color: white !important;
}

/* Focus states */
.mud-button-filled.mud-button-color-success:focus,
.mud-button-filled.mud-button-color-primary:focus,
.mud-button-filled[type="submit"]:focus {
    background-color: #1976d2 !important;
    color: white !important;
}

/* Active states */
.mud-button-filled.mud-button-color-success:active,
.mud-button-filled.mud-button-color-primary:active,
.mud-button-filled[type="submit"]:active {
    background-color: #1565c0 !important;
    color: white !important;
}

/* Disabled states - maintain the blue color but with reduced opacity */
.mud-button-filled.mud-button-color-success:disabled,
.mud-button-filled.mud-button-color-primary:disabled,
.mud-button-filled[type="submit"]:disabled {
    background-color: #2196f3 !important;
    color: white !important;
    opacity: 0.6 !important;
}

/* Ensure button text is always white */
.mud-button-filled.mud-button-color-success .mud-button-label,
.mud-button-filled.mud-button-color-primary .mud-button-label,
.mud-button-filled[type="submit"] .mud-button-label {
    color: white !important;
}

/* Ensure button icons are always white */
.mud-button-filled.mud-button-color-success .mud-button-start-icon,
.mud-button-filled.mud-button-color-primary .mud-button-start-icon,
.mud-button-filled[type="submit"] .mud-button-start-icon,
.mud-button-filled.mud-button-color-success .mud-button-end-icon,
.mud-button-filled.mud-button-color-primary .mud-button-end-icon,
.mud-button-filled[type="submit"] .mud-button-end-icon {
    color: white !important;
}

/* Ensure SVG icons are white */
.mud-button-filled.mud-button-color-success .mud-button-start-icon svg,
.mud-button-filled.mud-button-color-primary .mud-button-start-icon svg,
.mud-button-filled[type="submit"] .mud-button-start-icon svg,
.mud-button-filled.mud-button-color-success .mud-button-end-icon svg,
.mud-button-filled.mud-button-color-primary .mud-button-end-icon svg,
.mud-button-filled[type="submit"] .mud-button-end-icon svg {
    color: white !important;
    fill: white !important;
}

/* ============================================= */
/* MOBILE-FIRST LOGIN PAGE STYLES               */
/* ============================================= */

/* Login container mobile optimizations */
.login-container {
    background-color: #00013C;
}

/* Login card mobile styles */
.login-card {
    border-radius: 0 !important;
}

@media (min-width: 600px) {
    .login-card {
        border-radius: 16px !important;
        margin: 16px;
    }
}

/* Login card content padding */
.login-card-content {
    padding: 24px 16px !important;
}

@media (min-width: 600px) {
    .login-card-content {
        padding: 24px 16px !important;
    }
}

/* Fix MudGrid negative margins on mobile login */
.login-card-content .mud-grid {
    margin: 0 !important;
    width: 100% !important;
}

/* Login wrapper and inner elements - blue on desktop */
.login-wrapper,
.login-inner-grid,
.login-paper,
.login-form {
    background-color: #00013C;
}

/* Remove blue background on mobile - clean white design */
@media (max-width: 599px) {
    /* Prevent overscroll blue bar */
    html, body {
        background-color: white !important;
        overscroll-behavior: none;
    }
    
    .login-container {
        background-color: white !important;
        min-height: 100vh !important;
    }
    
    .login-container > .mud-grid-item,
    .login-wrapper,
    .login-inner-grid,
    .login-paper,
    .login-form,
    .login-card,
    .login-card-content {
        background-color: white !important;
    }
    
    .login-card {
        box-shadow: none !important;
    }
}

/* Sign up text - prevent wrapping on mobile */
.login-signup-text {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .login-signup-text {
        white-space: normal;
        line-height: 1.6;
    }
}

/* Touch-friendly input fields on mobile */
@media (max-width: 600px) {
    .login-card .mud-input-root {
        min-height: 48px;
    }
    
    .login-card .mud-button-filled-size-large {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* ============================================= */
/* END MOBILE-FIRST LOGIN PAGE STYLES           */
/* ============================================= */

/* ============================================= */
/* MOBILE-FIRST DASHBOARD & LAYOUT STYLES       */
/* ============================================= */

/* Mobile AppBar optimizations */
@media (max-width: 600px) {
    .mud-appbar {
        padding: 12px 12px 8px 8px !important;
        min-height: 60px !important;
        height: 60px !important;
    }
    
    .mud-appbar .mud-toolbar {
        padding: 10px 8px 6px 4px !important;
        min-height: 56px !important;
        gap: 2px !important;
        align-items: center !important;
    }
    
    /* Smaller logo on mobile */
    .procure-swift-logo {
        height: 18px !important;
        margin-left: 2px !important;
        margin-right: 4px !important;
    }
    
    /* Hide AI button on mobile */
    .ai-assistant-navbar-btn {
        display: none !important;
    }
    
    /* Compact buttons on mobile - smaller icons */
    .mud-appbar .mud-button,
    .mud-appbar .mud-icon-button {
        padding: 4px !important;
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Smaller icons inside buttons */
    .mud-appbar .mud-icon-button .mud-icon-root,
    .mud-appbar .mud-button .mud-icon-root {
        font-size: 1rem !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    /* SVG icons sizing */
    .mud-appbar .mud-icon-button svg,
    .mud-appbar .mud-button svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Compact badge on mobile - smaller and positioned better */
    .mud-appbar .mud-badge .mud-badge-content {
        font-size: 0.5rem !important;
        min-width: 12px !important;
        height: 12px !important;
        padding: 0 2px !important;
        top: 4px !important;
        right: 2px !important;
        line-height: 12px !important;
    }
    
    /* Reduce badge wrapper size and center vertically */
    .mud-appbar .mud-badge {
        transform: scale(0.9);
        margin-top: 4px !important;
    }
    
    /* Center all buttons vertically */
    .mud-appbar .mud-button,
    .mud-appbar .mud-icon-button {
        margin-top: 2px !important;
    }
    
    /* MudSpacer should not take too much space */
    .mud-appbar .mud-toolbar > .mud-spacer {
        flex-grow: 0.3 !important;
    }
    
    /* Menu hamburger icon */
    .mud-appbar .material-symbols-rounded {
        font-size: 20px !important;
    }
}

/* Dashboard mobile optimizations */
@media (max-width: 600px) {
    /* Reduce fixed heights on mobile */
    .dashboard-pending-approvals {
        height: auto !important;
        min-height: 150px !important;
        max-height: 200px !important;
    }
    
    .dashboard-total-spend {
        height: auto !important;
        min-height: 180px !important;
    }
    
    .dashboard-pr-section,
    .dashboard-invoice-reminders {
        height: auto !important;
        min-height: 160px !important;
    }
    
    /* Welcome section compact */
    .dashboard-welcome {
        padding: 12px !important;
    }
    
    .dashboard-welcome .mud-text-h6 {
        font-size: 1rem !important;
    }
    
    /* Stats cards compact */
    .dashboard-stats-card {
        height: 70px !important;
        padding: 8px !important;
    }
    
    .dashboard-stats-card .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    
    /* Reduce container padding on mobile */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Compact grid spacing on mobile */
    .mud-grid {
        margin: -4px !important;
    }
    
    .mud-grid > .mud-grid-item {
        padding: 4px !important;
    }
}

/* EndDrawer mobile improvements */
@media (max-width: 600px) {
    .end-drawer {
        width: 100% !important;
        max-width: 300px !important;
    }
    
    .end-drawer .mud-drawer-content {
        padding: 8px !important;
    }
}

/* Main content adjustments on mobile */
@media (max-width: 600px) {
    .mud-main-content {
        padding-top: 68px !important;
        margin-top: 0 !important;
    }
    
    .mud-main-content .mud-container {
        padding-top: 12px !important;
    }
}

/* Hide scrollbar on mobile for cleaner look */
@media (max-width: 600px) {
    ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
}

/* ============================================= */
/* END MOBILE-FIRST DASHBOARD & LAYOUT STYLES   */
/* ============================================= */

/* Date picker calendar improvements - MudBlazor specific */

/* Today (current day) - keep outlined but improve visibility */
.mud-picker-calendar-day.mud-current {
    background-color: transparent !important;
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-picker-calendar-day.mud-current .mud-typography,
.mud-picker-calendar-day.mud-current p {
    color: var(--mud-palette-primary) !important;
    font-weight: bold !important;
}

/* Selected day - full background */
.mud-picker-calendar-day.mud-selected {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-picker-calendar-day.mud-selected .mud-typography,
.mud-picker-calendar-day.mud-selected p {
    color: white !important;
    font-weight: bold !important;
}

/* Today + Selected combination - full background with thicker border */
.mud-picker-calendar-day.mud-current.mud-selected {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary-dark) !important;
    border-width: 3px !important;
}

.mud-picker-calendar-day.mud-current.mud-selected .mud-typography,
.mud-picker-calendar-day.mud-current.mud-selected p {
    color: white !important;
    font-weight: bold !important;
}

/* Hover effects */
.mud-picker-calendar-day:hover:not(.mud-selected) {
    background-color: var(--mud-palette-primary-lighten) !important;
}

.mud-picker-calendar-day:hover:not(.mud-selected) .mud-typography,
.mud-picker-calendar-day:hover:not(.mud-selected) p {
    color: white !important;
}

/* ============================================= */
/* MOBILE-FIRST ACCOUNT/PROFILE STYLES          */
/* ============================================= */

/* Profile avatar - square and centered */
.profile-avatar-image {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto;
}

.profile-avatar-placeholder {
    width: 150px !important;
    height: 150px !important;
    font-size: 3rem !important;
    margin: 0 auto;
}

@media (max-width: 600px) {
    /* Smaller avatar on mobile */
    .profile-avatar-placeholder {
        width: 120px !important;
        height: 120px !important;
        font-size: 2.5rem !important;
    }
    
    .profile-avatar-image {
        width: 120px !important;
        height: 120px !important;
    }
    
    /* Fix form overflow on mobile */
    .mud-grid {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .mud-grid-item {
        padding: 6px !important;
    }
    
    /* Compact card on mobile */
    .mud-card {
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* ============================================= */
/* END MOBILE-FIRST ACCOUNT/PROFILE STYLES      */
/* ============================================= */

/* ============================================= */
/* MOBILE-FIRST MODAL/DIALOG STYLES             */
/* ============================================= */

/* Full-width dialog on mobile */
@media (max-width: 600px) {
    /* Dialog should be full width on mobile */
    .mud-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    /* Dialog container full width */
    .mud-dialog-container {
        align-items: flex-start !important;
        padding: 0 !important;
    }
    
    /* Dialog paper full width */
    .mud-dialog .mud-paper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Dialog content improvements */
    .mud-dialog-content {
        padding: 12px !important;
        max-height: calc(100vh - 140px) !important;
    }
    
    /* Dialog title compact */
    .mud-dialog-title {
        padding: 12px 16px !important;
        font-size: 1.1rem !important;
    }
    
    .mud-dialog-title .mud-text-h6 {
        font-size: 1rem !important;
    }
    
    /* Dialog actions - sticky at bottom */
    .mud-dialog-actions {
        padding: 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: stretch !important;
    }
    
    /* Buttons full width on very small screens */
    .mud-dialog-actions .mud-button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
    }
    
    /* Form grid inside dialog */
    .mud-dialog .mud-grid {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .mud-dialog .mud-grid-item {
        padding: 6px 0 !important;
    }
    
    /* Input fields touch-friendly */
    .mud-dialog .mud-input-root {
        min-height: 48px !important;
    }
    
    .mud-dialog .mud-input-control {
        margin-bottom: 4px !important;
    }
    
    /* Select fields */
    .mud-dialog .mud-select .mud-input-root {
        min-height: 48px !important;
    }
    
    /* Autocomplete fields */
    .mud-dialog .mud-autocomplete .mud-input-root {
        min-height: 48px !important;
    }
}

/* Tablet improvements (600-960px) */
@media (min-width: 600px) and (max-width: 960px) {
    .mud-dialog {
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
        border-radius: 8px !important;
    }
    
    .mud-dialog-content {
        padding: 16px !important;
    }
}

/* ============================================= */
/* END MOBILE-FIRST MODAL/DIALOG STYLES         */
/* ============================================= */