/* =========================================================
 *  File Browser 主题优化（玻璃/透明/阴影）
 *  - 统一变量、提高优先级、去重冲突、分区注释
 *  - 目标：容器透明、卡片玻璃与体积阴影；顶栏/面包屑/搜索轻玻璃
 *  - 适配你当前版本的 DOM（.card / .button / .vfm--modal / 等）
 * =======================================================*/

/* ========== 0) 全局：背景与主题变量 ========== */
html, body { height: 100%; }
body { background: transparent !important; }

/* 壁纸（主页）：放在 body::before，不占据布局 */
body::before{
  content:""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(255,255,255,.25), rgba(255,255,255,.25)),
    url("/theme/images/wallpapers/alice.png") center/cover no-repeat fixed; /* 替换为你的主页壁纸 */
  filter: saturate(110%);
}

/* 主题变量（明/暗） */
:root{
  /* 通用玻璃 */
  --glass-bg: rgba(255,255,255,.26);
  --glass-bg-strong: rgba(255,255,255,.36);
  --glass-border: rgba(255,255,255,.32);
  --glass-radius: 14px;
  --glass-shadow: 0 10px 30px rgba(0,0,0,.12);

  /* 卡片（更透明 + 阴影） */
  --card-bg: rgba(255,255,255,.06);
  --card-bg-hover: rgba(255,255,255,.10);
  --card-border: rgba(255,255,255,.14);
  --card-shadow: 0 8px 22px rgba(0,0,0,.18);
  --card-shadow-hover: 0 12px 32px rgba(0,0,0,.22);

  /* 侧栏（完全透明 + 阴影） */
  --side-radius: 16px;
  --side-shadow: 0 14px 40px rgba(0,0,0,.28);
  --side-hover: rgba(255,255,255,.06); /* 悬停弱高亮（绝对透明可改为 transparent） */
}
@media (prefers-color-scheme: dark){
  :root{
    --glass-bg: rgba(30,30,35,.42);
    --glass-bg-strong: rgba(30,30,35,.52);
    --glass-border: rgba(255,255,255,.18);
  }
}

/* ========== 1) 左侧侧栏：完全透明 + 阴影（不做毛玻璃） ========== */
/* 覆盖多种常见侧栏容器（Vuetify/自定义） */
#app nav,
.v-navigation-drawer,
.navigation-drawer,
.sidebar,
aside[role="navigation"],
aside nav {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: var(--side-radius);
  box-shadow: var(--side-shadow);
  overflow: visible; /* 避免阴影被裁切 */
}
/* 关掉可能叠加的伪元素底色 */
#app nav::before, #app nav::after,
.v-navigation-drawer::before, .v-navigation-drawer::after,
.navigation-drawer::before, .navigation-drawer::after,
.sidebar::before, .sidebar::after { content: none !important; }

/* 侧栏条目：保持透明，仅悬停时轻提示 */
#app nav .v-list-item:hover,
#app nav .item:hover,
.sidebar .v-list-item:hover {
  background: var(--side-hover) !important;
  border-radius: 10px;
}

/* ========== 2) 顶栏与搜索：只给内容层加玻璃，避免整条模糊 ========== */
/* 外层条幅透明 */
.v-app-bar, header, .v-toolbar { background: transparent !important; }
/* 内层内容容器（Vuetify：.v-toolbar__content） */
.v-app-bar .v-toolbar__content,
.v-toolbar .v-toolbar__content {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--glass-border);
  border-radius: 12px;
  margin: 6px 12px;  /* 留缝不挤压布局 */
  padding: 6px 10px;
}
/* 清掉可能的覆盖遮罩 */
.v-app-bar::before, .v-toolbar::before, header::before { content: none !important; }

/* 搜索输入：把“反白”改为玻璃内槽 */
.v-text-field .v-field {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
}
.v-text-field input, .v-input input, .v-field__input {
  background: transparent !important; box-shadow: none !important; color: inherit !important;
}
.v-field__overlay, .v-field__outline, .v-field__loader {
  background: transparent !important; opacity: 0 !important; box-shadow: none !important;
}
.v-field--focused, .v-input--is-focused .v-input__control { background: transparent !important; }
::placeholder{ color: rgba(0,0,0,.55) !important; }
@media (prefers-color-scheme: dark){ ::placeholder{ color: rgba(255,255,255,.70) !important; } }
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
}

/* ========== 3) 面包屑/信息条：轻玻璃条幅 ========== */
.breadcrumbs, .breadcrumb, .pathbar, .info-bar, nav[aria-label="breadcrumb"] {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 6px 12px;
  margin: 10px 12px;
}

/* ========== 4) 文件列表：容器透明 + 卡片玻璃/阴影 ========== */
/* 列表容器透明，避免整片模糊 */
#listing, #listing.file-icons, #listing.file-icons.mosaic{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 单个文件卡片：透明 + 轻玻璃 + 阴影 + 悬停上抬 */
#listing .item{
  background: var(--card-bg) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  transition: background .18s ease, box-shadow .18s ease, transform .08s ease;
}
#listing .item:hover{
  background: var(--card-bg-hover) !important;
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
/* 选中/聚焦态：更明确的边界反馈 */
#listing .item:focus,
#listing .item.selected{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.32) inset, var(--card-shadow-hover);
}
/* 避免子元素白底盖住透明 */
#listing .item *{ background: transparent !important; }
/* 缩略图保持原色（个别主题会加滤镜） */
#listing .item .thumb img{ filter: none !important; }

/* ========== 5) 全局卡片（含设置页） ========== */
.card {
  background: var(--card-bg) !important;
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border: 1px solid var(--card-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--card-shadow) !important;
}
.card:hover { box-shadow: var(--card-shadow-hover) !important; }

/* 标题/内容/操作区去掉纯色底，保持玻璃 */
.card .card-title,
.card .card-content,
.card .card-action {
  background: transparent !important;
}

/* 设置页内表单控件去“反白” → 玻璃内槽 */
.card select,
.card input[type="text"],
.card input[type="password"],
.card input[type="email"],
.card .v-text-field .v-field {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: inherit !important;
}
.card input::placeholder { opacity: .75; }

/* 下拉选择去默认凹凸感，自绘“▼” */
.card select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.2em;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.1em) calc(50% - 3px),
    calc(100% - .9em) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ========== 6) 弹窗（vfm）与按钮 ========== */
/* 你的弹窗根是 .vfm--modal（不是 .vfm--in） */
.vfm--modal .card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
}
.vfm--modal .card::before { content: none !important; }

/* 弹窗纵向大按钮（下载格式那一列） */
.vfm--modal .card-content .button.button--block {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  color: inherit !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.vfm--modal .card-content .button.button--block:hover {
  background: rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  transform: translateY(-1px);
}

/* 弹窗底部“确定/取消”等行动按钮 */
.vfm--modal .card-action .button,
.vfm--modal .card-action .btn {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16) !important;
}
.vfm--modal .card-action .button:hover,
.vfm--modal .card-action .btn:hover {
  background: rgba(255,255,255,.22) !important;
}

/* ========== 7) 顶部/右侧工具区的按钮：统一轻玻璃 ========== */
header .actions .button,
.toolbar .actions .button,
.pathbar .actions .button,
.info-bar .actions .button,
.breadcrumbs .actions .button,
.actions .btn,
.actions .v-btn {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  color: inherit !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.14) !important;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
header .actions .button:hover,
.toolbar .actions .button:hover,
.pathbar .actions .button:hover,
.info-bar .actions .button:hover,
.breadcrumbs .actions .button:hover,
.actions .btn:hover,
.actions .v-btn:hover {
  background: rgba(255,255,255,.22) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20) !important;
  transform: translateY(-1px);
}

/* ========== 8) 登录页：单独壁纸 + 宽标题/玻璃卡片 + 无反白 ========== */
#login{
  position: relative; min-height: 82vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3vh 16px; background: transparent !important;
}
/* 登录页壁纸（仅登录页生效） */
#login::before{
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(255,255,255,.25), rgba(255,255,255,.25)),
    url("/branding/img/blue.png") center/cover no-repeat fixed;  /* 替换为你的登录壁纸 */
  filter: saturate(110%);
}
/* 登录卡片 */
#login form[action*="/api/login"]{
  width: 100%; max-width: 880px; margin: 0 auto;
  padding: 22px 24px !important;
  background: rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
/* 登录标题（默认单行，小屏可换行） */
#login h1{
  margin: 12px 0 16px; text-align: center; font-weight: 800; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(92vw, 880px);
  font-size: clamp(28px, 5vw, 48px);
  text-shadow: 0 2px 6px rgba(0,0,0,.12);
}
/* 登录输入：玻璃内槽，去反白 */
#login input{
  background: rgba(255,255,255,.36) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 12px !important;
  box-shadow: none !important; color: inherit !important;
}
#login .v-field__overlay, #login .v-field__outline, #login .v-field__loader{
  background: transparent !important; opacity: 0 !important; box-shadow: none !important;
}
#login .v-field--focused{ background: transparent !important; }
/* 小屏适配 */
@media (max-width: 720px){
  #login h1{ white-space: normal; }
  #login form[action*="/api/login"]{ max-width: 92vw; }
}

/* ========== 9) 退化策略（Firefox 无 backdrop-filter） ========== */
@-moz-document url-prefix(){
  .v-app-bar .v-toolbar__content,
  .breadcrumbs, .breadcrumb, .pathbar, .info-bar,
  .menu, .dropdown-menu, .v-menu__content,
  .dialog, .v-dialog .v-card, .modal, .modal-content,
  #login form[action*="/api/login"]{
    background: rgba(255,255,255,.45) !important; /* 用半透明替代模糊 */
  }
}

/* ========== 弹窗背板（overlay）去暗 / 调亮 / 玻璃化 ========== */
/* 方案 A：微暗 + 轻模糊（默认更柔和，不压画面） */
:root{
  --modal-dim: .10;      /* 0 = 不变暗；0.10 ~ 0.20 轻微变暗 */
  --modal-blur: 2px;     /* 背景轻模糊，0 关掉 */
}
.vfm--modal .vfm__overlay{
  background: rgba(0,0,0,var(--modal-dim)) !important;
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(110%);
  backdrop-filter: blur(var(--modal-blur)) saturate(110%);
}

/* 方案 B：完全透明（不想任何变暗就打开它，注释掉方案 A 即可） */
/*
.vfm--modal .vfm__overlay{
  background: transparent !important;
  backdrop-filter: none !important;
}
*/

/* 方案 C：玻璃亮背板（不变暗，反而稍提亮） */
/*
.vfm--modal .vfm__overlay{
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}
*/

/* 兼容其它库可能的遮罩类（如果你看到还会变暗，可一起覆盖） */
.v-overlay__scrim,        /* Vuetify 3 */
.modal-backdrop,          /* Bootstrap */
.vfm--overlay {           /* 某些版本的别名 */
  background: rgba(0,0,0,var(--modal-dim)) !important;
  -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(110%);
  backdrop-filter: blur(var(--modal-blur)) saturate(110%);
}