/* 🌟 General Table Container */
.table-container {
    width: 100%;
    max-width: 1200px; /* ✅ Keeps padding on PC */
    margin: 0 auto;
    padding: 0 20px;
}

/* 🌟 Club, Athlete & History Containers */
.club-container,
.athlete-container,
.history-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* 🌟 Responsive Table Wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* 🌟 Table Styles */
table {
    width: 100%;
    border-collapse: collapse; /* ✅ Fixes spacing */
    border-spacing: 0;
}

/* 🌟 Table Header & Cell Styles */
th, td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    color: white;
}

/* 🌟 Header Styling */
th {
    background-color: #007bff;
    background-image: linear-gradient(135deg, #007bff, #0056b3);
    font-size: 1.1em;
    border-bottom: 2px solid #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 🌟 Rounded Corners for Headers */
th:first-child {
    border-top-left-radius: 8px;
}
th:last-child {
    border-top-right-radius: 8px;
}

/* 🌟 Alternating Row Colors */
tbody tr:nth-child(even) {
    background-color: #333;
}
tbody tr:nth-child(odd) {
    background-color: #444;
}
tbody tr:hover {
    background-color: #555;
}

/* 🌟 Mobile Adjustments */
@media (max-width: 768px) {
    /* ✅ Keep table inside a scrollable container */
    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap; /* Prevents automatic wrapping */
    }

    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ✅ Allow table to scroll instead of squeezing */
    .table-responsive table {
        width: 900px; /* Ensures table does not squeeze */
        min-width: 900px;
        table-layout: auto; /* Allow columns to adjust */
    }

    /* ✅ Fix headers and text */
    th, td {
        padding: 8px;
        font-size: 14px;
        text-align: center;
        white-space: nowrap; /* Prevents text from breaking vertically */
        word-break: normal;
    }

    /* ✅ Ensure first column has enough space */
    td:first-child {
        min-width: 120px;
    }

    /* ✅ Prevent long descriptions from stretching the table */
    td:nth-child(4) {
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ✅ Fix Search Bar and Buttons */
    .club-container .d-flex,
    .athlete-container .d-flex,
    .history-container .d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* ✅ Make Search Bar Full-Width */
    .club-container input[type="text"],
    .athlete-container input[type="text"],
    .history-container input[type="text"] {
        width: 100%;
        font-size: 16px;
        padding: 12px;
    }

    /* ✅ Reduce Search Button Size */
    .club-container button,
    .athlete-container button,
    .history-container button {
        width: 100%;
        font-size: 14px;
        padding: 10px;
        margin-top: 8px;
    }

    /* ✅ Ensure Create Club Button is Properly Aligned */
    .club-container a.btn-success {
        width: 100%;
        text-align: center;
    }
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

.table-striped tbody tr:hover {
    background-color: #e2e6ea !important;
}