*,
*::before,
*::after {
box-sizing: border-box;
}

/* Container styling */
.divisions-container {
font-family: Arial, Helvetica, sans-serif;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden; /* Keep container neat, scrolling is handled by table wrapper */
}

/* Tabs navigation styling */
.tabs {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
gap: 5px;
}

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

.tab-link {
flex: 1 1 0;
text-align: center;
background-color: #f2f2f2;
border: none;
outline: none;
cursor: pointer;
padding: 20px;
margin-right: 0;
border-radius: 15px 15px 0 0;
font-size: larger;
font-weight: 600;
text-transform: uppercase;
transition: background-color 0.3s, box-shadow 0.3s;
}

.tab-link:hover {
background-color: #d8d8d8;
}

.tab-link.active {
background-color: #03508c;
color: #fff;
}

/* Tabs content styling */
.tab-content {
display: none;
padding: 10px 0;
}

.tab-content.active {
  display: block;
  animation: fadeIn 1.0s ease forwards;
}

/* ANIMATION!!!!
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Create a class to trigger animation 
.fade-in {
  animation: fadeIn 1.0s ease forwards;
}*/

/* Table wrapper for horizontal scrolling */
/* Why aren't you working, goddamnit! SOLUTION: Just add the ?x= thingy to the CSS*/
.table-wrapper {
width: 100%;
margin-left: 0px; 
padding-left: 0px; 
overflow-x: auto; 
-webkit-overflow-scrolling: touch;
}

/* Table styling */
.division-table {
width: 100%; /* Table takes full width of container */
border-collapse: collapse;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
table-layout: auto;
}

.division-table th,
.division-table td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
vertical-align: middle;
white-space: normal; /* Allow natural wrapping */
word-break: normal; /* Avoid breaking inside words */
overflow-wrap: anywhere; /* Wrap at natural break points */
}

.division-table th {
background-color: #f2f2f2;
font-weight: 600;
text-align: center;
}

.division-table a {
    color: #03508c;
    text-decoration: none;
}

.division-table a:hover {
    cursor: pointer;
    font-weight: bold;
    color: 03508c;
}

/* Adjusted column widths */
.division-table td:nth-child(1),
.division-table th:nth-child(1) {
width: 20%; /* Keep reasonable width for first column 
color: #03508c;*/

}

.division-table td:nth-child(2),
.division-table th:nth-child(2) {
width: 25%; /* Slightly wider */
}

.division-table td:nth-child(3),
.division-table th:nth-child(3) {
width: 25%; /* Slightly wider */
}

.division-table td:nth-child(4),
.division-table th:nth-child(4) {
width: 35%;
}
 
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .divisions-container {
        padding: 15px;
        overflow-x: hidden; /* Keeps container clean */
    }

    .tabs {
        flex-direction: column;
    }

    .tab-link {
        margin-bottom: 5px;
        border-radius: 8px;
        padding: 15px 10px;
        font-size: 14px;
    }


    .table-wrapper {
        overflow-x: auto;
        width: calc(100vw - 30px); /* Subtract container padding to overflow slightly */
        /*margin-left: -15px; /* Pull table to screen edge */
        /*padding-left: 15px; /* Optional: keeps left padding visual */
    }

    .division-table {
        font-size: 14px;
        table-layout: auto;
        min-width: 600px; /* Force table to be wider than screen for horizontal scroll */
    }

    .division-table th,
    .division-table td {
        padding: 8px;
        font-size: 14px;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }
}
