/*
@feature:        ./assets/css/tab-color-consistency.css
@purpose:        Styles the Management, Marketing, and Publishing tabs with medium gray colors
@depends:        Complements styles of the various tab layouts

Filename:        tab-color-consistency.css
Path:            /wp-content/themes/buddyboss-theme-child-UI/assets/css/tab-color-consistency.css
Description:     Sets medium gray color scheme for Management, Marketing, and Publishing tabs.
*/

/* Target all tab-specific styles directly by their classes */

/* General tab content background override */
.management-tab-content,
.marketing-tab-content,
.publishing-tab-content {
  background-color: #ffffff;
  color: #1e293b;
  border-radius: 8px;
}

/* Override dark theme styles */
.dark-theme {
  background-color: #ffffff;
  color: #1e293b;
}

/* Section headers */
.management-header h2,
.marketing-header h2,
.publishing-header h2 {
  color: #1e293b;
}

.subtitle {
  color: #64748b;
}

/* Tab container background */
.management-tabs-container,
.marketing-tabs-container,
.publishing-tabs-container {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Tab navigation background */
.management-tabs,
.marketing-tabs,
.publishing-tabs {
  background-color: #64748b; /* Medium gray background */
  border-bottom: none;
}

/* Panel headers */
.panel-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.panel-header h3 {
  color: #1e293b;
}

.panel-header p {
  color: #64748b;
}

/* Panel content */
.panel-content {
  background-color: #ffffff;
}

/* Cards and containers */
.summary-card,
.analytics-card,
.chart-container,
.promotion-card,
.audience-card,
.tool-section,
.feedback-item,
.project-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

/* Background color for special elements */
.analytics-content,
.growth-chart,
.waveform-container,
.h-bar-container,
.pie-chart-placeholder,
.bar-container,
.chart-placeholder,
.rating-bar-container {
  background-color: #f1f5f9;
}

/* Text colors */
.summary-value,
.chart-header h4,
.analytics-card h4,
.engagement-metrics h4,
.promotion-info h4,
.audience-count,
.tool-section h4,
.recent-feedback h4,
.project-title {
  color: #1e293b;
}

.summary-label,
.legend-label,
.h-bar-label,
.bar-label,
.metric-label,
.audience-label {
  color: #64748b;
}

/* Table styling */
.metrics-table,
.promotions-table {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
}

.metrics-table th,
.promotions-table th {
  background-color: #f1f5f9;
  color: #64748b;
}

.metrics-table td,
.promotions-table td {
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

/* Input fields and controls */
.form-control,
input[type="text"],
select {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

/* Override form controls */
.project-selector select,
.date-range-selector select,
.promotion-project-selector select {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

/* No data messages */
.no-data-message,
.no-feedback-message,
.loading-message td {
  color: #64748b;
}

/* Active tab buttons */
.management-tab-btn.active,
.marketing-tab-btn.active,
.publishing-tab.active {
  background-color: #475569; /* Darker gray for active tabs */
  color: white;
  border-bottom-color: #475569;
}

/* Main buttons - use the sky blue from Audio tab */
.promotion-btn,
.tool-btn,
.small-action-btn {
  background-color: #475569; /* Match the darker gray for buttons */
  color: white;
}

.promotion-btn:hover,
.tool-btn:hover,
.small-action-btn:hover {
  background-color: #334155; /* Even darker gray on hover */
}

/* Fix any borders/backgrounds in sub-panels */
.generator-options,
.generator-preview,
.overall-rating {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}