/*
 * Badminton Club Theme
 * Sport-inspired colour palette: greens, blues, and energetic accents
 */

:root {
    /* Primary palette */
    --club-primary: #1B5E20;        /* Deep green - main headers */
    --club-primary-light: #2E7D32;  /* Medium green for hover states */
    --club-secondary: #0D47A1;      /* Deep blue - secondary sections */
    --club-tertiary: #1565C0;       /* Medium blue - tertiary sections */
    --club-light: #42A5F5;          /* Light blue - subtle accents */
    --club-accent: #FF6F00;         /* Energetic orange - highlights, buttons */
    --club-accent-dark: #E65100;    /* Darker orange for hover */
    --club-danger: #C62828;         /* Red - warnings */
    --club-danger-light: #EF5350;   /* Lighter red for hover */

    /* Text colors */
    --club-text-light: #FFFFFF;
    --club-text-dark: #1A237E;

    /* Background tints */
    --club-bg-cream: #E8F5E9;       /* Light green background */
    --club-bg-light: #E3F2FD;       /* Light blue-gray background */
}

/* ============================================================================
   Card Header Styles
   ============================================================================ */

.card-header.bg-club-primary {
    background-color: var(--club-primary) !important;
    color: var(--club-text-light);
    border-color: var(--club-primary);
}

.card-header.bg-club-secondary {
    background-color: var(--club-secondary) !important;
    color: var(--club-text-light);
    border-color: var(--club-secondary);
}

.card-header.bg-club-tertiary {
    background-color: var(--club-tertiary) !important;
    color: var(--club-text-light);
    border-color: var(--club-tertiary);
}

.card-header.bg-club-light {
    background-color: var(--club-light) !important;
    color: var(--club-text-light);
    border-color: var(--club-light);
}

.card-header.bg-club-accent {
    background-color: var(--club-accent) !important;
    color: var(--club-text-light);
    border-color: var(--club-accent);
}

.card-header.bg-club-danger {
    background-color: var(--club-danger) !important;
    color: var(--club-text-light);
    border-color: var(--club-danger);
}

/* ============================================================================
   Button Styles
   ============================================================================ */

.btn-club-primary {
    background-color: var(--club-primary);
    border-color: var(--club-primary);
    color: var(--club-text-light);
}

.btn-club-primary:hover,
.btn-club-primary:focus {
    background-color: var(--club-primary-light);
    border-color: var(--club-primary-light);
    color: var(--club-text-light);
}

.btn-club-accent {
    background-color: var(--club-accent);
    border-color: var(--club-accent);
    color: var(--club-text-light);
}

.btn-club-accent:hover,
.btn-club-accent:focus {
    background-color: var(--club-accent-dark);
    border-color: var(--club-accent-dark);
    color: var(--club-text-light);
}

.btn-outline-club-primary {
    border-color: var(--club-primary);
    color: var(--club-primary);
}

.btn-outline-club-primary:hover,
.btn-outline-club-primary:focus {
    background-color: var(--club-primary);
    border-color: var(--club-primary);
    color: var(--club-text-light);
}

/* ============================================================================
   Background Utilities
   ============================================================================ */

.bg-club-primary { background-color: var(--club-primary) !important; }
.bg-club-secondary { background-color: var(--club-secondary) !important; }
.bg-club-tertiary { background-color: var(--club-tertiary) !important; }
.bg-club-light { background-color: var(--club-light) !important; }
.bg-club-accent { background-color: var(--club-accent) !important; }
.bg-club-danger { background-color: var(--club-danger) !important; }
.bg-club-cream { background-color: var(--club-bg-cream) !important; }

/* ============================================================================
   Text Color Utilities
   ============================================================================ */

.text-club-primary { color: var(--club-primary) !important; }
.text-club-secondary { color: var(--club-secondary) !important; }
.text-club-accent { color: var(--club-accent) !important; }
.text-club-danger { color: var(--club-danger) !important; }

/* ============================================================================
   Border Utilities
   ============================================================================ */

.border-club-primary { border-color: var(--club-primary) !important; }
.border-club-secondary { border-color: var(--club-secondary) !important; }
.border-club-accent { border-color: var(--club-accent) !important; }

/* ============================================================================
   Navbar Customization
   ============================================================================ */

.navbar {
    background-color: #fff;
}

.navbar .nav-link {
    color: var(--club-text-dark);
}

.navbar .nav-link:hover {
    color: var(--club-primary);
}

/* ============================================================================
   Alert Styles
   ============================================================================ */

.alert-club-warning {
    background-color: var(--club-bg-cream);
    border-color: var(--club-accent);
    color: var(--club-text-dark);
}

.alert-club-danger {
    background-color: #FFEBEE;
    border-color: var(--club-danger);
    color: var(--club-danger);
}

/* ============================================================================
   Table Styles
   ============================================================================ */

.table-club thead {
    background-color: var(--club-primary);
    color: var(--club-text-light);
}

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

/* ============================================================================
   Badge Styles
   ============================================================================ */

.badge-club-primary {
    background-color: var(--club-primary);
    color: var(--club-text-light);
}

.badge-club-accent {
    background-color: var(--club-accent);
    color: var(--club-text-light);
}

.badge-club-danger {
    background-color: var(--club-danger);
    color: var(--club-text-light);
}

/* ============================================================================
   Link Styles
   ============================================================================ */

a.text-club-primary:hover {
    color: var(--club-primary-light) !important;
}

/* ============================================================================
   Form Focus States
   ============================================================================ */

.form-control:focus {
    border-color: var(--club-primary);
    box-shadow: 0 0 0 0.25rem rgba(27, 94, 32, 0.25);
}

.form-check-input:checked {
    background-color: var(--club-primary);
    border-color: var(--club-primary);
}

/* ============================================================================
   Mobile Responsiveness
   ============================================================================ */

@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table-responsive {
        font-size: 0.875rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .navbar-brand img {
        height: 36px !important;
    }
}