/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

/* Header Styling */
header {
    background-color: #252525;
    padding: 5px 0; /* Reduced padding to make the header more compact */
}

header .container {
    max-width: 1200px;
    margin: 0 auto; /* Center the container */
}

/* Header Content Styling */
header .header-content {
    display: flex;
    flex-direction: column; /* Stack vertically by default (for mobile) */
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    padding: 0; /* Removed unnecessary padding */
}

/* Logo Container Styling */
header .logo-container {
    display: flex;
    justify-content: center;
}

/* Logo Styling */
header .logo {
    height: auto; /* Maintain aspect ratio */
    width: 150px; /* Fixed width */
    max-width: 100%; /* Prevents logo from being stretched too wide */
    margin-bottom: 5px; /* Small space between logo and title */
}

/* Title Container Styling */
header .title-container {
    text-align: center;
    margin-bottom: 5px; /* Smaller gap between logo and title */
}

/* Font Size and Styling for Text */
header .fs-2 {
    font-size: 2rem; /* Default font size for larger screens */
    line-height: 1.2;
    margin: 0; /* Removed extra margin */
}

header .fw-bold {
    font-weight: bold;
    color: #ffffff;
}

/* Large Screen (Desktop) Styling */
@media (min-width: 768px) {
    header .header-content {
        flex-direction: row; /* Align logo and title in a row for larger screens */
        justify-content: space-between;
        align-items: center;
    }

    header .logo-container {
        margin-bottom: 0; /* Removed bottom margin on larger screens */
    }

    header .left-logo {
        order: -1; /* Place the left logo on the left side */
    }

    header .right-logo {
        order: 1; /* Place the right logo on the right side */
        display: flex; /* Make sure the right logo shows on large screens */
    }

    header .fs-2 {
        font-size: 2rem; /* Larger text size for bigger screens */
    }

    /* Show the second logo on larger screens */
    header .right-logo {
        display: flex;
    }
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    header .header-content {
        flex-direction: column; /* Stack logo and title vertically on small screens */
        align-items: center;
        justify-content: center;
        padding: 0; /* Removed unnecessary padding */
    }

    header .logo {
        max-width: 100%; /* Ensure logo scales properly on small screens */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 5px; /* Small space between logo and title */
    }

    header .fs-2 {
        font-size: 1.5rem;  /* Adjust font size for mobile screens */
    }

    /* Hide the second logo (right-logo) on mobile screens */
    header .right-logo {
        display: none;
    }

    /* Adjust padding to make header more compact on mobile */
    header {
        padding: 5px 0; /* Reduced vertical padding for a more compact header */
    }

    header .header-content {
        padding: 0 15px; /* Slight padding on the sides for better layout */
    }
}

/* Footer Styling */
footer.custom-footer {
    background-color: #343a40;
    color: white;
    padding: 15px 0;
    text-align: center;
}

/* Footer Text Styling */
footer.custom-footer .text-muted {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-top: 10px;
}

/* Landing Page Styling */
.container {
    padding: 30px;
    
}

/* Button Styling - Standardized Size */
.sport-btn {
    font-size: 1.2rem; /* Standard font size */
    padding: 15px 25px; /* Adjusted padding for uniformity */
    margin: 10px 0;
    border-radius: 8px; /* Slightly rounded corners */
    transition: all 0.3s ease;
    text-align: center; /* Ensure text is centered */
    width: auto; /* Remove width restrictions */
}

/* Button Color Customization for each sport */
.btn-football {
    background-color: #28a745; /* Green */
    border: 1px solid #28a745;
}

.btn-junior-football {
    background-color: #ff6f61; /* Red */
    border: 1px solid #ff6f61;
}

.btn-cricket {
    background-color: #17a2b8; /* Cyan */
    border: 1px solid #17a2b8;
}

.btn-volleyball {
    background-color: #ffc107; /* Yellow */
    border: 1px solid #ffc107;
}

.btn-throwball {
    background-color: #6f42c1; /* Purple */
    border: 1px solid #6f42c1;
}

.btn-table-tennis {
    background-color: #ff00aa; /* Blue */
    border: 1px solid #ff00aa;
}

.btn-snooker {
    background-color: #dc3545; /* Red */
    border: 1px solid #dc3545;
}

.btn-squash {
    background-color: #17a2b8; /* Cyan */
    border: 1px solid #17a2b8;
}

.btn-darts {
    background-color: #ff851b; /* Orange */
    border: 1px solid #ff851b;
}

/* Hover effect for all buttons */
.sport-btn:hover {
     filter: brightness(1.2);
    color: rgb(255, 255, 255);
    background-color: #242424
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .sport-btn {
        font-size: 1rem; /* Smaller font size for mobile */
        padding: 12px 20px; /* Adjust padding for mobile */
    }

    .btn-football, .btn-junior-football, .btn-cricket, 
    .btn-volleyball, .btn-throwball, .btn-table-tennis, 
    .btn-snooker, .btn-squash, .btn-darts {
        width: 100%; /* Ensure buttons are full width on mobile */
    }
}

/* Table Styling */
table.matches-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    text-align: center;
}

table.matches-table th, table.matches-table td {
    padding: 10px;
    border: 1px solid #ddd;
}

table.matches-table th {
    background-color: #343a40;
    color: white;
}

table.matches-table td {
    background-color: #f9f9f9;
}

table.matches-table td .btn-edit {
    background-color: #1b3dff;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: capitalize;
}

table.matches-table td .btn-edit:hover {
    background-color: #00bb1f;
}

.matches-table td:nth-child(3) {
    font-weight: bold;
}

.team-a {
    color: #0300c7; /* Dark Blue */
}

.team-b {
    color: #d40000; /* Dark Red */
}

/* Ensure contrast for readability */
.matches-table {
    color: #333;
}

.matches-table td {
    padding: 8px;
    text-align: center;
}

.matches-table th {
    background-color: #2C3E50;
    color: #fff;
    padding: 10px;
}

/* Clear Filter Button */
.btn-clear-filter {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-left: 10px;
}

.btn-clear-filter:hover {
    background-color: #e53935;
}

/* Styling the Score Column */
.matches-table td:nth-child(4) {
    font-weight: bold;
    
}

/* Mobile Responsiveness for Table */
@media (max-width: 767px) {
    .filters-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-input,
    .filter-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-create-match {
        font-size: 1rem;
        padding: 8px 16px;
        margin-top: 10px;
        width: 100%;
    }

    table.matches-table th,
    table.matches-table td {
        padding: 10px;
    }
    .table-container {
        max-height: 1200px; /* You can adjust this value based on how much space you want for the table */
        overflow-y: auto; /* Enables vertical scrolling */
        overflow-x: auto; /* Optional, enables horizontal scrolling if the table is too wide */
        display: block; /* Ensure the scrollbars are applied */
    }

    /* Sticky Table Headers */
    .matches-table th {
        position: sticky; /* Make the header sticky */
        top: 0; /* Keep the header at the top when scrolling */
        background-color: #f8f9fa; /* Optional: Light background to distinguish the header */
        z-index: 1; /* Ensure the header stays on top of the table content */
    }
    
}

/* Hover effect for 'Create New Match' button */
.btn-create-match:hover {
    filter: brightness(1.2);
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .btn-create-match {
        font-size: 1.2rem;
        padding: 8px 16px;
        left: 10px;
        top: 60px;
    }

    .filters {
        margin-bottom: 20px;
    }

    table.match-table {
        font-size: 0.9rem;
    }

    table.match-table th,
    table.match-table td {
        padding: 8px;
    }
}

/* Styling for Teams Column */
.match-table td:nth-child(3) {
    font-weight: bold;
}

/* Styling for Score Column */
.match-table td:nth-child(6) {
    font-weight: bold;
    color: #28a745;
}

/* Center the Title */

        /* Custom Styles to match create_match design */
        .form-edit-match {
            max-width: 700px;
            margin: 0 auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .form-edit-match .form-group {
            margin-bottom: 20px;
        }

        .form-edit-match label {
            font-weight: bold;
            font-size: 1rem;
        }

        .form-edit-match input, .form-edit-match select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-edit-match button {
            padding: 12px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 1.2rem;
            cursor: pointer;
            width: 100%;
        }

        .form-edit-match button:hover {
            background-color: #218838;
        }

        .team-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .team-select, .team-score {
            width: 48%;
        }

        

        .edit-match-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 20px;
        }

    
/* Back Arrow Button Styling */
.back-btn {
    display: block;  /* Change from inline-block to block */
    margin-bottom: 20px;
    text-decoration: none;
    font-size: 18px;
    color: #fdfdfd;
    border: 1px solid #343a40;
    border-radius: 4px;
    padding: 10px 20px;
    background-color: #343a40;
    margin-left: auto;  /* Pushes the button to the right */
    width: fit-content;  /* Ensures the width is adjusted to the content */
}

.back-btn:hover {
    background-color: #ff9898;
}

/* Back Arrow Icon */
.back-btn::before {
    content: '\2190'; /* Unicode for left arrow */
    margin-right: 10px;
}
* Title Styling */
.create-match-title {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-bottom: 30px;
}

/* Form Styling */
.create-match-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.create-match-form .form-group {
    width: 100%;
    margin-bottom: 20px;
}

/* Label Styling */
.create-match-form label {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #333;
}

/* Select & Input Fields */
.create-match-form select, 
.create-match-form input[type="date"], 
.create-match-form input[type="time"] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    margin-top: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Button Styling for Create Match */
.btn-create-match {
    padding: 12px 20px;
    background-color: #28a745;
    color: white;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.btn-create-match:hover {
    background-color: #218838;
}

/* Responsive Design for Mobile */
@media (max-width: 767px) {
    .create-match-form {
        padding: 10px;
    }

    .create-match-title {
        font-size: 1.5rem; /* Smaller title for mobile */
    }

    .create-match-form select, 
    .create-match-form input[type="date"], 
    .create-match-form input[type="time"] {
        padding: 10px;
    }

    .btn-create-match {
        font-size: 1rem;
        padding: 10px 16px;
    }
}