/* ============================================================
   Dragino Repo — 目录索引美化（autoindex theme v2）

   原理：
     nginx 默认 autoindex 输出是 <pre> 里的一堆「<a>名</a> + 填充空白
     + 日期 + 大小 + 换行」，日期/大小没有标签包裹，纯 CSS 无法可靠
     对齐成列（填充空白会被压缩）。

     所以由一小段 JS 在 DOMContentLoaded 后把这些裸文本行拆成结构化
     的 <div class="dg-row"><span name><span date><span size></div>，
     再用 flex/grid 精确排版。JS 未执行时页面仍是原始可用的列表。

   注入：nginx sub_filter 在 </head> 前插入 <style> 与 <script>。
   ============================================================ */

:root {
  --dg-bg: #eef1f7;
  --dg-card: #ffffff;
  --dg-text: #263041;
  --dg-muted: #8b95a5;
  --dg-link: #2563eb;
  --dg-dir: #6d28d9;
  --dg-border: #e9edf4;
  --dg-head: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

html { background: var(--dg-bg); }

body {
  margin: 0 !important;
  padding: 40px 20px 64px !important;
  background: var(--dg-bg) !important;
  color: var(--dg-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 15px !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 标题卡片头 ---------- */
h1 {
  max-width: 1060px;
  margin: 0 auto !important;
  padding: 22px 28px !important;
  background: var(--dg-head) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 3px 14px rgba(102, 126, 234, .25);
  word-break: break-all;
}

hr { display: none !important; }

/* ---------- 列表容器 ---------- */
pre {
  display: block !important;
  max-width: 1060px;
  margin: 0 auto !important;
  box-sizing: border-box;
  padding: 6px 0 !important;
  background: var(--dg-card) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 24px rgba(38, 48, 65, .08);
  font-family: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  overflow-x: hidden;
  color: var(--dg-muted);
  font-variant-numeric: tabular-nums;
}

/* 把 <pre> 里所有裸文本节点隐藏（JS 会把它们抽取成行） */
pre.dg-done { font-size: 0 !important; }

/* ---------- 行（由 JS 生成） ---------- */
.dg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px 96px;
  align-items: center;
  gap: 12px;
  padding: 9px 28px;
  border-bottom: 1px solid var(--dg-border);
  font-size: 14.5px;
  line-height: 1.5;
  transition: background .12s ease;
}
.dg-row:last-child { border-bottom: none; }
.dg-row:hover { background: #f3f7ff; }

.dg-row .dg-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dg-link);
  text-decoration: none;
  font-weight: 500;
}
.dg-row .dg-name:hover { color: #1d4ed8; text-decoration: underline; }

.dg-row .dg-date,
.dg-row .dg-size {
  color: var(--dg-muted);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

/* 目录行 */
.dg-row.dg-dir .dg-name {
  color: var(--dg-dir);
  font-weight: 600;
}
.dg-row.dg-dir .dg-name:hover { color: #5b21b6; }
.dg-row.dg-dir:hover { background: #f7f3ff; }

/* 图标 */
.dg-ico {
  display: inline-block;
  width: 18px;
  margin-right: 8px;
  font-size: 13px;
  text-align: center;
  opacity: .9;
}

/* 返回上级行 */
.dg-row.dg-up { background: #fafbfe; }
.dg-row.dg-up .dg-name { color: #64748b; font-weight: 500; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  body { padding: 16px 10px 40px !important; font-size: 14px !important; }
  h1 { font-size: 15px !important; padding: 16px 18px !important; border-radius: 10px 10px 0 0; }
  pre { border-radius: 0 0 10px 10px; }

  .dg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name size" "date date";
    gap: 2px 10px;
    padding: 9px 16px;
    font-size: 13.5px;
  }
  .dg-row .dg-name { grid-area: name; }
  .dg-row .dg-size { grid-area: size; }
  .dg-row .dg-date { grid-area: date; text-align: left; font-size: 12px; }
}