/* Temporary styles to create sub-menu */
/* TODO: Move styling to appropriate files */

:root {
    --c-white:#FFF;
    --c-blue-04:#D8E5F3;
    --c-grey-02:#ebebeb;
}

.container_bbMap {
    height: calc(100vh - 118px);
}

.split-container {
    display: flex;

    & .loc-map, .loc-table  {
        height: calc(100vh - 118px);
    }

    & .loc-map {
        width: 60%;
    }

    & .loc-table {
        width: 40%;
        background-color: #fff;
        padding: 15px;
        overflow-y: hidden;
    }
}
#chart_svg {
    width: inherit;
    height: inherit;
}

#chart_container {
    width: inherit;
    height: inherit;
}

.chart_legend {
    column-count: 2;
    column-gap: 5px;
    text-align: left;
    list-style-position: inside;
}

#coverage-table-content {
    display:none;
    table .header .close::before{
        content: "×";
    }
}

[data-row-expand]{
    cursor: pointer;
    text-decoration: underline;
    color: var(--c-blue-03);
}

.loading-coverage-table  {
    
    & .loading-content {
        font-size: 2em;
        text-align: center;
    }
    & .loading-messages-list {
        display: none;
    }
}

#table-row-expanded-info {

    display: none;
    position: absolute;
    width: calc(40% - 30px);
    bottom: 15px;
    right: 15px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px #cacaca;
    z-index: 100;

    & .header {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px 10px 15px;
    }

    & .content {
        text-align: center;
        margin: 0px 5px 0px 5px;
        border-top: solid 2px #eeeeee;
        padding: 20px;
        overflow-y: auto;
        height: 350px;
    }
}

.ellipsis-single-line {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    overflow: hidden; /* Hides any content that extends beyond the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to represent clipped text */
}

.sticky-table-container {
    overflow-x: auto; /* Enables horizontal scrolling for the table */
    max-width: 100%;
    padding-bottom: 5px;
    margin: 0;
    display: block;
}
.table-display {

    width: 100%;
    table-layout: fixed;
    height: calc(100vh - 190px);

    & table {
        width: 100%;
    }

    & th, td {
        text-align: center;
        padding: 8px 12px;
        border-top: solid 1px var(--c-blue-04);
        background-color: var(--c-white);
    }

    /* Hide group headers */
    & table tr[data-role][data-group="Coverage"] {
        display: none;
    }

    & th.header {
        background-color: white;
        text-align: center;
        border-top: 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.sticky {
        width: 150px;
        text-align: left;
        white-space: nowrap;
    }

    /* Sticky first column styles */
    & th:first-child, td:first-child {
        position: sticky;
        left: 0;
        z-index: 2; /* Ensure it's above other content */
        background-color: #fff; /* Background to hide scrolling content */
    }
    & td:first-child {
        background-color: #f9f9f9; /* Background to hide scrolling content */
    }

    /* Optional: Add a subtle shadow for better visual separation */
    & td:first-child {
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    & [data-row-expanded-from]{
        
        border-top: dashed 1px #d8e5f3;
        vertical-align: top;
        background-color: #fff !important;
        height: 350px;
        padding: 0;

        & .expand-container {
            position:fixed;
            padding: 15px;
            width: inherit;
            height: inherit;
        }
        & .expand-content {
            width: inherit;
            height: inherit;
        }
    }

    &.minimize {
        height: calc(100vh - 600px);
    }
}

/* MAP (Compare Locations) */
.mapi-map {
    width: 100%;
    height: calc(100vh - 118px);
    z-index: 0;

    & .loading-content {
        top: 32px;
        left: 72px;
        padding: 10px;
        min-width: 0;
    }
    & .loading-messages-list {
        display: none;
    }
    & .loading-spinner {
        margin-top: 0;
    }
    
    /* Map Popup Styling */
    table {
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        /* font-family: sans-serif; */
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    th,
    td {
        border: 1px solid rgb(160 160 160);
        padding: 8px 10px;
    }

    th[scope="colgroup"] {
        text-align: center;
    }

    th[scope="row"] {
        background-color: #d6ecd4;
    }

    td {
        text-align: center;
    }

    tr:nth-of-type(even) {
        background-color: #eeeeee;
    }
}

.container-loc-sel {
    position: absolute;
    z-index: 500;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    margin-top: 15px;

    & label {
        margin-right: 5px;
    }
}
#location_type_select {
    
    & select {
        border-radius: 25px;
    }
}
.container-loc-data {
    position: absolute;
    z-index: 500;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    bottom: 0;
    font-size: 12pt;
    
    & select {
        border-radius: 25px;
    }

    & .bg-container {
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    & .header {
        font-weight: bold;
        font-size: 1.1em;
        /* margin-bottom: 10px; */
    }

    & .legend {
        margin-top: 10px;
        font-size: 0.9em;
        margin-bottom: 10px;
        
        & .legend-title {
            font-weight: bold;
            margin-bottom: 5px;
            text-align: center;
        }
        
        & .legend-items {
            display: flex;
            flex-direction: row;
            gap: 3px;
        }
        
        & .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 10px;

            & .legend-color {
                width: 18px;
                height: 18px;
                border: 1px solid #333;
                flex-shrink: 0;
            }
            
            & .legend-label {
                white-space: nowrap;
            }
        }
    }

    & .legend-meta {
        font-size: 0.9em;
        font-style: italic;
        padding: 5px 0 0 0;
    }
}