/**
 * WPDM Tree View - Modern UI
 * A clean, modern file tree with smooth animations and dark mode support
 */

/* ============================================
   CSS Variables - Easy Theming
   ============================================ */
.wpdm-tree {
    /* Colors - Light Mode */
    --tree-bg: #ffffff;
    --tree-bg-hover: #f8fafc;
    --tree-bg-active: #eef2ff;
    --tree-text: #1e293b;
    --tree-text-muted: #64748b;
    --tree-text-hover: #4f46e5;
    --tree-border: #e2e8f0;
    --tree-line: #cbd5e1;

    /* Folder Colors */
    --tree-folder: #f59e0b;
    --tree-folder-open: #eab308;
    --tree-folder-hover: #d97706;

    /* File Colors */
    --tree-file: #64748b;
    --tree-file-hover: #4f46e5;

    /* Spacing */
    --tree-indent: 24px;
    --tree-item-height: 36px;
    --tree-icon-size: 18px;
    --tree-radius: 6px;

    /* Animation */
    --tree-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tree-text);
    background: var(--tree-bg);
    border: 1px solid var(--tree-border);
    border-radius: var(--tree-radius);
    padding: 8px;
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================
   Dark Mode Support
   ============================================ */
.wpdm-tree.dark-mode,
.dark-mode .wpdm-tree,
[data-theme="dark"] .wpdm-tree {
    --tree-bg: #1e293b;
    --tree-bg-hover: #334155;
    --tree-bg-active: #3730a3;
    --tree-text: #f1f5f9;
    --tree-text-muted: #94a3b8;
    --tree-text-hover: #a5b4fc;
    --tree-border: #475569;
    --tree-line: #475569;
    --tree-folder: #fbbf24;
    --tree-folder-open: #fcd34d;
    --tree-folder-hover: #f59e0b;
    --tree-file: #94a3b8;
    --tree-file-hover: #a5b4fc;
}

@media (prefers-color-scheme: dark) {
    .wpdm-tree:not(.light-mode) {
        --tree-bg: #1e293b;
        --tree-bg-hover: #334155;
        --tree-bg-active: #3730a3;
        --tree-text: #f1f5f9;
        --tree-text-muted: #94a3b8;
        --tree-text-hover: #a5b4fc;
        --tree-border: #475569;
        --tree-line: #475569;
        --tree-folder: #fbbf24;
        --tree-folder-open: #fcd34d;
        --tree-folder-hover: #f59e0b;
        --tree-file: #94a3b8;
        --tree-file-hover: #a5b4fc;
    }
}

/* ============================================
   Base Tree Structure
   ============================================ */
.wpdm-tree ul.jqueryFileTree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wpdm-tree ul.jqueryFileTree ul {
    margin: 0;
    padding: 0;
    padding-left: var(--tree-indent);
    position: relative;
}

/* Connector lines */
.wpdm-tree ul.jqueryFileTree ul::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 12px;
    width: 1px;
    background: var(--tree-line);
}

/* ============================================
   Tree Items (Files & Folders)
   ============================================ */
.wpdm-tree ul.jqueryFileTree li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

/* Horizontal connector line */
.wpdm-tree ul.jqueryFileTree ul > li::before {
    content: '';
    position: absolute;
    left: -15px;
    top: calc(var(--tree-item-height) / 2);
    width: 15px;
    height: 1px;
    background: var(--tree-line);
}

/* Remove connector for first-level items */
.wpdm-tree > ul.jqueryFileTree > li::before {
    display: none;
}

/* ============================================
   Links/Items
   ============================================ */
.wpdm-tree ul.jqueryFileTree li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 0;
    color: var(--tree-text);
    text-decoration: none;
    border-radius: var(--tree-radius);
    transition: all var(--tree-transition);
    min-height: var(--tree-item-height);
    position: relative;
}

.wpdm-tree ul.jqueryFileTree li a:hover {
    background: var(--tree-bg-hover);
    color: var(--tree-text-hover);
}

.wpdm-tree ul.jqueryFileTree li a:active {
    background: var(--tree-bg-active);
}

/* ============================================
   Folder Icons (using pseudo-elements with SVG)
   ============================================ */
.wpdm-tree ul.jqueryFileTree li.directory > a::before {
    content: '';
    flex-shrink: 0;
    width: var(--tree-icon-size);
    height: var(--tree-icon-size);
    background-color: var(--tree-folder);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: all var(--tree-transition);
}

/* Expanded folder icon */
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::before {
    background-color: var(--tree-folder-open);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19.906 9c.382 0 .749.057 1.094.162V9a3 3 0 0 0-3-3h-3.879a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H6a3 3 0 0 0-3 3v3.162A3.756 3.756 0 0 1 4.094 9h15.812ZM4.094 10.5a2.25 2.25 0 0 0-2.227 2.568l.857 6A2.25 2.25 0 0 0 4.951 21H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-2.227-2.568H4.094Z'/%3E%3C/svg%3E");
}

/* Hover state for folders */
.wpdm-tree ul.jqueryFileTree li.directory > a:hover::before {
    background-color: var(--tree-folder-hover);
    transform: scale(1.1);
}

/* Expand/Collapse chevron */
.wpdm-tree ul.jqueryFileTree li.directory > a::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-left: auto;
    background-color: var(--tree-text-muted);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform var(--tree-transition);
}

.wpdm-tree ul.jqueryFileTree li.directory.expanded > a::after {
    transform: rotate(90deg);
}

/* ============================================
   File Icons
   ============================================ */
.wpdm-tree ul.jqueryFileTree li.file > a::before {
    content: '';
    flex-shrink: 0;
    width: var(--tree-icon-size);
    height: var(--tree-icon-size);
    background-color: var(--tree-file);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z'/%3E%3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: all var(--tree-transition);
}

.wpdm-tree ul.jqueryFileTree li.file > a:hover::before {
    background-color: var(--tree-file-hover);
    transform: scale(1.1);
}

/* ============================================
   File Type Icons (Color-coded)
   ============================================ */

/* Documents - Blue */
.wpdm-tree ul.jqueryFileTree li.ext_pdf > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_doc > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_docx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_txt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rtf > a::before {
    background-color: #3b82f6;
}

/* Spreadsheets - Green */
.wpdm-tree ul.jqueryFileTree li.ext_xls > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xlsx > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_csv > a::before {
    background-color: #22c55e;
}

/* Presentations - Orange */
.wpdm-tree ul.jqueryFileTree li.ext_ppt > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_pptx > a::before {
    background-color: #f97316;
}

/* Images - Pink */
.wpdm-tree ul.jqueryFileTree li.ext_jpg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_jpeg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_png > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gif > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_svg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_bmp > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_psd > a::before {
    background-color: #ec4899;
}

/* Archives - Purple */
.wpdm-tree ul.jqueryFileTree li.ext_zip > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_rar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_7z > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tar > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_gz > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_tgz > a::before {
    background-color: #8b5cf6;
}

/* Audio - Teal */
.wpdm-tree ul.jqueryFileTree li.ext_mp3 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wav > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_ogg > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_m4a > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_flac > a::before {
    background-color: #14b8a6;
}

/* Video - Red */
.wpdm-tree ul.jqueryFileTree li.ext_mp4 > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_avi > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mov > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_wmv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_mkv > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_webm > a::before {
    background-color: #ef4444;
}

/* Code - Cyan */
.wpdm-tree ul.jqueryFileTree li.ext_php > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_js > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_css > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_html > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_htm > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_json > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_xml > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_py > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_java > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_c > a::before,
.wpdm-tree ul.jqueryFileTree li.ext_cpp > a::before {
    background-color: #06b6d4;
}

/* ============================================
   Loading State - Circular Spinner
   ============================================ */
.wpdm-tree ul.jqueryFileTree li.directory.wait > a::before {
    width: var(--tree-icon-size);
    height: var(--tree-icon-size);
    background: transparent;
    border: 2px solid var(--tree-border);
    border-top-color: var(--tree-folder);
    border-radius: 50%;
    -webkit-mask-image: none;
    mask-image: none;
    animation: wpdm-tree-spin 0.7s linear infinite;
}

@keyframes wpdm-tree-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Initial loading state */
.wpdm-tree ul.jqueryFileTree.start {
    padding: 16px;
    text-align: center;
    color: var(--tree-text-muted);
}

.wpdm-tree ul.jqueryFileTree.start li.wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wpdm-tree ul.jqueryFileTree.start li.wait::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--tree-border);
    border-top-color: var(--tree-folder);
    border-radius: 50%;
    animation: wpdm-tree-spin 0.8s linear infinite;
}

/* ============================================
   Empty State
   ============================================ */
.wpdm-tree-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--tree-text-muted);
}

.wpdm-tree-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.wpdm-tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.wpdm-tree::-webkit-scrollbar-track {
    background: var(--tree-bg);
    border-radius: 4px;
}

.wpdm-tree::-webkit-scrollbar-thumb {
    background: var(--tree-line);
    border-radius: 4px;
}

.wpdm-tree::-webkit-scrollbar-thumb:hover {
    background: var(--tree-text-muted);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 640px) {
    .wpdm-tree {
        --tree-indent: 20px;
        --tree-item-height: 40px;
        font-size: 13px;
    }

    .wpdm-tree ul.jqueryFileTree li a {
        padding: 10px 12px;
    }
}

/* ============================================
   Animation for expanding/collapsing
   ============================================ */
.wpdm-tree ul.jqueryFileTree ul {
    overflow: hidden;
}

/* Subtle highlight animation when item is clicked */
.wpdm-tree ul.jqueryFileTree li.directory.expanded > a {
    background: var(--tree-bg-hover);
}

/* ============================================
   Toolbar (optional - for expand all/collapse all)
   ============================================ */
.wpdm-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tree-border);
}

.wpdm-tree-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tree-text-muted);
    background: var(--tree-bg);
    border: 1px solid var(--tree-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--tree-transition);
}

.wpdm-tree-toolbar button:hover {
    color: var(--tree-text);
    background: var(--tree-bg-hover);
    border-color: var(--tree-text-muted);
}

.wpdm-tree-toolbar button svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   Badge for file/folder count
   ============================================ */
.wpdm-tree-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tree-text-muted);
    background: var(--tree-bg-hover);
    border-radius: 10px;
    margin-left: auto;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .wpdm-tree {
        border: none;
        padding: 0;
    }

    .wpdm-tree ul.jqueryFileTree li.directory.collapsed > ul {
        display: block !important;
    }

    .wpdm-tree ul.jqueryFileTree li.directory > a::after {
        display: none;
    }
}