/* ───────────────────────────────────────────────────────────
   F4 — Data tab. Mirrors the F3 view/nav-right conventions and
   uses the live ML.css theme variables.
─────────────────────────────────────────────────────────── */

#f4-view{display:none;flex:1;flex-direction:row;overflow:hidden;background:var(--bg);}
#f4-view.active{display:flex;}

#nav-f4-right{display:none;gap:12px;margin-left:auto;align-items:center;}
#nav-f4-right.active{display:flex;}
.f4-fmt-hint{font-size:9px;color:var(--text-dim);letter-spacing:.04em;}

/* ── Sidebar: dataset list ── */
.f4-sidebar{width:260px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface2);display:flex;flex-direction:column;overflow:hidden;}
.f4-sidebar-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-bright);text-transform:uppercase;}
.f4-refresh{background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:4px;cursor:pointer;width:24px;height:24px;font-size:13px;line-height:1;transition:all .15s;}
.f4-refresh:hover{color:var(--gold2);border-color:var(--border-b);}
.f4-list{flex:1;overflow-y:auto;padding:8px;}
.f4-empty{padding:24px 14px;text-align:center;color:var(--text-dim);font-size:10px;line-height:1.7;}

.f4-card{padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);margin-bottom:8px;cursor:pointer;transition:all .15s;}
.f4-card:hover{border-color:var(--border-b);background:var(--surface3);}
.f4-card.active{border-color:var(--accent);background:var(--accent-dim);}
.f4-card-name{font-family:var(--font);font-size:11px;color:var(--text-bright);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.f4-card-meta{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:9px;color:var(--text-dim);font-family:var(--font);}
.f4-badge{background:var(--gold-dark);color:var(--gold-light);padding:1px 6px;border-radius:3px;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}

/* ── Main pane ── */
.f4-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}

.f4-dropzone{flex:1;display:flex;align-items:center;justify-content:center;margin:24px;border:2px dashed var(--border-b);border-radius:10px;cursor:pointer;transition:all .15s;}
.f4-dropzone:hover{border-color:var(--gold2);background:var(--surface2);}
.f4-dropzone-inner{text-align:center;}
.f4-dropzone-icon{font-size:34px;color:var(--gold2);margin-bottom:10px;}
.f4-dropzone-title{font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--text-bright);margin-bottom:6px;}
.f4-dropzone-sub{font-size:10px;color:var(--text-dim);line-height:1.7;}
.f4-dropzone-sub code,.f4-fmt-hint code{font-family:var(--font);color:var(--gold2);}

.f4-preview{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.f4-preview-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);}
.f4-preview-title{font-family:var(--font);font-size:14px;font-weight:700;color:var(--text-bright);}
.f4-preview-meta{font-size:10px;color:var(--text-dim);margin-top:5px;display:flex;align-items:center;gap:8px;}
.f4-preview-actions{display:flex;gap:8px;flex-shrink:0;}

.f4-table-wrap{flex:1;overflow:auto;padding:0 18px 18px;}
.f4-table{border-collapse:collapse;font-family:var(--font);font-size:10px;width:max-content;min-width:100%;}
.f4-table th{position:sticky;top:0;background:var(--surface3);border:1px solid var(--border);padding:7px 12px;text-align:left;white-space:nowrap;}
.f4-col-name{color:var(--text-bright);font-weight:700;}
.f4-col-dtype{color:var(--gold2);font-size:8px;font-weight:500;margin-top:2px;}
.f4-table td{border:1px solid var(--border);padding:6px 12px;color:var(--text);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;}
.f4-table tbody tr:nth-child(even){background:var(--surface2);}
.f4-table tbody tr:hover{background:var(--accent-dim);}

/* ── Files tab: folder tree + code preview ─────────────────────────────── */
.f4-tnode{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:11px;
  padding:4px 8px;border-radius:4px;cursor:pointer;white-space:nowrap;color:var(--text);user-select:none;}
.f4-tnode:hover{background:var(--surface2);}
.f4-troot{font-weight:700;color:var(--gold2);margin-bottom:2px;}
.f4-tw{width:12px;display:inline-block;text-align:center;color:var(--text-dim);font-size:9px;}
.f4-tname{overflow:hidden;text-overflow:ellipsis;flex:1;}
.f4-tsize{color:var(--text-dim);font-size:9px;margin-left:auto;}
.f4-tfolder.target,.f4-troot.target{background:var(--accent-dim);outline:1px solid var(--accent);}
.f4-tfile.active{background:var(--accent-dim);color:var(--text-bright);font-weight:600;}
.f4-code{margin:0;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:6px;
  font-family:var(--font);font-size:11px;line-height:1.55;color:var(--text);white-space:pre;
  overflow:auto;max-height:100%;}