/* ========================================================
   Google Material Design 3 (M3) Adaptive Theme
   Supports both Light and Dark Modes natively
   ======================================================== */

/* 1. M3 浅色变量重塑 */
:root {
  --blue: #0b57d0 !important;
  --dark-blue: #0842a0 !important;
  --background: #f8fafd !important;
  --surfacePrimary: #ffffff !important;
  --surfaceSecondary: #edf2fa !important;
  --textPrimary: #444746 !important;
  --textSecondary: #1f1f1f !important;
  --borderPrimary: #e1e3e1 !important;
  --borderSecondary: #c4c7c5 !important;
  --hover: rgba(11, 87, 208, 0.08) !important;
  --m3-radius-card: 20px;
  --m3-radius-pill: 9999px;
  --m3-radius-input: 12px;
}

/* 2. M3 深色变量重塑 (Google Dark Mode) */
:root.dark {
  --blue: #a8c7fa !important;
  --dark-blue: #80b0f7 !important;
  --background: #131314 !important;
  --surfacePrimary: #1e1f20 !important;
  --surfaceSecondary: #28292a !important;
  --textPrimary: #c4c7c5 !important;
  --textSecondary: #e3e3e3 !important;
  --borderPrimary: #444746 !important;
  --borderSecondary: #5e5e5e !important;
  --hover: rgba(168, 199, 250, 0.08) !important;
}

/* 3. 全局平滑过渡与现代字体 */
body, html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  background-color: var(--background) !important;
  color: var(--textSecondary) !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 4. 隐藏归档/废弃警告横幅 (恢复纯净美感) */
.card:has(a[href*="security/advisories"]),
.card:has(a[href*="github.com/filebrowser"]) {
  display: none !important;
}

/* 5. 现代化圆角卡片 */
.card {
  border-radius: var(--m3-radius-card) !important;
  border: 1px solid var(--borderPrimary) !important;
  background-color: var(--surfacePrimary) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

:root.dark .card {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* 6. 输入框 (Outlined Style) */
input.input, .input, select {
  border-radius: var(--m3-radius-input) !important;
  border: 1.5px solid var(--borderPrimary) !important;
  background-color: var(--surfacePrimary) !important;
  color: var(--textSecondary) !important;
  padding: 12px 16px !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input.input:focus, .input:focus, select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.18) !important;
}

:root.dark input.input:focus, :root.dark .input:focus {
  box-shadow: 0 0 0 3px rgba(168, 199, 250, 0.22) !important;
}

/* 7. 胶囊级现代圆角按钮 */
.button, button {
  border-radius: var(--m3-radius-pill) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
}

.button--blue, .button[type="submit"] {
  background-color: var(--blue) !important;
  color: #ffffff !important;
}

:root.dark .button--blue, :root.dark .button[type="submit"] {
  color: #041e49 !important; /* M3 深色下的反色高对比文字 */
}

.button--blue:hover, .button[type="submit"]:hover {
  background-color: var(--dark-blue) !important;
  transform: translateY(-1px);
}

/* 8. 侧边栏与主菜单适配 */
nav, #nav, .sidebar {
  background-color: var(--background) !important;
  border-right: 1px solid var(--borderPrimary) !important;
}

nav a, #nav a, .action {
  border-radius: var(--m3-radius-pill) !important;
  color: var(--textPrimary) !important;
  margin: 4px 8px !important;
  transition: all 0.15s ease !important;
}

nav a:hover, #nav a:hover, .action:hover {
  background-color: var(--hover) !important;
  color: var(--textSecondary) !important;
}

nav a.active, #nav a.active {
  background-color: var(--surfaceSecondary) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}

/* 9. 文件列表项 */
.item {
  border-radius: var(--m3-radius-input) !important;
  transition: all 0.15s ease !important;
  margin: 3px 0 !important;
}

.item:hover {
  background-color: var(--hover) !important;
}

.item[aria-selected="true"], .item.active {
  background-color: var(--surfaceSecondary) !important;
  color: var(--blue) !important;
}

/* 10. 顶部导航栏 */
header, .header {
  background-color: var(--background) !important;
  border-bottom: 1px solid var(--borderPrimary) !important;
  box-shadow: none !important;
}