/* ===== Reine Listenansicht – kompakt & tabellarisch ===== */

/* Container: Liste statt Grid + kein globales Gap */
body.view-list .games-list {
    display: block;
    gap: 0 !important;
}

/* Jede Karte wird zur Tabellenzeile */
body.view-list .game-card {
    display: grid !important;
    grid-template-columns: 56px minmax(180px, 1.2fr) minmax(120px, 1fr) minmax(100px, .7fr) 72px 72px 120px;
    /* Cover | Titel | Plattformen | Tags | Score | Besitz | Release */
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px !important;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    margin: 0 0 6px !important;
    box-shadow: none !important;
    transform: none !important;
}

body.view-list .game-card:hover {
    transform: none !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    background: color-mix(in srgb, var(--bg-section) 88%, white 4%);
}

/* Kopfzeile über der Liste */
body.view-list .list-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 56px minmax(180px, 1.2fr) minmax(120px, 1fr) minmax(100px, .7fr) 72px 72px 120px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--bg-section) 92%, #000 8%);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

body.view-list .list-header .th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Cover klein & quadratisch */
body.view-list .game-image.v2 {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    grid-column: 1;
}

body.view-list .game-image.v2 img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    aspect-ratio: 1/1;
}

/* Titelblock sehr schlank */
body.view-list .game-info.v2 {
    grid-column: 2;
    padding: 6px 0 !important;
    gap: 4px !important;
    min-width: 0;
}

body.view-list .card-head {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.view-list .card-head .title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nicht benötigte Elemente im Listenmodus verbergen */
body.view-list .meta-row,
body.view-list .facts-card,
body.view-list .desc-wrap,
body.view-list .section.own,
body.view-list .actions.v2,
body.view-list .owned-badge.v2,
body.view-list .score-ring {
    display: none !important;
}

/* Plattformen & Tags: EINZEILIG + Ellipsis */
body.view-list .section.platforms,
body.view-list .section.tags {
    padding: 0 !important;
    margin: 0 !important;
}

body.view-list .section.platforms .section-title,
body.view-list .section.tags .section-title {
    display: none !important;
}

body.view-list .section.platforms {
    grid-column: 3;
}

body.view-list .section.tags {
    grid-column: 4;
}

/* nur Layout – KEIN Ellipsis/overflow hier */
body.view-list .section.platforms .chips,
body.view-list .section.tags .chips {
    display: block !important;
    margin: 0 !important;
    gap: 0 !important;
    min-width: 0;
}

body.view-list .section.platforms .chip,
body.view-list .section.tags .chip {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    margin: 0 6px 0 0 !important;
    border-radius: 999px !important;
}

/* Rechte Spalten (Score/Besitz/Release) */
body.view-list .col-score,
body.view-list .col-owned,
body.view-list .col-release {
    white-space: nowrap;
}

body.view-list .col-score {
    grid-column: 5;
    justify-self: end;
    font-weight: 800;
}

body.view-list .col-owned {
    grid-column: 6;
    justify-self: end;
}

body.view-list .col-release {
    grid-column: 7;
    color: var(--text-muted);
    font-size: 12px;
}

/* Sektionen ohne Trenner im Listenmodus */
body.view-list .section {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* Responsive: Spalten reduzieren */
@media (max-width: 1100px) {
    body.view-list .game-card,
    body.view-list .list-header {
        grid-template-columns: 56px minmax(160px, 1fr) minmax(120px, 1fr) 64px 96px;
        /* Cover | Titel | Plattformen | Score | Release */
    }

    body.view-list .section.tags,
    body.view-list .col-owned {
        display: none !important;
    }
}

@media (max-width: 720px) {
    body.view-list .game-card,
    body.view-list .list-header {
        grid-template-columns: 48px 1fr 64px 88px;
        /* Cover | Titel | Score | Release */
    }

    body.view-list .section.platforms {
        display: none !important;
    }
}

/* Sicherheitsnetz: falls JS nicht aufräumt, außerhalb der Listenansicht verstecken */
body:not(.view-list) .list-header,
body:not(.view-list) .col-score,
body:not(.view-list) .col-owned,
body:not(.view-list) .col-release {
    display: none !important;
}

/* Neutralisiere eventuelle Rest-Boxen im Info-Block */
body.view-list .game-info.v2 > * {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Grid-Spalten in Row + Header identisch definieren */
body.view-list .game-card,
body.view-list .list-header {
    display: grid !important;
    grid-template-columns: 56px minmax(180px, 1.2fr) minmax(120px, 1fr) minmax(100px, .7fr) 72px 72px 120px;
    align-items: center;
    gap: 10px;
}

/* Cover */
body.view-list .game-image.v2 {
    grid-column: 1;
    width: 56px;
    height: 56px;
    display: flex;
}

body.view-list .game-image.v2 img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
}

/* <<< WICHTIG: Wrapper auflösen, damit Kinder Grid-Items sind >>> */
body.view-list .game-info.v2 {
    display: contents !important; /* macht .card-head / .section.* zu direkten Grid-Items */
    padding: 0 !important;
    gap: 0 !important;
}

/* Spalten-Zuordnung für die eigentlichen Inhalte */
body.view-list .card-head {
    grid-column: 2;
    align-self: center;
    min-width: 0;
}

body.view-list .section.platforms {
    grid-column: 3;
    align-self: center;
    min-width: 0;
}

body.view-list .section.tags {
    grid-column: 4;
    align-self: center;
    min-width: 0;
}

body.view-list .col-score {
    grid-column: 5;
    justify-self: end;
    font-weight: 800;
    white-space: nowrap;
}

body.view-list .col-owned {
    grid-column: 6;
    justify-self: end;
    white-space: nowrap;
}

body.view-list .col-release {
    grid-column: 7;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* Titel kompakt */
body.view-list .card-head {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.view-list .card-head .title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Plattformen/Tags einzeilig + Ellipsis */
body.view-list .section.platforms,
body.view-list .section.tags {
    padding: 0 !important;
    margin: 0 !important;
}

body.view-list .section.platforms .section-title,
body.view-list .section.tags .section-title {
    display: none !important;
}

/* nur Layout – KEIN Ellipsis/overflow hier */
body.view-list .section.platforms .chips,
body.view-list .section.tags .chips {
    display: block !important;
    margin: 0 !important;
    gap: 0 !important;
    min-width: 0; /* schrumpfbar für Grid */
}


body.view-list .section.platforms .chip,
body.view-list .section.tags .chip {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 3px 6px !important;
    margin: 0 6px 0 0 !important;
    border-radius: 999px !important;
}

/* Kosmetik & Resets */
body.view-list .games-list {
    display: block;
    gap: 0 !important;
}

body.view-list .game-card {
    box-shadow: none !important;
    transform: none !important;
    border-radius: 8px !important;
    margin: 0 0 6px !important;
    background: var(--bg-section);
    border: 1px solid var(--border-color);
}

body.view-list .game-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    background: color-mix(in srgb, var(--bg-section) 88%, white 4%);
}

body.view-list .meta-row,
body.view-list .facts-card,
body.view-list .desc-wrap,
body.view-list .section.own,
body.view-list .actions.v2,
body.view-list .owned-badge.v2,
body.view-list .score-ring {
    display: none !important;
}

/* Responsive Reduktion (Header & Rows gleich halten!) */
@media (max-width: 1100px) {
    body.view-list .game-card,
    body.view-list .list-header {
        grid-template-columns: 56px minmax(160px, 1fr) minmax(120px, 1fr) 64px 96px;
    }

    body.view-list .section.tags,
    body.view-list .col-owned {
        display: none !important;
    }
}

@media (max-width: 720px) {
    body.view-list .game-card,
    body.view-list .list-header {
        grid-template-columns: 48px 1fr 64px 88px;
    }

    body.view-list .section.platforms {
        display: none !important;
    }
}

/* ---- Chips in der Listenansicht: Collapsed vs. Expanded ---- */
body.view-list .section.platforms,
body.view-list .section.tags {
    min-width: 0;
}

/* für Ellipsis nötig */

body.view-list .section.platforms .chips,
body.view-list .section.tags .chips {
    display: block !important;
    overflow: hidden; /* verhindert Spalten-Overflow */
    margin: 0 !important;
    gap: 0 !important;
}

body.view-list .chips.is-collapsed {
    white-space: nowrap !important; /* einzeilig */
    text-overflow: ellipsis !important;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0)); /* sanftes Ausblenden */
}

body.view-list .chips.is-expanded {
    white-space: normal !important; /* darf umbrechen */
}

body.view-list .chips.is-expanded .chip {
    margin: 0 6px 6px 0 !important; /* Grid-ähnliche Abstände im Wrap */
}

/* kompakter Toggle-Button direkt hinter den Chips */
body.view-list .chips-more {
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    border-radius: 999px;
    cursor: pointer;
}

body.view-list .chips-more:hover {
    background: color-mix(in srgb, var(--input-bg) 75%, white 5%);
}

/* ---- Chips in der Listenansicht: Collapsed vs. Expanded ---- */
body.view-list .section.platforms,
body.view-list .section.tags {
    min-width: 0;
}

body.view-list .section.platforms .chips,
body.view-list .section.platforms .chips-row,
body.view-list .section.tags .chips,
body.view-list .section.tags .chips-row {
    display: block !important;
    overflow: hidden;
    margin: 0 !important;
    gap: 0 !important;
}

body.view-list .chips.is-collapsed,
body.view-list .chips-row.is-collapsed {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 85%, rgba(0,0,0,0));
}

body.view-list .chips.is-expanded,
body.view-list .chips-row.is-expanded {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    mask-image: none !important;
}

body.view-list .chips.is-expanded .chip,
body.view-list .chips-row.is-expanded .chip {
    margin: 0 6px 6px 0 !important;
}

body.view-list .chips-more:hover {
    background: color-mix(in srgb, var(--input-bg) 75%, white 5%);
}

/* Grid-Zellen dürfen schrumpfen, sonst greift Ellipsis nie */
body.view-list .section.platforms,
body.view-list .section.tags {
    align-self: start;  /* statt center */
    min-width: 0;       /* bleibt wichtig */
}

/* Auch der Wrap selbst muss schrumpfen dürfen */
body.view-list .section.platforms .chips-row,
body.view-list .section.platforms .chips,
body.view-list .section.tags .chips-row,
body.view-list .section.tags .chips {
    min-width: 0;
}

/* Schrumpfbar machen (sonst misst JS immer „kein Overflow“) */
body.view-list .section.platforms,
body.view-list .section.tags,
body.view-list .section.platforms .chips,
body.view-list .section.tags .chips {
    min-width: 0;
}

body.view-list .modal {
    z-index: 4000;
}