/**
 * config.css
 
   zu index.php 0.2.3
 *
 * Haupt-Stylesheet für die Audio-Anwendung.
 * Helles Design mit abgestuften gelben/grauen Collapsibles.
 */

body {
    font-family: sans-serif;
    margin: 20px;
    padding: 0;
    background-color: #FFFFE0; /* Heller Seitenhintergrund (deine Wahl) */
    color: #333;               /* Standard-Textfarbe */
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: auto;
    background-color: #ccc;     /* Grauer Inhaltscontainer (deine Wahl) */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 { /* Hauptüberschrift */
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}

table { /* Allgemeine Tabellen, falls außerhalb von Collapsibles verwendet */
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 20px;
    
    
    /*background-color: #fff; /* Weißer Hintergrund für Tabellen */
    
    
    background-color: #ccc;     /* Grauer Inhaltscontainer (deine Wahl) */
    
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

th { /* Tabellenkopfzellen, falls verwendet */
    border: 1px solid #ddd;
    padding: 10px 15px;
    text-align: left;
    background-color: #e9e9e9;
    font-weight: bold;
}

td { /* Allgemeine Tabellendatenzellen */
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
}

tr:nth-child(even) { /* Zebra-Streifen für allgemeine Tabellen */
    background-color: #f9f9f9;
}

/* ---- STILE FÜR DIE AUDIO-LINK-BUTTONS (in Tabellenzellen) ---- */
td a.audio-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #007bff; /* Standard-Blau für Buttons */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid transparent;
}
td a.audio-link:hover {
    background-color: #0056b3; /* Standard-Dunkelblau beim Hover */
    color: white;
    /*border-color: transparent;*/
}
td a.audio-link span.display-name {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-grow: 1;
}
td a.audio-link span.audio-duration {
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 10px;
    flex-shrink: 0;
    font-size: 0.85em;
}

/* Visuelle Hervorhebung für zuletzt gespielten Link */
/* HIER IST DIE ÄNDERUNG / ERGÄNZUNG */
td a.audio-link.last-played-link {
    background-color: #b0e0e6; /* Hellblau für den Hintergrund */
    color: #000000;            /* Schwarz für den Text, für guten Kontrast */
    font-weight: bold;         /* Text fett machen */
    border: 1px solid #87ceeb; /* Ein passender hellblauer Rahmen */
}
td a.audio-link.last-played-link:hover {
    background-color: #a0d8e0; /* Etwas dunkleres Hellblau beim Hover */
    color: #000000;
    border-color: #7ac5d9;
}
td a.audio-link.last-played-link span.display-name { /* Sicherstellen, dass der Anzeigename die richtige Farbe hat */
    color: #000000;
}
td a.audio-link.last-played-link span.audio-duration { /* Dauer-Anzeige auch anpassen */
    color: #000000;
    background-color: rgba(0, 0, 0, 0.1); /* Leicht transparenter Hintergrund für die Dauer */
}


/* ---- STILE FÜR COLLAPSIBLES / AKKORDEON ---- */

/* Ebene 1 Trigger (Top-Level) */
.collapsible-trigger {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #ffea00; /* KRÄFTIGES GELB für erste Ebene */
    /*border: 1px solid #e0a800; /* Dunklerer Gelbton für den Rahmen */
    margin-top: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.collapsible-trigger:hover {
    background-color: #ffda00; /* Dunkleres kräftiges Gelb beim Hover */
    /*border-color: #c69500; */
}
.collapsible-trigger.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.collapsible-trigger h2 {
    margin: 0;
    font-size: 1.2em;
    color: #000000; /* Schwarz für Text auf kräftigem Gelb */
}
.collapsible-icon::before {
    content: '+ ';
    font-weight: bold;
    font-size: 1.2em;
    color: #000000; /* Schwarz für Icon auf kräftigem Gelb */
}
.collapsible-trigger.active .collapsible-icon::before {
    content: '- ';
}

/* Ebene 2 Trigger (direkt unter einem .sub-collapsibles) */
.sub-collapsibles > .collapsible-container > .collapsible-trigger {
    margin-top: 5px;
    
    /*background-color: #fffacd; */ 
    /* HELLERES GELB für Ebene 2 (LemonChiffon) */
    
    background-color: #ffea00; 
    /* geändertes GELB für Ebene 2 (LemonChiffon) */
    
    
    /*border-color: #f0e68c;     /* Passender Rahmen für helleres Gelb */
}
.sub-collapsibles > .collapsible-container > .collapsible-trigger:hover {
    background-color: #fff0ac; /* Etwas dunkleres Hellgelb für Hover */
}
.sub-collapsibles > .collapsible-container > .collapsible-trigger h2 {
    font-size: 1.1em;
    color: #333; /* Dunkelgrau/Schwarz für Text auf hellerem Gelb */
}
.sub-collapsibles > .collapsible-container > .collapsible-trigger .collapsible-icon::before {
    color: #333; /* Dunkelgrau/Schwarz für Icon auf hellerem Gelb */
}

/* Ebene 3 Trigger und tiefer */
.sub-collapsibles .sub-collapsibles > .collapsible-container > .collapsible-trigger {
    margin-top: 5px;
    
    /*background-color: #f7f7f7; /* SEHR HELLES GRAU für Ebene 3+ */ 
    /* SEHR HELLES GRAU für Ebene 3+ */
    
    background-color: #ffea00; /* geändert für Ebene 3+ */
    
    /*border-color: #e0e0e0; */
}
.sub-collapsibles .sub-collapsibles > .collapsible-container > .collapsible-trigger:hover {
    background-color: #e8e8e8;
}
.sub-collapsibles .sub-collapsibles > .collapsible-container > .collapsible-trigger h2 {
    font-size: 1.0em;
    color: #333;
}
.sub-collapsibles .sub-collapsibles > .collapsible-container > .collapsible-trigger .collapsible-icon::before {
    color: #555;
}

/* Inhalt der Collapsibles (allgemein) */
.collapsible-content {
    padding: 0;
    display: none;
    
    /*border: 1px solid #e0a800; /* Rahmen passend zu Ebene 1 Trigger (kräftiges Gelb) */
    
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    
    /*background-color: #fff; /* Weißer Hintergrund für den Inhalt */

    background-color: #ccc;     /* Grauer Inhaltscontainer (deine Wahl) */
}
.collapsible-content.active {
    display: block;
}

.collapsible-content .table-responsive-wrapper {
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
.collapsible-content table {
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: none;
    border: none;
    background-color: transparent;
}
.collapsible-content td {
   border-top: 1px solid #f0f0f0;
   border-bottom: none;
   border-left: none;
   border-right: none;
   padding: 0;
}
.collapsible-content tr:first-child td {
    border-top: none;
}
.collapsible-content tr:nth-child(even) {
    background-color: transparent;
}
.collapsible-content p.message.info {
    margin: 10px;
    padding: 10px;
}

/* Einrückung der Sub-Collapsibles */
.sub-collapsibles {
    /* padding-left: 20px; -> wird per Inline-Style in PHP gesetzt */
    /*border-left: 2px solid #ffea00; /* Linie in Farbe der Ebene 1 (kräftiges Gelb) */
    margin-left: 15px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 5px;
}
.sub-collapsibles .sub-collapsibles { /* Einrückung für Ebene 3+ */
    /*border-left-color: #fffacd; /* Linie in Farbe der Ebene 2 (helleres Gelb) */
}

/* Beschreibung des Ordners */
.folder-description {
    padding: 10px 15px;
    font-size: 0.9em;
    color: #555;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    margin:0;
}

/* ---- FOOTER ---- */
.footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    color: #777;
    text-align: center;
}

/* ---- NACHRICHTENBOXEN (Info, Fehler) - Außerhalb von Collapsibles ---- */
.message {
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.message.error {
    color: #721c24;
    background-color: #f8d7da;
    /*border-color: #f5c6cb;*/
}
.message.info {
    color: #0c5460;
    background-color: #d1ecf1;
    /*border-color: #bee5eb; */
}

/* ---- MEDIA QUERIES FÜR RESPONSIVES DESIGN ---- */
@media (max-width: 768px) {
    body {
        margin: 10px;
    }
    .container {
        padding: 15px;
    }
    h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    
    td a.audio-link {
        padding: 8px 12px;
        font-size: 0.9em; 
    }

    .collapsible-trigger { padding: 8px 12px; }
    .collapsible-trigger h2 { font-size: 1.1em; }
    .sub-collapsibles > .collapsible-container > .collapsible-trigger h2 { font-size: 1.0em; }
    .sub-collapsibles .sub-collapsibles > .collapsible-container > .collapsible-trigger h2 { font-size: 0.95em; }
    .collapsible-icon::before { font-size: 1.1em; }

    .table-responsive-wrapper { overflow-x: auto; }
}