/* ============================================
   INPUT FIELDS ENHANCED STYLING
   Matching Role Modal Aesthetic
   Fixed all border and alignment issues
   ============================================ */

/* CSS Variables */
:root {
  --input-height: 36px;
  --input-radius: 10px;
  --input-border-color: var(--input-border, #d1d5db);
  --input-border-hover: var(--primary, #007bff);
  --input-border-focus: var(--primary, #007bff);
  --input-bg: var(--input-bg, #ffffff);
  --input-bg-disabled: var(--input-bg-disabled, #f3f4f6);
  --input-text-disabled: var(--input-text-disabled, #6b7280);
  --error-color: var(--error, #dc2626);
  --error-bg: var(--color-error-50, #fef2f2);
  --transition-speed: 200ms;
  --box-shadow-focus: var(--input-focus-shadow, 0 0 0 4px rgba(0, 123, 255, 0.1));
}

/* ============================================
   TEXT INPUTS & NUMBER INPUTS
   ============================================ */

/* TextField root */
.MuiTextField-root,
.MuiFormControl-root {
  width: 100% !important;
}

/* Input container */
.MuiOutlinedInput-root,
.MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: var(--input-radius) !important;
  background-color: var(--input-bg) !important;
  transition: all var(--transition-speed) ease !important;
  min-height: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/* Border styling */
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: var(--grey-3, var(--input-border-color)) !important;
  border-width: 1px !important;
  transition: all var(--transition-speed) ease !important;
}

/* Hover state - NOT disabled, NOT focused */
.MuiOutlinedInput-root:not(.Mui-disabled):not(.Mui-focused):hover .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.MuiOutlinedInput-root:not(.Mui-disabled):not(.Mui-focused):hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--input-border-hover) !important;
}

/* Focus state - keep same border color as default */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--grey-3, var(--input-border-color)) !important;
  border-width: 1px !important;
}

/* Input text */
.MuiInputBase-input,
.MuiOutlinedInput-input {
  padding: 8px 12px !important;
  line-height: 1.4 !important;
  color: var(--text-primary, var(--dark, #111827)) !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  -webkit-text-fill-color: var(--text-primary, var(--dark, #111827)) !important;
}

/* Small size variant */
.MuiInputBase-sizeSmall .MuiInputBase-input,
.MuiOutlinedInput-input.MuiInputBase-inputSizeSmall {
  padding: 6px 10px !important;
}

/* Placeholder */
.MuiInputBase-input::placeholder,
.MuiOutlinedInput-input::placeholder {
  color: var(--input-placeholder, var(--grey-4, #9ca3af)) !important;
  -webkit-text-fill-color: var(--input-placeholder, var(--grey-4, #9ca3af)) !important;
  opacity: 1 !important;
}

.MuiInputBase-input::-webkit-calendar-picker-indicator,
.MuiOutlinedInput-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  filter: var(--input-picker-icon-filter, none);
}

/* Disabled state */
.MuiOutlinedInput-root.Mui-disabled,
.MuiInputBase-root.Mui-disabled {
  background-color: var(--input-bg-disabled) !important;
  cursor: not-allowed !important;
  color: var(--input-text-disabled) !important;
}

.MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color, #e5e7eb) !important;
}

.MuiInputBase-input.Mui-disabled,
.MuiOutlinedInput-input.Mui-disabled,
.MuiSelect-select.Mui-disabled {
  color: var(--input-text-disabled) !important;
  -webkit-text-fill-color: var(--input-text-disabled) !important;
  cursor: not-allowed !important;
}

/* ============================================
   SELECT DROPDOWNS
   ============================================ */

/* Select container */
.MuiSelect-root,
.MuiInputBase-root.MuiOutlinedInput-root.MuiSelect-root {
  border-radius: var(--input-radius) !important;
  min-height: 36px !important;
  height: 36px !important;
}

/* Select display text */
.MuiSelect-select,
.MuiSelect-outlined {
  padding: 8px 32px 8px 12px !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-primary, var(--dark, #111827)) !important;
  background-color: transparent !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Select icon */
.MuiSelect-icon,
.MuiSvgIcon-root.MuiSelect-icon {
  color: var(--text-secondary, var(--grey-4, #6b7280)) !important;
  transition: transform var(--transition-speed) ease-in-out !important;
  right: 14px !important;
}

.MuiInputAdornment-root .MuiSvgIcon-root,
.MuiAutocomplete-endAdornment .MuiSvgIcon-root,
.MuiAutocomplete-endAdornment .MuiIconButton-root,
.MuiAutocomplete-popupIndicator .MuiSvgIcon-root,
.MuiAutocomplete-clearIndicator .MuiSvgIcon-root {
  color: var(--text-secondary, #6b7280) !important;
}

/* Select icon when open */
.MuiSelect-iconOpen {
  transform: rotate(180deg) !important;
}

/* Select disabled state */
.MuiSelect-select.Mui-disabled {
  color: var(--input-text-disabled) !important;
  cursor: not-allowed !important;
}

/* ============================================
   DROPDOWN MENU (POPOVER)
   ============================================ */

/* Menu paper */
.MuiPaper-root.MuiPopover-paper.MuiMenu-paper,
.MuiPaper-root.MuiPaper-elevation.MuiMenu-paper {
  border-radius: 8px !important;
  box-shadow: var(--card-shadow, 0 4px 12px rgba(0, 0, 0, 0.15)) !important;
  margin-top: 4px !important;
  border: 1px solid var(--input-border-color) !important;
  background-color: var(--input-menu-bg, #ffffff) !important;
  color: var(--text-primary, #111827) !important;
}

/* Menu list */
.MuiList-root.MuiMenu-list,
.MuiList-root.MuiList-padding {
  padding: 6px !important;
  max-height: 320px !important;
}

/* Menu items */
.MuiMenuItem-root,
.MuiButtonBase-root.MuiMenuItem-root {
  border-radius: 6px !important;
  margin: 1px 0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: background-color var(--transition-speed) ease-in-out !important;
  min-height: 32px !important;
  height: 32px !important;
  line-height: 1.4 !important;
  color: var(--text-primary, #111827) !important;
}

/* Menu item hover */
.MuiMenuItem-root:hover,
.MuiButtonBase-root.MuiMenuItem-root:hover {
  background-color: var(--input-menu-hover, rgba(0, 123, 255, 0.05)) !important;
}

/* Menu item selected */
.MuiMenuItem-root.Mui-selected,
.MuiButtonBase-root.MuiMenuItem-root.Mui-selected {
  background-color: var(--input-menu-selected-bg, rgba(0, 123, 255, 0.1)) !important;
  font-weight: 500 !important;
  color: var(--input-menu-selected-text, var(--primary, #007bff)) !important;
}

.MuiMenuItem-root.Mui-selected:hover,
.MuiButtonBase-root.MuiMenuItem-root.Mui-selected:hover {
  background-color: var(--input-menu-selected-bg, rgba(0, 123, 255, 0.15)) !important;
}

/* ============================================
   AUTOCOMPLETE
   ============================================ */

/* Autocomplete root */
.MuiAutocomplete-root {
  width: 100% !important;
}

/* Autocomplete input wrapper */
.MuiAutocomplete-root .MuiOutlinedInput-root,
.MuiAutocomplete-root .MuiInputBase-root {
  padding: 2px 4px !important;
  min-height: 36px !important;
  height: auto !important;
}

/* Autocomplete input */
.MuiAutocomplete-input,
.MuiAutocomplete-input.MuiInputBase-input {
  padding: 6px 8px !important;
}

/* Autocomplete tags container */
.MuiAutocomplete-root .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
  padding: 4px !important;
}

/* Autocomplete tag chip */
.MuiAutocomplete-tag,
.MuiChip-root.MuiAutocomplete-tag {
  margin: 2px !important;
  height: 22px !important;
  border-radius: 11px !important;
  background-color: var(--input-menu-selected-bg, rgba(0, 123, 255, 0.1)) !important;
  border: 1px solid var(--sidebar-active-border, rgba(0, 123, 255, 0.24)) !important;
  font-size: 13px !important;
  color: var(--text-primary, #111827) !important;
}

/* Autocomplete clear/dropdown indicators */
.MuiAutocomplete-clearIndicator,
.MuiAutocomplete-popupIndicator {
  color: var(--text-secondary, var(--grey-4, #6b7280)) !important;
  transition: color var(--transition-speed) ease-in-out !important;
}

.MuiAutocomplete-clearIndicator:hover,
.MuiAutocomplete-popupIndicator:hover {
  color: var(--text-primary, #374151) !important;
  background-color: var(--sidebar-hover, rgba(0, 0, 0, 0.04)) !important;
}

.MuiIconButton-root {
  color: var(--text-secondary, #6b7280) !important;
}

.MuiIconButton-root:hover {
  background-color: var(--sidebar-hover, rgba(0, 0, 0, 0.04)) !important;
}

.MuiIconButton-root.Mui-disabled,
.MuiIconButton-root.Mui-disabled .MuiSvgIcon-root {
  color: var(--input-text-disabled, #6b7280) !important;
}

.MuiIconButton-colorPrimary,
.MuiIconButton-colorPrimary .MuiSvgIcon-root {
  color: var(--primary, #2563eb) !important;
}

.MuiIconButton-colorSuccess,
.MuiIconButton-colorSuccess .MuiSvgIcon-root {
  color: var(--success, #16a34a) !important;
}

.MuiIconButton-colorError,
.MuiIconButton-colorError .MuiSvgIcon-root {
  color: var(--error, #dc2626) !important;
}

/* Autocomplete loading/no options */
.MuiAutocomplete-loading,
.MuiAutocomplete-noOptions {
  padding: 12px !important;
  text-align: center !important;
  color: var(--text-secondary, var(--grey-4, #6b7280)) !important;
  font-size: 14px !important;
}

/* ============================================
   CHECKBOXES
   ============================================ */

/* Checkbox base */
.MuiCheckbox-root,
.MuiButtonBase-root.MuiCheckbox-root {
  padding: 6px !important;
  color: var(--input-border-color) !important;
  transition: all var(--transition-speed) ease-in-out !important;
}

/* Checkbox hover */
.MuiCheckbox-root:hover,
.MuiButtonBase-root.MuiCheckbox-root:hover {
  background-color: rgba(0, 123, 255, 0.04) !important;
}

/* Checkbox checked */
.MuiCheckbox-root.Mui-checked,
.MuiButtonBase-root.MuiCheckbox-root.Mui-checked {
  color: var(--primary, #007bff) !important;
}

/* Checkbox disabled */
.MuiCheckbox-root.Mui-disabled,
.MuiButtonBase-root.MuiCheckbox-root.Mui-disabled {
  color: var(--input-text-disabled) !important;
  cursor: not-allowed !important;
}

/* Checkbox icon size */
.MuiCheckbox-root .MuiSvgIcon-root,
.MuiButtonBase-root.MuiCheckbox-root .MuiSvgIcon-root {
  width: 18px !important;
  height: 18px !important;
}

/* Form control label */
.MuiFormControlLabel-root {
  margin-left: 0 !important;
  margin-right: 16px !important;
}

.MuiFormControlLabel-label,
.MuiTypography-root.MuiFormControlLabel-label {
  font-size: 14px !important;
  color: var(--text-primary, var(--dark, #374151)) !important;
  margin-left: 4px !important;
  font-weight: 500 !important;
}

.MuiFormControlLabel-label.Mui-disabled {
  color: var(--input-text-disabled) !important;
}

/* ============================================
   TEXTAREA
   ============================================ */

/* MUI Joy Textarea */
.MuiTextarea-root {
  position: relative !important;
  border-radius: var(--input-radius) !important;
  border: 1px solid var(--grey-3, var(--input-border-color)) !important;
  background-color: var(--input-bg, #ffffff) !important;
  color: var(--text-primary, #111827) !important;
  transition: border-color var(--transition-speed) ease-in-out !important;

  /* Disable Joy internals */
  --Textarea-focusedThickness: 0px !important;
  --Textarea-focusedHighlight: transparent !important;
}

/* Inner textarea must NEVER draw anything */
.MuiTextarea-textarea {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;

  font-family: var(--font-family-1, inherit) !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
  line-height: 1.4 !important;
  color: var(--text-primary, #111827) !important;
  -webkit-text-fill-color: var(--text-primary, #111827) !important;
}

.MuiTextarea-textarea::placeholder {
  color: var(--input-placeholder, #9ca3af) !important;
  opacity: 1 !important;
}

/* Hover */
.MuiTextarea-root:hover {
  border-color: var(--input-border-hover) !important;
}

.MuiTextarea-root:focus-within {
  border-color: var(--input-border-focus) !important;
  border-width: 2px !important;
  box-shadow: var(--box-shadow-focus) !important;
  padding-left: 4px;
}

.MuiTextarea-root.Mui-disabled {
  background-color: var(--input-bg-disabled, #f3f4f6) !important;
  border-color: var(--border-color, #e5e7eb) !important;
  color: var(--input-text-disabled, #6b7280) !important;
}

.MuiTextarea-root.Mui-disabled .MuiTextarea-textarea {
  color: var(--input-text-disabled, #6b7280) !important;
  -webkit-text-fill-color: var(--input-text-disabled, #6b7280) !important;
}

/* ============================================
   ERROR STATES
   ============================================ */

/* Error input background - applies to all input types including select */
.MuiOutlinedInput-root.Mui-error,
.MuiInputBase-root.Mui-error,
.MuiInputBase-root.MuiOutlinedInput-root.Mui-error {
  background-color: var(--error-bg) !important;
}

/* Ensure select dropdown also gets red background on error */
.MuiSelect-root.Mui-error,
.MuiInputBase-root.MuiOutlinedInput-root.MuiSelect-root.Mui-error {
  background-color: var(--error-bg) !important;
}

/* Error input border - overrides hover/focus */
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--error, var(--error-color)) !important;
  border-width: 2px !important;
}

/* Error hover state - keep error border */
.MuiOutlinedInput-root.Mui-error:not(.Mui-focused):hover .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.Mui-error:not(.Mui-focused):hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--error, var(--error-color)) !important;
  border-width: 2px !important;
}

/* Error focus state - red shadow */
.MuiOutlinedInput-root.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiInputBase-root.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--error, var(--error-color)) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Helper text base - alignment */
.MuiFormHelperText-root {
  font-size: 12px !important;
  margin-top: 4px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

/* Error helper text */
.MuiFormHelperText-root.Mui-error,
.error-text {
  color: var(--error, var(--error-color)) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Ensure select text area stays transparent in error state to show red background */
.MuiSelect-select.Mui-error,
.MuiOutlinedInput-root.Mui-error .MuiSelect-select,
.MuiInputBase-root.Mui-error .MuiSelect-select {
  background-color: transparent !important;
  background-image: none !important;
}

/* Error icon */
.MuiFormHelperText-root.Mui-error::before {
  content: '⚠' !important;
  font-size: 14px !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets and smaller */
@media (max-width: 768px) {
  :root {
    --input-height: 42px;
  }

  .MuiInputBase-input,
  .MuiSelect-select,
  .MuiMenuItem-root {
    font-size: 16px !important;
  }

  .MuiFormControlLabel-label {
    font-size: 15px !important;
  }

  .MuiCheckbox-root {
    padding: 10px !important;
  }

  .MuiCheckbox-root .MuiSvgIcon-root {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  :root {
    --input-height: 44px;
    --input-radius: 8px;
  }

  .MuiFormGroup-row {
    flex-direction: column !important;
  }

  .MuiFormControlLabel-root {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .MuiFormHelperText-root {
    font-size: 13px !important;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Remove default browser focus outline for mouse/click */
.MuiOutlinedInput-root:focus,
.MuiInputBase-root:focus,
.MuiTextarea-root:focus,
textarea:focus {
  outline: none !important;
}

/* Keyboard navigation outline - using MUI focus-visible class */
.MuiOutlinedInput-root.Mui-focusVisible,
.MuiInputBase-root.Mui-focusVisible,
.MuiButtonBase-root.Mui-focusVisible {
  outline: 2px solid rgba(0, 123, 255, 0.3) !important;
  outline-offset: 0px !important;
  border-radius: var(--input-radius) !important;
}

/* Textarea keyboard navigation */
.MuiOutlinedInput-root:focus-visible,
.MuiInputBase-root:focus-visible {
  outline: 2px solid rgba(0, 123, 255, 0.3) !important;
  outline-offset: 0px !important;
  border-radius: var(--input-radius) !important;
}

/* Standard focus-visible for browsers that support it */
.MuiOutlinedInput-root:focus-visible,
.MuiInputBase-root:focus-visible {
  outline: 2px solid rgba(0, 123, 255, 0.3) !important;
  outline-offset: 0px !important;
  border-radius: var(--input-radius) !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
    border-width: 2px !important;
  }

  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-width: 3px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   DATE PICKER
   ============================================ */

/* Calendar icon — match select dropdown arrow size and colour */
.MuiInputAdornment-root .MuiIconButton-root {
  padding: 4px !important;
  color: var(--grey-4, #6b7280) !important;
}

.MuiInputAdornment-root .MuiIconButton-root:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--dark, #374151) !important;
}

.MuiInputAdornment-root .MuiIconButton-root .MuiSvgIcon-root {
  width: 18px !important;
  height: 18px !important;
}

/* Calendar popup */
.MuiPickersPopper-paper {
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--input-border-color) !important;
  margin-top: 4px !important;
}

/* Calendar header */
.MuiPickersCalendarHeader-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--dark, #374151) !important;
  font-family: var(--font-family-1, inherit) !important;
}

/* Weekday labels */
.MuiDayCalendar-weekDayLabel {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--grey-4, #9ca3af) !important;
}

/* Day cells */
.MuiPickersDay-root {
  font-size: 13px !important;
  border-radius: 8px !important;
  color: var(--dark, #374151) !important;
  font-family: var(--font-family-1, inherit) !important;
}

.MuiPickersDay-root:not(.Mui-disabled):hover {
  background-color: rgba(0, 123, 255, 0.08) !important;
}

.MuiPickersDay-root.Mui-selected,
.MuiPickersDay-root.Mui-selected:hover {
  background-color: var(--primary, #007bff) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.MuiPickersDay-root.MuiPickersDay-today:not(.Mui-selected) {
  border: 1px solid var(--primary, #007bff) !important;
  background-color: transparent !important;
  color: var(--primary, #007bff) !important;
  font-weight: 600 !important;
}

.MuiPickersDay-root.Mui-disabled {
  color: var(--grey-3, #d1d5db) !important;
}

/* Prev/next month arrows */
.MuiPickersArrowSwitcher-button {
  color: var(--grey-4, #6b7280) !important;
  padding: 4px !important;
}

.MuiPickersArrowSwitcher-button:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--dark, #374151) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.MuiTypography-root,
.MuiFormLabel-root,
.MuiInputBase-input,
.MuiMenuItem-root,
.MuiFormControlLabel-label {
  text-transform: none !important;
  font-family: var(--font-family-1, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}

/* Labels */
.MuiFormLabel-root,
.MuiInputLabel-root {
  font-weight: 600 !important;
  color: var(--text-primary, var(--dark, #374151)) !important;
  margin-bottom: 0.5rem !important;
  font-size: 14px !important;
}

.MuiInputLabel-root.Mui-disabled,
.MuiFormLabel-root.Mui-disabled {
  color: var(--input-text-disabled, #6b7280) !important;
}