@layer theme-brand;
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;600;700;800&display=swap') layer(theme-brand);

/* RGB values defined outside layer for proper cascade with rgba() functions */
:root {
    --flipt-primary-rgb: 0, 166, 156;
    --flipt-secondary-rgb: 0, 104, 186;
    --theme-primary-rgb: 0, 166, 156;
    --primary: #00a69c;
    --primary-hover: #00857a;
}

[data-bs-theme="dark"] {
    --flipt-primary-rgb: 0, 184, 169;
    --flipt-secondary-rgb: 30, 123, 201;
    --theme-primary-rgb: 0, 184, 169;
    --primary: #00b8a9;
    --primary-hover: #00a194;
}

@layer theme-brand {
/* 
 * 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.
 */

/* 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 (brand-level, not league-level) */
    --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;

    /* RGB values for FLiPT colors (used in rgba functions) */
    --flipt-primary-rgb: 0, 166, 156;
    --flipt-secondary-rgb: 0, 104, 186;
    --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 */
[data-bs-theme="dark"] {
    /* 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;

    /* RGB values for dark mode */
    --flipt-primary-rgb: 0, 184, 169;
    --flipt-secondary-rgb: 30, 123, 201;
    --theme-primary-rgb: var(--flipt-primary-rgb) !important;

    /* Dark mode button tokens */
    --btn-primary-bg: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%);
    --btn-primary-bg-hover: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-secondary-hover) 100%);
    --btn-primary-fg: #0f172a;

    --btn-outline-bg: rgba(var(--flipt-primary-rgb), 0.20);
    --btn-outline-fg: #f0fdfa;
    --btn-outline-border: var(--flipt-primary);

    --btn-contrast-bg: var(--flipt-dark);
    --btn-contrast-fg: var(--flipt-white);
    --btn-contrast-border: var(--flipt-dark);

    --btn-disabled-bg: var(--theme-surface-3, #475569);
    --btn-disabled-fg: #f1f5f9;
    --btn-disabled-border: rgba(255, 255, 255, 0.2);

    --btn-focus-ring: #22d3ee;
    --btn-focus-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
}

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

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

/* Button tokens (consumed by components/buttons.css) */
:root {
    --btn-primary-bg: linear-gradient(135deg, var(--flipt-primary) 0%, var(--flipt-secondary) 100%);
    --btn-primary-bg-hover: linear-gradient(135deg, var(--flipt-primary-hover) 0%, var(--flipt-secondary-hover) 100%);
    --btn-primary-fg: var(--flipt-white);
    --btn-primary-border: var(--flipt-primary);
    --btn-primary-shadow: 0 2px 8px rgba(var(--flipt-primary-rgb), 0.2);
    --btn-primary-shadow-hover: 0 4px 16px rgba(var(--flipt-primary-rgb), 0.3);

    --btn-outline-bg: rgba(var(--flipt-primary-rgb), 0.08);
    --btn-outline-bg-hover: var(--flipt-primary);
    --btn-outline-fg: var(--flipt-primary);
    --btn-outline-fg-hover: var(--flipt-white);
    --btn-outline-border: var(--flipt-primary);
    --btn-outline-border-hover: var(--flipt-primary-hover);

    --btn-contrast-bg: var(--flipt-white);
    --btn-contrast-fg: var(--flipt-dark);
    --btn-contrast-border: var(--flipt-white);
    --btn-contrast-bg-hover: rgba(255, 255, 255, 0.95);

    --btn-danger-bg: #dc3545;
    --btn-danger-fg: var(--flipt-white);
    --btn-danger-border: #dc3545;
    --btn-danger-bg-hover: #c82333;
    --btn-danger-border-hover: #bd2130;

    --btn-focus-ring: var(--theme-info, #22d3ee);
    --btn-focus-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
}

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

.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,

    /* Currency Input Styling */
.input-group.currency-input {
    border-radius: 0.9rem;
    overflow: hidden;
    background-color: var(--theme-surface-1, #ffffff);
    border: 1px solid var(--theme-border-color, rgba(15, 23, 42, 0.08));
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    flex-wrap: nowrap;
}

.input-group.currency-input .input-group-text {
    min-width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    background: var(--theme-surface-2, #f8f9fa);
    color: var(--theme-text-secondary, #4a5568);
    border-right: 0;
    border-color: transparent;
    border-radius: 0.9rem 0 0 0.9rem;
}

.input-group.currency-input .form-control {
    border-left: 0;
    border-color: transparent;
    padding-left: 0.85rem;
    background: transparent;
    border-radius: 0 0.9rem 0.9rem 0;
}

.input-group.currency-input:focus-within {
    border-color: var(--flipt-secondary, var(--theme-secondary, #0068ba));
    box-shadow: 0 0 0 0.25rem rgba(var(--flipt-secondary-rgb, 0, 104, 186), 0.18);
}

.input-group.currency-input:focus-within .input-group-text,
.input-group.currency-input:focus-within .form-control {
    border-color: transparent;
    color: var(--flipt-secondary, var(--theme-secondary, #0068ba));
}

.input-group.currency-input .form-control:focus {
    box-shadow: none;
}

[data-bs-theme="dark"] .input-group.currency-input {
    background-color: var(--theme-surface-1, #1e293b);
    border-color: rgba(148, 163, 184, 0.25);
}

[data-bs-theme="dark"] .input-group.currency-input .input-group-text {
    background: rgba(15, 23, 42, 0.65);
    color: var(--theme-text-secondary, #cbd5e1);
}

[data-bs-theme="dark"] .input-group.currency-input:focus-within {
    border-color: var(--flipt-primary, #00b8a9);
    box-shadow: 0 0 0 0.25rem rgba(var(--flipt-primary-rgb, 0, 184, 169), 0.22);
}

[data-bs-theme="dark"] .input-group.currency-input:focus-within .input-group-text,
[data-bs-theme="dark"] .input-group.currency-input:focus-within .form-control {
    color: var(--flipt-primary, #00b8a9);
}

.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;
}

/* Alerts are styled globally via wwwroot/css/alert-modern.css */

/* 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 */
[data-bs-theme="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;
}

/* 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 */
    }
}
}