/* Theme Support CSS Variables and Classes */

:root {
  /* Light theme colors (default) */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-text-primary: #1a202c;
  --theme-text-secondary: #4a5568;
  --theme-border: #e2e8f0;
  --theme-shadow: rgba(0, 0, 0, 0.1);
  
  /* Dynamic theme properties */
  --primary-color: #5DCF83;
  --sidebar-color: #5DCF83;
  --sidebar-bg-color: #5DCF83;
  --border-radius: 8px;

  /* Sidebar text color customization */
  --sidebar-text-color: #FFFFFF;
  
  /* Chat text color customization */
  --chat-text-color: #212121;
  
  /* Chat host color customization */
  --chat-host-color: #00B0BE;
}

/* Light theme */
.light-theme {
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8fafc;
  --theme-text-primary: #1a202c;
  --theme-text-secondary: #4a5568;
  --theme-border: #e2e8f0;
  --theme-shadow: rgba(0, 0, 0, 0.1);
}

/* Dark theme */
.dark-theme {
  --theme-bg-primary: #1a202c;
  --theme-bg-secondary: #2d3748;
  --theme-text-primary: #f7fafc;
  --theme-text-secondary: #e2e8f0;
  --theme-border: #4a5568;
  --theme-shadow: rgba(0, 0, 0, 0.3);
}

/* Apply theme colors to elements */
body {
  background-color: var(--theme-bg-secondary) !important;
  color: var(--theme-text-primary) !important;
}

.layout-main-container {
  background-color: var(--theme-bg-secondary) !important;
}

/* Cards and surfaces */
.p-card, 
.p-panel, 
.p-fieldset,
.p-tabview-panels,
.p-dialog-content,
.MuiCard-root,
.MuiPaper-root {
  background-color: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--border-radius) !important;
}

/* Sidebar styling with dynamic color */
.layout-sidebar,
.MuiDrawer-paper {
  background-color: var(--sidebar-bg-color) !important;
  box-shadow: 0px 4px 15px var(--theme-shadow) !important;
}

/* Material-UI Sidebar text color overrides */
.MuiDrawer-paper .MuiListItemButton-root,
.MuiDrawer-paper .MuiListItemButton-root .MuiTypography-root {
  color: var(--sidebar-text-color) !important;
}

.MuiDrawer-paper .MuiListItemIcon-root,
.MuiDrawer-paper .MuiListItemIcon-root svg {
  color: var(--sidebar-text-color) !important;
}

.MuiDrawer-paper .MuiListItemText-root .MuiTypography-root {
  color: var(--sidebar-text-color) !important;
}

.MuiDrawer-paper .MuiTypography-root:not(.MuiBadge-badge) {
  color: var(--sidebar-text-color) !important;
}

/* Sidebar hover effects with custom text color */
.MuiDrawer-paper .MuiListItemButton-root:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.MuiDrawer-paper .MuiListItemButton-root:hover .MuiTypography-root,
.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root,
.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root svg {
  color: var(--sidebar-text-color) !important;
}

/* Selected/active state */
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiTypography-root,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root svg {
  color: var(--sidebar-text-color) !important;
}

/* Expand/collapse icons */
.MuiDrawer-paper .MuiListItemButton-root .MuiSvgIcon-root {
  color: var(--sidebar-text-color) !important;
}

/* Badge styling exception - keep badge colors as is */
.MuiDrawer-paper .MuiBadge-badge {
  color: white !important;
  background-color: #ff4444 !important;
}

/* Animations enabled/disabled */
.animations-enabled .MuiButton-root,
.animations-enabled .layout-menu a {
  transition: all 0.2s ease-in-out !important;
}

/* Compact mode */
.compact-mode .MuiCard-root {
  padding: 8px !important;
}

.compact-mode .MuiCardContent-root {
  padding: 12px !important;
}

.compact-mode .layout-menu a {
  padding: 6px 12px !important;
  margin: 1px 3px !important;
}

.compact-mode .MuiListItem-root {
  padding: 4px 8px !important;
}

/* Border radius customization */
.MuiButton-root,
.MuiTextField-root .MuiOutlinedInput-root,
.MuiCard-root,
.MuiPaper-root,
.layout-menu a {
  border-radius: var(--border-radius) !important;
}

/* Dark theme specific overrides */
.dark-theme .MuiOutlinedInput-root {
  background-color: var(--theme-bg-secondary) !important;
}

.dark-theme .MuiOutlinedInput-notchedOutline {
  border-color: var(--theme-border) !important;
}

.dark-theme .MuiInputLabel-root {
  color: var(--theme-text-secondary) !important;
}

.dark-theme .MuiTypography-root {
  color: var(--theme-text-primary) !important;
}

.dark-theme .MuiTableHead-root {
  background-color: var(--theme-bg-secondary) !important;
}

.dark-theme .MuiTableCell-root {
  color: var(--theme-text-primary) !important;
  border-bottom-color: var(--theme-border) !important;
}

/* Primary color application */
.MuiButton-containedPrimary {
  background-color: var(--primary-color) !important;
}

.MuiButton-containedPrimary:hover {
  background-color: var(--primary-color) !important;
  opacity: 0.9;
}

.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked,
.MuiSwitch-colorPrimary.Mui-checked .MuiSwitch-thumb {
  color: var(--primary-color) !important;
}

.MuiLinearProgress-colorPrimary .MuiLinearProgress-bar {
  background-color: var(--primary-color) !important;
}

/* Sidebar menu item colors based on sidebar background */
.layout-menu a {
  border-radius: var(--border-radius) !important;
  transition: all 0.2s ease-in-out !important;
}

.layout-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.layout-menu a.active-route {
  background-color: rgba(255, 255, 255, 0.15) !important;
  font-weight: 700 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .compact-mode .MuiCard-root {
    margin: 4px !important;
  }
  
  .compact-mode .layout-menu a {
    padding: 8px !important;
  }
}

/* Smooth color transitions when changing themes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Chat text color customization - host/sent messages */
.chat-sent-message,
.chat-sent-message .MuiTypography-root,
.rightTextContent,
.host-message,
.agent-message,
.rce-mbox-text {
  color: var(--chat-text-color) !important;
}

/* Chat text color customization - only for message window */
/* Apply chat text color to both received and sent messages in chat components */
.chat-received-message,
.chat-received-message .MuiTypography-root,
.chat-sent-message,
.chat-sent-message .MuiTypography-root,
.leftTextContent,
.rightTextContent,
.host-message,
.host-message .MuiTypography-root,
.rce-mbox-text {
  color: var(--chat-text-color) !important;
}

/* Special handling for host messages with background color */
.MuiPaper-root[style*="background-color: rgb(0, 176, 190)"] .MuiTypography-root,
.MuiPaper-root[style*="bgcolor: #00B0BE"] .MuiTypography-root,
.messages-container .MuiPaper-root .MuiTypography-root {
  color: var(--chat-text-color) !important;
}

/* Remove chat text color from conversations list and reservation details */
/* Apply chat text color only to message window content */
.message-window-content .MuiTypography-root {
  color: var(--chat-text-color) !important;
}

/* Exclude conversation list and reservation details from chat text color */
.conversation-list .MuiTypography-root,
.reservation-details .MuiTypography-root {
  color: inherit !important;
}

/* Chat host background color customization */
/* Apply chat host color to host message bubbles */
.messages-container .MuiPaper-root[style*="background-color"],
.host-message-bubble,
.chat-sent-message,
.rightMessageBubble {
  background-color: var(--chat-host-color) !important;
}

/* Ensure host message background color overrides inline styles */
.messages-container .MuiPaper-root[style*="rgb(0, 176, 190)"] {
  background-color: var(--chat-host-color) !important;
}

/* Tooltip and Popper z-index fixes */
.MuiPopper-root {
  z-index: 9999 !important;
}

/* Drawer and sidebar z-index management */
.MuiDrawer-root {
  z-index: 1200 !important;
}

.MuiDrawer-paper {
  z-index: 1200 !important;
}

/* Tooltip specific styling */
.MuiTooltip-popper {
  z-index: 9999 !important;
}

/* Settings sidebar tooltip improvements */
.settings-tooltip {
  z-index: 10000 !important;
  /* Remove position relative to avoid stacking context issues */
}

.settings-tooltip .MuiPaper-root {
  box-shadow: 0 4px 20px 0 rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Ensure Popper renders at body level and doesn't inherit stacking context issues */
.MuiPopper-root.settings-tooltip {
  position: fixed !important;
  z-index: 10000 !important;
}

/* Fix for any body overflow issues that might clip tooltips */
body {
  overflow-x: visible !important;
}