/* 
 * FLiPT Brand Override Styles
 * Based on FLiPT Style Guide
 * 
 * This file provides important overrides for the entire website
 * to match FLiPT's brand colors and visual identity.
 */

/* Import Karla font for brand consistency */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;600;700;800&display=swap');

/* FLiPT Brand Color Overrides */
:root {
    /* FLiPT Brand Colors */
    --flipt-primary: #00a69c;      /* FLiPT Green */
    --flipt-secondary: #0068ba;    /* FLiPT Blue */
    --flipt-dark: #404041;         /* FLiPT Dark Gray */
    --flipt-white: #ffffff;
    
    /* FLiPT Color Variations */
    --flipt-primary-hover: #00857a;
    --flipt-primary-light: #e6f7f6;
    --flipt-secondary-hover: #005298;
    --flipt-secondary-light: #e6f2fb;
    
    /* Override theme primary colors with FLiPT brand */
    --theme-primary: var(--flipt-primary) !important;
    --theme-secondary: var(--flipt-secondary) !important;
    --theme-accent: var(--flipt-primary) !important;
    
    /* Override semantic colors to complement FLiPT brand */
    --theme-success: var(--flipt-primary) !important;
    --theme-info: var(--flipt-secondary) !important;
    
    /* Update gradients to use FLiPT colors */
    --theme-gradient: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    --primary-gradient: var(--flipt-primary) !important;
    --secondary-gradient: var(--flipt-secondary) !important;
    
    /* Override league-specific variables with FLiPT brand */
    --league-primary: var(--flipt-primary) !important;
    --league-secondary: var(--flipt-secondary) !important;
    --league-gradient: var(--flipt-secondary) !important;
    --league-primary-text: var(--flipt-white) !important;
    --league-contrast: var(--flipt-white) !important;
    --league-contrast-text: var(--flipt-dark) !important;
    --league-accent-1: var(--flipt-primary) !important;
    --league-accent-1-text: var(--flipt-white) !important;
    --league-accent-2: var(--flipt-secondary) !important;
    
    /* RGB values for FLiPT colors (used in rgba functions) */
    --flipt-primary-rgb: 0, 166, 156;
    --flipt-secondary-rgb: 0, 104, 186;
    --league-primary-rgb: var(--flipt-primary-rgb) !important;
    --league-accent-1-rgb: var(--flipt-primary-rgb) !important;
    --theme-primary-rgb: var(--flipt-primary-rgb) !important;
    
    /* Bootstrap variable overrides */
    --bs-primary: var(--flipt-primary) !important;
    --bs-primary-rgb: var(--flipt-primary-rgb) !important;
    --bs-secondary: var(--flipt-secondary) !important;
    --bs-secondary-rgb: var(--flipt-secondary-rgb) !important;
    --bs-success: var(--flipt-primary) !important;
    --bs-info: var(--flipt-secondary) !important;
    --bs-link-color: var(--flipt-secondary) !important;
    --bs-link-hover-color: var(--flipt-secondary-hover) !important;
    
    /* Bootstrap additional variables */
    --bs-primary-dark: var(--flipt-primary-hover) !important;
    --bs-blue: var(--flipt-secondary) !important;
    --bs-green: var(--flipt-primary) !important;
    --bs-teal: var(--flipt-primary) !important;
    --bs-cyan: var(--flipt-secondary) !important;
    
    /* Common hardcoded colors that need overriding */
    --primary: var(--flipt-primary) !important;
    --secondary: var(--flipt-secondary) !important;
    --accent: var(--flipt-primary) !important;
}

/* Dark mode FLiPT adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        /* Slightly lighter versions for dark mode visibility */
        --flipt-primary: #00b8a9;
        --flipt-secondary: #1e7bc9;
        --flipt-primary-hover: #00a194;
        --flipt-secondary-hover: #0068ba;
        
        /* Dark mode surfaces with FLiPT brand influence */
        --theme-surface-1: #1a1f2e !important;
        --theme-surface-2: #2a3142 !important;
        --theme-surface-3: #3a4254 !important;
        
        /* Update league variables for dark mode */
        --league-primary: var(--flipt-primary) !important;
        --league-secondary: var(--flipt-secondary) !important;
        --league-gradient: var(--flipt-secondary) !important;
        --league-accent-1: var(--flipt-primary) !important;
        --league-accent-2: var(--flipt-secondary) !important;
        
        /* RGB values for dark mode */
        --flipt-primary-rgb: 0, 184, 169;
        --flipt-secondary-rgb: 30, 123, 201;
        --league-primary-rgb: var(--flipt-primary-rgb) !important;
        --league-accent-1-rgb: var(--flipt-primary-rgb) !important;
        --theme-primary-rgb: var(--flipt-primary-rgb) !important;
    }
}

/* Typography Overrides for FLiPT Brand */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 800 !important; /* Extra Bold for headers */
    letter-spacing: -0.02em;
}

/* Sub-headers specifically */
.sub-header,
.card-header h2,
.card-header h3,
.card-header h4,
.section-subtitle {
    font-family: 'Karla', sans-serif !important;
    font-weight: 800 !important; /* Extra Bold as per style guide */
}

/* Primary Brand Color Applications */
.btn-primary,
.btn-theme-primary {
    background-color: var(--flipt-primary) !important;
    border-color: var(--flipt-primary) !important;
    color: var(--flipt-white) !important;
}

.btn-primary:hover,
.btn-theme-primary:hover {
    background-color: var(--flipt-primary-hover) !important;
    border-color: var(--flipt-primary-hover) !important;
}

/* Secondary Brand Color Applications */
.btn-secondary,
.btn-info {
    background-color: var(--flipt-secondary) !important;
    border-color: var(--flipt-secondary) !important;
    color: var(--flipt-white) !important;
}

.btn-secondary:hover,
.btn-info:hover {
    background-color: var(--flipt-secondary-hover) !important;
    border-color: var(--flipt-secondary-hover) !important;
}

/* Outline Button Overrides */
.btn-outline-primary {
    color: var(--flipt-primary) !important;
    border-color: var(--flipt-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--flipt-primary) !important;
    border-color: var(--flipt-primary) !important;
    color: var(--flipt-white) !important;
}

/* Link Color Overrides */
a {
    color: var(--flipt-secondary) !important;
}

a:hover {
    color: var(--flipt-secondary-hover) !important;
}

/* Navigation Brand Overrides */
.navbar-brand {
    font-family: 'Karla', sans-serif !important;
    font-weight: 800 !important;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--flipt-primary) !important;
}

.nav-link.active {
    color: var(--flipt-primary) !important;
}

/* Tab Navigation Overrides */
.nav-tabs .nav-link:hover {
    color: var(--flipt-primary) !important;
    border-bottom-color: var(--flipt-primary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--flipt-primary) !important;
    border-bottom-color: var(--flipt-primary) !important;
}

/* Card Header Gradients */
.card-header {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    color: var(--flipt-white) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--flipt-white) !important;
}

/* Form Control Focus States */
.form-control:focus,
.form-select:focus {
    border-color: var(--flipt-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 166, 156, 0.25) !important;
}

/* Badge Overrides */
.badge-primary,
.badge-success {
    background-color: var(--flipt-primary) !important;
}

.badge-secondary,
.badge-info {
    background-color: var(--flipt-secondary) !important;
}

/* Alert Overrides */
.alert-success {
    background-color: var(--flipt-primary-light) !important;
    border-color: var(--flipt-primary) !important;
    color: var(--flipt-dark) !important;
}

.alert-info {
    background-color: var(--flipt-secondary-light) !important;
    border-color: var(--flipt-secondary) !important;
    color: var(--flipt-dark) !important;
}

/* Progress Bar Overrides */
.progress-bar {
    background-color: var(--flipt-primary) !important;
}

/* League Card Brand Accents */
.league-card {
    border: 2px solid var(--theme-border-color) !important;
    border-radius: 1rem !important;
}

.league-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--theme-accent) !important;
}

/* Active League Counter */
.active-leagues-counter {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
}

/* Course Emblem Border */
.course-emblem {
    border-color: var(--flipt-primary) !important;
}

/* Featured Sections */
.featured-section-header {
    border-bottom-color: var(--flipt-primary) !important;
}

.featured-icon {
    color: var(--flipt-primary) !important;
}

/* Loading Spinners */
.spinner-border-primary {
    color: var(--flipt-primary) !important;
}

/* Custom Scrollbar for FLiPT Brand */
::-webkit-scrollbar-thumb {
    background-color: var(--flipt-primary) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--flipt-primary-hover) !important;
}

/* Selection Colors */
::selection {
    background-color: var(--flipt-primary) !important;
    color: var(--flipt-white) !important;
}

::-moz-selection {
    background-color: var(--flipt-primary) !important;
    color: var(--flipt-white) !important;
}

/* Pagination Overrides */
.pagination .page-link {
    color: var(--flipt-secondary) !important;
}

.pagination .page-link:hover {
    background-color: var(--flipt-primary-light) !important;
    color: var(--flipt-primary) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--flipt-primary) !important;
    border-color: var(--flipt-primary) !important;
}

/* Tooltip Overrides */
.tooltip-inner {
    background-color: var(--flipt-dark) !important;
}

/* Modal Header Overrides */
.modal-header {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    color: var(--flipt-white) !important;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
    color: var(--flipt-white) !important;
}

/* Dark Mode Specific Overrides */
@media (prefers-color-scheme: dark) {
    /* Ensure FLiPT colors work well in dark mode */
    .card-header {
        background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
        opacity: 0.95;
    }
    
    .btn-primary,
    .btn-theme-primary {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    .league-card:hover {
        box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
    }
}

/* Bootstrap Class Overrides */
.text-primary {
    color: var(--flipt-primary) !important;
}

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

.border-primary {
    border-color: var(--flipt-primary) !important;
}

.text-secondary {
    color: var(--flipt-secondary) !important;
}

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

.text-info {
    color: var(--flipt-secondary) !important;
}

.bg-info {
    background-color: var(--flipt-secondary) !important;
}

.text-success {
    color: var(--flipt-primary) !important;
}

.bg-success {
    background-color: var(--flipt-primary) !important;
}


/* Hero Button Overrides for Index Page */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%) !important;
    border-color: var(--flipt-primary) !important;
    color: var(--flipt-white) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 156, 0.3) !important;
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-secondary-hover) 100%) !important;
    border-color: var(--flipt-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 166, 156, 0.4) !important;
}

.btn-hero-secondary {
    background-color: transparent !important;
    border-color: var(--flipt-secondary) !important;
    color: var(--flipt-secondary) !important;
}

.btn-hero-secondary:hover {
    background-color: var(--flipt-secondary) !important;
    border-color: var(--flipt-secondary-hover) !important;
    color: var(--flipt-white) !important;
}

/* Override any hardcoded badge colors */
.badge.bg-primary {
    background: var(--flipt-primary) !important;
}

.badge.bg-info {
    background: var(--flipt-secondary) !important;
}

.badge.bg-success {
    background: var(--flipt-primary) !important;
}

/* Ensure all primary-colored borders use FLiPT colors */
[class*="border-primary"] {
    border-color: var(--flipt-primary) !important;
}

[class*="border-info"] {
    border-color: var(--flipt-secondary) !important;
}

/* Focus states with FLiPT colors */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--flipt-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 166, 156, 0.25) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    h1, h2, h3 {
        font-weight: 700 !important; /* Slightly less bold on mobile for readability */
    }
}