/* CRM Events Tabs Styling */

/* Tab container wrapper - white background */
.crm-events-tabs {
  background-color: white;
  padding: 0;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

/* Tab navigation wrapper for scroll controls */
.crm-events-tabs .tab-nav-wrapper {
  position: relative;
  overflow: hidden;
}

/* Tab navigation container - now scrollable */
.crm-events-tabs .tab-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  padding-bottom: 5px; /* Space for scrollbar */
}

/* Custom scrollbar for webkit browsers */
.crm-events-tabs .tab-nav::-webkit-scrollbar {
  height: 6px;
}

.crm-events-tabs .tab-nav::-webkit-scrollbar-track {
  background: transparent;
}

.crm-events-tabs .tab-nav::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.crm-events-tabs .tab-nav::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* Scroll buttons */
.crm-events-tabs .scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.crm-events-tabs .scroll-button:hover {
  background-color: #f5f5f5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.crm-events-tabs .scroll-button.scroll-left {
  left: 5px;
}

.crm-events-tabs .scroll-button.scroll-right {
  right: 5px;
}

.crm-events-tabs .scroll-button.hidden {
  display: none;
}

/* Gradient fade effect at edges */
.crm-events-tabs .tab-nav-wrapper::before,
.crm-events-tabs .tab-nav-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 5px; /* Account for scrollbar */
  width: 30px;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crm-events-tabs .tab-nav-wrapper::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.crm-events-tabs .tab-nav-wrapper::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.crm-events-tabs .tab-nav-wrapper.can-scroll-left::before,
.crm-events-tabs .tab-nav-wrapper.can-scroll-right::after {
  opacity: 1;
}

/* Tab buttons - color will be applied dynamically via JavaScript */
.crm-events-tabs .tab-button {
  color: white;
  padding: 0.75rem 1.5rem;
  padding-bottom: calc(0.75rem + 10px); /* Extend tabs down to cover gap */
  border-radius: 0.5rem 0.5rem 0 0;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
  max-width: 240px;
  justify-content: center;
  text-align: center;
  height: 85px;
  background-color: #cccccc; /* Default fallback color */
  flex-shrink: 0; /* Prevent tabs from shrinking */
  white-space: normal; /* Allow text wrapping */
}

/* Tab icon (leaf shape) - using SVG background */
.crm-events-tabs .tab-button::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M19.2 19.4c-.2 0-.4-.1-.5-.4l-1.3-4.7c-.9-3.2.9-6.5 4-7.5l8-2.7c.2-.1.3 0 .5.1 0 0 .1.1.1.3V13c0 3.3-2.6 6-5.9 6.1l-4.9.3zM29 5.2l-7.4 2.5c-2.6.9-4.1 3.7-3.3 6.3l1.2 4.3 4.5-.2c2.7-.1 4.9-2.4 4.9-5.2l.1-7.7z"></path><path d="M24.8 11.6c-.2 0-.5-.2-.5-.4 0-.3.1-.5.4-.6l2.5-.4c.3 0 .5.1.6.4 0 .3-.1.5-.4.6l-2.6.4zm-1.5 2c-.2 0-.5-.2-.5-.4l-.6-3.5c0-.3.1-.5.4-.6.3 0 .5.1.6.4l.6 3.5c0 .3-.2.6-.5.6zm-1.5 2.1c-.2 0-.5-.2-.5-.4 0-.3.1-.5.4-.6l3.5-.6c.3 0 .5.1.6.4 0 .3-.1.5-.4.6l-3.6.6c.1 0 0 0 0 0zm-1.5 2c-.2 0-.5-.2-.5-.4l-.5-2.9c0-.3.1-.5.4-.6.3 0 .5.1.6.4l.5 2.9c.1.3-.1.6-.5.6.1 0 .1 0 0 0z"></path><path d="M19.2 19.4c-.1 0-.2 0-.3-.1-.2-.2-.3-.5-.1-.7l7.9-11c.2-.2.5-.3.7-.1.2.2.3.5.1.7l-7.9 11c-.1.1-.3.2-.4.2zm-5.3-.6-5.4-.3c-3.6-.2-6.4-3.1-6.4-6.7L2 2.5c0-.2.1-.3.2-.4.1-.1.3-.1.5-.1l8.8 3c3.4 1.2 5.3 4.8 4.3 8.2l-1.5 5.2c0 .3-.2.4-.4.4zM3 3.2l.1 8.6c0 3.1 2.4 5.6 5.5 5.7l5 .2 1.3-4.8c.8-2.9-.8-6-3.7-7L3 3.2zm12.4 9.9z"></path><path d="m7.7 10.2-2.8-.4c-.3 0-.5-.3-.4-.6 0-.3.3-.5.6-.4l2.7.4c.3 0 .5.3.4.6 0 .3-.2.4-.5.4zm1.7 2.3c-.1 0-.1 0 0 0-.4-.1-.5-.3-.5-.6L9.5 8c0-.3.3-.5.6-.4.3 0 .5.3.4.6l-.6 3.9c-.1.2-.3.4-.5.4zm1.6 2.3s-.1 0 0 0l-4-.6c-.3 0-.5-.3-.4-.6 0-.3.3-.5.6-.4l3.9.6c.3 0 .5.3.4.6-.1.2-.3.4-.5.4zm1.6 2.2c-.4-.1-.5-.3-.5-.6l.5-3.2c0-.3.3-.5.6-.4.3 0 .5.3.4.6l-.5 3.2c0 .2-.2.4-.5.4zm3.2 9.2c-.3 0-.5-.2-.5-.5 0-.4.1-.8.1-1.2.2-1.3.8-2.5 1.6-3.6l1.7-2.3c.2-.2.5-.3.7-.1.2.2.3.5.1.7l-1.7 2.3c-.7.9-1.2 2-1.4 3.2-.1.3-.1.7-.1 1.1 0 .2-.2.4-.5.4z"></path><path d="M14.1 30c-.1 0-.2 0-.3-.1-.2-.2-.3-.5-.1-.7.9-1.2 1.5-2.7 1.7-4.2v-.5c.1-2-.5-3.9-1.6-5.5L4.7 6.4c-.2-.2-.1-.5.1-.7.2-.1.6-.1.7.1l9.1 12.6c1.3 1.8 1.9 3.9 1.8 6.1v.5c-.2 1.7-.8 3.3-1.8 4.7-.2.2-.3.3-.5.3z"></path></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Active tab styling - keep color background with white text */
.crm-events-tabs .tab-button.is-active {
  color: white !important;
  position: relative;
  z-index: 10;
}

/* Hover state for inactive tabs */
.crm-events-tabs .tab-button:not(.is-active):hover {
  opacity: 0.8;
}

/* Tab content container with colored border - color will be applied dynamically */
.crm-events-tabs .tab-content-wrapper {
  padding: 10px;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  transition: background-color 0.3s ease;
  margin-top: -10px; /* Pull content up to meet extended tabs */
  position: relative;
  background-color: #cccccc; /* Default fallback color */
}

/* Tab content inner container */
.crm-events-tabs .tab-content {
  background-color: white;
  padding: 2rem;
  border-radius: 0.25rem;
  min-height: 400px;
}

/* Hide inactive tab panes */
.crm-events-tabs .tab-pane {
  display: none;
}

/* Show active tab pane */
.crm-events-tabs .tab-pane.is-active {
  display: block;
}

/* Table styling within tabs */
.crm-events-tabs table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

.crm-events-tabs table thead tr {
  background-color: #f8f9fa;
  border-top: 1px solid #dee2e6;
  border-bottom: 2px solid #dee2e6;
}

.crm-events-tabs table th {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.crm-events-tabs table tbody tr {
  border-bottom: 1px solid #dee2e6;
}

.crm-events-tabs table tbody tr:hover {
  background-color: #f8f9fa;
}

.crm-events-tabs table td {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  color: #212529;
}

/* Loading placeholder */
.crm-events-tabs .loading-placeholder {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
  font-size: 1.125rem;
}

/* No events message */
.crm-events-tabs .text-gray-500 {
  text-align: center;
  padding: 3rem;
  color: #6c757d;
  font-size: 1.125rem;
}

/* Book button styling (already styled inline, but adding for consistency) */
.crm-events-tabs .crm-book-button {
  background-color: #e99a03 !important;
  color: white !important;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background-color 0.3s ease;
  font-weight: 500;
}

.crm-events-tabs .crm-book-button:hover {
  background-color: #FF8C00 !important;
  color: white !important;
  text-decoration: none;
}

/* Link styling for event titles */
.crm-events-tabs a:not(.crm-book-button) {
  color: #0066cc;
  text-decoration: none;
}

.crm-events-tabs a:not(.crm-book-button):hover {
  color: #0052a3;
  text-decoration: underline;
}

/* Mobile dropdown styling */
.crm-events-tabs .mobile-tab-selector {
  display: none;
  position: relative;
  margin-bottom: 1rem;
}

.crm-events-tabs .mobile-dropdown-button {
  width: 100%;
  padding: 1rem;
  background-color: white;
  border: 2px solid #ddd;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.crm-events-tabs .mobile-dropdown-button:hover {
  border-color: #999;
}

.crm-events-tabs .mobile-dropdown-button.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.crm-events-tabs .mobile-dropdown-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666;
  transition: transform 0.3s ease;
}

.crm-events-tabs .mobile-dropdown-button.open .mobile-dropdown-arrow {
  transform: rotate(180deg);
}

.crm-events-tabs .mobile-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 2px solid #ddd;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.crm-events-tabs .mobile-dropdown-menu.open {
  display: block;
}

.crm-events-tabs .mobile-dropdown-item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 0.95rem;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.crm-events-tabs .mobile-dropdown-item:last-child {
  border-bottom: none;
}

.crm-events-tabs .mobile-dropdown-item:hover {
  opacity: 0.8;
}

.crm-events-tabs .mobile-dropdown-item.active {
  position: relative;
}

.crm-events-tabs .mobile-dropdown-item.active::after {
  content: '✓';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
  /* Hide desktop tabs on mobile */
  .crm-events-tabs .tab-nav-wrapper {
    display: none;
  }
  
  /* Show mobile dropdown on mobile */
  .crm-events-tabs .mobile-tab-selector {
    display: block;
  }
  
  /* Adjust tab content for mobile */
  .crm-events-tabs .tab-content {
    padding: 1rem;
    min-height: 300px;
  }
  
  /* Adjust table styling for mobile */
  .crm-events-tabs table {
    font-size: 0.8rem;
  }
  
  .crm-events-tabs table th,
  .crm-events-tabs table td {
    padding: 0.5rem;
  }
}