/*
@feature: ./assets/css/clean-tabs.css
@purpose: Clean, professional tab styling based on Test 4 from our test page
@depends: Used by: 10-creator/1audiobook-studio.php
*/

/* Tab container styling */
#main-studio-tabs {
  display: flex !important;
  background-color: #9ca3af !important;
  padding: 15px 15px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 2px solid #4f46e5 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

/* Individual tab styling - matching Plan tab button colors */
#main-studio-tabs .studio-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f8fafc !important;
  color: #64748b !important;
  padding: 12px 24px !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  position: relative !important;
  z-index: 10 !important;
  min-width: 100px !important;
  text-align: center !important;
  margin-right: 0 !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
}

/* Chat tab - Blue (btn-primary style) */
#main-studio-tabs .studio-tab[href*="chat"] {
  background-color: #0d6efd !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/* Forum tab - Green (btn-success style) */
#main-studio-tabs .studio-tab[href*="forum"] {
  background-color: #198754 !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/* Chat tab hover effect */
#main-studio-tabs .studio-tab[href*="chat"]:hover {
  background-color: #0b5ed7 !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/* Forum tab hover effect */
#main-studio-tabs .studio-tab[href*="forum"]:hover {
  background-color: #157347 !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/* Chat tab active styling */
#main-studio-tabs .studio-tab[href*="chat"].active {
  background-color: #0a58ca !important;
  color: #000000 !important;
  font-weight: bold !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Forum tab active styling */
#main-studio-tabs .studio-tab[href*="forum"].active {
  background-color: #146c43 !important;
  color: #000000 !important;
  font-weight: bold !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* White connector for active tab */
#main-studio-tabs .studio-tab.active:after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: white !important;
  z-index: 11 !important;
}

/* Emoji styling */
#main-studio-tabs .studio-tab .tab-emoji {
  margin-right: 8px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Text styling */
#main-studio-tabs .studio-tab .tab-text {
  display: inline-block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
}

/* Active tab text styling */
#main-studio-tabs .studio-tab.active .tab-text {
  font-weight: 600 !important;
}

/* Tab content container */
#main-content-wrapper {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 25px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Tab content panels */
.studio-tab-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.3s ease !important;
}

/* Active tab content */
.studio-tab-content.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #main-studio-tabs {
    flex-wrap: wrap !important;
  }
  
  #main-studio-tabs .studio-tab {
    padding: 10px 16px !important;
    font-size: 14px !important;
    flex: 1 0 auto !important;
    min-width: calc(33.33% - 10px) !important;
  }
  
  #main-studio-tabs .studio-tab .tab-emoji {
    font-size: 16px !important;
  }
  
  #main-studio-tabs .studio-tab .tab-text {
    font-size: 14px !important;
  }
}