/* =================== Root Variables for Dark Mode =================== */
:root {
    --bs-body-bg: #121212; /* Main background */
    --bs-body-color: #e0e0e0; /* Default text color */
    --bs-primary: #bb86fc; /* Primary color */
    --bs-secondary: #03dac6; /* Secondary color */
    --bs-link-color: #bb86fc; /* Link color */
    --bs-link-hover-color: #03dac6; /* Link hover color */
    --bs-border-color: #292929; /* Border color (slightly darker) */
    --bs-muted: #a1a1a1; /* Muted text color */
}

/* =================== General Body and Text Styles =================== */
body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}
.bg-dark {
    background-color: var(--bs-body-bg) !important;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

/* =================== Navbar Styles =================== */
.navbar {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--bs-body-color) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--bs-link-hover-color) !important;
}

/* =================== Button Styles =================== */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #121212;
}

.btn-primary:hover {
    background-color: #a674e9 !important;
    border-color: #a674e9 !important;
}

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

.btn-secondary:hover {
    background-color: #02c7b5 !important;
    border-color: #02c7b5 !important;
}

/* =================== Table Styles =================== */
.table {
    background-color: #1e1e1e;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.table th {
    background-color: #2b2b2b;
    color: #ffffff;
}

.table tbody tr:nth-of-type(odd) {
    background-color: #252525;
}

.table tbody tr:hover {
    background-color: #3a3a3a;
    transition: background-color 0.3s ease;
}

/* =================== Form Styles =================== */
input, textarea, select {
    background-color: #1e1e1e;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    padding: 10px;
    border-radius: 5px;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 6px var(--bs-primary);
}

/* =================== Breadcrumbs =================== */
.breadcrumb {
    background-color: #1f1f1f !important;
    color: var(--bs-body-color) !important;
    padding: 10px 15px;
    border-radius: 5px;
}

.breadcrumb a {
    color: var(--bs-link-color) !important;
}

.breadcrumb a:hover {
    color: var(--bs-link-hover-color) !important;
}

/* =================== Card Styles =================== */
.card {
    background-color: #1e1e1e;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.card-header {
    background-color: #292929;
    color: #ffffff;
}

.card-footer {
    background-color: #292929;
    color: var(--bs-muted);
}


/* General dropdown styling for the card theme */
select, .select2-container--default .select2-selection--single {

    background-color: #343a40; /* Match the dark card background */
    color: white; /* White text for readability */
    border: 1px solid #495057; /* Border color to match theme */
    border-radius: 0.25rem; /* Optional: round corners slightly */
    padding: 0.5rem; /* Add padding for better usability */
    box-sizing: border-box; /* Prevent padding/border from affecting the width */
    margin-bottom: 1rem; /* Add spacing below each dropdown */
}

/* Add spacing between dropdown containers */
#team1_goal_scorers div, #id_team1_assists div,
#team2_goal_scorers div, #id_team2_assists div {
    margin-bottom: 1rem; /* Ensure proper spacing between individual dropdowns */
}

/* Add spacing between Goal Scorers and Assists sections */
#team1_goal_scorers, #id_team1_assists,
#team2_goal_scorers, #id_team2_assists {
    margin-bottom: 2rem; /* Add spacing between sections */
}

/* Style for dropdown options */
.select2-container--default .select2-results__option {
    background-color: #343a40; /* Match the dark card background */
    color: white; /* White text for visibility */
}

/* Hover effect for dropdown options */
.select2-container--default .select2-results__option--highlighted {
    background-color: #495057; /* Slightly lighter for hover */
    color: white;
}

/* Style for the currently selected value */
.select2-container--default .select2-selection__rendered {
    color: white; /* Text color for the selected value */
    background-color: #343a40; /* Match theme */
    padding: 0.5rem; /* Ensure consistent padding inside dropdown */
}

/* Dropdown arrow styling */
.select2-container--default .select2-selection__arrow {
    color: white; /* Arrow color */
}

/* Ensure Select2 container stretches fully */
.select2-container {
    width: 100% !important; /* Ensure Select2 container width matches parent */
	color: white; 
}

/* Ensure the dropdown menu is full width */
.select2-container .select2-dropdown {
   /* Ensure dropdown aligns with the input */
}

/* Add vertical spacing for better layout */
.select2-container, select {
    margin-bottom: 1.5rem; /* Add more spacing between dropdowns */
}


/* Specifically target the rendered value inside the dropdown */
.select2-container--default .select2-selection__rendered {
    color: white !important; /* Ensure the displayed text is white */
    background-color: #343a40 !important; /* Match the background of the dropdown */
    line-height: 1.5; /* Vertically center the text */
}

/* Ensure placeholder text inside rendered element is also styled */
.select2-container--default .select2-selection__placeholder {
    color: white !important; /* Ensure the placeholder is also white */
}

/* Fix for options in dropdown menu */
.select2-container--default .select2-results__option {
    color: white !important; /* Ensure all dropdown options are white */
    background-color: #343a40 !important; /* Match dropdown background */
}

/* Highlight the hovered or selected dropdown options */
.select2-container--default .select2-results__option--highlighted {
    background-color: #495057 !important; /* Slightly lighter hover background */
    color: white !important; /* Hover text remains white */
}

/* =================== Footer Styles =================== */
footer {
    background-color: #1f1f1f !important; /* Match the header background color */
    color: var(--bs-body-color);
    text-align: center;
    padding: 20px 0; /* Add some vertical padding for a clean look */
    border-top: 1px solid var(--bs-border-color); /* Optional: adds a border at the top for separation */
}

footer a {
    color: var(--bs-link-color);
    text-decoration: none;
}

footer a:hover {
    color: var(--bs-link-hover-color);
}

/* =================== Responsive Adjustments =================== */
@media (max-width: 768px) {
    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .btn {
        width: 100%; /* Full-width buttons on small screens */
    }

    .breadcrumb {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 15px;
    }

    .card {
        margin: 10px 0;
    }
}