/* ==========================================================================
   1. GRUNDEINSTELLUNGEN & THEME
   ========================================================================== */
.s5o-dirtree {
    /* Farben aus Ihrer Palette zugewiesen */
    --bg-color: #2e3031;         /* --s5o-c-black */
    --text-color: #fafaf9;        /* --s5o-c-white */
    --text-color-muted: #aaaaa8; /* --s5o-c-grey-medium-1 */
    --active-bg-color: #333332;  /* --s5o-c-grey-dark-1 */
    --guide-line-color: #aaaaa8;  /* --s5o-c-grey-medium-1 */
    
    /* Farben für die Icons */
    --icon-folder-color: #ffd700; 
    --icon-tiff-color: #61ce70;   /* --s5o-c-green-1 */
    --icon-jpg-color: #00b3d6;    /* --s5o-c-hks50 */
    --icon-txt-color: #777777;    /* --s5o-c-grey-dark-5 */

    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--s5o-f-text-mono);
    padding: 8px;
    font-size: 20px;
    max-width: 600px;
    border-radius: 1rem;
}

/* ==========================================================================
   2. DIRECTORY TREE & VS CODE VERBINDUNGSLINIEN
   ========================================================================== */
.s5o-dirtree .directory-tree, 
.s5o-dirtree .directory-tree ul {
    list-style-type: none;
    margin: 0;
    padding-left: 12px;
    position: relative;
}

.s5o-dirtree .directory-tree li {
    list-style: none;
    padding: 2px 0;
    position: relative;
}

.s5o-dirtree .directory-tree li::before {
    content: ''; position: absolute; top: 0; left: -8px;
    width: 1px; height: 100%; background-color: var(--guide-line-color);
}
.s5o-dirtree .directory-tree li::after {
    content: ''; position: absolute; top: 12px; left: -8px;
    width: 8px; height: 1px; background-color: var(--guide-line-color);
}

/* ==========================================================================
   3. CHECKBOX-HACK FÜR AUF- & ZUKLAPPEN
   ========================================================================== */
.s5o-dirtree input[type="checkbox"] { display: none; }
.s5o-dirtree .folder ul { display: none; }
.s5o-dirtree input[type="checkbox"]:checked ~ ul { display: block; }

/* ==========================================================================
   4. STYLING FÜR ORDNER & DATEIEN (GRID-LAYOUT)
   ========================================================================== */
.s5o-dirtree .folder > label, 
.s5o-dirtree .file {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 2px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.s5o-dirtree .file { cursor: default; }

.s5o-dirtree .file-info {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.s5o-dirtree .folder > label.active,
.s5o-dirtree .file.active {
    background-color: var(--active-bg-color);
}

/* ==========================================================================
   5. ICON-STEUERUNG (MIT CSS MASKS)
   ========================================================================== */
.s5o-dirtree .icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 6px;
    flex-shrink: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.s5o-dirtree .folder-icon-open { display: none; }

/* Ordner-Icons */
.s5o-dirtree .folder-icon-closed,
.s5o-dirtree .folder-icon-open {
    background-color: var(--icon-folder-color);
}
.s5o-dirtree .folder-icon-closed {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm0 6h16a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm0 6h16a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.s5o-dirtree input[type="checkbox"]:checked + label .folder-icon-open {
    display: inline-block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5.586a1 1 0 0 1 .707.293l1.414 1.414A1 1 0 0 0 12.414 7H20a1 1 0 0 1 1 1v2H3V6zm18 4H3v8a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5.586a1 1 0 0 1 .707.293l1.414 1.414A1 1 0 0 0 12.414 7H20a1 1 0 0 1 1 1v2H3V6zm18 4H3v8a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E");
}
.s5o-dirtree input[type="checkbox"]:checked + label .folder-icon-closed {
    display: none;
}

/* Datei-Icons */
.s5o-dirtree [data-file-type="tiff"] .file-icon {
    background-color: var(--icon-tiff-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM6.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-2 6.223V17a1 1 0 0 1 1-1h13v.172l-3.172-3.172a1 1 0 0 0-1.414 0l-4.243 4.242-2.12-2.12a1 1 0 0 0-1.414 0L4.5 18.223z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM6.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-2 6.223V17a1 1 0 0 1 1-1h13v.172l-3.172-3.172a1 1 0 0 0-1.414 0l-4.243 4.242-2.12-2.12a1 1 0 0 0-1.414 0L4.5 18.223z'/%3E%3C/svg%3E");
}
.s5o-dirtree [data-file-type="jpg"] .file-icon {
    background-color: var(--icon-jpg-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM6.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-2 6.223V17a1 1 0 0 1 1-1h13v.172l-3.172-3.172a1 1 0 0 0-1.414 0l-4.243 4.242-2.12-2.12a1 1 0 0 0-1.414 0L4.5 18.223z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zM6.5 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm-2 6.223V17a1 1 0 0 1 1-1h13v.172l-3.172-3.172a1 1 0 0 0-1.414 0l-4.243 4.242-2.12-2.12a1 1 0 0 0-1.414 0L4.5 18.223z'/%3E%3C/svg%3E");
}
.s5o-dirtree [data-file-type="txt"] .file-icon {
    background-color: var(--icon-txt-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM8 9h8v2H8V9zm8 6H8v-2h8v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM8 9h8v2H8V9zm8 6H8v-2h8v2z'/%3E%3C/svg%3E");
}
.s5o-dirtree [data-file-type="more"] .file-icon {
    /* Sie können hierfür eine eigene Farbvariable definieren oder eine bestehende nutzen */
    background-color: var(--text-color-muted); /* Passt gut zum gedämpften Text */
    /* Horizontale drei Punkte (...) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='4' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3C/svg%3E");
}
.s5o-dirtree [data-file-type="more-v"] .file-icon {
    background-color: var(--text-color-muted);
    /* Vertikale drei Punkte */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='20' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='20' r='2'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. KOMMENTARE IN RECHTER SPALTE
   ========================================================================== */
.s5o-dirtree .file-comment {
    color: var(--text-color-muted);
    white-space: nowrap;
    font-size: 0.95em;
    justify-self: end;
}