/* ===========================================
   DIRECTORY TREE ACCORDION COMPONENT
   css/components/directory-tree.css
   
   File-system style accordion for organizing
   data cartridges into collapsible categories.
   
   Theme-aware: Uses existing --cart-* variables
   from data-cartridge.css for consistency.
   =========================================== */

/* ---- Remove default Details marker (scoped) ---- */
.directory-folder > summary {
    list-style: none;
}
.directory-folder > summary::-webkit-details-marker {
    display: none;
}

/* ---- Archive Group Container ---- */
.archive-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Directory Folder (details element) ---- */
.directory-folder {
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* ---- Folder Label (summary element) ---- */
.folder-label {
    font-family: var(--font-mono);
    color: var(--cart-text-title);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 15px;
    cursor: pointer;
    background: transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    user-select: none;
    transition: all 0.2s var(--ease-snap);
}

/* Hover State */
.folder-label:hover {
    background: var(--cart-hover-bg);
    border-left: 3px solid var(--cart-spine-blue);
    padding-left: 12px;
}

/* When Open */
.directory-folder[open] .folder-label {
    background: var(--cart-hover-bg);
    border-bottom: 1px dashed var(--cart-border);
    border-radius: 4px 4px 0 0;
    font-weight: 700;
}

/* ---- Folder Icon ---- */
.folder-icon {
    margin-right: 10px;
    font-size: 16px;
    opacity: 1;
    filter: none;
}

/* ---- Count Pill ---- */
.folder-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cart-text-meta);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Dark mode adjustment for count pill */
html[data-theme="dark"] .folder-count {
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Folder Content (tree branch) ---- */
.folder-content {
    padding: 10px 0 10px 20px;
    border-left: 2px solid var(--cart-border);
    margin-left: 18px;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 540px) {
    .folder-label {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .folder-label:hover {
        padding-left: 9px;
    }
    
    .folder-content {
        padding-left: 16px;
        margin-left: 14px;
    }
    
    .folder-count {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ---- Print: Hide accordion chrome ---- */
@media print {
    .directory-folder {
        border: none;
    }
    
    .folder-label {
        display: none;
    }
    
    .folder-content {
        border: none;
        margin: 0;
        padding: 0;
    }
}

/* ---- Loading / Empty States ---- */
.archive-loading,
.archive-empty {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cart-text-meta);
    padding: 16px;
    text-align: center;
    margin: 0;
}