/**
 * Ghost Fossil Bootstrap Theme Customization
 * 
 * This file customizes Bootstrap 5.3.3 colors to match the transcript panel waveform colors.
 * It overrides Bootstrap's default primary and danger colors while maintaining compatibility
 * with future Bootstrap updates.
 * 
 * Waveform Colors:
 * - Wave Color: #fabdbe (light pink/salmon) -> Used for danger/red/Party 2
 * - Progress Color: #005A9C (dark blue) -> Used for primary/blue/Party 1
 */

/* Import Bootstrap 5.3.3 */
@import url('../css/bootstrap.min.css');

/* ========================================
   CSS Custom Properties (CSS Variables)
   These override Bootstrap's color system
   ======================================== */
:root {
    /* Original Waveform Colors */
    --gf-waveform-blue: #005A9C;
    --gf-waveform-red: #fabdbe;
    
    /* Bootstrap Primary (Party 1 / Blue) - Based on waveform progress color */
    --bs-primary: #005A9C;
    --bs-primary-rgb: 0, 90, 156;
    
    /* Generate shades for primary */
    --bs-primary-dark: #004478;  /* Darker shade */
    --bs-primary-light: #3380b8; /* Lighter shade */
    --bs-primary-bg-subtle: rgba(0, 90, 156, 0.1);
    --bs-primary-border-subtle: rgba(0, 90, 156, 0.2);
    
    /* Bootstrap Danger (Party 2 / Red) - Based on waveform wave color */
    --bs-danger: #fabdbe;
    --bs-danger-rgb: 250, 189, 190;
    
    /* Generate shades for danger */
    --bs-danger-dark: #f89a9c;   /* Darker shade */
    --bs-danger-light: #fcdcdd;  /* Lighter shade */
    --bs-danger-bg-subtle: rgba(250, 189, 190, 0.1);
    --bs-danger-border-subtle: rgba(250, 189, 190, 0.2);
    
    /* Additional colors for contrast (danger is light, so text needs to be dark) */
    --bs-danger-text-emphasis: #8b3a3a;  /* Dark red for text on light backgrounds */
    
    /* Party-specific colors for ML visualization */
    --party-1-color: var(--bs-primary);
    --party-1-color-rgb: var(--bs-primary-rgb);
    --party-2-color: var(--bs-danger);
    --party-2-color-rgb: var(--bs-danger-rgb);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] {
    color-scheme: dark;
    /* Primary stays the same (already dark) */
    --bs-primary: #005A9C;
    --bs-primary-rgb: 0, 90, 156;
    
    /* Danger needs adjustment for dark mode visibility */
    --bs-danger: #ff6b6b;  /* More saturated red for dark mode */
    --bs-danger-rgb: 255, 107, 107;
    --bs-danger-dark: #ff5252;
    --bs-danger-light: #ff8787;
    --bs-danger-bg-subtle: rgba(255, 107, 107, 0.15);
    --bs-danger-border-subtle: rgba(255, 107, 107, 0.25);
    
    /* Keep original waveform colors available */
    --gf-waveform-red-original: #fabdbe;
    
    /* Light background adjustments for dark mode */
    --bs-light: var(--bs-gray-800);
    --bs-light-rgb: var(--bs-gray-800-rgb);
    --bs-light-bg-subtle: var(--bs-gray-900);
    --bs-light-border-subtle: var(--bs-gray-700);
}

[data-bs-theme="dark"] .navbar-light,
[data-bs-theme="dark"] .navbar {
    --bs-navbar-color: rgba(248, 249, 250, 0.8);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #f8f9fa;
    --bs-navbar-brand-hover-color: #ffffff;
}

/* ========================================
   Component Overrides
   ======================================== */

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger-dark);
    --bs-btn-hover-border-color: var(--bs-danger-dark);
    --bs-btn-active-bg: var(--bs-danger-dark);
    --bs-btn-active-border-color: var(--bs-danger-dark);
    /* Dark text on light background */
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
}

/* Alerts */
.alert-primary {
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    --bs-alert-color: var(--bs-primary);
}

.alert-danger {
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-color: var(--bs-danger-text-emphasis);
}

/* Badges */
.badge.text-bg-primary {
    background-color: var(--bs-primary) !important;
}

.badge.text-bg-danger {
    background-color: var(--bs-danger) !important;
    color: var(--bs-danger-text-emphasis) !important;
}

/* Text colors */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

/* Dark mode text danger adjustment */
[data-bs-theme="dark"] .text-danger {
    color: var(--bs-danger) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

/* Border colors */
.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

/* ========================================
   Party-specific Styles
   ======================================== */
.party-1 {
    color: var(--party-1-color);
}

.party-2 {
    color: var(--party-2-color);
}

.party-1-bg {
    background-color: var(--party-1-color);
    color: white;
}

.party-2-bg {
    background-color: var(--party-2-color);
    color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .party-2-bg {
    color: white;
}

/* ========================================
   ML Visualization Integration
   ======================================== */
.ml-party-button[data-party="1"] {
    --party-color: var(--party-1-color);
    --party-color-rgb: var(--party-1-color-rgb);
}

.ml-party-button[data-party="2"] {
    --party-color: var(--party-2-color);
    --party-color-rgb: var(--party-2-color-rgb);
}

/* ========================================
   Wavesurfer Integration
   ======================================== */
.wavesurfer-wave {
    --wave-color: var(--gf-waveform-red);
    --progress-color: var(--gf-waveform-blue);
}

[data-bs-theme="dark"] .wavesurfer-wave {
    --wave-color: var(--gf-waveform-red-original, var(--gf-waveform-red));
}

/* ========================================
   Utility Classes
   ======================================== */
.gf-party-1 {
    color: var(--party-1-color) !important;
}

.gf-party-2 {
    color: var(--party-2-color) !important;
}

.gf-party-1-bg {
    background-color: var(--party-1-color) !important;
    color: white !important;
}

.gf-party-2-bg {
    background-color: var(--party-2-color) !important;
    color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .gf-party-2-bg {
    background-color: var(--party-2-color) !important;
    color: white !important;
}

/* ========================================
   Light Background System Theme Support
   ======================================== */

/* Override bg-light to be theme-aware */
.bg-light {
    background-color: var(--bs-light, var(--bs-gray-100)) !important;
    color: var(--bs-body-color) !important;
}

/* Ensure bg-light components adapt to theme */
.navbar-light,
.navbar.bg-light {
    background-color: var(--bs-light, var(--bs-gray-100)) !important;
}

.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: var(--bs-light, var(--bs-gray-100));
    color: var(--bs-body-color);
}

.list-group-item-light {
    --bs-list-group-bg: var(--bs-light, var(--bs-gray-100));
    --bs-list-group-color: var(--bs-body-color);
}

.alert-light {
    --bs-alert-bg: var(--bs-light-bg-subtle, var(--bs-gray-100));
    --bs-alert-color: var(--bs-body-color);
}

.btn-light {
    --bs-btn-bg: var(--bs-light, var(--bs-gray-100));
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-light-border-subtle, var(--bs-gray-300));
    --bs-btn-hover-bg: var(--bs-gray-200);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-border-color: var(--bs-gray-400);
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-hover-bg: var(--bs-gray-700);
    --bs-btn-hover-border-color: var(--bs-gray-600);
}

.badge.bg-light,
.bg-light.badge {
    background-color: var(--bs-light, var(--bs-gray-100)) !important;
    color: var(--bs-body-color) !important;
}