/* Jodit Editor - Dark Mode Fixes */

/* Fix for dark mode - editor content area */
html[data-color^="dark"] .jodit-wysiwyg,
html[data-color^="dark"] .jodit-workplace,
html[data-color^="dark"] .jodit-container {
  background-color: var(--foreground) !important;
  color: var(--body) !important;
}

/* Fix for text inside editor */
html[data-color^="dark"] .jodit-wysiwyg * {
  color: var(--body) !important;
}

/* Fix for toolbar in dark mode */
html[data-color^="dark"] .jodit-toolbar-editor-collection {
  background-color: var(--background) !important;
  border-color: var(--separator) !important;
}

/* Fix for toolbar buttons in dark mode */
html[data-color^="dark"] .jodit-toolbar-button {
  color: var(--body) !important;
}

html[data-color^="dark"] .jodit-toolbar-button:hover {
  background-color: var(--separator) !important;
}

/* Fix for status bar in dark mode */
html[data-color^="dark"] .jodit-status-bar {
  background-color: var(--background) !important;
  border-color: var(--separator) !important;
  color: var(--body) !important;
}

/* Fix for dropdowns and popups in dark mode */
html[data-color^="dark"] .jodit-popup__content,
html[data-color^="dark"] .jodit-ui-list {
  background-color: var(--foreground) !important;
  border-color: var(--separator) !important;
}

/* Fix for tabs in dark mode */
html[data-color^="dark"] .nav-tabs .nav-link {
  background-color: var(--background) !important;
  color: var(--body) !important;
  border-color: var(--separator) !important;
}

html[data-color^="dark"] .nav-tabs .nav-link.active {
  background-color: var(--foreground) !important;
  color: var(--primary) !important;
  border-color: var(--separator) !important;
  border-bottom-color: var(--foreground) !important;
}

html[data-color^="dark"] .tab-content {
  background-color: var(--foreground) !important;
}

/* Fix for all text elements in cards */
html[data-color^="dark"] .card p,
html[data-color^="dark"] .card div:not(.bg-separator):not(.bg-primary):not(.bg-gradient-light),
html[data-color^="dark"] .card label,
html[data-color^="dark"] .card .text-muted,
html[data-color^="dark"] .card .text-small,
html[data-color^="dark"] .card .text-alternate,
html[data-color^="dark"] .card .heading,
html[data-color^="dark"] .card h3,
html[data-color^="dark"] .card li {
  color: var(--body) !important;
}

/* Hide user menu and icon menu in mobile */
@media (max-width: 767.98px) {
  .user-container,
  .nav-container .user-container,
  .nav-content .user-container,
  .menu-container .user-container,
  .nav-container .menu-icons,
  div[class*="user-container"],
  .dropdown[class*="user-container"],
  #menu .user-container {
    display: none !important;
  }
}