/* 课题组文件空间 —— 苹果官网风格
 *
 * filebrowser 默认是 Material Design（--blue:#2196f3、涟漪阴影、48px 圆角按钮）。
 * 这份样式把它换成 Apple 的语言：近黑文字压在浅灰底上、发丝级分隔线代替阴影、
 * 药丸按钮、收紧的字距、以及大量留白。
 *
 * 大部分改动通过覆盖 filebrowser 自己的 CSS 变量完成，剩下的是几处它写死的地方。
 * 中文界面必须带 PingFang SC —— 苹果中文官网用的就是 SF + PingFang 这一对，
 * 少了它中文会掉到系统默认字体，前面所有字距调校全白做。
 */

:root {
  /* Apple 的实际取值，不是近似 */
  --ap-ink:        #1d1d1f;   /* 正文近黑，不是纯黑 */
  --ap-ink-soft:   #86868b;   /* 次要文字 */
  --ap-line:       #d2d2d7;   /* 发丝分隔线 */
  --ap-canvas:     #f5f5f7;   /* 大面积底色 */
  --ap-surface:    #ffffff;
  --ap-blue:       #0071e3;   /* 按钮蓝 */
  --ap-blue-deep:  #0077ed;
  --ap-link:       #0066cc;
  --ap-radius:     18px;
  --ap-pill:       980px;     /* 苹果药丸按钮的实际圆角值 */
  --ap-ease:       cubic-bezier(.28, .11, .32, 1);

  /* 覆盖 filebrowser 自己的变量 —— 这一段管住了大半个界面 */
  --background:      var(--ap-canvas);
  --surfacePrimary:  var(--ap-surface);
  --surfaceSecondary:#ebebed;
  --textPrimary:     var(--ap-ink-soft);
  --textSecondary:   var(--ap-ink);
  --divider:         var(--ap-line);
  --borderPrimary:   var(--ap-line);
  --borderSecondary: #c7c7cc;
  --blue:            var(--ap-blue);
  --dark-blue:       var(--ap-blue-deep);
  --hover:           rgba(0, 0, 0, .04);
  --item-selected:   #e8f0fe;
  --moon-grey:       var(--ap-canvas);
  --action:          var(--ap-ink);
  --iconPrimary:     var(--ap-blue);
}

html, body, #app, input, button, textarea, select {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { background: var(--ap-canvas); color: var(--ap-ink); letter-spacing: -.01em; }

/* ── 登录页 ───────────────────────────────────────────────
 * 实际结构（不是猜的，是从运行中的页面读出来的）：
 *   #login > form > img, h1, input.input, input.input, input.button
 * 全部是 form 的直接子元素，所以间距只能逐个给，不能靠容器的 gap。
 *
 * 苹果的登录页是一整屏浅灰、内容垂直居中、标题大而字距紧。
 * 原本的卡片带 Material 投影，这里换成发丝描边 —— 苹果几乎不用投影分层。
 */
#login {
  background: var(--ap-canvas);
  display: flex; align-items: center; justify-content: center;
}

#login form {
  width: 100%;
  max-width: 340px;
  padding: 0 20px;
  margin: 0;
  display: flex; flex-direction: column;
}

#login img { width: 44px; height: 44px; margin: 0 auto 24px; }

#login h1 {
  /* 28px 而不是 40px：中文标题在 300px 宽度内不能超过一行，
     换行会把"课题组文件空间"劈成"课题组文件/空间"，很难看 */
  font-size: 28px; line-height: 1.14; font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ap-ink); text-align: center;
  margin: 0; white-space: nowrap;
}
#login h1::after {
  content: "导师与学生共用同一入口";
  display: block; margin-top: 10px;
  font-size: 15px; font-weight: 400; letter-spacing: -.005em;
  color: var(--ap-ink-soft); white-space: nowrap;
}

#login .input, #login input[type="text"], #login input[type="password"] {
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 12px;
  font-size: 17px; color: var(--ap-ink);
  box-shadow: none;
  transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
#login .input:first-of-type { margin-top: 30px; }
#login .input:focus, #login input:focus {
  outline: none;
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .18);   /* 苹果的柔光聚焦环 */
}
#login .input::placeholder { color: #a1a1a6; }

/* 药丸按钮 —— 全站最能认出「这是苹果」的一处 */
#login .button, #login input.button, .button--block {
  border-radius: var(--ap-pill);
  background: var(--ap-blue);
  color: #fff; border: none;
  font-size: 17px; font-weight: 400; letter-spacing: -.01em;
  padding: 13px 22px; margin-top: 6px;
  box-shadow: none; cursor: pointer;
  transition: background .2s var(--ap-ease), transform .15s var(--ap-ease);
}
#login .button:hover, .button--block:hover { background: var(--ap-blue-deep); }
#login .button:active { transform: scale(.985); }

#login .wrong {
  background: #fff1f0; color: #b3261e;
  border: 1px solid #f5c2c0; border-radius: 12px;
  font-size: 14px; letter-spacing: -.005em; margin-bottom: 12px;
}

/* ── 顶栏 ─────────────────────────────────────────────────
 * 苹果导航条的招牌：高饱和 + 模糊的半透明背板，下沿一条发丝线。
 */
header {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ap-line);
  box-shadow: none !important;
}
header .topbar-title, header p, header span { color: var(--ap-ink); letter-spacing: -.01em; }

/* ── 侧栏 ─────────────────────────────────────────────────
 * 真实标签是 <nav>，不是 #sidebar（那是我最初猜的，页面上并不存在）。
 * 子元素是一串 button.action。
 */
nav {
  background: var(--ap-canvas);
  border-right: 1px solid var(--ap-line);
  box-shadow: none;
  padding-top: 8px;
}
nav .action {
  border-radius: 10px;
  margin: 1px 8px;
  color: var(--ap-ink);
  transition: background .16s var(--ap-ease);
}
nav .action:hover { background: rgba(0, 0, 0, .05); }
nav .action > span { letter-spacing: -.01em; font-size: 15px; }
nav .action i { color: var(--ap-ink-soft); }
nav .credits, nav p.credits { color: #a1a1a6; font-size: 11px; letter-spacing: 0; }
nav .credits a { color: #a1a1a6; }

/* 侧栏底部的容量条 */
nav .progress { background: #e3e3e6; border-radius: 999px; height: 4px; overflow: hidden; }
nav .progress > div { background: var(--ap-blue); }

/* ── 搜索框 ───────────────────────────────────────────────
 * 结构是 #search > #input > (i.material-icons + input)。
 * 苹果的搜索框是浅灰底、圆角、无边框，聚焦时才显出蓝环。
 */
#search #input {
  background: rgba(0, 0, 0, .05);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  transition: background .18s var(--ap-ease), border-color .18s var(--ap-ease);
}
#search #input:focus-within {
  background: var(--ap-surface);
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .16);
}
#search #input input { color: var(--ap-ink); font-size: 15px; letter-spacing: -.01em; }
#search #input input::placeholder { color: #86868b; }
#search #input i.material-icons { color: #86868b; }

/* ── 顶栏里的图标按钮 ─────────────────────────────────────── */
header .action { border-radius: 10px; }
header .action:hover { background: rgba(0, 0, 0, .05); }
header .action i { color: var(--ap-ink); }
header img { width: 30px; height: 30px; }

/* ── 文件列表 ─────────────────────────────────────────────
 * 苹果用发丝线分隔行，不用卡片投影。悬停只是极浅的一层灰。
 */
#listing h2 {
  color: var(--ap-ink-soft);
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  margin: 26px 0 10px .2em;
}

#listing.list .item {
  border-top: 1px solid var(--ap-line);
  border-radius: 0;
  transition: background .16s var(--ap-ease);
}
#listing.list .item:hover { background: rgba(0, 0, 0, .035); }
#listing.list .item[aria-selected="true"] { background: #e8f0fe; }
#listing .item .name { color: var(--ap-ink); letter-spacing: -.01em; }
#listing .item .size, #listing .item .modified { color: var(--ap-ink-soft); font-variant-numeric: tabular-nums; }

/* 图标：Material 的 #2196f3 太艳，换成苹果蓝 */
#listing .item i.material-icons { color: var(--ap-blue); }
#listing .item[data-type="image"] i, #listing .item[data-type="video"] i { color: #86868b; }

/* 列表表头 */
#listing .item.header, #listing > div:first-child .name,
#listing .header .name, #listing .header .size, #listing .header .modified {
  color: var(--ap-ink-soft); font-size: 13px; font-weight: 500; letter-spacing: -.005em;
}

/* 网格视图：白卡 + 发丝描边，不用投影 */
#listing.mosaic .item {
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius);
  box-shadow: none;
  transition: transform .22s var(--ap-ease), border-color .22s var(--ap-ease);
}
#listing.mosaic .item:hover { transform: translateY(-2px); border-color: #b9b9c0; }

/* ── 面包屑 ───────────────────────────────────────────────── */
#breadcrumbs { color: var(--ap-ink-soft); font-size: 15px; letter-spacing: -.01em; }
#breadcrumbs a { color: var(--ap-link); text-decoration: none; }
#breadcrumbs a:hover { text-decoration: underline; }

/* ── 通用按钮与卡片 ───────────────────────────────────────── */
.button { border-radius: var(--ap-pill); font-weight: 400; letter-spacing: -.01em; box-shadow: none; }
.button--flat { color: var(--ap-link); background: transparent; }
.button--flat:hover { background: rgba(0, 113, 227, .08); }

.card {
  border-radius: var(--ap-radius);
  border: 1px solid var(--ap-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}
.card-title h2 { font-weight: 600; letter-spacing: -.018em; color: var(--ap-ink); }
.card-content { color: var(--ap-ink); }

.input { border-radius: 12px; border: 1px solid var(--ap-line); }
.input:focus { border-color: var(--ap-blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, .18); outline: none; }

/* 进度条 */
#progress .bar, .progress .bar { background: var(--ap-blue); }

/* ── 深色模式 ─────────────────────────────────────────────
 * 苹果的深色不是「把浅色反相」：底是纯黑，卡片才是 #1d1d1f，蓝色要提亮。
 */
body.dark-mode {
  --ap-ink: #f5f5f7;
  --ap-ink-soft: #a1a1a6;
  --ap-line: #38383c;
  --ap-canvas: #000000;
  --ap-surface: #1d1d1f;
  --ap-blue: #2997ff;
  --ap-blue-deep: #47a6ff;
  --ap-link: #2997ff;

  --background: #000;
  --surfacePrimary: #1d1d1f;
  --surfaceSecondary: #2c2c2e;
  --textPrimary: #a1a1a6;
  --textSecondary: #f5f5f7;
  --divider: #38383c;
  --borderPrimary: #38383c;
  --hover: rgba(255, 255, 255, .06);
  --item-selected: #1c3049;
  --action: #f5f5f7;
}
body.dark-mode header {
  background: rgba(0, 0, 0, .72) !important;
  border-bottom-color: #38383c;
}
body.dark-mode #login .input, body.dark-mode #login input {
  background: #1d1d1f; border-color: #38383c; color: #f5f5f7;
}
body.dark-mode #listing.list .item:hover { background: rgba(255, 255, 255, .05); }
body.dark-mode #listing.mosaic .item { background: #1d1d1f; border-color: #38383c; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}