/* ── Output Files panel ────────────────────────────────────────────────────────
   The side panel every run page carries: previous runs' artifacts, filtered by
   type, openable, deletable, and — for a *_config.json — reloadable as settings.

   Canonical copy, paired with /static/files-panel.js. The four configurator
   pages still carry their own copy (in configurator.css plus per-page inline
   overrides that have since drifted apart); pointing them here and deleting
   those is a follow-up, not something to do while adding a fifth page.

   Namespaced under .files-panel / .fp-* / .fi-* so a page can adopt it without
   its own typography or .card styling being touched.
   ──────────────────────────────────────────────────────────────────────────── */

.files-panel{width:270px;flex-shrink:0;background:#fff;border:1px solid #E0E0E0;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);align-self:flex-start}
.files-panel-header{padding:11px 14px;background:#111111;display:flex;align-items:center;gap:7px}
.files-panel-header h2{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;flex:1}
.files-panel-header .fp-count{font-size:10px;background:rgba(232,51,42,.25);color:#FF9090;padding:2px 8px;border-radius:8px;font-weight:600}
.files-panel-header .fp-refresh{font-size:11px;color:#FF9090;cursor:pointer;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:transparent;transition:background .12s;font-family:inherit}
.files-panel-header .fp-refresh:hover{background:rgba(255,255,255,.1)}
.files-panel-header .fp-loadcfg{font-size:10px;color:#90EE90;cursor:pointer;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:transparent;transition:background .12s;white-space:nowrap;font-family:inherit}
.files-panel-header .fp-loadcfg:hover{background:rgba(255,255,255,.1)}

.fp-sel-all{display:none;width:13px;height:13px;cursor:pointer;accent-color:#E8332A;flex-shrink:0}
.files-panel.selecting .fp-sel-all{display:block}
.fp-select-btn{font-size:10px;color:#CCCCCC;cursor:pointer;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:transparent;transition:all .12s;font-family:inherit}
.fp-select-btn:hover{background:rgba(255,255,255,.1)}
.fp-select-btn.active{background:#E8332A;border-color:#E8332A;color:#fff}

.fp-filter{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid #F0F0F0;flex-wrap:wrap}
.fp-flt{font-size:10px;padding:3px 9px;border-radius:12px;border:1.5px solid #E0E0E0;background:#F8F8F8;cursor:pointer;color:#777777;font-weight:600;transition:all .12s}
.fp-flt:hover{border-color:#E8332A;color:#E8332A}
.fp-flt.active{background:#E8332A;border-color:#E8332A;color:#fff}
.fp-raw-toggle{margin-left:auto;font-size:10px;color:#bbb;cursor:pointer;display:flex;align-items:center;gap:3px;user-select:none}
.fp-raw-toggle input{cursor:pointer;accent-color:#999}

.fp-list{max-height:calc(100vh - 220px);overflow-y:auto;padding:6px 0}
.fp-list::-webkit-scrollbar{width:4px}
.fp-list::-webkit-scrollbar-track{background:#F8F8F8}
.fp-list::-webkit-scrollbar-thumb{background:#CCCCCC;border-radius:2px}
.fp-empty{padding:24px 14px;text-align:center;color:#AAAAAA;font-size:11px;font-style:italic;line-height:1.6}

.fp-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-bottom:1px solid #F5F5F5;transition:background .1s}
.fp-item:last-child{border-bottom:none}
.fp-item:hover{background:#F8F8F8}
.fp-item.deleting{opacity:.4;pointer-events:none}
.fp-item .fi-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.files-panel.selecting .fp-item .fi-icon{display:none}
.fp-item .fi-body{flex:1;min-width:0}
.fp-item .fi-name{font-size:11px;font-weight:600;color:#1A1A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.fp-item .fi-name:hover{color:#E8332A;text-decoration:underline}
.fp-item .fi-meta{font-size:10px;color:#AAAAAA;margin-top:2px}
.fp-item .fi-actions{display:flex;gap:4px;flex-shrink:0;margin-top:1px}
.fp-item .fi-btn{font-size:10px;padding:3px 7px;border-radius:5px;border:1px solid;cursor:pointer;font-weight:600;transition:all .12s;white-space:nowrap;font-family:inherit}
.fp-item .fi-open{color:#E8332A;border-color:#F5C0BD;background:#FEF5F5}
.fp-item .fi-open:hover{background:#FEE8E7}
.fp-item .fi-del{color:#888888;border-color:#E0E0E0;background:#F8F8F8}
.fp-item .fi-del:hover{background:#EEEEEE;color:#E8332A;border-color:#F5C0BD}
.fp-item .fi-chk{display:none;width:14px;height:14px;cursor:pointer;flex-shrink:0;margin-top:3px;accent-color:#E8332A}
.files-panel.selecting .fp-item .fi-chk{display:block}
.fi-btn.fi-load{color:#2a9d5c;border-color:rgba(42,157,92,.3);background:#f0faf5}
.fi-btn.fi-load:hover{background:#e0f5ea}

.fp-bulk-bar{display:none;padding:7px 10px;background:#FEF5F5;border-bottom:1px solid #F5C0BD;align-items:center;gap:8px}
.fp-bulk-bar.visible{display:flex}
.fp-bulk-count{font-size:11px;font-weight:600;color:#E8332A;flex:1}
.fp-bulk-del{font-size:11px;font-weight:700;padding:4px 12px;border-radius:5px;background:#E8332A;color:#fff;border:none;cursor:pointer;transition:opacity .12s;font-family:inherit}
.fp-bulk-del:hover{opacity:.85}
.fp-bulk-del:disabled{opacity:.4;cursor:not-allowed}
.fp-bulk-cancel{font-size:11px;padding:3px 8px;border-radius:5px;background:none;border:1px solid #CCCCCC;cursor:pointer;color:#777;transition:all .12s;font-family:inherit}
.fp-bulk-cancel:hover{border-color:#999;color:#444}

/* Toast shown after settings are reloaded from a *_config.json */
.fp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:9px 18px;border-radius:8px;font-size:12px;font-weight:600;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.3);border-left:3px solid #2a9d5c;opacity:0;transition:opacity .2s;pointer-events:none}
.fp-toast.visible{opacity:1}