/*
 *	to be used in conjunction with ATStables.inc
*/

.CS_table {
    background-color: white;
    width: auto;
    margin-bottom: .5rem;

    caption {
        background-color: #FAF0E6;
        caption-side: top;
        padding: .75rem;
        /*margin-bottom: 15px;*/

    }

    tbody {
        display: block;
        overflow: auto;
    }

    thead,
    thead tr,
    tbody tr,
    tfoot {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    th,
    td {
        padding-left: 15px;
        overflow: hidden;
    }

    /* Special styling for the search bar row */
    .search-row th {
        background-color: #f7f7f7;
        /* Light grey background for the search bar row. */
        border-bottom: 1px solid #dcdcdc;
    }

    .sortable {
        cursor: pointer;
    }

    .sortedAsc::after {
        content: "\25B2";
        font-size: 50%;
    }

    .sortedDesc::after {
        content: "\25BC";
        font-size: 50%;
    }

    .CS_searchBar {
        display: flex;
        margin-bottom: 5px;
        border-bottom: 2px ridge grey;


        i {
            padding: .5rem;
            color: black;
        }

        div {
            background-color: lightgray;
            padding: .5rem;
            padding-bottom: .3rem;
            padding-top: .3rem;
        }

        input {
            flex-grow: 1;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        input:hover {
            background-color: #f7f4f4;
        }
    }

}


.CS_alternate {
    tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    tbody tr:hover {
        background-color: #ffe6cc;
    }
}

.CS_rounded {
    border: 2px ridge grey;
    border-radius: 7px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 2px #666;


    thead,
    tfoot {
        background-color: purple;
        color: white;
    }

    tr {
        /*border-right: 2px ridge grey;*/
    }

    /* make the search icon visible*/


    thead {
        border-bottom: 2px ridge grey;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    tfoot {
        border-top: 2px ridge grey;
        /*border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;*/
    }

    .CS_searchBar {
        border-top-right-radius: 7px;
        border-top-left-radius: 7px;

        div {
            border-top-left-radius: 7px;
        }

        input {
            border-top-right-radius: 7px;
            border: 0;
        }
    }
}

.CS_plain {
    border: 2px ridge grey;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 2px #666;


    thead,
    tfoot {
        background-color: #FFFAF0;
        color: #007bff;
    }

    thead {
        border-bottom: 2px ridge grey;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    tfoot {
        border-top: 2px ridge grey;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
    }

    tr {
        border-right: 2px ridge grey;
    }

    .CS_searchBar {
        input {
            border: 0;
        }
    }
}

.CS_krishna {
    width: 100%;
    border-collapse: separate;
    /* Required for rounded corners on cells. */
    border-spacing: 0;
    /* Prevents gaps between cells with separate borders. */
    margin: 2rem 0;
    font-family: "Public Sans", Arial, sans-serif;
    /* Dal's web font. */
    font-size: 12px;
    line-height: 1;
    color: #231f20;
    /* Wingtip Black. */
    border: 1px solid #dcdcdc;
    /* Main table border. */
    border-radius: 8px;
    /* Curved edges for the entire table. */
    overflow: hidden;
    /* Ensures borders are rounded on content inside. */

    /* ==========================================================================
   Header and Cell Styles
   ========================================================================== */

    /* Styling for table header cells. */
    th {
        padding: 1rem;
        text-align: left;
        font-weight: bold;
        background-color: #231f20;
        /* Wingtip Black background. */
        color: #ffffff;
        /* White text for high contrast. */
        border-left: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
    }

    /* Styling for table data cells. */
    td {
        padding: 1rem;
        text-align: left;
        border: 1px solid #dcdcdc;
    }

    /* Specific styling for the cells in the top and bottom corners */
    thead tr:first-child th:first-child {
        border-top-left-radius: 8px;
    }

    thead tr:first-child th:last-child {
        border-top-right-radius: 8px;
    }

    tbody tr:last-child td:first-child {
        border-bottom-left-radius: 8px;
    }

    tbody tr:last-child td:last-child {
        border-bottom-right-radius: 8px;
    }

    /* Special styling for the search bar row */
    .search-row th {
        background-color: #f7f7f7;
        /* Light grey background for the search bar row. */
        border-bottom: 1px solid #dcdcdc;
    }

    /* ==========================================================================
   Search Bar and Icon Styling
   ========================================================================== */

    /* Container to hold the search input and icon */
    .CS_searchBar {
        position: relative;
        width: 100%;
    }

    /* Styling for the search bar input field. */
    .CS_searchBar input {
        width: 100%;
        padding: 12px 20px 12px 40px;
        /* Add padding to the left for the icon */
        font-family: "Public Sans", Arial, sans-serif;
        font-size: 1rem;
        box-sizing: border-box;
        border: 1px solid #dcdcdc;
        border-radius: 4px;
    }

    /* Styling and positioning for the search icon */
    .search-icon {
        position: absolute;
        left: 10px;
        /* Position the icon 10px from the left edge */
        top: 50%;
        transform: translateY(-50%);
        /* Vertically center the icon */
        color: #767676;
        /* Grey color for the icon */
        pointer-events: none;
        /* Prevents the icon from blocking clicks on the input */
    }

    /* ==========================================================================
   Readability and Usability
   ========================================================================== */

    /* "Zebra-striping" for improved readability, especially for long tables. */
    tbody tr:nth-child(even) {
        background-color: #f7f7f7;
        /* Light grey for alternating rows. */
    }

    /* Hover effect to highlight the row the user is focused on. */
    tbody tr:hover {
        background-color: #e6e6e6;
        /* Slightly darker grey on hover. */
        cursor: pointer;
    }
}

/* Ensures the table is readable on smaller screens by allowing horizontal scrolling. */
@media screen and (max-width: 600px) {
    container {
        width: 100%;
        overflow-x: auto;
        /* Enables horizontal scroll on small screens. */
    }

    .CS_krishna {
        min-width: 600px;
        /* Prevents the table from becoming too narrow. */
    }
}

/* ==========================================================================
   Semantic and Accessibility Classes
   ========================================================================== */

/* Style for cells containing 'N/A' or empty data. */
.empty-cell {
    color: #767676;
    /* Muted text for empty cells. */
    font-style: italic;
}

/* You can use this class on a `<tr>` to visually highlight a specific row. */
.highlight-row {
    background-color: #e7c447;
    /* Beak Gold for high visibility. */
    color: #231f20;
}


.hidden {
    display: none !important;
}