body {
    background-color: white;
    background-image: none;
}
       
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    width: 90%; /* Match the table's width */
    max-width: 1200px; /* Match the table's max-width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    padding: 0; /* Remove any extra padding */
    position: relative; /* Ensure the header container is the reference for absolute positioning */
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Stack heading and search bar vertically */
        align-items: flex-start; /* Align items to the start */
    }

    .search-container {
        margin-top: 0.5rem; /* Add spacing between the heading and search bar */
        width: 90%; /* Match the table's width */
        max-width: 1200px; /* Match the table's max-width */
        margin: 0 auto; /* Center the search container horizontally */
    }

    .search-container input[type="search"] {
        width: 90%; /* Match the table's width */
        max-width: 90%; /* Ensure it spans the same width as the table */
        padding: 12px; /* Add padding for better usability */
        font-size: 1rem; /* Adjust font size for readability */
        border: 1px solid #ccc; /* Add a border for a clean look */
        border-radius: 8px; /* Add rounded corners for a modern look */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        box-sizing: border-box; /* Include padding and border in the width */
        margin: 0 auto; /* Center the search bar horizontally */
    }
}

@media (max-width: 768px) {
    .search-container {
        position: relative; /* Change position for smaller screens */
        top: 0; /* Reset top positioning */
        right: 0; /* Reset right positioning */
        margin: 0 auto 20px auto; /* Center horizontally and add margin below */
        width: 90%; /* Match the table's width */
        max-width: 1200px; /* Match the table's max-width */
        text-align: center; /* Center the search bar horizontally */
    }

    .search-container input[type="search"] {
        width: 100%; /* Make the search bar span the full width of the container */
        max-width: 100%; /* Ensure it spans the same width as the container */
        padding: 12px; /* Add padding for better usability */
        font-size: 1rem; /* Adjust font size for readability */
        border: 1px solid #ccc; /* Add a border for a clean look */
        border-radius: 8px; /* Add rounded corners for a modern look */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
        box-sizing: border-box; /* Include padding and border in the width */
    }
}

@media (max-width: 576px) {
    .search-container {
        position: relative; /* Change position for smaller screens */
        top: 0; /* Reset top positioning */
        right: 0; /* Reset right positioning */
        margin: 0 auto 20px auto; /* Center horizontally and add margin below */
        width: 90%; /* Match the table's width */
        max-width: 1200px; /* Match the table's max-width */
        text-align: center; /* Center the search bar horizontally */
    }

    .search-container input[type="search"] {
        width: 100%; /* Make the search bar span the full width of the container */
        max-width: 100%; /* Ensure it spans the same width as the container */
        font-size: 0.9rem; /* Adjust font size for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }
}

.tg {
    border-collapse: collapse;
    border-spacing: 0;
    width: 90%; /* Match the header's width */
    max-width: 1200px; /* Match the header's max-width */
    margin: 0 auto; /* Center the table horizontally */
    background-color: white; /* Set table background to white */
    position: relative; /* Set the table as the reference for the search bar */
}

.tg td, .tg th {
    padding: 8px 10px; /* Reduce padding for a more compact layout */
    font-size: 17px; /* Reduce font size for table content */
    min-width: 100px; /* Reduce minimum width for cells */
}

.tg th {
    font-size: 15px; /* Slightly larger font size for headers */
}

.tg .tg-y9th {
    background-color: #036400;
    border-color: inherit;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-0pky {
    border-color: inherit;
    text-align: left;
    vertical-align: middle; /* Align text to start and center vertically */
}

.tg .tg-0lax {
    text-align: left;
    vertical-align: top;
}

.tg tr {
    border-color: black;
    border-style: solid;
    border-width: 1px; /* Ensure normal thickness for all rows */
}

.tg tr:hover {
    background-color: rgb(240, 240, 240);
}

.search-container {
    position: static; /* Remove absolute positioning */
    top: auto;
    right: auto;
    margin: 0;
    z-index: auto;
    text-align: right;
    width: 300px;
    max-width: 100%;
}

.search-container input[type="search"] {
    width: 100%; /* Make the search bar span the full width of the container */
    max-width: 100%; /* Ensure it spans the container's width */
    padding: 12px; /* Add padding for better usability */
    font-size: 1rem; /* Adjust font size for readability */
    border: 1px solid #ccc; /* Add a border for a clean look */
    border-radius: 8px; /* Add rounded corners for a modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    box-sizing: border-box; /* Include padding and border in the width */
}

@media (max-width: 768px) {
    .search-container {
        top: -60px; /* Maintain spacing above the table */
        right: 20px; /* Align it to the right edge */
        width: 90%; /* Match the table's width */
        max-width: 90%; /* Ensure it spans the same width as the table */
    }
}

@media (max-width: 576px) {
    .search-container {
        top: -60px; /* Maintain spacing above the table */
        right: 10px; /* Adjust alignment for smaller screens */
        width: 90%; /* Match the table's width */
        max-width: 90%; /* Ensure it spans the same width as the table */
    }
}

.form-inline {
    display: flex;
    align-items: center;
}

.form-inline .form-control {
    margin-right: 10px;
}

/* Custom styles for responsiveness */
.tg {
    width: 100%;
    table-layout: auto;
}

.tg th, .tg td {
    word-wrap: break-word;
    text-align: center;
}

/* Adjust table layout for smaller screens */
@media (max-width: 768px) {
    .tg {
        font-size: 0.9rem; /* Adjust font size for better readability */
        table-layout: fixed; /* Ensure table fits within the screen */
        word-wrap: break-word; /* Allow text wrapping */
    }

    .tg th, .tg td {
        padding: 6px; /* Reduce padding for compact layout */
    }

    .search-container input[type="search"] {
        font-size: 0.9rem; /* Adjust font size for search bar */
    }
}

@media (max-width: 576px) {
    .tg {
        font-size: 0.8rem; /* Further reduce font size for mobile devices */
    }

    .tg th, .tg td {
        padding: 4px; /* Further reduce padding for mobile devices */
    }

    .search-container input[type="search"] {
        font-size: 0.8rem; /* Adjust font size for smaller screens */
    }

    .header-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align for better layout */
    }

    .header-container .search-container {
        width: 100%; /* Ensure search bar spans full width */
        margin-top: 0.5rem; /* Add spacing between elements */
    }
}

/* --- Consistent button size and alignment for both desktop and mobile --- */
.top-row-flex a.btn {
    padding: 8px 24px;
    font-size: 1rem;
    min-width: 140px;
    max-width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
    white-space: nowrap;
}

/* --- Responsive: keep button and search in a row, shrink button if needed --- */
@media (max-width: 768px) {
    .top-row-flex {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .top-row-flex a.btn {
        padding: 8px 16px;
        font-size: 0.95rem;
        min-width: 100px;
        height: 40px;
        width: auto;
        margin-bottom: 0 !important;
    }
    .top-row-flex .search-container {
        width: 60vw !important;
        min-width: 120px;
        max-width: 300px;
        margin: 0 !important;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .top-row-flex .search-container input[type="search"] {
        font-size: 0.95rem;
        height: 40px;
    }
}

/* --- Extra small screens: DO NOT stack, always keep row --- */
@media (max-width: 430px) {
    .top-row-flex {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .top-row-flex a.btn {
        width: auto;
        min-width: 100px;
        margin-bottom: 0 !important;
    }
    .top-row-flex .search-container {
        width: 60vw !important;
        min-width: 100px;
        max-width: 300px;
        margin: 0 !important;
    }
}

.logout-container {
    position: absolute; /* Ensure it stays in the top-right corner */
    top: 20px;
    right: 20px;
    z-index: 1000; /* Ensure it stays above other elements */
}

.logout-container a {
    backdrop-filter: blur(5px); /* Add blur effect */
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    border: 1px solid #DEE2E6;
    color: #000; /* Black text color */
    transition: transform 0.2s; /* Smooth transition for transform */
    display: flex;
    align-items: center;
    padding: 8px 12px; /* Make the button slightly smaller */
    font-size: 1rem; /* Adjust font size */
}

.logout-container a:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent on hover */
    transform: scale(1.05); /* Slightly grow bigger on hover */
}

.logout-container img {
    margin-left: 5px;
    width: 14px; /* Adjust icon size */
    height: 14px; /* Adjust icon size */
}

@media (max-width: 576px) { /* Mobile phones */
    .logout-container {
        position: fixed; /* Ensure it stays fixed on smaller screens */
        top: 10px;
        right: 10px;
    }
}

.highlight {
    background-color: rgba(72, 255, 87, 0.386); /* Highlight color */
    font-weight: bold; /* Make the highlighted text bold */
    color: black; /* Ensure the text is readable */
}

.table-aligned-wrapper {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.top-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .table-aligned-wrapper {
        width: 100%;
        max-width: 100%;
    }
    .top-row-flex {
        gap: 0.5rem;
    }
    .search-container {
        width: 60vw !important;
        min-width: 120px;
        max-width: 300px;
    }
    .top-row-flex a.btn {
        padding: 8px 20px;
        font-size: 1rem;
        min-width: 120px;
        width: auto;
        text-align: center;
    }
}