/* =========================================
   DIV TABLES
   =========================================
   Farben aus colors.css (var(--color-*)).
   */

.base-div-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 011-ui-widget-div-table-html Regel 013: Header display: flex mit align-items: center */
.base-div-table-header {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.base-div-table-row-header {
    display: grid;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
}

.base-div-table-row-header[data-columns="9"] {
    grid-template-columns: 2rem 1fr 2fr 0.8fr 0.6fr 0.6fr 0.5fr 0.6fr 1fr;
}

.base-div-table-body {
    display: block;
}

.base-div-table-row {
    display: grid;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-sizing: border-box;
}

.base-div-table-row:hover {
    background: var(--color-surface-hover);
}

.base-div-table-cell {
    padding: 0.5rem 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    border-right: 1px solid var(--color-border);
    min-width: 0;
    box-sizing: border-box;
}

.base-div-table-cell:last-child {
    border-right: none;
}

.base-div-table-row[data-columns="4"] {
    grid-template-columns: 1fr 2fr 0.8fr 1fr;
}

.base-div-table-row[data-columns="5"] {
    grid-template-columns: 2rem 1fr 2fr 0.8fr 1fr;
}

.base-div-table-row[data-columns="7"] {
    grid-template-columns: 2rem 1fr 2fr 0.8fr 0.6fr 0.6fr 1fr;
}

.base-div-table-row[data-columns="8"] {
    grid-template-columns: 2rem 1fr 2fr 0.8fr 0.6fr 0.6fr 0.5fr 1fr;
}

.base-div-table-row[data-columns="9"] {
    grid-template-columns: 2rem 1fr 2fr 0.8fr 0.6fr 0.6fr 0.5fr 0.6fr 1fr;
}

.base-div-table-cell-header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-headline);
}

/* Modifier für letzte Zelle der letzten Zeile (kein Nachfahren-Selektor, 011-ui-css-general 007). Gleiche Styles wie .base-div-table-cell. */
.base-div-table-cell-last-in-row {
    padding: 0.5rem 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    border-right: 1px solid var(--color-border);
    min-width: 0;
    box-sizing: border-box;
}

.base-div-table-cell-last-in-row:last-child {
    border-right: none;
}

/* Mobile + iPad/Tablet: Pro Zeile nur eine Spalte, Format Spaltenname: Wert (011-ui-css-div-tables.mdc Regel 009, 011-ui-widget-div-table-html.mdc Regel 014). Auf iPad/Tablet ebenfalls, da viele Spalten schlecht nebeneinander passen. */
@media (max-width: 1023px) {
    .base-div-table {
        overflow-x: hidden;
    }

    .base-div-table-header {
        display: none;
    }

    .base-div-table-body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .base-div-table-row {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-bottom: 1px solid var(--color-border);
        padding: 0.75rem 0;
        box-sizing: border-box;
    }

    .base-div-table-row:not(:last-child) {
        margin-bottom: 1rem;
    }

    /* 011-ui-css-div-tables Regel 009: Jede Body-Zelle volle Breite, grid-column 1/-1 */
    .base-div-table-cell {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
        margin-bottom: 12px;
        padding: 0.5rem 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        box-sizing: border-box;
    }

    .base-div-table-cell:last-child {
        border-bottom: none;
        margin-bottom: 12px;
    }

    .base-div-table-cell-last-in-row {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
        margin-bottom: 0;
        padding: 0.5rem 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        box-sizing: border-box;
    }

    .base-div-table-cell-last-in-row:last-child {
        border-bottom: none;
    }

    .base-div-table-cell-last-in-row::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: block;
        margin-bottom: 0.25rem;
        color: var(--color-headline);
    }

    .base-div-table-cell::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: block;
        margin-bottom: 0.25rem;
        color: var(--color-headline);
    }

    .base-button-kong-show-in-cell,
    .base-button-standard-in-cell,
    .base-button-delete-in-cell {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}