/* 
 * MudBlazor Component Overrides for Integrity Design System
 * This file ensures all MudBlazor components follow the brand guidelines
 */

/* ===================================
   App Bar Overrides
   =================================== */
.mud-appbar {
    background-color: var(--color-primary-blue) !important;
    color: var(--color-primary-white) !important;
    font-family: var(--font-primary) !important;
    box-shadow: var(--elevation-1) !important;
}

.mud-appbar .mud-button-text {
    color: var(--color-primary-white) !important;
    font-weight: var(--font-medium);
}

.mud-appbar .mud-typography-h6 {
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
}

/* ===================================
   Navigation Drawer Overrides
   =================================== */
.integrity-drawer .mud-drawer-content {
    background-color: var(--color-primary-white) !important;
    font-family: var(--font-primary) !important;
}

.integrity-drawer .mud-nav-link {
    margin: var(--space-1) var(--space-2);
    border-radius: 8px;
    transition: all var(--transition-fast);
    color: var(--color-secondary-gray) !important;
    font-weight: var(--font-medium);
    font-size: 0.875rem !important; /* 14px - reduced from 16px */
    padding: 8px 16px !important; /* More compact padding */
}

/* Reduce font size for nav link text specifically */
.integrity-drawer .mud-nav-link .mud-nav-link-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.4 !important; /* Tighter line height */
}

.integrity-drawer .mud-nav-link:hover {
    background: linear-gradient(135deg, rgba(239, 123, 5, 0.1) 0%, rgba(41, 171, 226, 0.1) 100%) !important;
    color: var(--color-primary-orange) !important;
    transform: translateX(4px);
}

.integrity-drawer .mud-nav-link.mud-nav-link-active {
    background: linear-gradient(135deg, var(--color-primary-orange) 0%, #FF9A3D 100%) !important;
    color: var(--color-primary-white) !important;
    font-weight: var(--font-semibold);
    box-shadow: var(--elevation-1);
}

/* Navigation group headers with reduced size */
.integrity-drawer .mud-nav-group-header {
    color: var(--color-primary-blue) !important;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    font-size: 0.75rem !important; /* 12px - reduced from 14px */
    letter-spacing: 0.05em;
    margin-top: var(--space-2) !important; /* Reduced margin */
    margin-bottom: 4px !important; /* Tighter spacing */
    padding: 6px 16px !important; /* More compact padding */
}

/* Reduce font size for nav group text specifically */
.integrity-drawer .mud-nav-group .mud-nav-group-text {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.4 !important;
}

/* Icons in navigation should remain consistent size */
.integrity-drawer .mud-nav-link .mud-nav-link-icon,
.integrity-drawer .mud-nav-group .mud-nav-group-icon {
    font-size: 20px !important; /* Slightly smaller icons */
}

/* Nested menu items should be even smaller */
.integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    font-size: 0.8125rem !important; /* 13px for nested items */
    padding-left: 40px !important; /* Indent nested items */
}

.integrity-drawer .mud-nav-group .mud-collapse-container .mud-nav-link .mud-nav-link-text {
    font-size: 0.8125rem !important; /* 13px */
}

/* Drawer header text - make smaller for consistency */
.drawer-header h6,
.drawer-header .mud-typography-h6 {
    font-size: 1.125rem !important; /* 18px - reduced from default h6 */
}

.drawer-header .mud-typography-caption {
    font-size: 0.75rem !important; /* 12px */
}

/* Ensure proper spacing between menu items */
.integrity-drawer .mud-nav-menu > .mud-nav-link,
.integrity-drawer .mud-nav-menu > .mud-nav-group {
    margin-bottom: 2px !important; /* Tighter vertical spacing */
}

/* Tooltip text should remain readable */
.mud-tooltip {
    font-size: 0.875rem !important; /* Keep tooltips at 14px for readability */
}

/* ===================================
   Button Overrides
   =================================== */
/* Primary Buttons */
.mud-button-filled-primary,
.mud-button-filled.mud-button-filled-primary {
    background-color: var(--color-primary-orange) !important;
    color: var(--color-primary-white) !important;
    font-weight: var(--font-semibold);
    border-radius: 8px !important;
    padding: 10px 24px !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    transition: all var(--transition-normal);
}

.mud-button-filled-primary:hover {
    background-color: #D66E05 !important;
    transform: translateY(-1px);
    box-shadow: var(--elevation-2);
}

/* Secondary Buttons */
.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--color-primary-blue) !important;
    color: var(--color-primary-blue) !important;
    border-radius: 8px !important;
    border-width: 2px !important;
    font-weight: var(--font-semibold);
}

.mud-button-outlined-primary:hover {
    background-color: rgba(51, 63, 77, 0.08) !important;
    border-color: var(--color-primary-orange) !important;
    color: var(--color-primary-orange) !important;
}

/* Icon Buttons */
.mud-icon-button {
    color: var(--color-primary-blue) !important;
    transition: all var(--transition-fast);
}

.mud-icon-button:hover {
    background-color: rgba(239, 123, 5, 0.1) !important;
    color: var(--color-primary-orange) !important;
}

/* ===================================
   Card Overrides
   =================================== */
.mud-card {
    border-radius: 16px !important;
    box-shadow: var(--elevation-1) !important;
    transition: all var(--transition-normal);
    font-family: var(--font-primary) !important;
}

.mud-card:hover {
    box-shadow: var(--elevation-2) !important;
    transform: translateY(-2px);
}

.mud-card-header {
    background: linear-gradient(135deg, rgba(239, 123, 5, 0.05) 0%, rgba(41, 171, 226, 0.05) 100%);
    border-bottom: 2px solid var(--color-gray-200);
    padding: var(--space-4) !important;
}

.mud-card-content {
    padding: var(--space-5) !important;
}

/* Dashboard Metric Cards */
.metric-card {
    position: relative;
    border-left: 4px solid var(--color-primary-orange) !important;
    background: linear-gradient(135deg, var(--color-primary-white) 0%, var(--color-gray-100) 100%) !important;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--color-primary-orange);
    opacity: 0.05;
    border-radius: 50%;
    transform: translate(30px, -30px);
}

/* ===================================
   Table Overrides
   =================================== */
.mud-table-container {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: var(--elevation-1) !important;
}

.mud-table-head {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-secondary-blue) 100%) !important;
}

.mud-table-head .mud-table-cell {
    color: var(--color-primary-white) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4) !important;
}

.mud-table-body .mud-table-row:hover {
    background-color: var(--color-gray-100) !important;
}

.mud-table-body .mud-table-cell {
    padding: var(--space-3) var(--space-4) !important;
    color: var(--color-primary-blue) !important;
}

/* Sortable column headers */
.mud-table-head .mud-table-cell.mud-table-cell-sort {
    cursor: pointer;
    user-select: none;
}

.mud-table-head .mud-table-cell.mud-table-cell-sort:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix for MudTable headers to prevent white hover issue */
.mud-table .mud-table-head .mud-table-cell:hover,
.mud-table .mud-table-head .mud-table-row:hover,
.mud-table .mud-table-head .mud-table-row:hover .mud-table-cell,
.mud-table .mud-table-head th:hover,
.mud-table-sortlabel:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-primary-white) !important;
}

/* Fix for MudDataGrid headers to prevent white hover issue */
.mud-data-grid .mud-table-head .mud-table-cell:hover,
.mud-data-grid .mud-table-head .mud-table-row:hover,
.mud-data-grid .mud-table-head .mud-table-row:hover .mud-table-cell {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-primary-white) !important;
}

/* Additional DataGrid header styling to ensure consistency */
.mud-data-grid .mud-table-head {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-secondary-blue) 100%) !important;
}

.mud-data-grid .mud-table-head .mud-table-cell {
    color: var(--color-primary-white) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-4) !important;
}

/* ===================================
   Form Input Overrides
   =================================== */
.mud-input-outlined .mud-input-slot {
    border-radius: 8px !important;
    border-color: var(--color-gray-300) !important;
    transition: all var(--transition-fast);
}

.mud-input-outlined:hover .mud-input-slot {
    border-color: var(--color-gray-400) !important;
}

.mud-input-outlined.mud-focused .mud-input-slot {
    border-color: var(--color-primary-orange) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(239, 123, 5, 0.2) !important;
}

/* Fix for multi-line textarea - proper height and spacing */
/* Target the exact MudBlazor structure */
.mud-input-outlined textarea.mud-input-slot,
.mud-input textarea.mud-input-slot.mud-input-root-outlined {
    margin-top: 8px !important;
    margin-bottom: 0px !important;
    padding: 12px 14px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
}

/* Force height for 3-row textareas - multiple selectors for specificity */
.mud-input textarea[rows="3"],
.mud-input textarea[rows="3"].mud-input-slot,
.mud-input-outlined textarea[rows="3"].mud-input-slot,
.mud-input-outlined textarea[rows="3"].mud-input-root,
textarea[rows="3"].mud-input-slot.mud-input-root {
    min-height: 110px !important;
    height: 110px !important;
}

/* Force height for 4-row textareas */
.mud-input textarea[rows="4"],
.mud-input textarea[rows="4"].mud-input-slot,
.mud-input-outlined textarea[rows="4"].mud-input-slot {
    min-height: 145px !important;
    height: 145px !important;
}

/* Force height for 5-row textareas */
.mud-input textarea[rows="5"],
.mud-input textarea[rows="5"].mud-input-slot,
.mud-input-outlined textarea[rows="5"].mud-input-slot {
    min-height: 180px !important;
    height: 180px !important;
}

/* Even more specific for dense margin textareas */
.mud-input-margin-dense textarea.mud-input-root-margin-dense[rows="3"] {
    min-height: 110px !important;
    height: 110px !important;
    margin-top: 4px !important;
}

/* Global textarea override with highest specificity */
div.mud-input.mud-input-outlined textarea[rows="3"] {
    min-height: 110px !important;
    height: 110px !important;
}

/* Input label styles moved to dialog-overrides.css to prevent conflicts */
/* Labels are now styled specifically for their context (dialog vs non-dialog) */

/* Required field asterisk */
.mud-input-required {
    color: var(--color-error) !important;
}

/* ===================================
   Select/Dropdown Overrides
   =================================== */
.mud-select .mud-input-slot {
    border-radius: 8px !important;
}

.mud-popover .mud-list {
    border-radius: 8px !important;
    box-shadow: var(--elevation-2) !important;
}

.mud-list-item:hover {
    background-color: rgba(239, 123, 5, 0.08) !important;
}

.mud-list-item.mud-selected-item {
    background-color: rgba(239, 123, 5, 0.15) !important;
    color: var(--color-primary-orange) !important;
    font-weight: var(--font-medium);
}

/* ===================================
   Chip Overrides
   =================================== */
.mud-chip {
    border-radius: 16px !important;
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.mud-chip-primary {
    background-color: var(--color-primary-orange) !important;
    color: var(--color-primary-white) !important;
}

.mud-chip-secondary {
    background-color: var(--color-secondary-blue) !important;
    color: var(--color-primary-white) !important;
}

/* Status Chips */
.mud-chip.status-success {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: var(--color-success) !important;
    border: 1px solid var(--color-success);
}

.mud-chip.status-warning {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: var(--color-warning) !important;
    border: 1px solid var(--color-warning);
}

.mud-chip.status-error {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: var(--color-error) !important;
    border: 1px solid var(--color-error);
}

/* ===================================
   Dialog Overrides - Moved to dialog-overrides.css
   =================================== */

/* All dialog styles have been moved to dialog-overrides.css for better organization and specificity */

/* Z-INDEX HIERARCHY:
   - App bar: 2000 (highest)
   - Drawer: 1900 (above page headers)
   - Page headers: 1700 (above dropdowns)
   - Dropdowns: 1600
*/
.mud-drawer {
    z-index: 1900 !important;
}

.mud-appbar {
    z-index: 2000 !important;
}

/* ===================================
   Snackbar Overrides
   =================================== */
.mud-snackbar {
    border-radius: 8px !important;
    font-family: var(--font-primary) !important;
}

.mud-snackbar-content-message {
    font-weight: var(--font-medium);
}

.mud-alert-filled-success {
    background-color: var(--color-success) !important;
}

.mud-alert-filled-error {
    background-color: var(--color-error) !important;
}

.mud-alert-filled-warning {
    background-color: var(--color-warning) !important;
}

.mud-alert-filled-info {
    background-color: var(--color-info) !important;
}

/* ===================================
   Progress Indicators
   =================================== */
.mud-progress-circular-primary .mud-svg-circle {
    stroke: var(--color-primary-orange) !important;
}

.mud-progress-linear-primary .mud-progress-linear-bar {
    background-color: var(--color-primary-orange) !important;
}

/* ===================================
   Tabs Overrides
   =================================== */
.mud-tabs .mud-tab {
    text-transform: none !important;
    font-weight: var(--font-medium);
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    letter-spacing: 0.01em !important;
    padding: 12px 20px !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--accent-primary) !important;
    font-weight: var(--font-semibold);
}

.mud-tabs-slider {
    background-color: var(--accent-primary) !important;
    height: 2px !important;
    border-radius: 2px 2px 0 0 !important;
}

/* ===================================
   Tooltip Overrides
   =================================== */
.mud-tooltip {
    background-color: var(--color-primary-blue) !important;
    color: var(--color-primary-white) !important;
    border-radius: 8px !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    box-shadow: var(--elevation-2) !important;
}

/* ===================================
   Switch/Toggle Overrides
   =================================== */
.mud-switch-base.mud-checked .mud-switch-track {
    background-color: var(--color-primary-orange) !important;
}

.mud-switch-base.mud-checked .mud-switch-thumb {
    background-color: var(--color-primary-white) !important;
}

/* ===================================
   Checkbox Overrides
   =================================== */
.mud-checkbox .mud-button-root.mud-checked {
    color: var(--color-primary-orange) !important;
}

/* ===================================
   Radio Button Overrides
   =================================== */
.mud-radio .mud-button-root.mud-checked {
    color: var(--color-primary-orange) !important;
}

/* ===================================
   Breadcrumb Overrides
   =================================== */
.mud-breadcrumbs .mud-link {
    color: var(--color-secondary-blue) !important;
    font-weight: var(--font-medium);
}

.mud-breadcrumbs .mud-link:hover {
    color: var(--color-primary-orange) !important;
    text-decoration: underline;
}

.mud-breadcrumbs li:last-child {
    color: var(--color-primary-blue) !important;
    font-weight: var(--font-semibold);
}

/* ===================================
   Avatar Overrides
   =================================== */
.mud-avatar {
    background-color: var(--color-primary-orange) !important;
    color: var(--color-primary-white) !important;
    font-weight: var(--font-semibold);
}

.mud-avatar-outlined {
    border: 2px solid var(--color-primary-orange) !important;
    background-color: transparent !important;
    color: var(--color-primary-orange) !important;
}

/* ===================================
   Badge Overrides
   =================================== */
.mud-badge-primary {
    background-color: var(--color-primary-orange) !important;
}

.mud-badge-secondary {
    background-color: var(--color-secondary-blue) !important;
}

/* ===================================
   Paper/Surface Overrides
   =================================== */
.mud-paper {
    border-radius: 8px !important;
    background-color: var(--color-primary-white) !important;
}

.mud-paper-outlined {
    border: 1px solid var(--color-gray-300) !important;
}

/* ===================================
   Form Layout Standardization
   =================================== */

/* Standard Dialog Form Layout */
.dialog-form {
    max-width: 100%;
}

.dialog-form .mud-grid {
    gap: var(--form-field-spacing-bottom) !important;
    margin: 0 !important;
}

.dialog-form .mud-grid-item {
    padding: 0 !important;
}

/* Consistent Two-Column Layout */
.form-two-column .mud-item[xs="12"][sm="6"] {
    min-width: 0; /* Prevent overflow */
}

/* Standard Field Heights and Spacing */
.mud-input-control {
    min-height: var(--form-field-height) !important;
}

.mud-input-outlined .mud-input-slot {
    min-height: var(--form-field-height) !important;
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal) !important;
}

.mud-input-outlined .mud-input-adornedstart .mud-input-slot {
    padding-left: 48px !important;
}

.mud-input-outlined .mud-input-adornedend .mud-input-slot {
    padding-right: 48px !important;
}

/* Consistent Select Field Styling */
.mud-select .mud-input-slot {
    min-height: var(--form-field-height) !important;
    align-items: center !important;
    align-content: center;
}

.mud-select-input {
    line-height: 1.5 !important;
    padding-right: 14px !important;
}

/* Date Picker Consistency */
.mud-picker-input-control {
    min-height: var(--form-field-height) !important;
}

.mud-picker-input .mud-input-slot {
    min-height: var(--form-field-height) !important;
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal) !important;
}

/* Numeric Field Consistency */
.mud-input-numeric .mud-input-slot {
    min-height: var(--form-field-height) !important;
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal) !important;
}

/* Autocomplete Field Consistency */
.mud-autocomplete .mud-input-slot {
    min-height: var(--form-field-height) !important;
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal) !important;
}

/* Time Picker Consistency */
.mud-timepicker-input-control {
    min-height: var(--form-field-height) !important;
}

.mud-timepicker-input .mud-input-slot {
    min-height: var(--form-field-height) !important;
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal) !important;
}

/* Checkbox and Switch Alignment */
.mud-input-control-boolean-input {
    min-height: var(--form-field-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 0 !important;
}

.mud-checkbox, .mud-switch {
    margin: 0 !important;
}

/* Form Section Spacing */
.form-section {
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-4) !important;
}

.form-section:first-child {
    margin-top: 0 !important;
}

.form-section-title {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--color-primary-blue) !important;
    margin-bottom: var(--space-3) !important;
    padding-bottom: var(--space-2) !important;
    border-bottom: 2px solid var(--color-gray-200) !important;
}

/* Helper Text Consistency */
.mud-input-helper-text {
    font-size: var(--text-sm) !important;
    margin-top: var(--space-1) !important;
    line-height: 1.4 !important;
}

/* Field Label Consistency */
.mud-input-label {
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--space-1) !important;
}

/* Responsive Adjustments for Forms */
@media (max-width: 599px) {
    .dialog-form .mud-grid {
        gap: var(--form-field-spacing-bottom) !important;
    }
    
    .mud-input-control,
    .mud-input-outlined .mud-input-slot,
    .mud-select .mud-input-slot,
    .mud-picker-input-control,
    .mud-picker-input .mud-input-slot,
    .mud-input-numeric .mud-input-slot,
    .mud-autocomplete .mud-input-slot,
    .mud-timepicker-input-control,
    .mud-timepicker-input .mud-input-slot {
        min-height: var(--form-field-height-mobile) !important;
    }
    
    .mud-input-outlined .mud-input-slot,
    .mud-picker-input .mud-input-slot,
    .mud-input-numeric .mud-input-slot,
    .mud-autocomplete .mud-input-slot,
    .mud-timepicker-input .mud-input-slot {
        padding: var(--form-field-padding-vertical-mobile) var(--form-field-padding-horizontal) !important;
    }
}

/* Fix for Address Fields - Special 3-column layout */
.address-row .mud-item[xs="12"][sm="3"] {
    min-width: 0;
    flex-basis: 25% !important;
}

@media (max-width: 959px) {
    .address-row .mud-item[xs="12"][sm="3"] {
        flex-basis: 50% !important;
    }
}

@media (max-width: 599px) {
    .address-row .mud-item[xs="12"][sm="3"] {
        flex-basis: 100% !important;
    }
}

/* ===================================
   Dialog Specific Improvements
   =================================== */

/* Dialog width consistency - removed to let MudBlazor handle sizing */

.mud-dialog-content {
    min-height: 200px !important;
    overflow-y: auto !important;
}

/* Remove default MudBlazor dense spacing that causes cramped fields */
.dialog-form .mud-input-control-margin-dense {
    margin-top: var(--form-field-spacing-bottom) !important;
    margin-bottom: var(--form-field-spacing-bottom) !important;
}

/* Ensure consistent field spacing in all dialogs */
.dialog-form .mud-input-control {
    margin-bottom: var(--form-field-spacing-bottom) !important;
}

.dialog-form .mud-grid-item:last-child .mud-input-control {
    margin-bottom: 0 !important;
}

/* Ensure dropdowns have consistent height with text fields */
.mud-select .mud-select-input {
    min-height: 40px !important;  /* Match standard text field height */
    line-height: 1.5 !important;
}

/* Also ensure the select root container matches */
.mud-select .mud-input-root.mud-input-root-outlined {
    min-height: 40px !important;  /* MudBlazor standard outlined field height */
}

/* Fix for boolean inputs (checkboxes/switches) alignment */
.mud-input-control-boolean-input .mud-form-input-control {
    align-items: center !important;
    min-height: var(--form-field-height) !important;
}

/* Counter text positioning */
.mud-input-helper-text.mud-input-counter {
    text-align: right !important;
    font-size: var(--text-xs) !important;
    opacity: 0.7 !important;
}

/* Responsive dialog sizing */
@media (max-width: 768px) {
    .mud-dialog {
        min-width: 95vw !important;
        margin: var(--space-2) !important;
    }
    
    .dialog-form .mud-grid {
        gap: var(--form-field-spacing-dense) !important;
    }
}

@media (max-width: 480px) {
    .mud-dialog {
        min-width: 98vw !important;
        margin: var(--space-1) !important;
    }
    
    /* Stack all fields vertically on very small screens */
    .form-two-column .mud-item[xs="12"][sm="6"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* Fix for cards with form fields (if any exist) */
.mud-card .dialog-form {
    padding: 0 !important;
}

.mud-card .mud-card-content .dialog-form {
    padding: 0 !important;
}

/* Ensure form sections have proper spacing */
.form-section + .mud-grid {
    margin-top: 0 !important;
}

/* Fix for nested grids in form sections */
.form-section .mud-grid {
    margin-top: var(--space-2) !important;
}


/* Fix label positioning - make labels appear above fields */
.mud-input-control {
    display: flex !important;
    flex-direction: column !important;
}

/* Move the entire input container (which includes the label) to order 2 */
.mud-input-control-input-container {
    order: 2 !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* Reverse the order inside */
    padding-right: 14px !important
}

/* Helper text container stays at bottom */
.mud-input-control-helper-container {
    order: 3 !important;
}

/* Style the label */
.mud-input-label {
    margin-bottom: 4px !important;
    color: #000000 !important; /* Make label black */
    font-weight: 500 !important; /* Medium weight */
}

/* Ensure labels are not animated/floating */
.mud-input-label.mud-input-label-animated {
    position: static !important;
    transform: none !important;
    transition: none !important;
}

/* For outlined variant specifically */
.mud-input-label-outlined {
    position: static !important;
    transform: none !important;
    background: none !important;
    padding: 0 !important;
}

/* Fix select component structure */
.mud-select > .mud-input-control {
    display: flex !important;
    flex-direction: column !important;
}

.mud-select .mud-input-control-input-container {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.mud-select .mud-input-label {
    margin-bottom: 4px !important;
    color: #000000 !important;
}

/* ===================================
   Dark Theme Overrides
   =================================== */
[data-theme="dark"] .mud-appbar {
    background-color: var(--color-surface) !important;
    color: var(--color-on-surface) !important;
}

[data-theme="dark"] .mud-drawer-content {
    background-color: var(--color-surface) !important;
}

[data-theme="dark"] .mud-card {
    background-color: var(--color-surface) !important;
    color: var(--color-on-surface) !important;
}

[data-theme="dark"] .mud-table-head {
    background: linear-gradient(135deg, #263238 0%, #37474F 100%) !important;
}

[data-theme="dark"] .mud-paper {
    background-color: var(--color-surface) !important;
    color: var(--color-on-surface) !important;
}

/* ===================================
   Earnings Mapping Table Styling - DEPRECATED
   Now using native HTML table with .employee-table class
   =================================== */
/* DEPRECATED: earnings-mapping-table class is no longer used
/* Force blue gradient for earnings mapping table header */
/*
.mud-table.earnings-mapping-table .mud-table-head,
.mud-table.earnings-mapping-table thead.mud-table-head,
.earnings-mapping-table .mud-table-head,
.earnings-mapping-table thead.mud-table-head,
.earnings-mapping-table .mud-table-container thead {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.earnings-mapping-table .mud-table-head tr,
.earnings-mapping-table thead tr {
    background: transparent !important;
    height: 40px !important;
    max-height: 40px !important;
}

.earnings-mapping-table .mud-table-head .mud-table-cell,
.earnings-mapping-table thead th,
.mud-dialog .earnings-mapping-table thead th,
.mud-dialog-content .earnings-mapping-table thead th,
.earnings-mapping-table .mud-table-container thead th {
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.75rem !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-bottom: none !important;
    background: transparent !important;
    height: 40px !important;
    max-height: 40px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

.earnings-mapping-table .mud-table-head .mud-table-cell .mud-table-sort-label {
    color: white !important;
}

.earnings-mapping-table .mud-table-head .mud-table-cell:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.earnings-mapping-table .mud-table-head .mud-checkbox .mud-checkbox-input {
    color: white !important;
}

.earnings-mapping-table .mud-table-head .mud-table-cell:first-child {
    padding: 8px !important;
    vertical-align: middle !important;
}
*/

/* Fix vertical divider height in toolbar - ultra specific targeting */
.mud-toolbar hr.mud-divider.mud-divider-vertical,
.mud-toolbar .mud-divider.mud-divider-vertical,
.mud-dialog .mud-toolbar hr.mud-divider.mud-divider-vertical,
.mud-dialog-content .mud-toolbar hr.mud-divider.mud-divider-vertical,
hr.mud-divider.mud-divider-vertical.mx-2,
.mud-toolbar hr.mud-divider-vertical,
.mud-paper .mud-toolbar hr.mud-divider-vertical {
    height: 24px !important;
    max-height: 24px !important;
    min-height: 24px !important;
    align-self: center !important;
    margin: auto 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
}

/* Ensure the toolbar itself doesn't force divider to expand */
.mud-toolbar {
    align-items: center !important;
}

/* Target the specific divider with mx-2 class */
.mud-toolbar hr.mud-divider.mud-divider-vertical.mx-2.my-auto {
    height: 24px !important;
    max-height: 24px !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* ===================================
   Toolbar Field Alignment Fix - Enhanced
   =================================== */

/* Ensure toolbar uses flexbox with proper alignment */
.mud-toolbar-dense,
.mud-toolbar.mud-toolbar-dense {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Fix alignment of search and category fields in toolbar - Base structure */
.mud-toolbar-dense .mud-input-control,
.mud-toolbar-dense .mud-select {
    display: inline-flex !important;
    align-items: flex-end !important;
    vertical-align: bottom !important;
    align-self: center !important;
}

/* Consistent margins for both input types - MORE SPECIFIC */
.mud-toolbar.mud-toolbar-dense .mud-input-control.mud-input-control-margin-dense,
.mud-dialog .mud-toolbar-dense .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    min-height: auto !important; /* Override global min-height */
}

/* MudSelect needs margin on the outer element */
.mud-toolbar-dense .mud-select {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}

/* Remove double margin on nested input-control inside select */
.mud-toolbar-dense .mud-select > .mud-input-control.mud-input-control-margin-dense {
    margin: 0 !important;
}

/* Ensure both input slots have exactly the same height - MORE SPECIFIC to override global styles */
.mud-toolbar.mud-toolbar-dense .mud-input.mud-input-outlined .mud-input-slot,
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input.mud-input-outlined .mud-input-slot,
.mud-dialog .mud-toolbar-dense .mud-input.mud-input-outlined .mud-input-slot,
.mud-dialog .mud-toolbar-dense .mud-select .mud-input.mud-input-outlined .mud-input-slot {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* Fix the input root container to match */
.mud-toolbar-dense .mud-input-root,
.mud-toolbar-dense .mud-select .mud-input-root {
    min-height: 40px !important;
}

/* Fix the overall input wrapper */
.mud-toolbar-dense .mud-input.mud-input-outlined,
.mud-toolbar-dense .mud-select .mud-input.mud-input-outlined {
    height: 40px !important;
    min-height: 40px !important;
}

/* Ensure input control container doesn't add extra height */
.mud-toolbar-dense .mud-input-control-input-container {
    display: flex !important;
    align-items: flex-end !important;
}

/* Fix label positioning in dense toolbar inputs */
.mud-toolbar-dense .mud-input-label.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75) !important;
    background: white !important;
    padding: 0 4px !important;
}

/* Ensure select input text aligns properly */
.mud-toolbar-dense .mud-select .mud-select-input {
    line-height: 1.5 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure adornments don't mess up alignment */
.mud-toolbar-dense .mud-input-adornment {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* Fix for spacer to not affect alignment */
.mud-toolbar-dense .mud-spacer,
.mud-toolbar-dense .flex-grow-1 {
    align-self: stretch !important;
}

/* DEPRECATED: earnings-mapping-table class is no longer used
.mud-dialog-content .earnings-mapping-table .mud-table-head,
.mud-dialog-content .earnings-mapping-table thead,
div.earnings-mapping-table .mud-table-head,
div.earnings-mapping-table thead {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
}

.earnings-mapping-table .mud-table-body .mud-table-row:hover {
    background-color: #f5f5f5 !important;
}

.earnings-mapping-table .mud-table-body .mud-table-cell {
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
}
*/

/* ===================================
   FINAL TOOLBAR OVERRIDES
   Must be last to ensure precedence
   =================================== */

/* Ensure toolbar has enough height for labels ABOVE fields */
.mud-toolbar.mud-toolbar-dense {
    min-height: 80px !important;  /* Increased significantly for labels above fields */
    padding: 20px 16px 12px 16px !important;  /* More top padding for labels */
    overflow: visible !important;
}

/* Override ALL global form field styles for toolbar inputs */
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-input-control,
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-select,
.mud-toolbar.mud-toolbar-dense .mud-input-control,
.mud-toolbar.mud-toolbar-dense .mud-select {
    min-height: 40px !important;  /* Just the input field height */
    position: relative !important;  /* For label positioning */
    margin-top: 0 !important;  /* No extra margin needed */
}

/* Override global input slot styles */
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-input-outlined .mud-input-slot,
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-select .mud-input-slot,
.mud-toolbar.mud-toolbar-dense .mud-input-outlined .mud-input-slot,
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input-slot {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    padding: 10px 14px !important;
}

/* Ensure both fields align at same baseline */
.mud-toolbar.mud-toolbar-dense .mud-input-control-input-container {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
}

/* Force select to match input height exactly */
.mud-toolbar.mud-toolbar-dense .mud-select > .mud-input-control {
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
}

/* Remove any vertical margins that cause misalignment */
.mud-toolbar.mud-toolbar-dense .mud-input-control,
.mud-toolbar.mud-toolbar-dense .mud-select,
.mud-toolbar.mud-toolbar-dense .mud-input-control-margin-dense {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Fix label alignment in toolbar - override conflicting styles */
.mud-toolbar.mud-toolbar-dense .mud-input-label.mud-input-label-outlined,
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input-label.mud-input-label-outlined,
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-input-label.mud-input-label-outlined {
    position: absolute !important;
    background: white !important;
    padding: 0 4px !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
}

/* Force ALL labels in toolbar to be positioned above fields */
.mud-toolbar.mud-toolbar-dense .mud-input-label,
.mud-toolbar.mud-toolbar-dense .mud-input-label.mud-input-label-outlined,
.mud-toolbar.mud-toolbar-dense .mud-input-label.mud-input-label-inputcontrol,
.mud-dialog .mud-toolbar.mud-toolbar-dense .mud-input-label,
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input-label {
    transform: translate(0, -22px) !important;  /* Reduced from -35px to bring labels closer */
    font-size: 0.75rem !important;
    font-weight: 600 !important;  /* Make labels bold */
    z-index: 10 !important;
    color: rgba(0, 0, 0, 0.87) !important;
    position: absolute !important;
    top: 22px !important;  /* Reduced from 35px to bring labels closer */
    left: 0 !important;
    background: transparent !important;  /* No background needed when above field */
    padding: 0 !important;
}

/* Reduced padding to bring labels closer to fields */
.mud-toolbar.mud-toolbar-dense .mud-input-control {
    padding-top: 15px !important;  /* Reduced from 20px */
}

/* Ensure consistent positioning for both field types */
.mud-toolbar.mud-toolbar-dense .mud-input-control,
.mud-toolbar.mud-toolbar-dense .mud-select > .mud-input-control {
    display: inline-block !important;
    vertical-align: top !important;  /* Align at top */
    padding-top: 15px !important;  /* Match the reduced padding */
}

/* Fix alignment - fine-tune the select position */
.mud-toolbar.mud-toolbar-dense div.mud-select {
    display: inline-block !important;
    transform: translateY(-12px) !important;  /* Reduced from -15px to bring it down slightly */
    vertical-align: top !important;
}

/* Remove the padding that's pushing the select field down */
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input-control.mud-input-control-margin-dense {
    margin: 0 !important;
    padding-top: 0 !important;  /* Remove padding - it's causing the extra space */
}

/* Adjust the Category label position for the new field position */
.mud-toolbar.mud-toolbar-dense .mud-select .mud-input-label {
    top: 26px !important;  /* Adjusted for the new transform value */
    transform: translate(0, -22px) !important;
    background: white !important;
    padding: 0 4px !important;
    z-index: 10 !important;
}

/* Ensure both containers align properly */
.mud-toolbar.mud-toolbar-dense .mud-input-control-input-container {
    margin-top: 0 !important;
}

/* Make the Search field 50% wider (from 200px to 300px) - override inline styles */
.mud-toolbar.mud-toolbar-dense .mud-input-control.mud-input-outlined-with-label .mud-input.mud-input-outlined[style*="width"],
.mud-toolbar.mud-toolbar-dense .mud-input.mud-input-outlined.mud-input-adorned-start,
.mud-toolbar.mud-toolbar-dense .mud-input-control .mud-input.mud-input-outlined {
    width: 300px !important;  /* Increased from default 200px */
    min-width: 300px !important;
    max-width: 300px !important;
}

/* Also ensure the control wrapper accommodates the wider field */
.mud-toolbar.mud-toolbar-dense .mud-input-control.mud-input-outlined-with-label:not(.mud-select) {
    width: 300px !important;
    min-width: 300px !important;
}

/* Ensure input control has proper overflow for label */
.mud-toolbar.mud-toolbar-dense .mud-input-control {
    overflow: visible !important;
}

/* Ensure the input container allows label to show above */
.mud-toolbar.mud-toolbar-dense .mud-input-control-input-container {
    overflow: visible !important;
    position: relative !important;
}

/* Make sure the outlined input itself is positioned correctly */
.mud-toolbar.mud-toolbar-dense .mud-input.mud-input-outlined {
    position: relative !important;
    margin-top: 12px !important;  /* Space for label above */
}
/* ================================================
   Accessible Switch Component Styles
   Clean rebuild - no MudBlazor overrides
   ================================================ */

.accessible-switch-container {
    width: auto !important;
    max-width: fit-content !important;
    display: inline-block !important;
}

.accessible-switch-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    min-height: 40px;
    width: auto !important;
    max-width: fit-content !important;
}

.accessible-switch-label {
    font-weight: 500;
    color: #374151;
    white-space: nowrap; /* Prevent label wrapping */
    flex-shrink: 0; /* Don't compress label */
    line-height: 1.5; /* Consistent line height for alignment */
}

/* Ensure MudSwitch aligns vertically */
.accessible-switch-row .mud-switch {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.accessible-switch-badge {
    flex-shrink: 0; /* Don't compress badge */
    display: inline-flex !important; /* Force badge to display */
    visibility: visible !important; /* Ensure badge is visible */
}

/* Ensure MudChip badge content displays properly */
.accessible-switch-badge.mud-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

.accessible-switch-badge .mud-chip-content {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    visibility: visible !important;
}

/* Force icon visibility in badge */
.accessible-switch-badge .mud-icon-root {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Force span visibility in badge */
.accessible-switch-badge span {
    display: inline !important;
    visibility: visible !important;
}

.accessible-switch-helper {
    margin-top: 4px;
    margin-left: 0;
    opacity: 0.7;
    font-size: 0.875rem;
    color: #6b7280;
}

/* ================================================
   BUG #12019: MudDataGrid Filter Row Alignment Fix
   Fix for misaligned filter input fields in ColumnFilterRow
   Ensures Column, Operator, and Filter value fields align horizontally
   ================================================ */

/* Filter row container - ensure proper horizontal alignment */
.mud-table-filter-row .mud-table-cell {
    vertical-align: middle !important;
}

/* Filter cell content wrapper - align items horizontally */
.mud-table-filter-row .mud-table-cell > div {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Operator selector and value input - consistent sizing */
.mud-table-filter-row .mud-select,
.mud-table-filter-row .mud-input-control {
    margin: 0 !important;
}

/* Ensure all filter inputs have same baseline */
.mud-table-filter-row .mud-input-slot {
    display: flex !important;
    align-items: center !important;
}

/* Filter row input fields - consistent height */
.mud-table-filter-row .mud-select .mud-input-slot,
.mud-table-filter-row .mud-input-outlined .mud-input-slot {
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 8px !important;
}

/* Filter row select (operator dropdown) alignment */
.mud-table-filter-row .mud-select {
    min-width: 80px !important;
}

/* Filter row text input alignment */
.mud-table-filter-row .mud-input-control {
    flex: 1 !important;
}

/* Remove extra margins that cause misalignment */
.mud-table-filter-row .mud-input-label-margin {
    margin-bottom: 0 !important;
}

/* Ensure filter icons align properly */
.mud-table-filter-row .mud-input-adornment {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}