/*
 * TailAdmin Adapter CSS for mc-area-users
 * Applies modern TailAdmin/Flowbite styles when data-ui="tailadmin"
 * Preserves existing PHP logic and JS selectors
 */

[data-ui="tailadmin"] .mc-area-users {
  background: #F0F2F5;
}

/* Top Bar Styling */
[data-ui="tailadmin"] .mc-area-users .mc-top-bar {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  margin: 0.25rem;
  justify-content: space-between;  /* Distribute controls across width */
}

@media (min-width: 768px) {
  [data-ui="tailadmin"] .mc-area-users .mc-top-bar {
    /* Desktop behavior - keep as is */
  }

  [data-ui="tailadmin"] .mc-area-users .mc-top-bar > div {
    display: flex;
    align-items: center;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-top-bar > div:nth-child(2) {
    flex: 1;
    justify-content: flex-end;
    gap: 1rem;
  }
}

/* Mobile-specific adjustments to ensure proper spacing and sizing */
@media (max-width: 767px) {
  [data-ui="tailadmin"] .mc-area-users .mc-top-bar {
    display: flex;
    flex-direction: row;  /* All elements in one row for mobile */
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;  /* Don't wrap items */
    gap: 0.5rem;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-top-bar > div {
    min-width: 0;  /* Allow shrinking */
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-top-bar > div:first-child {
    flex: 1;  /* Allow first div to grow and take available space */
    flex-wrap: nowrap;  /* Prevent wrapping of controls in first div */
    min-width: 0; /* Allow shrinking when needed */
  }

  [data-ui="tailadmin"] .mc-area-users .mc-top-bar > div:last-child {
    flex-shrink: 0;  /* Prevent search/new user buttons from shrinking */
  }

  /* Ensure proper sizing for mobile elements */
  [data-ui="tailadmin"] .mc-area-users .mc-menu-wide,
  [data-ui="tailadmin"] .mc-area-users .mc-search-btn {
    min-width: 0;
    flex: 0 0 auto;  /* Don't grow, size to content */
  }

  /* Mobile layout adjustments */
  [data-ui="tailadmin"] .mc-area-users .mc-flex {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
    order: -1; /* Move to top */
  }

  /* Hide the original placement of action buttons and filter in mobile when not moved */
  [data-ui="tailadmin"] .mc-area-users:not(.mc-mobile-layout-active) .mc-scroll-area .mc-flex .mc-menu-mobile,
  [data-ui="tailadmin"] .mc-area-users:not(.mc-mobile-layout-active) .mc-scroll-area .mc-flex .mc-filter-btn {
    display: none; /* Hide original placement when not in mobile layout */
  }

  /* Show action buttons and filter when moved to top bar in mobile */
  [data-ui="tailadmin"] .mc-area-users.mc-mobile-layout-active .mc-mobile-elements {
    display: flex !important;
    flex: 0 0 auto;
  }

  /* Style for the mobile elements container */
  [data-ui="tailadmin"] .mc-area-users .mc-mobile-elements {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  /* Style for action menu when moved after new user button */
  [data-ui="tailadmin"] .mc-area-users.mc-mobile-layout-active .mc-menu-mobile {
    display: flex !important;
    margin-left: 0.5rem;
    position: relative !important;
    z-index: 10 !important; /* Lower than search but higher than most other elements */
  }
}

/* Mobile Menu and Filter Button Styling - MOBILE ONLY */
@media (max-width: 767px) {
  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile {
    position: relative;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: rgba(234, 115, 81, 0.1); /* Match brand color with transparency */
    color: #ea7351;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > i:hover {
    background: rgba(234, 115, 81, 0.2);
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul {
    position: fixed !important;
    top: 80px !important;
    right: 10px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e5e7eb !important;
    min-width: 220px !important;
    z-index: 999999999 !important; /* Maximum z-index to appear above everything */
    padding: 0.5rem 0 !important;
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li {
    margin: 0;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li a {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.2s ease;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li a:hover {
    background: #f9fafb;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li a i {
    width: 16px;
    text-align: center;
    color: #6b7280;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-filter-btn {
    position: relative;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-filter-btn i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: rgba(234, 115, 81, 0.1); /* Match brand color with transparency */
    color: #ea7351;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  [data-ui="tailadmin"] .mc-area-users .mc-filter-btn i:hover {
    background: rgba(234, 115, 81, 0.2);
  }

  [data-ui="tailadmin"] .mc-area-users .mc-filter-btn > div {
    position: fixed;
    top: 80px;
    right: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    min-width: 220px;
    z-index: 999999999; /* High z-index to appear above other elements */
    padding: 0.5rem 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: none; /* Hidden by default */
  }

  [data-ui="tailadmin"] .mc-area-users .mc-filter-btn.mc-active > div {
    display: block; /* Shown when active */
  }
}

/* Table Styling */
[data-ui="tailadmin"] .mc-area-users .mc-scroll-area {
  overflow-x: auto;
  border-radius: 0.5rem;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
  margin: 0.25rem;
}

[data-ui="tailadmin"] .mc-area-users .mc-scroll-area > div {
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 10;
    padding: 0.25rem;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users {
  width: 100%;
  background: white;
  border-collapse: collapse;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users thead {
  position: sticky;
  top: 32px; /* Adjust this value based on the height of the action/filter bar */
  background: #f9fafb;
  z-index: 1;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th {
  padding: 0.25rem 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th:first-child {
  width: 48px;
  min-width: 48px;
  text-align: center;
}

/* Align chevrons properly in table headers */
[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th {
  position: relative;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th [data-field] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 100001; /* Ensure sorting controls appear above other elements */
}

/* Additional styling for order by elements to align chevrons properly */
[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th [data-field] i,
[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th .mc-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users td {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
  font-size: 0.875rem;
  transition: background-color 0.2s ease;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tr:hover td {
  background: #f9fafb;
}

[data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tbody tr:last-child td {
  border-bottom: none;
}

/* Action Buttons */
[data-ui="tailadmin"] .mc-area-users .mc-action-message {
  color: #ea7351;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-ui="tailadmin"] .mc-area-users .mc-action-message:hover {
  text-decoration: underline;
}

[data-ui="tailadmin"] .mc-area-users .mc-action-email {
  color: #e03274;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-ui="tailadmin"] .mc-area-users .mc-action-email:hover {
  text-decoration: underline;
}

[data-ui="tailadmin"] .mc-area-users .mc-action-delete {
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-ui="tailadmin"] .mc-area-users .mc-action-delete:hover {
  color: #ef4444;
}

/* TailAdmin adapter - mc-menu-mobile elements removed for debugging */

/* TailAdmin adapter - mc-flex elements removed for debugging */

/* Responsive adjustments */
@media (min-width: 768px) {
  [data-ui="tailadmin"] .mc-area-users .mc-search-btn span {
    display: inline;
  }
}

@media (max-width: 767px) {
  [data-ui="tailadmin"] .mc-area-users .mc-search-btn span {
    display: none;
  }
}

/* Users area active tab styling to match membership tab styling */
[data-ui="tailadmin"] .mc-area-users .mc-menu-wide li.mc-active {
  border-color: #EA7351 !important;
  color: #EA7351 !important;
  background-color: #EA73511a !important;
  padding: 0 0.25rem !important; /* Tiny padding addition */
}

/* Articles area active tab styling to match membership tab styling */
[data-ui="tailadmin"] .mc-area-articles .mc-menu-wide li.mc-active {
  border-color: #EA7351 !important;
  color: #EA7351 !important;
  background-color: #EA73511a !important;
  padding: 0 0.25rem !important; /* Tiny padding addition */
}

/* Settings area active tab styling to match membership tab styling */
[data-ui="tailadmin"] .mc-area-settings .mc-menu-wide li.mc-active {
  border-color: #EA7351 !important;
  color: #EA7351 !important;
  background-color: #EA73511a !important;
  padding: 0 0.25rem !important; /* Tiny padding addition */
}

/* Chatbot area active tab styling to match membership tab styling */
[data-ui="tailadmin"] .mc-area-chatbot .mc-menu-wide li.mc-active {
  border-color: #EA7351 !important;
  color: #EA7351 !important;
  background-color: #EA73511a !important;
  padding: 0 0.25rem !important; /* Tiny padding addition */
}

/* Ensure proper transitions for tab buttons */
[data-ui="tailadmin"] .mc-area-users .mc-menu-wide li,
[data-ui="tailadmin"] .mc-area-articles .mc-menu-wide li,
[data-ui="tailadmin"] .mc-area-settings .mc-menu-wide li,
[data-ui="tailadmin"] .mc-area-chatbot .mc-menu-wide li {
  transition: all 0.2s ease-in-out !important;
}

/* Accessibility improvements */
[data-ui="tailadmin"] .mc-area-users .mc-search-btn,
[data-ui="tailadmin"] .mc-area-users .mc-new-user,
[data-ui="tailadmin"] .mc-area-users .mc-menu-wide li,
[data-ui="tailadmin"] .mc-area-users .mc-action-message,
[data-ui="tailadmin"] .mc-area-users .mc-action-email,
[data-ui="tailadmin"] .mc-area-users .mc-action-delete {
  transition: all 0.2s ease;
}

[data-ui="tailadmin"] .mc-area-users .mc-search-btn:focus,
[data-ui="tailadmin"] .mc-area-users .mc-new-user:focus,
[data-ui="tailadmin"] .mc-area-users .mc-menu-wide li:focus {
  outline: 2px solid #ea7351;
  outline-offset: 2px;
}

/* Training sub-tabs specific styling - Files tab */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="files"].mc-active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  border-color: #1e40af !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.0625rem 0 !important;
  transition: all 0.3s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="files"]:hover:not(.mc-active) {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

/* Training sub-tabs specific styling - Website tab */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="website"].mc-active {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #166534 !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.0625rem 0 !important;
  transition: all 0.3s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="website"]:hover:not(.mc-active) {
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%) !important;
  border-color: #22c55e !important;
  color: #166534 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2);
}

/* Training sub-tabs specific styling - Q&A tab */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="qea"].mc-active {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  border-color: #7e22ce !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.0625rem 0 !important;
  transition: all 0.3s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="qea"]:hover:not(.mc-active) {
  background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%) !important;
  border-color: #a855f7 !important;
  color: #7e22ce !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(168, 85, 247, 0.2);
}

/* Training sub-tabs specific styling - Conversations tab */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="conversations"].mc-active {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  border-color: #c2410c !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.0625rem 0 !important;
  transition: all 0.3s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="conversations"]:hover:not(.mc-active) {
  background: linear-gradient(135deg, #ffedd5 0%, #fffbeb 100%) !important;
  border-color: #f97316 !important;
  color: #c2410c !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
}

/* Training sub-tabs specific styling - Info tab */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="info"].mc-active {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  border-color: #be185d !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  margin: 0.0625rem 0 !important;
  transition: all 0.3s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="info"]:hover:not(.mc-active) {
  background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%) !important;
  border-color: #ec4899 !important;
  color: #be185d !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(236, 72, 153, 0.2);
}

/* Chatbot functional buttons - Use brand colors instead of white */
/* Override the more specific selector from admin.scss */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn-white,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn-white,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn-white,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn-white {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn-white:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn-white:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Ensure mc-icon colors work properly with brand colors */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn-white i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn-white i {
  color: white !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn-white:hover i {
  color: white !important;
}

/* Articles functional buttons - Use brand colors instead of white */
/* Override the more specific selector from admin.scss */
[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn-white,
[data-ui="tailadmin"] .mc-area-articles .mc-btn-white,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn-white,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn-white {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-articles .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn-white:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-articles .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn-white:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Ensure mc-icon colors work properly with brand colors for articles */
[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-articles .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn-white i,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn-white i {
  color: white !important;
}

[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-articles .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn-white:hover i {
  color: white !important;
}

/* Settings functional buttons - Use brand colors instead of white */
/* Override the more specific selector from admin.scss */
[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn-white,
[data-ui="tailadmin"] .mc-area-settings .mc-btn-white,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn-white,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn-white {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-settings .mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn-white:hover,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn-white:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-settings .mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn-white:active,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn-white:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Ensure mc-icon colors work properly with brand colors for settings */
[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-settings .mc-btn-white i,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn-white i,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn-white i {
  color: white !important;
}

[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-settings .mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn-white:hover i,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn-white:hover i {
  color: white !important;
}

/* Regular mc-btn buttons (not just mc-btn-white) - Use brand colors instead of white */
/* Override the more specific selector from admin.scss */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn:hover,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn:active,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn:active,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn:active,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Articles regular mc-btn buttons */
[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn,
[data-ui="tailadmin"] .mc-area-articles .mc-btn,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-articles .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn:hover,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn:active,
[data-ui="tailadmin"] .mc-area-articles .mc-btn:active,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn:active,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Settings regular mc-btn buttons */
[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn,
[data-ui="tailadmin"] .mc-area-settings .mc-btn,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn {
  background: #EA7351 !important;
  color: white !important;
  border-color: #EA7351 !important;
  transition: all 0.2s ease-in-out !important;
}

[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-settings .mc-btn:hover,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn:hover,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn:hover {
  background: #E03274 !important;
  color: white !important;
  border-color: #E03274 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(224, 50, 116, 0.3) !important;
}

[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn:active,
[data-ui="tailadmin"] .mc-area-settings .mc-btn:active,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn:active,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn:active {
  background: #d66542 !important;
  border-color: #d66542 !important;
  transform: translateY(0) !important;
}

/* Ensure icon colors work for all regular mc-btn buttons */
[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn i,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn i,
[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn i,
[data-ui="tailadmin"] .mc-area-articles .mc-btn i,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn i,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn i,
[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn i,
[data-ui="tailadmin"] .mc-area-settings .mc-btn i,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn i,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn i {
  color: white !important;
}

[data-ui="tailadmin"] .mc-area-chatbot .mc-tab .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-chatbot a.mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-chatbot .mc-lightbox .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-articles .mc-tab .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-articles .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-articles a.mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-articles .mc-lightbox .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-settings .mc-tab .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-settings .mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-settings a.mc-btn:hover i,
[data-ui="tailadmin"] .mc-area-settings .mc-lightbox .mc-btn:hover i {
  color: white !important;
}

/* Fix for "Order by" header on mobile */
@media (max-width: 767px) {
  [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th:first-child {
    width: auto !important;
    min-width: auto !important;
    text-align: left !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem !important;
  }

  /* Ensure the chevron icon (if present via ::after) is positioned correctly */
  [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th:first-child::after {
    position: static !important;
    margin-left: 0.5rem;
    transform: none !important;
    display: inline-block !important;
  }
  
  /* Handle rotation when the row is expanded */
  [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tr.mc-active th:first-child::after {
    transform: rotate(180deg) !important;
  }
}

/* Dark Mode Support - More Comprehensive */
html.dark [data-ui="tailadmin"] .mc-area-users {
  background-color: #111827; /* gray-900 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-top-bar,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-scroll-area,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-scroll-area > div,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users {
  background-color: #1F2937; /* gray-800 */
  color: #F9FAFB; /* gray-50 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users thead {
  background: #374151; /* gray-700 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th {
  color: #D1D5DB; /* gray-300 */
  border-bottom-color: #4B5563; /* gray-600 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users td {
  color: #E5E7EB; /* gray-200 */
  border-bottom-color: #374151; /* gray-700 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-td-profile {
  color: #F9FAFB !important; /* Light text for visibility */
  background-color: #1F2937 !important; /* Dark background */
}

/* More specific selector to override responsive styles */
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tbody tr td.mc-td-profile {
  color: #F9FAFB !important;
  background-color: #1F2937 !important;
  border-color: #374151 !important;
}

/* Additional profile cell styling for user area */
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users td.mc-td-profile {
  color: #F9FAFB !important;
  background-color: #1F2937 !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tr:hover td {
  background-color: #374151; /* gray-700 */
}

/* Specific hover override for profile cells to maintain visibility */
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users tr:hover td.mc-td-profile {
  background-color: #374151 !important; /* Keep the hover color */
  color: #F9FAFB !important; /* But maintain light text */
}

/* Profile link styling in dark mode */
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile a,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile span {
  color: #F9FAFB !important; /* Light text for visibility */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile:hover,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile a:hover {
  color: #EA7351 !important; /* Primary action color on hover */
}

/* Ensure profile image and text visibility */
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users .mc-profile span {
  color: #F9FAFB !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-wide li,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-table.mc-table-users th [data-field] {
  color: #D1D5DB; /* gray-300 */
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-wide li:hover {
  color: #EA7351 !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-wide li.mc-active {
  color: #EA7351 !important;
  background-color: rgba(234, 115, 81, 0.1) !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-filter-btn > div,
html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul {
  background: #1F2937 !important;
  border-color: #374151 !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li a {
  color: #E5E7EB;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-menu-mobile > ul li a:hover {
  background: #374151;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-search-btn > input {
  background-color: #1F2937 !important;
  border-color: #4B5563 !important;
  color: #F9FAFB !important;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-action-delete {
  color: #9CA3AF;
}

html.dark [data-ui="tailadmin"] .mc-area-users .mc-action-delete:hover {
  color: #F87171;
}

html.dark [data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="files"]:hover:not(.mc-active),
html.dark [data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="website"]:hover:not(.mc-active),
html.dark [data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="qea"]:hover:not(.mc-active),
html.dark [data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="conversations"]:hover:not(.mc-active),
html.dark [data-ui="tailadmin"] .mc-area-chatbot .mc-tab.mc-inner-tab[data-id="training"] .mc-nav ul li[data-value="info"]:hover:not(.mc-active) {
    color: initial; /* Reset color to avoid conflicts with dark mode text */
}

/*
 * ==========================================================
 * DEFAULT DARK MODE STYLES
 * ==========================================================
 */

html.dark body {
    background-color: #111827 !important; /* gray-900 */
}

html.dark [data-ui="tailadmin"] .mc-admin > main,
html.dark .mc-admin > main {
    background-color: #111827 !important; /* gray-900 */
    color: #D1D5DB !important; /* gray-300 default text */
}

html.dark .mc-admin > main > div {
    background-color: transparent !important;
}

html.dark .mc-box, 
html.dark .mc-setting,
html.dark .mc-tab > .mc-content,
html.dark .mc-table,
html.dark .mc-card,
html.dark .mc-area-settings .mc-setting > div,
html.dark .mc-lightbox .mc-main {
    background-color: #1F2937 !important; /* gray-800 */
    color: #D1D5DB !important; /* gray-300 */
    border-color: #374151 !important; /* gray-700 */
}

html.dark .mc-title,
html.dark h2,
html.dark h3,
html.dark .mc-setting .mc-title,
html.dark .mc-lightbox .mc-top-bar {
    color: #F9FAFB !important; /* gray-50 */
}

html.dark hr {
    background: #374151 !important; /* gray-700 */
    border-color: #374151 !important;
}

html.dark .mc-setting input,
html.dark .mc-setting select,
html.dark .mc-setting textarea,
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #374151 !important; /* gray-700 */
    color: #F9FAFB !important;
    border-color: #4B5563 !important; /* gray-600 */
}

html.dark .mc-setting input::placeholder,
html.dark .mc-setting select::placeholder,
html.dark .mc-setting textarea::placeholder,
html.dark input::placeholder,
html.dark select::placeholder,
html.dark textarea::placeholder {
    color: #9CA3AF !important; /* gray-400 */
}

html.dark .mc-menu-wide li,
html.dark .mc-tab > .mc-nav > ul li {
  color: #D1D5DB; /* gray-300 */
}

html.dark .mc-menu-wide li:hover,
html.dark .mc-tab > .mc-nav > ul li:hover {
  color: #EA7351 !important;
}

html.dark .mc-menu-wide li.mc-active,
html.dark .mc-tab > .mc-nav > ul li.mc-active {
  color: #EA7351 !important;
  border-color: #EA7351 !important;
}

html.dark .mc-profile-list > ul > li,
html.dark .mc-panel-details .mc-list-items > div,
html.dark .mc-panel-details .mc-list-items > a {
    color: #D1D5DB; /* gray-300 */
}

html.dark .mc-profile-list > ul > li > span,
html.dark .mc-panel-details .mc-title {
    color: #9CA3AF; /* gray-400 */
}

html.dark .mc-profile-list > ul > li:hover,
html.dark .mc-panel-details .mc-list-items > div:hover,
html.dark .mc-panel-details .mc-list-items > a:hover {
    color: #F9FAFB;
}

html.dark .mc-profile-list > ul > li:hover > span, 
html.dark .mc-panel-details .mc-split > div:hover > .mc-title {
    color: #D1D5DB;
}