/* showlist.css - Migriert auf LDGroup-Namespace */
/*
 * ============================================================================
 * LINE DANCE CLUB - COUNTRY MEETS MODERN (STYLESHEET)
 * ============================================================================
 * 
 * @package     ldgroup
 * @module      Design / Styles
 * @component   showList
 * 
 * @description Keine ahnung
 * 
 * @status      Refactoring
 * @open        Checken auf Verwendung
 * @ticket      #90
 * @version     1.0.0
 * @created     2026-07-04
 * @last_change 2026-07-04
 * 
 * @export-to-schorsch
 * ============================================================================
 */
/** Ende LDC Header */
/* Container für die gesamte Liste - zentriert */
/* Der Container, der die Liste hält und den Scrollbalken kontrolliert */
.ldgroup-layout .showlist-container {
  flex: 1;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  margin: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--ldgroup-color-light) transparent;
  background: var(--ldgroup-glass-bg);
  backdrop-filter: var(--ldgroup-glass-blur);
  border: var(--ldgroup-border);
  border-radius: var(--ldgroup-border-radius);
  box-shadow: var(--ldgroup-shadow);
  text-align: center;
  padding: 20px;
}

/* Die Liste selbst */
.ldgroup-layout .showlist-datenliste {
    /* Liste zwingen, den Raum auszufüllen */
    flex: 1;
    overflow-y: auto;
    
    /* WICHTIG: Setze alles auf 0, um Ausbrüche zu verhindern */
    margin: 0 !important; 
    padding: 0 !important; 
    
    list-style: none;
    width: 100%;
    box-sizing: border-box;

    
}

/* Die Karten-Box (Glassmorphism-Stil) */
.ldgroup-layout .showlist-datenbox {
    background: var(--ldgroup-glass-bg);
    backdrop-filter: var(--ldgroup-glass-blur);
    border: var(--ldgroup-border);
    border-radius: var(--ldgroup-border-radius);
    margin: 0 auto 10px auto;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s, border-color 0.2s;
    color: var(--ldgroup-text-light);
    font-family: var(--ldgroup-font-family);
    padding: 15px;
}

.ldgroup-layout .showlist-datenbox:hover {
    border-color: var(--ldgroup-color-light);
    transform: scale(1.01);
}

/* Titel-Bereich */
.ldgroup-layout .showlist-datenbox-titel {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ldgroup-layout .showlist-datenbox-titel a {
    color: var(--ldgroup-color-light) !important;
    text-decoration: none;
}

/* Musik-Link Bereich */
.ldgroup-layout .showlist-datenbox-music {
/*    margin-bottom: 12px; */
    /*font-style: italic;*/
/*    font-size: 0.9rem; */
}

/* Grid für die technischen Daten (Counts, Walls, etc.) */
.ldgroup-layout .showlist-datenbox-grid {
    display: grid;
    /* Spalten sind mindestens 100px breit, nehmen aber den restlichen Platz ein */
/*    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); */
    gap: 5px;
    grid-template-columns: 1fr 1fr;
/*    font-size: 0.95rem; */ /* Etwas größer für bessere Lesbarkeit */
    margin-bottom: 10px;
}

/* Scrollbalken-Styling (optional, für moderneren Look) */
.ldgroup-layout .showlist-container::-webkit-scrollbar {
    width: 8px;
}
.ldgroup-layout .showlist-container::-webkit-scrollbar-thumb {
    background-color: var(--ldgroup-color-orange);
    border-radius: 4px;
}

/* Mobile Optimierung: Bei sehr kleinen Bildschirmen alles untereinander */
@media (max-width: 480px) {
    .ldgroup-layout .showlist-datenbox-grid {
        /* grid-template-columns: 1fr; */
    }

    .ldgroup-layout .showlist-container {
        max-width: 300px;
        margin: 10px;
        padding: 10px !important;
    }

    .ldgroup-layout .showlist-datenbox {
        padding: 20px; /* Etwas mehr Luft innerhalb der Karte */
    }
}