/* ═══════════════════════════════════════════════════════════
   folders.css - uploader side of "one link for many files" (see /js/folders.js)
   Loaded after main.css on the pages that have an upload form.
   ═══════════════════════════════════════════════════════════ */

.tf-folder, .tf-folder-option {
    --tf-fg: #111111;
    --tf-soft: #555555;
    --tf-line: #e5e5e5;
    --tf-line-strong: #bdbdbd;
    --tf-bg-soft: #f6f6f6;
    --tf-danger: #b42318;
    --tf-focus: #1d4ed8;
}
:root[data-theme="dark"] .tf-folder, :root[data-theme="dark"] .tf-folder-option {
    --tf-fg: #f1f1f1;
    --tf-soft: #cfcfcf;
    --tf-line: #404040;
    --tf-line-strong: #666666;
    --tf-bg-soft: #262626;
    --tf-danger: #ff8a80;
    --tf-focus: #8ab4ff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .tf-folder, :root:not([data-theme]) .tf-folder-option {
        --tf-fg: #f1f1f1; --tf-soft: #cfcfcf; --tf-line: #404040; --tf-line-strong: #666666;
        --tf-bg-soft: #262626; --tf-danger: #ff8a80; --tf-focus: #8ab4ff;
    }
}

/* ---------- the switch under the file picker ---------- */

.tf-folder-option[hidden] { display: none; }
.tf-folder-option .tf-folder-switch {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    padding: 12px 14px; border: 1px solid var(--tf-line-strong); border-radius: 10px;
    background: var(--tf-bg-soft); color: var(--tf-fg);
}
.tf-folder-option .tf-folder-switch input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--tf-fg); cursor: pointer; }
.tf-folder-option .tf-folder-switch-text { display: flex; flex-direction: column; gap: 2px; }
.tf-folder-option .tf-folder-switch-text strong { font-size: 0.98rem; font-weight: 600; }
.tf-folder-option .tf-folder-switch-text small { font-size: 0.85rem; color: var(--tf-soft); font-weight: 400; line-height: 1.4; }
.tf-folder-option .tf-folder-switch:has(input:focus-visible) { outline: 2px solid var(--tf-focus); outline-offset: 2px; }
.tf-folder-option .tf-folder-title {
    display: block; width: 100%; margin-top: 10px; padding: 10px 12px;
    border: 2px solid #e0e6ed; border-radius: 8px; font: inherit; font-size: 0.95rem;
    background: #fff; color: #111;
}
.tf-folder-option .tf-folder-title[hidden] { display: none; }
:root[data-theme="dark"] .tf-folder-title { background: #1a1a1a; color: #f1f1f1; border-color: #555; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .tf-folder-title { background: #1a1a1a; color: #f1f1f1; border-color: #555; } }

/* ---------- a folder in "My files" ---------- */

.tf-folder.file-item { display: block; }
.tf-folder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tf-folder-icon { width: 30px; height: 30px; flex: none; color: var(--tf-fg); }
.tf-folder-titles { display: flex; flex-direction: column; min-width: 0; }
.tf-folder-title-text { font-size: 1.05rem; color: var(--tf-fg); overflow-wrap: anywhere; }
.tf-folder-sub { font-size: 0.88rem; color: var(--tf-soft); }
.tf-folder-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tf-folder-actions .btn { text-decoration: none; }

.tf-folder-files { margin-top: 14px; border-top: 1px solid var(--tf-line); padding-top: 10px; }
.tf-folder-files summary { cursor: pointer; font-weight: 600; font-size: 0.93rem; color: var(--tf-fg); padding: 4px 0; }
.tf-folder-files summary:focus-visible { outline: 2px solid var(--tf-focus); outline-offset: 2px; }
.tf-folder-files ul { list-style: none; margin: 6px 0 0; padding: 0; }
.tf-folder-file {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--tf-line); font-size: 0.9rem; color: var(--tf-fg);
}
.tf-folder-file:last-child { border-bottom: 0; }
.tf-folder-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-folder-file-size { color: var(--tf-soft); font-size: 0.84rem; white-space: nowrap; }
.tf-mini {
    min-height: 32px; padding: 0 10px; border: 1px solid var(--tf-line-strong); border-radius: 7px;
    background: transparent; color: var(--tf-fg); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.tf-mini:hover { border-color: var(--tf-fg); }
.tf-mini-danger { border-color: var(--tf-danger); color: var(--tf-danger); }
.tf-mini.is-confirm, .tf-folder-actions .is-confirm { background: var(--tf-danger); color: #fff; border-color: var(--tf-danger); }
.tf-mini:focus-visible { outline: 2px solid var(--tf-focus); outline-offset: 2px; }


/* The three folder buttons sit in one row on wide screens (main.css stacks .file-actions in a column) */
.tf-folder .tf-folder-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: auto; margin-left: 0; }
.tf-folder .tf-folder-actions .btn { width: auto; flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
    /* Download ZIP | Delete folder
       Copy folder link              */
    .tf-folder .tf-folder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .tf-folder .tf-folder-actions .btn { width: 100%; min-width: 0; flex: none; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
    .tf-folder .tf-act-zip { order: 1; }
    .tf-folder .tf-act-delete { order: 2; }
    .tf-folder .tf-act-copy { order: 3; grid-column: 1 / -1; }

    /* name on its own line, then: size ........ [Copy link] [Delete] */
    .tf-folder-file { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 8px; padding: 10px 0; }
    .tf-folder-file-name { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
    .tf-folder-file-size { grid-column: 1; align-self: center; }
    .tf-folder-file .tf-mini { min-height: 36px; padding: 0 12px; white-space: nowrap; }
}
@media (max-width: 360px) {
    .tf-folder .tf-folder-actions .btn { font-size: 0.8rem; gap: 4px; }
}