/* ============ OB Commander 模拟器 ============
   还原的是**软件本体的样子**：Windows 原生浅色界面，不是站点那套深色。
   所有跟配置有关的颜色都走 CSS 变量，由 sim.js 按 ui-schema.json 的主题表注入 ——
   页面上换主题跟软件里改 config.toml 是同一条路。

   尺寸取自软件：工具栏 30px (toolbar::TOOL_H)、列默认宽 280/70/110/210 (app.rs Col::TABLE)、
   活动面板边框 1px (config.active_border)、分隔条 4px (config.splitter_width)。
*/

.sim {
  /* 主题色 (sim.js 覆盖) */
  --accent: #2f3e4e;
  --inactive: #d5dae0;
  --selected: #e91e63;
  --border: #2b983c;
  --cursor: #99c8ff;
  --list-bg: #ffffff;

  /* Windows 原生的那几个灰 */
  --face: #f0f0f0;
  --face-2: #e8e8e8;
  --line: #d0d0d0;
  --line-2: #c0c0c0;
  --text: #1a1a1a;
  --text-dim: #5a5a5a;
  --hot: #cde8ff;

  --row-h: 21px;
  --tool-h: 30px;
  --bar-h: 25px;
  --bw: 3px;
  --tab-h: 28px;
  --head-h: 23px;

  font-family: "Segoe UI", "Segoe UI Variable Text", "Microsoft YaHei UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: var(--face);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  height: 640px;
  user-select: none;
  cursor: default;
  position: relative;
}
.sim *, .sim *::before, .sim *::after { box-sizing: border-box; }

/* 图标字体：Windows 上就是软件里那一套字形；别的系统退回一个方块，不影响布局 */
.sim .ico {
  font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets", sans-serif;
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  font-weight: normal;
}

/* ── 标题栏 ────────────────────────────────────────── */
.sim-title {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding-left: 10px;
  background: #0078d4; color: #fff;
  flex: none;
}
.sim-title img { width: 16px; height: 16px; border-radius: 2px; }
.sim-title b { font-weight: 400; font-size: 12px; }
.sim-title .caption { margin-left: auto; display: flex; height: 100%; }
.sim-title .caption span {
  width: 46px; display: grid; place-items: center; color: #fff;
}
.sim-title .caption span:last-child:hover { background: #c42b1c; color: #fff; }
.sim-title .caption span:hover { background: rgba(255, 255, 255, 0.16); }

/* ── 菜单栏 ────────────────────────────────────────── */
.sim-menubar { display: flex; height: 24px; background: var(--face); flex: none; padding: 0 2px; }
.sim-menubar > button {
  padding: 0 9px; height: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: default;
  white-space: nowrap;
}
.sim-menubar > button:hover, .sim-menubar > button.open { background: var(--hot); }

/* 弹出菜单 (菜单栏 / 右键 / 子菜单 共用) */
.sim-pop {
  position: absolute; z-index: 50; min-width: 200px; padding: 3px;
  background: #fbfbfb; border: 1px solid var(--line-2); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.sim-pop .item {
  display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 10px 0 28px;
  border-radius: 4px; position: relative; white-space: nowrap;
}
.sim-pop .item:hover:not(.disabled) { background: var(--hot); }
.sim-pop .item.disabled { color: #a0a0a0; }
.sim-pop .item .key { margin-left: auto; padding-left: 24px; color: var(--text-dim); font-size: 11px; }
.sim-pop .item.disabled .key { color: #b8b8b8; }
.sim-pop .item .arrow { margin-left: auto; padding-left: 20px; font-size: 10px; color: var(--text-dim); }
.sim-pop .item .check { position: absolute; left: 9px; font-size: 11px; }
.sim-pop .sep { height: 1px; margin: 3px 8px; background: var(--line); }

/* ── 工具栏 ────────────────────────────────────────── */
.sim-toolbar {
  display: flex; align-items: center; gap: 1px; height: var(--tool-h); padding: 0 4px;
  background: var(--face); border-bottom: 1px solid var(--line); flex: none;
}
.sim-toolbar button {
  height: 24px; min-width: 26px; padding: 0 5px; border: 1px solid transparent; border-radius: 4px;
  background: none; font: inherit; color: inherit; cursor: default;
  display: inline-flex; align-items: center; gap: 5px;
}
.sim-toolbar button:hover { background: var(--hot); border-color: #a8d8ff; }
.sim-toolbar button.on { background: var(--hot); border-color: #7fbfef; }
.sim-toolbar button[disabled] { color: #b0b0b0; }
.sim-toolbar button[disabled]:hover { background: none; border-color: transparent; }
.sim-toolbar .dd { font-size: 9px; color: var(--text-dim); margin: 0 3px 0 -1px; }
.sim-toolbar .sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); }

/* ── 主体: 目录树 + 面板网格 ──────────────────────── */
.sim-body { flex: 1; display: flex; min-height: 0; background: var(--face); }

.sim-tree {
  width: 200px; flex: none; overflow: auto; padding: 4px 0;
  background: var(--list-bg); border-right: 4px solid var(--face);
}
.sim-tree .node { display: flex; align-items: center; gap: 4px; height: var(--row-h); padding-right: 8px; white-space: nowrap; }
.sim-tree .node:hover { background: #f0f7ff; }
.sim-tree .node.sel { background: var(--cursor); }
.sim-tree .twist { width: 14px; text-align: center; font-size: 10px; color: var(--text-dim); flex: none; }
.sim-tree .ico { font-size: 13px; color: #d9a43b; }

.sim-grid { flex: 1; display: grid; gap: 4px; min-width: 0; min-height: 0; }

/* ── 面板 ──────────────────────────────────────────── */
.sim-panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--face); border: var(--bw) solid var(--face);
}
.sim-panel.active { border-color: var(--border); }
.sim-panel.prev { border-color: color-mix(in srgb, var(--border) 30%, var(--face)); }

/* 盘符栏 */
.sim-drives { display: flex; align-items: center; gap: 1px; height: var(--bar-h); padding: 0 2px; background: var(--face); flex: none; overflow: hidden; }
.sim-drives button {
  height: 21px; padding: 0 5px; border: 1px solid transparent; border-radius: 0;
  background: none; font: inherit; color: inherit; cursor: default; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.sim-drives button:hover { background: var(--hot); }
.sim-drives button.cur { background: var(--drive-bg, #b9bec2); }
.sim-drives .fav .star { color: #e8a33a; }
.sim-drives .space { color: var(--text-dim); padding: 0 6px; white-space: nowrap; }
.sim-drives .grow { flex: 1; }

/* 标签栏 */
.sim-tabs { display: flex; align-items: center; height: var(--tab-h); background: var(--face); flex: none; padding: 0 2px; overflow: hidden; }
.sim-tabs .strip { display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.sim-tabs .tab {
  height: 23px; max-width: 160px; padding: 0 6px; border: 1px solid var(--line-2);
  background: var(--face); color: var(--text);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden;
}
.sim-tabs .tab span { overflow: hidden; text-overflow: ellipsis; }
.sim-tabs .tab.cur { background: var(--tab-bg, #c9cccf); }
.sim-tabs .tab .lock { font-size: 10px; }
.sim-tabs .btns { display: flex; gap: 1px; flex: none; }
.sim-tabs .btns button {
  width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
  font: inherit; font-size: 10px; color: var(--text); cursor: default; display: grid; place-items: center;
}
.sim-tabs .btns button:hover { background: var(--hot); color: var(--text); }

/* 路径栏 (面包屑 + 右侧小按钮) */
.sim-crumb { display: flex; align-items: center; height: var(--bar-h); background: var(--list-bg); border-bottom: 1px solid var(--line); flex: none; padding: 0 2px; }
.sim-crumb .path { flex: 1; display: flex; align-items: center; min-width: 0; overflow: hidden; height: 20px; }
.sim-crumb .seg { padding: 0 1px; height: 20px; display: inline-flex; align-items: center; border-radius: 3px; white-space: nowrap; }
.sim-crumb .seg:hover { background: var(--hot); }
.sim-crumb .sl { padding: 0 1px; }
.sim-crumb .btns { display: flex; gap: 1px; flex: none; }
.sim-crumb .btns button {
  width: 24px; height: 20px; border: 1px solid transparent; border-radius: 3px; background: none;
  color: var(--text-dim); cursor: default; display: grid; place-items: center;
}
.sim-crumb .btns button:hover { background: var(--hot); color: var(--text); }

/* 列表 */
.sim-list { flex: 1; min-height: 0; overflow: auto; background: var(--list-bg); }
.sim-head {
  display: flex; height: var(--head-h); background: var(--list-bg);
  position: sticky; top: 0; z-index: 3; width: max-content; min-width: 100%;
}
.sim-head .col {
  display: flex; align-items: center; padding: 0 6px; border-right: 1px solid #e5e5e5;
  position: relative; white-space: nowrap; overflow: hidden; flex: none;
}
.sim-head .col:hover { background: var(--face-2); }
.sim-head .col.r { justify-content: flex-end; }
.sim-head .col .sort { position: absolute; top: -3px; left: 50%; transform: translateX(-50%) scaleX(1.6); font-size: 8px; line-height: 1; color: var(--text-dim); }
.sim-head .col .grip { position: absolute; right: -3px; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }

.sim-rows { width: max-content; min-width: 100%; }
.sim-rows { background: var(--list-bg); }
.sim-row { display: flex; height: var(--row-h); align-items: stretch; white-space: nowrap; width: 100%; }
.sim-row .cell { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; flex: none; display: flex; align-items: center; gap: 5px; border-right: 1px solid #ebf4fe; }
.sim-row .cell > span { overflow: hidden; text-overflow: ellipsis; }
.sim-row .ic { flex: none; }
.sim-row .cell.r { justify-content: flex-end; }
.sim-row.cursor { background: var(--cursor); }
.sim-panel:not(.active) .sim-row.cursor { background: var(--inactive); }
.sim-row.cursor .cell { background: none !important; border-right-color: transparent; }
.sim-row.sel { color: var(--selected); font-weight: 600; }
.sim-row.sel.fill { background: var(--selected-bg); }
.sim-row:hover:not(.cursor) { background: #f2f7fc; }
.sim-drives .ic { width: 16px; height: 16px; flex: none; }
.sim-row .cb { width: 13px; height: 13px; flex: none; margin-right: 2px; }
.sim-rows:focus { outline: none; }

/* 状态栏 */
.sim-status {
  height: 22px; flex: none; display: flex; align-items: center; padding: 0 8px; gap: 4px;
  background: var(--face); border-top: 1px solid var(--line); color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.sim-status { color: var(--text); white-space: pre; }

/* 快速过滤浮条 (软件里是在列表上打字直接过滤) */
.sim-filter {
  position: absolute; bottom: 26px; left: 6px; z-index: 30;
  background: #fffbe6; border: 1px solid #e0c86a; border-radius: 4px; padding: 3px 8px;
  font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.sim-filter b { font-weight: 600; }

/* 快速查看 (Ctrl+Q): 占掉另一个面板的位置 */
.sim-preview { display: flex; flex-direction: column; min-width: 0; background: var(--list-bg); border: 1px solid var(--line); }
.sim-preview .pv-bar { height: var(--bar-h); display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--face); border-bottom: 1px solid var(--line); flex: none; }
.sim-preview .pv-body { flex: 1; overflow: auto; padding: 12px 14px; font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; line-height: 1.6; color: #2b2b2b; white-space: pre-wrap; }
.sim-preview .pv-empty { flex: 1; display: grid; place-items: center; color: #9a9a9a; }

/* 模拟器自己的提示条 (破坏性命令点下去时说明这是模拟) */
.sim-toast {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 60; max-width: 80%;
  padding: 8px 14px; border-radius: 6px;
  background: rgba(24, 28, 32, 0.92); color: #fff; font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.18s;
  pointer-events: none;
}
.sim-toast.show { opacity: 1; }

/* 窄屏：软件本来就是桌面程序，这里退到单面板 + 只留名称和大小两列 */
@media (max-width: 900px) {
  .sim { height: 520px; }
  .sim-tree { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-toast { transition: none; }
}

/* ── 对话框 (关于 / 属性 / 输入 / config.toml) ──────── */
.sim-modal { position: absolute; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.26); display: grid; place-items: center; }
.sim-modal .box {
  width: min(460px, 86%); max-height: 80%; display: flex; flex-direction: column;
  background: #fbfbfb; border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.sim-modal .hd { display: flex; align-items: center; height: 34px; padding: 0 4px 0 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.sim-modal .hd .x { margin-left: auto; width: 32px; height: 26px; border: 0; border-radius: 4px; background: none; font: inherit; color: inherit; cursor: default; }
.sim-modal .hd .x:hover { background: #c42b1c; color: #fff; }
.sim-modal .bd { padding: 14px; overflow: auto; }
.sim-modal .bd p { margin: 0 0 10px; }
.sim-modal .bd a { color: #0a6ed1; }
.sim-modal pre { margin: 0; font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.sim-modal dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.sim-modal dt { color: var(--text-dim); }
.sim-modal dd { margin: 0; }
.sim-modal .in { width: 100%; height: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 3px; font: inherit; }
.sim-modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.sim-modal .row button { height: 28px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--face); font: inherit; color: inherit; cursor: default; }
.sim-modal .row button:hover { background: var(--hot); }