/* Form Controls - Centralized Styles */
/* Created: 12/08/2025 */
/* This file contains standardized styles for form controls across the Rumble app */

/* =============================================== */
/* Switch Styles - Rumble Green (#b9ff66) */
/* =============================================== */

/* Global MUI Switch styles - automatically applied to all Switch components */
.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: #b9ff66 !important;
  opacity: 1 !important;
}

.MuiSwitch-root .MuiSwitch-thumb {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  background-color: white;
  width: 20px;
  height: 20px;
}

.MuiSwitch-root .MuiSwitch-thumb.Mui-checked {
  color: white;
}

/* Legacy rumble-switch class removed - use global MUI Switch styles above */

/* Alternative: Apply directly via sx prop (for reference) */
/* 
sx={{
  '& .MuiSwitch-switchBase.Mui-checked': {
    color: '#b9ff66',
    '&:hover': {
      backgroundColor: 'rgba(185, 255, 102, 0.08)',
    },
  },
  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
    backgroundColor: '#b9ff66',
  },
}}
*/

/* =============================================== */
/* Tooltip Icons - Standard Style */
/* =============================================== */

/* Standard tooltip icon - Apply to FaQuestionCircle or wrapper span */
.tooltip-icon {
  color: #666 !important;
  font-size: 16px !important;
  cursor: help;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  transition: color 0.2s ease;
}

.tooltip-icon:hover {
  color: #b9ff66 !important; /* Rumble green on hover */
}

/* For direct usage on FaQuestionCircle (alternative approach) */
.cursor-help {
  cursor: help;
}

/* Tooltip content styling (if needed) */
.tooltip-inner {
  max-width: 250px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

/* =============================================== */
/* Common Form Elements */
/* =============================================== */

/* Standard input height */
.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
  height: 48px !important; /* Standardized height */
}

/* Textarea standard styling */
textarea.form-control {
  min-height: 80px;
  resize: vertical;
}

/* =============================================== */
/* Form Labels with Tooltips */
/* =============================================== */

.form-label-with-tooltip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.form-label-with-tooltip label {
  margin-bottom: 0;
}

/* =============================================== */
/* Checkbox and Radio Styles */
/* =============================================== */

/* MUI Checkbox with Rumble green */
.rumble-checkbox.Mui-checked {
  color: #b9ff66 !important;
}

.rumble-checkbox.Mui-checked:hover {
  background-color: rgba(185, 255, 102, 0.08) !important;
}

/* =============================================== */
/* MUI Dropdown/Menu Glass Morphism Styles */
/* =============================================== */

/* Remove MUI default background and apply glass morphism effect */
.MuiPaper-root.MuiMenu-paper,
.MuiPopover-paper.MuiMenu-paper,
[class*="css-"][class*="-MuiPaper-root-MuiPopover-paper-MuiMenu-paper"] {
  /* Remove default MUI background gradient */
  background-image: none !important;
  
  /* Glass morphism effect */
  background: rgb(25 28 31 / 95%) !important; /* Semi-transparent dark background with 95% opacity */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  
  /* Remove borders */
  border: none !important;
  
  /* Subtle shadow for depth */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  
  /* Ensure rounded corners */
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Menu list items styling */
.MuiMenu-list {
  padding: 4px !important;
}

.MuiMenuItem-root {
  border-radius: 4px !important;
  margin: 2px 0 !important;
  transition: all 0.2s ease !important;
}

.MuiMenuItem-root:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.MuiMenuItem-root.Mui-selected {
  background-color: rgba(185, 255, 102, 0.15) !important; /* Rumble green tint */
}

.MuiMenuItem-root.Mui-selected:hover {
  background-color: rgba(185, 255, 102, 0.25) !important;
}

/* Mobile dropdown alignment fix */
@media (max-width: 767px) {
  /* Center MUI dropdowns on mobile */
  .MuiPopover-root .MuiPaper-root {
    /* Adjust transform origin for proper centering */
    transform-origin: center top !important;
  }
  
  /* Fix horizontal offset on mobile dropdowns */
  .MuiPopover-paper.MuiMenu-paper {
    /* Compensate for the 8px offset that causes misalignment */
    margin-left: -8px !important;
  }
  
  /* Alternative approach for specific selectors if needed */
  [role="listbox"].MuiMenu-list {
    /* Ensure proper width calculation */
    min-width: calc(100% + 16px) !important;
    margin-left: -8px !important;
  }
  
  /* Specific fix for board model dropdown that needs opposite offset */
  #menu-board_id .MuiPaper-root.MuiMenu-paper,
  #menu-board_id > div.MuiPopover-paper {
    /* Board dropdown always needs offset in opposite direction */
    margin-left: 8px !important;
  }
  
  /* Format dropdown only needs opposite offset when in half-width column */
  .col-6 #menu-rumble_format .MuiPaper-root.MuiMenu-paper,
  .col-6 #menu-rumble_format > div.MuiPopover-paper,
  .col-xs-6 #menu-rumble_format .MuiPaper-root.MuiMenu-paper,
  .col-xs-6 #menu-rumble_format > div.MuiPopover-paper {
    /* Format dropdown in half-width needs opposite offset */
    margin-left: 8px !important;
  }
  
  /* Format dropdown in full-width keeps default offset */
  .col-12 #menu-rumble_format .MuiPaper-root.MuiMenu-paper,
  .col-12 #menu-rumble_format > div.MuiPopover-paper,
  .col-xs-12 #menu-rumble_format .MuiPaper-root.MuiMenu-paper,
  .col-xs-12 #menu-rumble_format > div.MuiPopover-paper {
    /* Override to use default offset for full-width */
    margin-left: -8px !important;
  }
}

/* Desktop dropdown alignment */
@media (min-width: 768px) {
  /* Ensure proper alignment on desktop as well */
  .MuiPopover-paper.MuiMenu-paper {
    transform-origin: center top !important;
  }
}

/* =============================================== */
/* Utility Classes */
/* =============================================== */

/* Consistent spacing for form groups */
.form-group-spacing {
  margin-bottom: 1.5rem;
}

/* Consistent label styling */
.form-label-standard {
  font-weight: 500;
  color: var(--text-primary, #333);
  margin-bottom: 0.5rem;
}