/**
 * Chinook Application - Custom Bootstrap Theme
 * 
 * This file contains custom CSS overrides and branding for the Chinook
 * application. It is loaded AFTER Bootstrap CSS to override
 * default Bootstrap styles with Chinook-specific branding.
 * 
 * Principles:
 * - Keep overrides minimal - leverage Bootstrap utilities where possible
 * - Use CSS custom properties for easy theme modifications
 * - Ensure accessibility (WCAG AA compliance)
 * - Maintain responsive design across all breakpoints
 */

/* ============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================ */

:root {
    /* Color Palette - Chinook Theme */
    /* TODO: Define final color palette based on branding decisions */
    --chinook-primary: rgb(10, 129, 188); /* Bootstrap default blue */
    --chinook-secondary: rgb(95, 95, 95); /* Bootstrap default gray */
    --chinook-success: rgb(2, 88, 112);   /* Bootstrap default green */
    --chinook-danger: rgb(230, 60, 47);   /* Bootstrap default red */
    --chinook-warning: rgb(238, 119, 0);  /* Bootstrap default yellow */
    --chinook-info: rgb(30, 152, 138);    /* Bootstrap default cyan */
    
    /* Override Bootstrap's CSS Variables */
    --bs-primary: rgb(10, 129, 188);
    --bs-primary-rgb: 10, 129, 188;
    --bs-primary-bg-subtle: rgba(10, 129, 188, 0.1);
    --bs-primary-border-subtle: rgba(10, 129, 188, 0.3);
    --bs-primary-text-emphasis: rgb(8, 103, 150);
    
    --bs-secondary: rgb(95, 95, 95);
    --bs-secondary-rgb: 95, 95, 95;
    --bs-secondary-bg-subtle: rgba(95, 95, 95, 0.1);
    --bs-secondary-border-subtle: rgba(95, 95, 95, 0.3);
    --bs-secondary-text-emphasis: rgb(76, 76, 76);
    
    --bs-success: rgb(2, 88, 112);
    --bs-success-rgb: 2, 88, 112;
    --bs-success-bg-subtle: rgba(2, 88, 112, 0.1);
    --bs-success-border-subtle: rgba(2, 88, 112, 0.3);
    --bs-success-text-emphasis: rgb(1, 70, 90);
    
    --bs-danger: rgb(230, 60, 47);
    --bs-danger-rgb: 230, 60, 47;
    --bs-danger-bg-subtle: rgba(230, 60, 47, 0.1);
    --bs-danger-border-subtle: rgba(230, 60, 47, 0.3);
    --bs-danger-text-emphasis: rgb(184, 48, 38);
    
    --bs-warning: rgb(238, 119, 0);
    --bs-warning-rgb: 238, 119, 0;
    --bs-warning-bg-subtle: rgba(238, 119, 0, 0.1);
    --bs-warning-border-subtle: rgba(238, 119, 0, 0.3);
    --bs-warning-text-emphasis: rgb(190, 95, 0);
    
    --bs-info: rgb(30, 152, 138);
    --bs-info-rgb: 30, 152, 138;
    --bs-info-bg-subtle: rgba(30, 152, 138, 0.1);
    --bs-info-border-subtle: rgba(30, 152, 138, 0.3);
    --bs-info-text-emphasis: rgb(24, 122, 110);
    
    --bs-body-color: rgb(30, 37, 44);
    --bs-body-color-rgb: 30, 37, 44;
    --bs-link-color: rgb(23, 64, 112);
    --bs-link-color-rgb: 23, 64, 112;
    --bs-link-hover-color: rgb(18, 51, 90);
     
    /* Background Colors */
    --chinook-bg-body: #ffffff;
    --chinook-bg-secondary: #f8f9fa;
    --chinook-bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --chinook-text-primary: rgb(30, 37, 44);
    --chinook-text-secondary: rgb(95, 95, 95);
    --chinook-text-muted: #adb5bd;
    
    /* Link Colors */
    --chinook-link-color: rgb(23, 64, 112);
    --chinook-link-visited-color: rgb(0, 172, 186);
    
    /* Border Colors */
    --chinook-border-color: #dee2e6;
    --chinook-border-radius: 0.375rem;    /* Bootstrap default */
    
    /* Typography */
    --chinook-font-family: "Calibri", sans-serif;
    --chinook-font-family-headings: "Century Schoolbook", serif;
    --chinook-font-family-monospace: "Courier New", monospace;
    --chinook-heading-font-weight: 600;
    
    /* Spacing */
    --chinook-spacing-unit: 1rem;
    
    /* Shadows */
    --chinook-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --chinook-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --chinook-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* Dark Mode Support (Optional - for future implementation) */
[data-bs-theme="dark"] {
    --chinook-bg-body: #212529;
    --chinook-bg-secondary: #343a40;
    --chinook-bg-tertiary: #495057;
    --chinook-text-primary: #f8f9fa;
    --chinook-text-secondary: #adb5bd;
    --chinook-border-color: #495057;
}

/* ============================================================================
   Global Overrides
   ============================================================================ */

body {
    font-family: var(--chinook-font-family);
    color: var(--chinook-text-primary);
}

/* ============================================================================
   Link Customizations
   ============================================================================ */

a {
    color: var(--chinook-link-color);
}

a:visited {
    color: var(--chinook-link-visited-color);
}

a:hover {
    color: color-mix(in srgb, var(--chinook-link-color) 80%, black);
}

a:visited:hover {
    color: color-mix(in srgb, var(--chinook-link-visited-color) 80%, black);
}

/* Force white text on primary buttons (for SSO links styled as buttons) */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #ffffff !important;
    text-decoration: none;
}

/* ============================================================================
   Typography Customizations
   ============================================================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--chinook-font-family-headings);
    font-weight: var(--chinook-heading-font-weight);
}

/* Apply serif font to Bootstrap display classes */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--chinook-font-family-headings);
}

/* Example: Custom heading styles for music content */
.album-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.artist-name {
    font-size: 1.25rem;
    color: var(--chinook-text-secondary);
}

/* ============================================================================
   Button Customizations
   ============================================================================ */

/* Override Bootstrap button colors */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: rgb(8, 103, 150);
    --bs-btn-hover-border-color: rgb(8, 103, 150);
    --bs-btn-active-bg: rgb(6, 77, 113);
    --bs-btn-active-border-color: rgb(6, 77, 113);
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: rgb(76, 76, 76);
    --bs-btn-hover-border-color: rgb(76, 76, 76);
    --bs-btn-active-bg: rgb(57, 57, 57);
    --bs-btn-active-border-color: rgb(57, 57, 57);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: rgb(1, 70, 90);
    --bs-btn-hover-border-color: rgb(1, 70, 90);
    --bs-btn-active-bg: rgb(1, 53, 67);
    --bs-btn-active-border-color: rgb(1, 53, 67);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: rgb(184, 48, 38);
    --bs-btn-hover-border-color: rgb(184, 48, 38);
    --bs-btn-active-bg: rgb(138, 36, 28);
    --bs-btn-active-border-color: rgb(138, 36, 28);
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: rgb(190, 95, 0);
    --bs-btn-hover-border-color: rgb(190, 95, 0);
    --bs-btn-active-bg: rgb(143, 71, 0);
    --bs-btn-active-border-color: rgb(143, 71, 0);
}

.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: rgb(24, 122, 110);
    --bs-btn-hover-border-color: rgb(24, 122, 110);
    --bs-btn-active-bg: rgb(18, 91, 83);
    --bs-btn-active-border-color: rgb(18, 91, 83);
}

/* Outline button variants */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
}

.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-bg: var(--bs-success);
    --bs-btn-active-border-color: var(--bs-success);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger);
    --bs-btn-active-border-color: var(--bs-danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-bg: var(--bs-info);
    --bs-btn-active-border-color: var(--bs-info);
}

/* ============================================================================
   Form Customizations
   ============================================================================ */

/* Example: Enhanced focus states for accessibility */
.form-control:focus,
.form-select:focus {
    border-color: var(--chinook-primary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ============================================================================
   Card Customizations
   ============================================================================ */

/* Example: Album/Artist card styles */
.card.album-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card.album-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--chinook-shadow);
}

/* ============================================================================
   Navigation Customizations
   ============================================================================ */

/* Ensure navbar links are always white for better contrast */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:visited,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff !important;
}

/* Active nav link - white with slight transparency background */
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

/* Dropdown items in navbar */
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
    color: #212529; /* Dark text on light dropdown background */
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #212529;
}

.navbar-dark .navbar-nav .dropdown-menu .dropdown-item.active {
    background-color: var(--bs-primary);
    color: #ffffff;
}

/* Navbar brand */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:visited,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: #ffffff !important;
}

/* ============================================================================
   Table Customizations
   ============================================================================ */

/* Override Bootstrap table colors */
.table-primary {
    --bs-table-bg: rgba(10, 129, 188, 0.1);
    --bs-table-border-color: rgba(10, 129, 188, 0.2);
    --bs-table-striped-bg: rgba(10, 129, 188, 0.15);
    --bs-table-hover-bg: rgba(10, 129, 188, 0.2);
}

.table-secondary {
    --bs-table-bg: rgba(95, 95, 95, 0.1);
    --bs-table-border-color: rgba(95, 95, 95, 0.2);
    --bs-table-striped-bg: rgba(95, 95, 95, 0.15);
    --bs-table-hover-bg: rgba(95, 95, 95, 0.2);
}

.table-success {
    --bs-table-bg: rgba(2, 88, 112, 0.1);
    --bs-table-border-color: rgba(2, 88, 112, 0.2);
    --bs-table-striped-bg: rgba(2, 88, 112, 0.15);
    --bs-table-hover-bg: rgba(2, 88, 112, 0.2);
}

.table-danger {
    --bs-table-bg: rgba(230, 60, 47, 0.1);
    --bs-table-border-color: rgba(230, 60, 47, 0.2);
    --bs-table-striped-bg: rgba(230, 60, 47, 0.15);
    --bs-table-hover-bg: rgba(230, 60, 47, 0.2);
}

.table-warning {
    --bs-table-bg: rgba(238, 119, 0, 0.1);
    --bs-table-border-color: rgba(238, 119, 0, 0.2);
    --bs-table-striped-bg: rgba(238, 119, 0, 0.15);
    --bs-table-hover-bg: rgba(238, 119, 0, 0.2);
}

.table-info {
    --bs-table-bg: rgba(30, 152, 138, 0.1);
    --bs-table-border-color: rgba(30, 152, 138, 0.2);
    --bs-table-striped-bg: rgba(30, 152, 138, 0.15);
    --bs-table-hover-bg: rgba(30, 152, 138, 0.2);
}

/* Example: Enhanced table for database content */
.table-chinook {
    font-size: 0.875rem;
}

.table-chinook thead th {
    background-color: var(--chinook-bg-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* ============================================================================
   Badge Customizations
   ============================================================================ */

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

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================================
   Pagination Customizations
   ============================================================================ */

.pagination {
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-color: rgb(8, 103, 150);
    --bs-pagination-hover-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-hover-border-color: var(--bs-primary-border-subtle);
    --bs-pagination-focus-color: rgb(8, 103, 150);
    --bs-pagination-focus-bg: var(--bs-primary-bg-subtle);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

/* ============================================================================
   Progress Bar Customizations
   ============================================================================ */

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

.progress-bar {
    background-color: var(--bs-primary);
}

.progress-bar.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.progress-bar.bg-success {
    background-color: var(--bs-success) !important;
}

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

.progress-bar.bg-warning {
    background-color: var(--bs-warning) !important;
}

.progress-bar.bg-info {
    background-color: var(--bs-info) !important;
}

/* ============================================================================
   Alert Customizations
   ============================================================================ */

.alert-primary {
    --bs-alert-color: rgb(6, 77, 113);
    --bs-alert-bg: rgba(10, 129, 188, 0.1);
    --bs-alert-border-color: rgba(10, 129, 188, 0.3);
}

.alert-secondary {
    --bs-alert-color: rgb(57, 57, 57);
    --bs-alert-bg: rgba(95, 95, 95, 0.1);
    --bs-alert-border-color: rgba(95, 95, 95, 0.3);
}

.alert-success {
    --bs-alert-color: rgb(1, 53, 67);
    --bs-alert-bg: rgba(2, 88, 112, 0.1);
    --bs-alert-border-color: rgba(2, 88, 112, 0.3);
}

.alert-danger {
    --bs-alert-color: rgb(138, 36, 28);
    --bs-alert-bg: rgba(230, 60, 47, 0.1);
    --bs-alert-border-color: rgba(230, 60, 47, 0.3);
}

.alert-warning {
    --bs-alert-color: rgb(143, 71, 0);
    --bs-alert-bg: rgba(238, 119, 0, 0.1);
    --bs-alert-border-color: rgba(238, 119, 0, 0.3);
}

.alert-info {
    --bs-alert-color: rgb(18, 91, 83);
    --bs-alert-bg: rgba(30, 152, 138, 0.1);
    --bs-alert-border-color: rgba(30, 152, 138, 0.3);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Custom spacing utilities specific to Chinook */
.chinook-spacing {
    padding: var(--chinook-spacing-unit);
}

/* Custom border utilities */
.border-chinook {
    border-color: var(--chinook-border-color) !important;
}

/* ============================================================================
   Component-Specific Styles
   ============================================================================ */

/* Music Player Controls (example for future development) */
.music-player {
    background-color: var(--chinook-bg-secondary);
    border-radius: var(--chinook-border-radius);
    padding: 1rem;
}

/* Track Listing */
.track-list {
    list-style: none;
    padding: 0;
}

.track-list-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--chinook-border-color);
    transition: background-color 0.15s ease-in-out;
}

.track-list-item:hover {
    background-color: var(--chinook-bg-secondary);
}

.track-list-item:last-child {
    border-bottom: none;
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 768px) {
    /* Mobile-specific adjustments */
    .album-title {
        font-size: 1.5rem;
    }
    
    .artist-name {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    /* Ensure good print output */
    body {
        background-color: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--chinook-primary);
    outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--chinook-primary);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 9999;
}

.skip-to-main:focus {
    top: 0;
}

/* ============================================================================
   Animation & Transitions
   ============================================================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   Development Notes
   ============================================================================ */

/*
 * TODO List for Theme Development:
 * 
 * 1. Define final color palette with stakeholders
 * 2. Test color contrast ratios (WCAG AA minimum)
 * 3. Choose and integrate custom fonts (if needed)
 * 4. Create component variations for albums, artists, tracks
 * 5. Implement dark mode styles
 * 6. Add loading states and animations
 * 7. Design empty states for no data scenarios
 * 8. Create icon system (consider Bootstrap Icons)
 * 9. Optimize for performance (minimal custom CSS)
 * 10. Document all custom classes in style guide
 */