:root {
    /* Primary Colors */
    --theme-color: #1a1a1a; /* Deep Charcoal - Main dark color */
    --theme-color-light: #ffffff; /* Pure White - Text on dark */
    --theme-background-light: #f8f9fa; /* Off-White - Light backgrounds */

    /* Accent Colors */
    --theme-accent-red: #c41e3a; /* BJJ Red - CTAs and important elements */
    --theme-accent-blue: #2c5aa0; /* Mat Blue - Secondary actions */
    --theme-accent-gold: #d4af37; /* Belt Gold - Achievements */
    --theme-accent-green: #28a745; /* Success Green - Open Mats and community events */

    /* Neutral Colors */
    --theme-neutral-gray: #6c757d; /* Medium Gray - Secondary text */
    --theme-neutral-light: #e9ecef; /* Light Gray - Borders */
    --theme-neutral-dark: #343a40; /* Dark Gray - Less prominent dark */

    /* Semantic Colors */
    --theme-success: #28a745;
    --theme-warning: #ffc107;
    --theme-danger: #dc3545;
    --theme-info: #17a2b8;

    /* Legacy mappings for backward compatibility */
    --theme-secondary-color: var(--theme-accent-blue);
    --theme-secondary-color-dark: var(--theme-neutral-dark);

    /* Transparent versions */
    --theme-color-transparent: rgba(26, 26, 26, 0.75);
    --theme-secondary-color-transparent: rgba(44, 90, 160, 0.75);
    --theme-accent-red-transparent: rgba(196, 30, 58, 0.1);
    --transparent-black: rgba(0, 0, 0, 0.63);

    /* Background */
    --theme-background-img: url("/img/bg.jpg");
}

i {
    color: inherit;
}

.theme-color {
    color: var(--theme-color) !important;
}

.theme-color-light {
    color: var(--theme-color-light) !important;
}

.theme-color::placeholder {
    color: var(--theme-color) !important;
}

.theme-secondary-dark-color {
    color: var(--theme-secondary-color-dark) !important;
}

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

.theme-secondary-color::placeholder {
    color: var(--theme-secondary-color) !important;
}

.theme-background-color {
    background-color: var(--theme-color) !important;
}

.theme-background-color-light {
    background-color: var(--theme-color-light) !important;
}

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

.theme-background-color-transparent {
    background-color: var(--theme-color-transparent) !important;
}

.theme-background-secondary-color-transparent {
    background-color: var(--theme-secondary-color-transparent) !important;
}

.theme-background-color-black-transparent {
    background-color: var(--transparent-black) !important;
}

.theme-background-image {
    background: var(--theme-background-img);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: -1px;
    left: -1px;
    min-width: 101%;
    min-height: 101%;
    z-index: -10;
}

.theme-background-image-gradient {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(44, 90, 160, 0.85) 100%);
    position: fixed;
    top: -1px;
    left: -1px;
    min-width: 101%;
    min-height: 101%;
    z-index: -10;
}

.theme-pop-transition {
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.theme-pop-transition:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Bootstrap classes */

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

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

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

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

.card-header {
    border-bottom: 3px solid var(--theme-color) !important;
    background-color: var(--theme-secondary-color-dark) !important;
    color: var(--theme-color-light) !important;
    font-size: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.card-body {
    background-color: var(--theme-secondary-color-transparent) !important;
    color: var(--theme-secondary-color-dark) !important;
}

.page-link {
    color: var(--theme-color);
}

.page-item.active .page-link {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.alert {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* End Bootstrap classes */

/* New accent color classes */
.text-accent-red {
    color: var(--theme-accent-red) !important;
}

.text-accent-blue {
    color: var(--theme-accent-blue) !important;
}

.text-accent-gold {
    color: var(--theme-accent-gold) !important;
}

.text-accent-green {
    color: var(--theme-accent-green) !important;
}

.bg-accent-red {
    background-color: var(--theme-accent-red) !important;
    color: var(--theme-color-light) !important;
}

.bg-accent-blue {
    background-color: var(--theme-accent-blue) !important;
    color: var(--theme-color-light) !important;
}

.bg-accent-gold {
    background-color: var(--theme-accent-gold) !important;
    color: var(--theme-color) !important;
}

.bg-accent-green {
    background-color: var(--theme-accent-green) !important;
    color: var(--theme-color-light) !important;
}

.btn-accent-red {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-red) !important;
    border-color: var(--theme-accent-red) !important;
}

.btn-accent-red:hover {
    color: var(--theme-color-light) !important;
    background-color: color-mix(in srgb, var(--theme-accent-red) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-accent-red) 85%, black) !important;
}

.btn-accent-blue {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-blue) !important;
    border-color: var(--theme-accent-blue) !important;
}

.btn-accent-blue:hover {
    color: var(--theme-color-light) !important;
    background-color: color-mix(in srgb, var(--theme-accent-blue) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-accent-blue) 85%, black) !important;
}

.btn-accent-gold {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-gold) !important;
    border-color: var(--theme-accent-gold) !important;
}

.btn-accent-gold:hover {
    color: var(--theme-color-light) !important;
    background-color: color-mix(in srgb, var(--theme-accent-gold) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-accent-gold) 85%, black) !important;
}

.btn-accent-green {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-green) !important;
    border-color: var(--theme-accent-green) !important;
}

.btn-accent-green:hover {
    color: var(--theme-color-light) !important;
    background-color: color-mix(in srgb, var(--theme-accent-green) 85%, black) !important;
    border-color: color-mix(in srgb, var(--theme-accent-green) 85%, black) !important;
}

.btn-outline-accent-red {
    color: var(--theme-accent-red) !important;
    background-color: transparent !important;
    border: 1px solid var(--theme-accent-red) !important;
}

.btn-outline-accent-red:hover {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-red) !important;
    border-color: var(--theme-accent-red) !important;
}

.btn-outline-accent-blue {
    color: var(--theme-accent-blue) !important;
    background-color: transparent !important;
    border: 1px solid var(--theme-accent-blue) !important;
}

.btn-outline-accent-blue:hover {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-blue) !important;
    border-color: var(--theme-accent-blue) !important;
}

.btn-outline-accent-gold {
    color: var(--theme-accent-gold) !important;
    background-color: transparent !important;
    border: 1px solid var(--theme-accent-gold) !important;
}

.btn-outline-accent-gold:hover {
    color: var(--theme-color) !important;
    background-color: var(--theme-accent-gold) !important;
    border-color: var(--theme-accent-gold) !important;
}

.btn-outline-accent-green {
    color: var(--theme-accent-green) !important;
    background-color: transparent !important;
    border: 1px solid var(--theme-accent-green) !important;
}

.btn-outline-accent-green:hover {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-accent-green) !important;
    border-color: var(--theme-accent-green) !important;
}

/* Improved contrast for cards */
.card {
    border: 1px solid var(--theme-neutral-light);
    border-radius: 8px;
    overflow: hidden; /* Ensures child elements respect border-radius */
}

.card-header {
    border-bottom: 3px solid var(--theme-accent-red) !important;
    background-color: var(--theme-color) !important;
    color: var(--theme-color-light) !important;
    font-size: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.card-body {
    background-color: var(--theme-color-light) !important;
    color: var(--theme-color) !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border: none !important;
}

/* Select 2 classes */

.select2-selection__rendered {
    line-height: 31px !important;
}

.select2-container .select2-selection--single {
    height: 35px !important;
}

.select2-selection__arrow {
    height: 34px !important;
}

.select2-results__option {
    color: black;
}

/* End Select 2 classes */

/* Modern Filter Components */
.filters-wrapper {
    background-color: var(--theme-color-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: 0;
}

.search-bar-wrapper {
    margin-bottom: 1rem;
}

/* Search input focus styling */
.filters-wrapper .input-group .form-control:focus {
    border-color: var(--theme-accent-red);
    box-shadow: 0 0 0 0.2rem var(--theme-accent-red-transparent);
}

.filters-wrapper .input-group-text {
    border-color: var(--theme-neutral-light);
}

.search-input:focus {
    border-color: var(--theme-accent-red);
    box-shadow: 0 0 0 0.2rem var(--theme-accent-red-transparent);
}

.filter-collapse {
    margin-top: 1.5rem;
}

.filter-card {
    background-color: var(--theme-background-light);
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--theme-neutral-light);
}

.filter-group {
    margin-bottom: 1rem;
}

.filter-label {
    display: block;
    font-weight: 600;
    color: var(--theme-color);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
}

.filter-input,
.filter-select {
    border: 1px solid var(--theme-neutral-light);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.filter-input:focus,
.filter-select:focus {
    border-color: var(--theme-accent-blue);
    box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.25);
}

.filter-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--theme-neutral-light);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.date-range-wrapper .input-group-text {
    background-color: var(--theme-background-light);
    border-color: var(--theme-neutral-light);
    color: var(--theme-neutral-gray);
}

/* Modern Card Styles for Lists */
.list-card {
    border: 1px solid var(--theme-neutral-light);
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.list-card-header {
    background-color: var(--theme-background-light);
    padding: 1rem;
    border-bottom: 1px solid var(--theme-neutral-light);
}

.list-card-body {
    padding: 1.5rem;
    background-color: var(--theme-color-light);
}

.list-card-footer {
    background-color: var(--theme-background-light);
    padding: 1rem;
    border-top: 1px solid var(--theme-neutral-light);
}

/* Empty State Styles */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--theme-neutral-gray);
    margin-bottom: 1rem;
}

.empty-state-title {
    color: var(--theme-neutral-gray);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: var(--theme-neutral-gray);
    margin-bottom: 2rem;
}

/* Badge Styles */
.badge-count {
    background-color: var(--theme-accent-red);
    color: var(--theme-color-light);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

/* Pagination Override */
.pagination {
    margin-bottom: 0;
}

.page-link {
    color: var(--theme-accent-red);
    border-color: var(--theme-neutral-light);
    border-radius: 6px;
    margin: 0 2px;
}

.page-link:hover {
    background-color: var(--theme-accent-red);
    border-color: var(--theme-accent-red);
    color: var(--theme-color-light);
}

.page-item.active .page-link {
    background-color: var(--theme-accent-red);
    border-color: var(--theme-accent-red);
}

.page-item.disabled .page-link {
    color: var(--theme-neutral-gray);
}

/* Responsive Table Override */
.table-responsive {
    border-radius: 8px;
    border: 1px solid var(--theme-neutral-light);
}

.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--theme-color);
    color: var(--theme-color-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border-bottom: 3px solid var(--theme-accent-red);
}

.table tbody tr:hover {
    background-color: var(--theme-background-light);
}

/* Action Buttons Group */
.action-buttons {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.action-buttons .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* ========================================
   CONSOLIDATED HERO SECTION STYLES
   ======================================== */

/* Hero Section Base */
.theme-hero-section {
    position: relative;
    overflow: hidden;
}

/* Hero Gradient Border */
.theme-hero-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent-red) 0%, var(--theme-accent-blue) 50%, var(--theme-accent-gold) 100%);
}

/* Minimum Height Utilities */
.min-vh-50 {
    min-height: 50vh;
}

.min-vh-75 {
    min-height: 75vh;
}

/* ========================================
   CONSOLIDATED FORM STYLES
   ======================================== */

/* Universal Form Input */
.theme-form-input {
    border: 2px solid var(--theme-neutral-light);
    border-radius: 12px;
    transition: all 0.3s ease;
    background-color: var(--theme-background-light);
    color: var(--theme-color);
}

.theme-form-input:focus {
    border-color: var(--theme-accent-red);
    box-shadow: 0 0 0 0.2rem var(--theme-accent-red-transparent);
    background-color: var(--theme-color-light);
    color: var(--theme-color);
}

.theme-form-input::placeholder {
    color: var(--theme-neutral-gray);
}

.theme-form-input.is-invalid {
    border-color: var(--theme-danger);
}

/* ========================================
   ENHANCED CARD HOVER EFFECTS
   ======================================== */

/* Standard Card Hover */
.theme-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Subtle Card Hover */
.theme-card-hover-subtle {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-card-hover-subtle:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   ANIMATION KEYFRAMES & CLASSES
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation Classes */
.theme-animate-fade-up {
    animation: fadeInUp 1s ease-out;
}

.theme-animate-fade-left {
    animation: fadeInLeft 1s ease-out;
}

.theme-animate-fade-right {
    animation: fadeInRight 1s ease-out;
}

.theme-animate-slide-up {
    animation: slideInUp 0.6s ease-out;
}

/* ========================================
   BELT GRADIENT SYSTEM
   ======================================== */

.belt-gradient-white,
.belt-gradient-white-belt {
    background: linear-gradient(135deg, #e3f2fd 0%, #90a4ae 100%);
}

.belt-gradient-blue,
.belt-gradient-blue-belt {
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
}

.belt-gradient-purple,
.belt-gradient-purple-belt {
    background: linear-gradient(135deg, #7b1fa2 0%, #1976d2 100%);
}

.belt-gradient-brown,
.belt-gradient-brown-belt {
    background: linear-gradient(135deg, #5d4037 0%, #ff8f00 100%);
}

.belt-gradient-black,
.belt-gradient-black-belt {
    background: linear-gradient(135deg, #212121 0%, #d32f2f 100%);
}

.belt-gradient-red,
.belt-gradient-red-belt,
.belt-gradient-red-black,
.belt-gradient-red-black-belt {
    background: linear-gradient(135deg, #d32f2f 0%, #ff8f00 100%);
}

.belt-gradient-coral,
.belt-gradient-coral-belt,
.belt-gradient-coral-white,
.belt-gradient-coral-white-belt {
    background: linear-gradient(135deg, #ff7043 0%, #ff8f00 100%);
}

.belt-gradient-no-belt {
    background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);
}

/* TODO: ask claude to search for any non existent classes in all views */

/* ========================================
   FEATURE CARD STYLES
   ======================================== */

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

.feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Accent Background Light Variants */
.bg-accent-blue-light {
    background: rgba(44, 90, 160, 0.1);
}

.bg-accent-gold-light {
    background: rgba(212, 170, 0, 0.1);
}

.bg-accent-red-light {
    background: rgba(196, 30, 58, 0.1);
}

.bg-accent-green-light {
    background: rgba(34, 139, 34, 0.1);
}

.bg-accent-purple-light {
    background: rgba(128, 0, 128, 0.1);
}

.text-accent-purple {
    color: #800080;
}

.bg-accent-teal-light {
    background: rgba(0, 128, 128, 0.1);
}

.text-accent-teal {
    color: #008080;
}

/* ========================================
   TESTIMONIAL & PRICING CARDS
   ======================================== */

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    height: 100%;
}

.pricing-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 30px rgba(0,0,0,0.2);
}

.pricing-card.popular {
    transform: scale(1.05);
}

.pricing-card.clickable-card {
    cursor: pointer;
}

.pricing-card.clickable-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 8px 35px rgba(0,0,0,0.25) !important;
}

/* ========================================
   AVATAR UTILITIES
   ======================================== */

.avatar-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-accent-blue) 0%, var(--theme-accent-gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    font-weight: bold;
}

/* Banner overlay for hero sections */
.banner-overlay {
    background: linear-gradient(to bottom, var(--theme-color-transparent) 0%, var(--transparent-black) 100%);
}