/*
 * BehaviorPro Labs — Color overrides for Scribeology
 *
 * Scribeology uses hardcoded colors (no CSS variables), so we override
 * per-selector. Loaded AFTER styles.css to take precedence.
 *
 * Original palette:  #667eea (blue), #764ba2 (purple), white sections
 * BehaviorPro dark:  slate-950 body, slate-900 surfaces, teal-400 accent
 */

/* ============================================
   BASE / BODY
   ============================================ */

body {
  background: #020617 !important;  /* slate-950 — replaces purple gradient */
  color: #f3f4f6 !important;       /* gray-100 */
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ============================================
   HEADER (the tool's own header inside .container)
   ============================================ */

.container > header {
  color: #f3f4f6;  /* already light text, but be explicit */
}

.container > header h1 {
  color: #f3f4f6;
}

.container > header p {
  color: rgba(209, 213, 219, 0.8); /* gray-300 */
}

/* ============================================
   SECTIONS (white cards → dark surfaces)
   ============================================ */

.section {
  background: #0f172a !important;  /* slate-900 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(51, 65, 85, 0.5);
}

/* ============================================
   BUTTONS — blue→teal, keep btn structure
   ============================================ */

.btn-primary {
  background: #2dd4bf !important;  /* teal-400 */
  color: #0f172a !important;       /* dark text on teal */
}

.btn-primary:hover {
  background: #14b8a6 !important;  /* teal-500 */
  box-shadow: 0 5px 15px rgba(45, 212, 191, 0.4) !important;
}

.btn-secondary {
  background: rgba(51, 65, 85, 0.4) !important;  /* slate-700/40 */
  color: #f3f4f6 !important;
}

.btn-secondary:hover {
  background: rgba(51, 65, 85, 0.6) !important;
}

.btn-outline {
  border-color: #2dd4bf !important;
  color: #2dd4bf !important;
  background: transparent !important;
}

.btn-outline:hover {
  background: #2dd4bf !important;
  color: #0f172a !important;
}

/* ============================================
   UPLOAD AREA
   ============================================ */

.upload-area {
  border-color: rgba(51, 65, 85, 0.8) !important;
  background: rgba(15, 23, 42, 0.5);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: #2dd4bf !important;
  background: rgba(45, 212, 191, 0.05) !important;
}

.upload-area h3 {
  color: #f3f4f6 !important;
}

.upload-area p {
  color: rgba(209, 213, 219, 0.8) !important;
}

.file-info {
  background: rgba(45, 212, 191, 0.1) !important;
}

/* ============================================
   OPTIONS PANEL
   ============================================ */

.options-panel {
  background: #1e293b !important;  /* slate-800 */
}

.options-panel h3 {
  color: #f3f4f6 !important;
}

.option-group label {
  color: rgba(209, 213, 219, 0.9) !important;
}

.option-group select,
.option-group input[type="number"] {
  background: #0f172a !important;
  color: #f3f4f6 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.option-group select:focus,
.option-group input[type="number"]:focus {
  border-color: #2dd4bf !important;
}

.option-group input[type="range"] {
  background: rgba(51, 65, 85, 0.6) !important;
}

.option-group input[type="range"]::-webkit-slider-thumb {
  background: #2dd4bf !important;
  box-shadow: 0 2px 6px rgba(45, 212, 191, 0.3) !important;
}

.option-group input[type="range"]::-moz-range-thumb {
  background: #2dd4bf !important;
  box-shadow: 0 2px 6px rgba(45, 212, 191, 0.3) !important;
}

#temperature-value {
  color: #2dd4bf !important;
  background: rgba(45, 212, 191, 0.1) !important;
}

.slider-labels {
  color: rgba(209, 213, 219, 0.6) !important;
}

.info-tooltip {
  color: #2dd4bf !important;
}

/* ============================================
   PASTE TRANSCRIPT SECTION
   ============================================ */

.divider::before {
  background: rgba(51, 65, 85, 0.8) !important;
}

.divider span {
  background: #0f172a !important;
  color: rgba(209, 213, 219, 0.6) !important;
}

.paste-transcript-panel {
  background: #1e293b !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.paste-transcript-panel:hover {
  border-color: #2dd4bf !important;
}

.paste-transcript-panel h3 {
  color: #f3f4f6 !important;
}

.paste-transcript-panel p {
  color: rgba(209, 213, 219, 0.8) !important;
}

#paste-transcript-textarea {
  background: #0f172a !important;
  color: #f3f4f6 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

#paste-transcript-textarea:focus {
  border-color: #2dd4bf !important;
}

#paste-transcript-textarea::placeholder {
  color: rgba(209, 213, 219, 0.4) !important;
}

/* ============================================
   PROGRESS
   ============================================ */

.progress-container h3 {
  color: #f3f4f6 !important;
}

.progress-bar {
  background: rgba(51, 65, 85, 0.6) !important;
}

.progress-fill {
  background: repeating-linear-gradient(
    -45deg,
    #2dd4bf,
    #2dd4bf 8px,
    #14b8a6 8px,
    #14b8a6 16px
  ) !important;
  background-size: 200% 100% !important;
}

.progress-text {
  color: rgba(209, 213, 219, 0.8) !important;
}

.dot {
  background: #2dd4bf !important;
}

.loading-spinner {
  border-color: rgba(51, 65, 85, 0.6) !important;
  border-top-color: #2dd4bf !important;
}

/* ============================================
   RESULTS
   ============================================ */

.results-header h2 {
  color: #f3f4f6 !important;
}

.result-card {
  background: linear-gradient(135deg, #0d9488, #14b8a6) !important; /* teal gradient */
}

/* ============================================
   TRANSCRIPT
   ============================================ */

.transcript-panel {
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.transcript-content {
  background: #1e293b !important;
  color: #f3f4f6 !important;
}

.transcript-content::-webkit-scrollbar-track {
  background: rgba(51, 65, 85, 0.4) !important;
}

.transcript-content::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.8) !important;
}

.transcript-actions {
  background: #0f172a !important;
  border-top-color: rgba(51, 65, 85, 0.5) !important;
}

.transcript-line {
  background: rgba(45, 212, 191, 0.05) !important;
  border-left: 3px solid #2dd4bf !important;
}

.transcript-line:nth-child(even) {
  background: rgba(30, 41, 59, 0.6) !important;  /* slate-800 — clearly different */
  border-left: 3px dashed #14b8a6 !important;     /* dashed vs solid for non-color cue */
}

.timecode {
  color: rgba(209, 213, 219, 0.6) !important;
}

.speaker {
  color: #2dd4bf !important;
}

.transcript-line:nth-child(even) .speaker {
  color: #14b8a6 !important;
}

.text {
  color: #f3f4f6 !important;
}

/* ============================================
   SPEAKER SECTION
   ============================================ */

.speaker-section h3 {
  color: #f3f4f6 !important;
}

.speaker-section p {
  color: rgba(209, 213, 219, 0.8) !important;
}

.speaker-control {
  background: rgba(45, 212, 191, 0.05) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.speaker-control.single-speaker {
  background: rgba(45, 212, 191, 0.1) !important;
}

.speaker-label {
  color: #2dd4bf !important;
}

.radio-option:hover {
  background: rgba(45, 212, 191, 0.1) !important;
}

.radio-option span {
  color: #f3f4f6 !important;
}

.custom-name-input {
  background: #0f172a !important;
  color: #f3f4f6 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.custom-name-input:focus {
  border-color: #2dd4bf !important;
}

.custom-name-input:disabled {
  background: #1e293b !important;
  color: rgba(209, 213, 219, 0.4) !important;
}

.speaker-input {
  background: #0f172a;
  color: #f3f4f6;
  border-color: rgba(51, 65, 85, 0.8) !important;
}

.speaker-input:focus {
  border-color: #2dd4bf !important;
}

.role-btn {
  border-color: #2dd4bf !important;
  background: transparent !important;
  color: #2dd4bf !important;
}

.role-btn:hover,
.role-btn.active {
  background: #2dd4bf !important;
  color: #0f172a !important;
}

/* ============================================
   ANALYSIS
   ============================================ */

.analysis-section h3 {
  color: #f3f4f6 !important;
}

.advanced-analysis {
  border-top-color: rgba(51, 65, 85, 0.5) !important;
}

.advanced-analysis h3 {
  color: #14b8a6 !important;  /* teal-500, was purple */
}

.analysis-result {
  background: #1e293b !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
  color: #f3f4f6 !important;
}

.analysis-content-wrapper {
  border-color: rgba(51, 65, 85, 0.8) !important;
  background: #0f172a !important;
}

.analysis-textarea {
  background: #1e293b !important;
  color: #f3f4f6 !important;
}

.analysis-textarea:focus {
  background: #0f172a !important;
}

.analysis-actions {
  background: #0f172a !important;
  border-top-color: rgba(51, 65, 85, 0.5) !important;
}

.analysis-complete h4 {
  color: #2dd4bf !important;
}

.analysis-content {
  background: #1e293b !important;
  border-left-color: #2dd4bf !important;
  color: #f3f4f6 !important;
}

.analysis-error {
  background: rgba(248, 113, 113, 0.1) !important;
  border-color: rgba(248, 113, 113, 0.2) !important;
}

.analysis-error h4 {
  color: #f87171 !important;
}

/* ============================================
   RESPONSIVE — text color fix for mobile header
   ============================================ */

@media (max-width: 768px) {
  .container > header h1 {
    color: #f3f4f6;
  }
}