/* PDF Folder Pro — Frontend Styles v5.0
 * All colors/sizes use CSS custom properties so Elementor style controls
 * override them cleanly per-widget via {{WRAPPER}} selectors.
 */

/* ── CSS Custom Properties (defaults) ──────────────────────────────────── */
.pdf-pro-wrapper {
    --ppfp-font-size:      14px;
    --ppfp-font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ppfp-text-color:     #b30000;
    --ppfp-hover-color:    #7a0000;
    --ppfp-folder-color:   #222222;
    --ppfp-row-bg:         transparent;
    --ppfp-row-hover-bg:   #fdf0f0;
    --ppfp-indent:         22px;
    --ppfp-border-color:   #eeeeee;
    --ppfp-border-width:   2px;
    --ppfp-toggle-active:  #b30000;
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.pdf-pro-wrapper {
    font-family:  var(--ppfp-font-family);
    font-size:    var(--ppfp-font-size);
    max-width:    860px;
    margin:       24px auto;
    background:   #fff;
    border:       1px solid #e5e5e5;
    border-radius: 10px;
    padding:      24px 28px;
    box-shadow:   0 2px 12px rgba(0,0,0,.06);
    box-sizing:   border-box;
}

.pdf-pro-title {
    font-size:     1.57em;
    font-weight:   600;
    color:         #1a1a1a;
    margin:        0 0 20px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--ppfp-toggle-active);
}

/* ── Search ────────────────────────────────────────────────────────────── */
.pdf-pro-search-wrap { margin-bottom: 14px; }
.pdf-pro-search {
    width:        100%;
    padding:      10px 14px;
    font-size:    var(--ppfp-font-size);
    border:       1.5px solid #ddd;
    border-radius: 7px;
    box-sizing:   border-box;
    transition:   border-color .2s;
    outline:      none;
}
.pdf-pro-search:focus { border-color: var(--ppfp-toggle-active); }

/* ── Controls row ──────────────────────────────────────────────────────── */
.pdf-pro-controls {
    display:       flex;
    gap:           8px;
    margin-bottom: 14px;
    flex-wrap:     wrap;
}
.pdf-pro-controls button {
    background:    none;
    border:        1px solid #ddd;
    border-radius: 5px;
    padding:       5px 12px;
    font-size:     12px;
    cursor:        pointer;
    color:         #555;
    transition:    all .15s;
    line-height:   1.4;
}
.pdf-pro-controls button:hover {
    border-color: var(--ppfp-toggle-active);
    color:        var(--ppfp-toggle-active);
}
.pdf-pro-btn-refresh { padding: 5px 10px !important; }

/* ── Tree list ──────────────────────────────────────────────────────────── */
.pdf-pro-tree {
    list-style: none;
    margin:     0;
    padding:    0;
}
.pdf-pro-tree .pdf-pro-tree {
    padding-left:  var(--ppfp-indent);
    border-left:   var(--ppfp-border-width) solid var(--ppfp-border-color);
    margin-left:   10px;
    margin-top:    4px;
}

/* ── Folder item ────────────────────────────────────────────────────────── */
.pdf-pro-folder-item {
    margin:     5px 0;
    list-style: none;
}
.pdf-pro-folder-item > .pdf-pro-toggle,
.pdf-pro-folder-item > .pdf-pro-folder-icon,
.pdf-pro-folder-item > .pdf-pro-folder-name {
    /* direct children only (not nested) */
}

.pdf-pro-toggle {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    background:      #f4f4f4;
    border:          1px solid #ddd;
    border-radius:   4px;
    cursor:          pointer;
    font-weight:     700;
    font-size:       16px;
    line-height:     1;
    color:           #555;
    margin-right:    6px;
    vertical-align:  middle;
    transition:      all .15s;
    user-select:     none;
    flex-shrink:     0;
}
.pdf-pro-toggle:hover {
    background:   #ebe8e8;
    border-color: var(--ppfp-toggle-active);
}
.pdf-pro-folder-item.expanded > .pdf-pro-toggle {
    background:   var(--ppfp-toggle-active);
    color:        #fff;
    border-color: var(--ppfp-toggle-active);
}

/* ── Folder icon — SVG default, overridable with emoji ─────────────────── */
.pdf-pro-folder-icon {
    display:          inline-block;
    width:            18px;
    height:           18px;
    margin-right:     5px;
    vertical-align:   middle;
    font-size:        16px;
    line-height:      1;
    /* SVG background is used when icon is empty (CSS class mode) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8a000'%3E%3Cpath d='M10 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2z'/%3E%3C/svg%3E");
    background-size:  contain;
    background-repeat: no-repeat;
}
/* When emoji is set (non-empty textContent), hide the SVG background */
.pdf-pro-folder-icon:not(:empty) {
    background-image: none;
    width:  auto;
    height: auto;
}
.pdf-pro-folder-item.expanded > .pdf-pro-folder-icon:empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c87f00'%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.pdf-pro-folder-name {
    font-weight:    600;
    color:          var(--ppfp-folder-color);
    cursor:         pointer;
    vertical-align: middle;
    font-size:      var(--ppfp-font-size);
    transition:     color .15s;
}
.pdf-pro-folder-name:hover { color: var(--ppfp-toggle-active); }
.pdf-pro-folder-item.expanded > .pdf-pro-folder-name { color: var(--ppfp-toggle-active); }

/* ── Empty folder indicator ─────────────────────────────────────────────── */
.pdf-pro-empty-folder > .pdf-pro-folder-name::after {
    content:     ' (empty)';
    font-size:   0.85em;
    color:       #aaa;
    font-weight: 400;
    font-style:  italic;
}
.pdf-pro-empty-folder-msg {
    list-style:  none;
    color:       #aaa;
    font-style:  italic;
    font-size:   0.9em;
    padding:     4px 6px;
}

/* ── Folder content ─────────────────────────────────────────────────────── */
.pdf-pro-folder-content { display: none; }
.pdf-pro-folder-item.expanded > .pdf-pro-folder-content { display: block; }

/* ── File item ──────────────────────────────────────────────────────────── */
.pdf-pro-file-item {
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         6px;
    margin:      5px 0;
    padding:     5px 6px;
    border-radius: 5px;
    background:  var(--ppfp-row-bg);
    transition:  background .15s;
}
.pdf-pro-file-item:hover { background: var(--ppfp-row-hover-bg); }

/* ── File icon — SVG default, overridable with emoji ─────────────────── */
.pdf-pro-file-icon {
    display:          inline-block;
    width:            16px;
    height:           16px;
    flex-shrink:      0;
    font-size:        15px;
    line-height:      1;
    vertical-align:   middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0392b'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z'/%3E%3C/svg%3E");
    background-size:  contain;
    background-repeat: no-repeat;
}
.pdf-pro-file-icon:not(:empty) {
    background-image: none;
    width:  auto;
    height: auto;
}

.pdf-pro-file-link {
    color:       var(--ppfp-text-color);
    text-decoration: none;
    font-size:   var(--ppfp-font-size);
    font-weight: 500;
    flex:        1;
    transition:  color .15s;
    word-break:  break-word;
}
.pdf-pro-file-link:hover {
    color:           var(--ppfp-hover-color);
    text-decoration: underline;
}

.pdf-pro-size {
    font-size:   11px;
    color:       #999;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Hidden (search filter) ─────────────────────────────────────────────── */
.pdf-pro-file-item.pdf-pro-hidden { display: none; }

/* ── Error / empty states ───────────────────────────────────────────────── */
.pdf-pro-error { color: #c0392b; padding: 10px; border: 1px solid #f5c6cb; background: #fff5f5; border-radius: 6px; }
.pdf-pro-empty { color: #999; font-style: italic; font-size: 0.9em; padding: 6px 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pdf-pro-wrapper { padding: 16px; margin: 12px; }
    .pdf-pro-title   { font-size: 1.2em; }
    .pdf-pro-tree .pdf-pro-tree { padding-left: 14px; }
}

/* ── v5.1 Mobile-friendly tree view ──────────────────────────────────────── */

/* Larger tap targets on touch devices */
@media (max-width: 768px) {
    .pdf-pro-wrapper {
        padding: 16px 14px;
        margin: 10px 0;
        max-width: 100%;
        border-radius: 8px;
    }

    .pdf-pro-title {
        font-size: 1.2em;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    /* Bigger toggle button for fat fingers */
    .pdf-pro-toggle {
        width:       32px;
        height:      32px;
        font-size:   18px;
        margin-right: 8px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    /* Folder rows — full-width tappable area */
    .pdf-pro-folder-item > .pdf-pro-folder-name {
        font-size:   var(--ppfp-font-size, 15px);
        padding:     6px 4px 6px 0;
        display:     inline-block;
        min-height:  36px;
        line-height: 36px;
    }

    .pdf-pro-folder-icon {
        width:  20px;
        height: 20px;
        font-size: 18px;
    }

    /* File rows — bigger tap area, full width */
    .pdf-pro-file-item {
        padding:     10px 8px;
        margin:      4px 0;
        border-radius: 6px;
        min-height:  44px; /* Apple HIG minimum tap target */
        align-items: center;
    }

    .pdf-pro-file-icon {
        width:     20px;
        height:    20px;
        font-size: 18px;
        flex-shrink: 0;
    }

    .pdf-pro-file-link {
        font-size:   calc(var(--ppfp-font-size, 14px) + 1px);
        line-height: 1.4;
        padding:     2px 0;
    }

    .pdf-pro-size {
        font-size:  12px;
        align-self: center;
    }

    /* Indent less on mobile so deep trees don't run off screen */
    .pdf-pro-tree .pdf-pro-tree {
        padding-left: 14px;
        margin-left:  6px;
    }

    /* Search bar — bigger on mobile */
    .pdf-pro-search {
        padding:     12px 14px;
        font-size:   16px; /* prevents iOS zoom-on-focus */
        border-radius: 8px;
    }

    /* Controls row — wrap nicely */
    .pdf-pro-controls {
        flex-wrap: wrap;
        gap:       6px;
        margin-bottom: 12px;
    }
    .pdf-pro-controls button {
        padding:     8px 14px;
        font-size:   13px;
        border-radius: 6px;
        flex:        1 0 auto;
        text-align:  center;
        min-height:  36px;
    }
    .pdf-pro-btn-refresh {
        flex: 0 0 auto !important;
        padding: 8px 14px !important;
    }
}

@media (max-width: 400px) {
    .pdf-pro-wrapper { padding: 12px 10px; }

    .pdf-pro-tree .pdf-pro-tree {
        padding-left: 10px;
        margin-left:  4px;
    }

    .pdf-pro-toggle {
        width:  28px;
        height: 28px;
    }
}