/* ===================================================
   DEVELOPER SECTIONS STYLING
   ===================================================
   
   Centralized styling for developer information sections
   Utilizes the global card styling from cards.css
*/

/* Import centralized systems */
@import url("spacing.fcb7e2c7ab0a.css");
@import url("typography.9e7f37dc291d.css");
@import url("borders.d5d3bb34e628.css");
@import url("shadows.2216235621bb.css");
@import url("animation_transition.7613137d12c6.css");
@import url("json_styling.d1c25317560c.css");
@import url("table.0667070df46f.css");

/* Developer section header styling */
.card-header .text-danger {
  font-weight: var(--font-medium);
}

/* Developer content header with collapse/expand all button */
.developer-content-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--space-4);
}

/* JSON sections styling */
.json-section {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background-color: var(--bg-lighter);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
}

.json-section:last-child {
  margin-bottom: 0;
}

.json-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.json-section-header h5 {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-dark);
  font-weight: var(--font-medium);
}

/* Collapsible content controls */
.collapse-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-transform-moderate);
}

.collapse-toggle:hover {
  opacity: 0.8;
}

.collapse-toggle-small {
  padding: 0;
  font-size: var(--text-sm);
}

.toggle-icon {
  display: inline-block;
  transition: var(--transition-transform-moderate);
}

.collapse-toggle.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* JSON output styling */
.json-output {
  background-color: var(--bg-code);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  max-height: var(--max-height-md);
  overflow-y: auto;
}

/* API test section styling */
.test-api-controls {
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Test API button moved to buttons.css */

.api-test-result {
  margin-top: var(--space-3);
  display: block;
}

.api-test-result.hidden {
  display: none;
}

/* Prompts section styling */
.prompts-scroll-container {
  max-height: var(--max-height-xl);
  overflow-y: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.prompt-section {
  margin-bottom: var(--space-4);
}

.prompt-section:last-child {
  margin-bottom: 0;
}

.prompt-header {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--color-text-dark);
}

/* Data table styling moved to table.css */

/* Dependency breakdown styling */
.dependency-breakdown-container {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.dependency-breakdown-content .no-data {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-medium);
  font-style: italic;
}

/* Content Developer Section Styling */
/* Added to support response_analytics/partials/content_developer_section/ */

/* Info panels styling */
.info-panel {
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Section headers */
.section-header {
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
}

.section-header i {
  margin-right: var(--space-1);
}

/* Stats cards */
.stats-card {
  background-color: var(--bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  text-align: center;
}

.stats-card .card-title {
  font-size: var(--text-sm);
  color: var(--color-text-medium);
  margin-bottom: var(--space-2);
}

.stats-card .score-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.stats-card .score-value.text-success {
  color: var(--color-success);
}

.stats-card .score-value.text-warning {
  color: var(--color-warning);
}

.stats-card .score-value.text-danger {
  color: var(--color-danger);
}

/* Tables in developer sections moved to table.css */

/* Responsive adjustments */
@media (max-width: 768px) {
  .json-section {
    padding: var(--space-2);
  }
  
  .json-output {
    max-height: var(--max-height-sm);
    font-size: var(--text-xs);
  }
  
  .stats-card {
    padding: var(--space-2);
  }
}