/* ==========================================================================
   KE Table Widget
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container & Scroll-Wrapper
   -------------------------------------------------------------------------- */

.ke-table-wrap {
    width: 100%;
    overflow: hidden;
}

.ke-table__controls {
    margin-bottom: 16px;
}

.ke-table__search {
    width: 100%;
    max-width: 400px;
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.ke-table__search:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Horizontal-Scroll auf Mobile (Modus: scroll — Standard) */
.ke-table__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Basis-Tabelle
   -------------------------------------------------------------------------- */

.ke-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

.ke-table__header {
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #f4f6f8;
    color: #333;
}

.ke-table__header--align-center {
    text-align: center;
}

.ke-table__header--align-right {
    text-align: right;
}

/* Sort-Button im Header */
.ke-table__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.ke-table__sort-btn:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Sort-Indikator via CSS-Pseudoelement */
.ke-table__sort-icon {
    display: inline-block;
    width: 10px;
    height: 14px;
    position: relative;
    flex-shrink: 0;
}

.ke-table__sort-icon::before,
.ke-table__sort-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
}

/* Pfeil oben (inaktiv gedimmt) */
.ke-table__sort-icon::before {
    top: 0;
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #aaa transparent;
}

/* Pfeil unten (inaktiv gedimmt) */
.ke-table__sort-icon::after {
    bottom: 0;
    border-width: 5px 4px 0 4px;
    border-color: #aaa transparent transparent transparent;
}

/* Aktiv: aufsteigend */
.ke-table__header--sort-asc .ke-table__sort-icon::before {
    border-color: transparent transparent #333 transparent;
}

.ke-table__header--sort-asc .ke-table__sort-icon::after {
    border-color: #ccc transparent transparent transparent;
}

/* Aktiv: absteigend */
.ke-table__header--sort-desc .ke-table__sort-icon::before {
    border-color: transparent transparent #ccc transparent;
}

.ke-table__header--sort-desc .ke-table__sort-icon::after {
    border-color: #333 transparent transparent transparent;
}

/* Header-Icon vor dem Text (v0.23.3: sichtbarer Gap + Alignment) */
.ke-table__header {
    /* th selbst als flex-container, damit Icon + Text + Sort-Icon ausgerichtet werden */
    /* Note: th hat per default display:table-cell — wir überschreiben mit inline-flex
       auf inneren span, damit table-layout nicht kaputtgeht. Siehe .ke-table__header-icon */
}

.ke-table__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
    margin-right: 6px;
    vertical-align: middle;
}

.ke-table__header-icon i,
.ke-table__header-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

.ke-table__header-icon svg {
    fill: currentColor;
}

.ke-table__header-text {
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Body / Zellen
   -------------------------------------------------------------------------- */

.ke-table__cell {
    padding: 11px 14px;
    font-size: 14px;
    vertical-align: middle;
    color: #444;
}

.ke-table__cell--align-center {
    text-align: center;
}

.ke-table__cell--align-right {
    text-align: right;
}

/* Leere Tabelle */
.ke-table__empty {
    padding: 24px 14px;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Modifikatoren: Striped, Bordered, Hover
   -------------------------------------------------------------------------- */

/* Gestreift */
.ke-table--striped tbody tr:nth-child(even) {
    background-color: #f8f9fb;
}

/* Rahmen */
.ke-table--bordered .ke-table__header,
.ke-table--bordered .ke-table__cell {
    border: 1px solid #e2e6ea;
}

/* Hover-Hervorhebung */
.ke-table--hover tbody tr:hover {
    background-color: #eef2ff;
    transition: background-color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Dichte-Presets
   -------------------------------------------------------------------------- */

/* Kompakt */
.ke-table--density-compact .ke-table__header {
    padding: 6px 10px;
    font-size: 12px;
}

.ke-table--density-compact .ke-table__cell {
    padding: 5px 10px;
    font-size: 13px;
}

/* Standard (Default — bereits oben definiert) */

/* Komfortabel */
.ke-table--density-comfortable .ke-table__header {
    padding: 16px 20px;
    font-size: 15px;
}

.ke-table--density-comfortable .ke-table__cell {
    padding: 16px 20px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Responsive: Stack-Modus (≤ 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .ke-table--responsive-stack .ke-table__scroll {
        overflow-x: visible;
    }

    .ke-table--responsive-stack table,
    .ke-table--responsive-stack thead,
    .ke-table--responsive-stack tbody,
    .ke-table--responsive-stack tr,
    .ke-table--responsive-stack td {
        display: block;
    }

    /* Kopfzeile verstecken — Labels kommen per data-label */
    .ke-table--responsive-stack thead {
        display: none;
    }

    /* Jede Zeile als Card */
    .ke-table--responsive-stack .ke-table__row {
        margin-bottom: var(--ke-space-3, 12px);
        border: 1px solid #e2e6ea;
        border-radius: 6px;
        padding: var(--ke-space-2, 8px) 0;
        background-color: #fff;
    }

    /* Zelle: linke Spalte = Label, rechte Spalte = Inhalt */
    .ke-table--responsive-stack .ke-table__cell {
        position: relative;
        padding-left: 50%;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: left;
        min-height: 36px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ke-table--responsive-stack .ke-table__cell:last-child {
        border-bottom: none;
    }

    /* Label via ::before aus data-label-Attribut */
    .ke-table--responsive-stack .ke-table__cell::before {
        content: attr(data-label);
        position: absolute;
        left: var(--ke-space-3, 12px);
        top: 50%;
        transform: translateY(-50%);
        font-weight: 600;
        font-size: 12px;
        color: #666;
        white-space: nowrap;
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Striped im Stack-Modus deaktivieren */
    .ke-table--responsive-stack.ke-table--striped tbody tr:nth-child(even) {
        background-color: transparent;
    }

    /* Bordered-Modus im Stack */
    .ke-table--responsive-stack.ke-table--bordered .ke-table__cell {
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid #e2e6ea;
    }

}

/* --------------------------------------------------------------------------
   Responsive: Hide-Columns (≤ 767px) — ab Spalte 3 ausblenden
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Spalten 3–8 (data-column-index ≥ 2) ausblenden */
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="2"],
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="3"],
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="4"],
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="5"],
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="6"],
    .ke-table--responsive-hide-columns .ke-table__header[data-column-index="7"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="2"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="3"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="4"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="5"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="6"],
    .ke-table--responsive-hide-columns .ke-table__cell[data-column-index="7"] {
        display: none;
    }

}