:root {
    --Controls: rgba(200,200,200,0.1);
}

/* Panelbereich dicht an Tabs */
main {
    margin: 10px;
    padding: 10px;
}





/* Tabs in header */
.tablist {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .2rem;
}

.tab {
    appearance: none;
    border: none;
    background: none;
    padding: .25rem .5rem;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

    .tab[aria-selected="true"] {
        color: inherit;
        border-bottom-color: currentColor;
        font-weight: 600;
    }

    .tab:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
        border-radius: 4px;
    }





/* Allgemeine Einstellungen*/

.Heading {
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    justify-content: center;
}

select,
input[type="text"] {
    box-sizing: border-box;
    padding: 2px 2px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Tabellenklasse*/

/* Das Panel um die Tabelle*/
.table-panel {
    flex: 3 1 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 5px;
}

/*Die Tabelle */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    background: none;
    color: inherit;
    table-layout: fixed;
    /* Rahmen und Abrundung um Tabelle*/
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    overflow: hidden;
}

    /* Zeilenfärbung alternierend */
    .data-table tr:nth-child(odd) {
        background: rgba(255,255,255,0.2);
    }

    .data-table tr:nth-child(even) {
        background: none;
    }

    /* Kopfzeile*/
    .data-table tr.table-head {
        background: rgba(200,200,200,0.3);
        color: var(--muted);
        font-weight: 700;
    }

    /* Padding */
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        box-sizing: border-box;
    }

        /*Die ganzen Buttons sollen zentriert werden*/
        .data-table td.table-Buttons {
            text-align: center;
            cursor: pointer;
            text-align: center;
        }


#filterTable {
    /*No specific adjustments*/
}

.hide-column {
    display: none;
}






















/* Panels in main */
.tabpanel {
    padding: 0 0 0 0;
}

.panel-placeholder {
    color: var(--muted);
    font-size: .95rem;
}

/* Controls above table*/
.table-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
    text-align: center;
    border: 1px solid var(--Controls);
    border-radius: 8px;
    font-size: .9rem;
    /*float: right;*/
    background: var(--Controls);
    color: var(--muted);
    padding: 5px 5px;
}

    .table-controls .group {
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    


.muted {
    color: var(--muted);
}




/* Hier kommen die Buttons der Listen wie "Selected" und "Delete"*/
.chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid rgba(255,255,255,0.12);
}

.chip-Zero {
    color: #b32929;
    border-color: rgba(217,83,79,.4);
    background: rgba(217,83,79,.08);
}

.chip-One {
    color: #95b329;
    border-color: rgba(100,130,85,.4);
    background: rgba(100,130,85,.08);
}

.chip-Two {
    color: #29b32b;
    border-color: rgba(41,179,95,.4);
    background: rgba(41,179,95,.08);
}



.btn {
    cursor: pointer;
    background: lightgrey;
}





/* Optionsspalte links: subtile Rahmung, innerer Abstand */
#glassMapOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--Controls);
    border: 1px solid var(--Controls);
    border-radius: 10px;
}

    /* Jede Rubrik (child div) soll ein Drittel der Höhe bekommen */
    #glassMapOptions > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 6px;
    }

        /* leichte Trennung zwischen Rubriken */
        #glassMapOptions > div + div {
            border-top: 1px solid var(--Controls);
            margin-top: 4px;
            padding-top: 10px;
        }

/* Platzhaltertext im Export-Panel zentrieren und ansprechend gestalten */
#panel-export:not([hidden]) {
        display: flex;
        flex-direction: column; /* Stapelt h3, p und button untereinander */
        justify-content: center;
        align-items: center;
        min-height: 400px; /* Oder 70vh, je nach Wunsch */
        text-align: center;
    }