/* ServerDeck — File Manager
   Themed entirely with the design tokens in tokens.css, so it follows the
   active theme (light by default, plus dark/clay) automatically. No hardcoded
   colours. Data columns (size/perms/path) use --font-mono; chrome uses --font-ui. */

.fm { display:flex; flex-direction:column; min-height:0; }

/* picker */
.fm-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.fm-pick { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; text-decoration:none; color:var(--text); transition:box-shadow .15s var(--ease), border-color .15s; }
.fm-pick:hover { box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.fm-pick .ic { width:40px;height:40px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent); }
.fm-pick .dom { font-weight:600;font-size:14px; }
.fm-pick .srv { font-size:12px;color:var(--text-2);margin-top:2px; }

/* shell: tree + main */
.fm-shell { display:flex; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-sm); height:calc(100dvh - 220px); min-height:420px;
  container-type:inline-size; container-name:fmshell; position:relative; }

.fm-tree { width:236px; flex:0 0 236px; border-right:1px solid var(--line); background:var(--surface-2);
  display:flex; flex-direction:column; min-height:0; }
.fm-tree-h { padding:11px 14px 7px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.fm-tree-scroll { overflow:auto; padding:2px 8px 12px; flex:1; }
.fm-tnode { display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:var(--r-xs); cursor:pointer;
  color:var(--text-2); user-select:none; white-space:nowrap; }
.fm-tnode:hover { background:var(--surface-3); color:var(--text); }
.fm-tnode.sel { background:var(--accent-soft); color:var(--text); }
.fm-tnode .caret { width:14px;height:14px;flex:0 0 14px;display:grid;place-items:center;color:var(--text-3);transition:transform .15s; }
.fm-tnode .caret.open { transform:rotate(90deg); }
.fm-tnode .caret.leaf { visibility:hidden; }
.fm-tnode .nm { overflow:hidden;text-overflow:ellipsis;font-size:13px; }
.fm-tscrim { display:none; position:absolute; inset:0; background:rgba(16,18,32,.35); z-index:5; }

.fm-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.fm-toolbar { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); }
.fm-treetoggle { display:none; width:32px;height:32px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);border-radius:var(--r-xs);place-items:center;flex:0 0 32px;cursor:pointer; }
.fm-path { display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:5px 9px;flex:1;min-width:0;overflow:hidden; }
.fm-path .seg { padding:1px 4px;border-radius:4px;cursor:pointer;white-space:nowrap; }
.fm-path .seg:hover { background:var(--surface-3);color:var(--text); }
.fm-path .seg.last { color:var(--text); }
.fm-path .slash { color:var(--text-3);opacity:.7; }
.fm-search { position:relative; width:180px; flex:0 0 auto; }
.fm-search input { width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:var(--r-xs);
  padding:6px 10px 6px 30px;font-size:12.5px;font-family:inherit; }
.fm-search svg { position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-3); }
.fm-viewtoggle { display:flex;border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden;flex:0 0 auto; }
.fm-viewtoggle button { border:0;background:var(--surface);color:var(--text-3);padding:6px 8px;display:grid;place-items:center;cursor:pointer; }
.fm-viewtoggle button.on { background:var(--surface-3);color:var(--text); }

.fm-listwrap { flex:1; overflow:auto; position:relative; }
.fm-listwrap.drag::after { content:"Drop files to upload"; position:absolute; inset:10px; z-index:6; border:2px dashed var(--accent);
  border-radius:var(--r-md); background:var(--accent-soft); display:grid; place-items:center; color:var(--accent); font-weight:600; font-size:15px; }
.fm table { width:100%; border-collapse:collapse; }
.fm thead th { position:sticky; top:0; z-index:2; background:var(--surface); text-align:left; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.fm thead th.r { text-align:right; }
.fm tbody tr { border-bottom:1px solid var(--line); cursor:default; }
.fm tbody tr:hover { background:var(--surface-2); }
.fm tbody tr.sel { background:var(--accent-soft); }
.fm td { padding:8px 14px; vertical-align:middle; }
.fm td.nm { display:flex;align-items:center;gap:10px;min-width:0; }
.fm td.nm .ico { flex:0 0 18px;display:grid;place-items:center; }
.fm td.nm .label { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px; }
.fm td.nm .label.dir { font-weight:600; }
.fm .fm-input { background:var(--surface);border:1px solid var(--accent);color:var(--text);border-radius:4px;padding:2px 6px;font:inherit;width:200px; }
.fm td.size,.fm td.mtime,.fm td.perms { font-family:var(--font-mono);font-size:12px;color:var(--text-2);white-space:nowrap; }
.fm td.size { text-align:right; }
.fm td.perms { color:var(--text-3);cursor:pointer; }
.fm td.perms:hover { color:var(--accent); }
.fm-tag { font-family:var(--font-mono);font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--surface-3);color:var(--text-3);margin-left:6px; }

.fm-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:14px; }
.fm-card { border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);padding:16px 12px 11px;text-align:center;transition:.12s;cursor:default; }
.fm-card:hover { background:var(--surface-2);border-color:var(--line-strong); }
.fm-card.sel { border-color:var(--accent);background:var(--accent-soft); }
.fm-card .ico { margin-bottom:9px;display:grid;place-items:center; }
.fm-card .label { font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.fm-card .meta { font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);margin-top:3px; }

.fm-status { display:flex;align-items:center;gap:14px;padding:7px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-3);font-family:var(--font-mono); }
.fm-status .selc { color:var(--accent); }
.fm-empty { padding:44px;text-align:center;color:var(--text-3); }

/* context menu */
.fm-ctx { position:fixed;z-index:1200;min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px;display:none;box-shadow:var(--shadow-pop);font-size:13px; }
.fm-ctx button { width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--text-2);padding:7px 10px;border-radius:6px;text-align:left;cursor:pointer; }
.fm-ctx button:hover { background:var(--surface-2);color:var(--text); }
.fm-ctx button.danger { color:var(--danger); }
.fm-ctx button.danger:hover { background:var(--danger-soft); }
.fm-ctx .div { height:1px;background:var(--line);margin:5px 6px; }

/* upload tray */
.fm-tray { position:fixed;right:22px;bottom:22px;width:384px;z-index:1150;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-pop);overflow:hidden;transform:translateY(160%);transition:transform .35s var(--ease); }
.fm-tray.show { transform:translateY(0); }
.fm-tray .hd { display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line); }
.fm-tray .hd .t { font-weight:600;font-size:13px; }
.fm-tray .hd .sub { font-size:11.5px;color:var(--text-3); }
.fm-tray .hd .x { margin-left:auto;width:26px;height:26px;border:0;background:transparent;color:var(--text-3);border-radius:6px;display:grid;place-items:center;cursor:pointer; }
.fm-tray .hd .x:hover { background:var(--surface-2);color:var(--text); }
.fm-tray .body { max-height:270px;overflow:auto;padding:6px; }
.fm-up { padding:10px; border-radius:var(--r-xs); }
.fm-up + .fm-up { margin-top:2px; }
.fm-up .top { display:flex;align-items:center;gap:9px;margin-bottom:8px; }
.fm-up .fn { font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1; }
.fm-up .fsz { font-family:var(--font-mono);font-size:11px;color:var(--text-3); }
.fm-up .track { height:6px;border-radius:4px;background:var(--meter-track);overflow:hidden; }
.fm-up .fv { height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .2s linear; }
.fm-up.done .fv { background:var(--success); }
.fm-up .state { display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-3);margin-top:7px; }
.fm-tray .foot { padding:9px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3); }
.fm-switch { display:inline-flex;align-items:center;gap:7px;cursor:pointer;margin-left:auto;color:var(--text-2);font-size:12px; }
.fm-switch .tk { width:32px;height:18px;border-radius:10px;background:var(--meter-track);position:relative;transition:.2s; }
.fm-switch .tk .kn { position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-3);transition:.2s; }
.fm-switch.on .tk { background:var(--accent); }
.fm-switch.on .tk .kn { left:16px;background:var(--accent-on); }

@container fmshell (max-width:640px) {
  .fm-tree { position:absolute;top:0;bottom:0;left:0;z-index:6;transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:var(--shadow-lg); }
  .fm-tree.open { transform:none; }
  .fm-tscrim.show { display:block; }
  .fm-treetoggle { display:grid; }
  .fm td.perms, .fm th.perms { display:none; }
  .fm-search { width:130px; }
}
@container fmshell (max-width:460px) {
  .fm td.mtime, .fm th.mtime { display:none; }
}