/**
 * Alist 自定义主题样式表 - 优化版本
 * 主要功能：自定义Alist文件管理系统的界面样式，支持深浅色模式和响应式设计
 * 优化点：变量分组、选择器简化、代码结构整理、注释增强
 */

/*──────────────────────────────
  🔵 全局变量定义 - 按功能分组
──────────────────────────────*/
:root {
  /* 基础色彩系统 */
  --color-base-bg: 255, 255, 255;         /* 基础背景色 */
  --color-base-text: 0, 0, 0;            /* 基础文本色 */
  
  /* 主题色彩系统 */
  --color-primary: 255, 0, 0;            /* 主色调 - 红色 */
  --color-primary-dark: 200, 0, 0;       /* 深色主色调 */
  --color-bg-opacity: 0.3;               /* 背景透明度 */
  
  /* 派生色彩（已封装为rgba格式） */
  --color-primary-full: rgba(var(--color-primary), 1);        /* 不透明主色 */
  --color-primary-light: rgba(var(--color-primary), 0.2);     /* 浅色主色 */
  --color-bg-overlay: rgba(var(--color-base-bg), var(--color-bg-opacity)); /* 背景覆盖层 */
  
  /* 系统功能色彩（与Hope UI框架集成） */
  --color-info9: var(--color-primary-full);
  --color-info4: var(--color-primary-full);
  --color-info5: rgba(var(--color-primary-dark), 1);
  --color-info11: rgba(var(--color-base-bg), 1);
}

/* 深色模式变量覆盖 */
.hope-ui-dark {
  --color-base-bg: 0, 0, 0;              /* 深色背景 */
  --color-base-text: 255, 255, 255;      /* 深色文本 */
  --color-bg-opacity: 0.3;              
  --color-info9: var(--color-primary-full);
  --color-info4: rgba(var(--color-primary), 0.4);
  --color-info5: rgba(var(--color-primary-dark), 0.4);
  --color-info11: rgba(var(--color-primary-dark), 1);
}

/*──────────────────────────────
  📚 字体资源加载
──────────────────────────────*/
@font-face {
  font-family: "Yozai";                  /* 自定义字体1 */
  src: url("../font/Yozai-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "HYTMR";                  /* 自定义字体2 - 远程加载 */
  src: url("https://npm.elemecdn.com/fontcdn-ariasaka@1.0.0/HYTangMeiRen55W.woff2") format("woff2");
}

/*──────────────────────────────
  🖼️ 背景图与视觉层次设计
──────────────────────────────*/
/** 全屏固定背景图（基础层）*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://forum.ltgjlsw.top/data/attachment/forum/202506/15/universal_background.webp?size=regular);
  z-index: 0;
  filter: blur(3px);                      /* 基础模糊效果 */
}

/* 响应式背景图切换（小屏幕设备）*/
@media screen and (max-width: 960px) {
  body::before {
    background-image: url(https://forum.ltgjlsw.top/data/attachment/forum/202506/15/Alist_vertical_background.webp?type=mobile&size=regular);
  }
}

/* 不同模式下的背景亮度调整 */
body.hope-ui-light::before {
  filter: blur(3px) brightness(0.7);      /* 浅色模式亮度 */
}
body.hope-ui-dark::before {
  filter: blur(3px) brightness(0.3);      /* 深色模式亮度 */
}

/*──────────────────────────────
  🧱 页面结构与布局
──────────────────────────────*/
div#root {
  position: relative;
  z-index: 1;                             /* 内容层优先级 */
}

/* 管理后台容器透明化 */
div#root div.hope-c-PJLV-iiLzBwx-css {
  background: transparent;
}

/* 头部区域样式（导航栏）*/
div#root div.hope-c-PJLV-iiLzBwx-css header,
div#root div.header {
  background-color: var(--color-bg-overlay); /* 半透明背景 */
}
div#root div.header .header-left {
  width: 40px;
  height: 40px;
}
div#root div.header .header-right > button,
div#root div.header svg {
  background: transparent;
  color: var(--color-primary-full);       /* 主色文本 */
}

/*──────────────────────────────
  🎚️ 侧边栏交互样式
──────────────────────────────*/
div.hope-c-PJLV-ibpTetR-css > div:first-child {
  background-color: var(--color-bg-overlay);
}
div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css {
  color: var(--color-base-bg);            /* 背景色文本（深色模式下为黑色）*/
}
div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css {
  color: var(--color-primary-full);
  background-color: var(--color-primary-light); /* 选中项背景 */
}
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css,
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css {
  background: var(--color-bg-overlay);
}

/*──────────────────────────────
  📦 内容卡片与交互效果
──────────────────────────────*/
/** 卡片基础样式与悬停动画 */
.card-base {
  transition: all 0.2s ease-in-out;       /* 统一过渡动画 */
  background: var(--color-bg-overlay);
}
div.hope-c-PJLV-ibpTetR-css div.hope-c-PJLV-ijycFhp-css div.hope-c-PJLV-iiBrJnl-css,
div.hope-c-PJLV-ibpTetR-css div.hope-c-PJLV-ijycFhp-css div.hope-c-PJLV-iiVJRSE-css {
  composes: card-base;                    /* 复用卡片基础样式 */
}
div.hope-c-PJLV-ibpTetR-css div.hope-c-PJLV-ijycFhp-css div.hope-c-PJLV-iiBrJnl-css:hover,
div.hope-c-PJLV-ibpTetR-css div.hope-c-PJLV-ijycFhp-css div.hope-c-PJLV-iiVJRSE-css:hover {
  border-color: rgba(var(--color-primary), 0.7); /* 悬停时边框变色 */
}

/*──────────────────────────────
  📝 表单组件与状态样式
──────────────────────────────*/
/** 输入字段基础样式 */
.form-field-base {
  background-color: rgba(var(--color-base-bg), 0.2);
  transition: all 0.2s ease;
}
.hope-c-kvTTWD-hYRNAb-variant-filled {
  composes: form-field-base;
}
.hope-c-kvTTWD-hYRNAb-variant-filled:hover,
.hope-c-kvTTWD-hYRNAb-variant-filled:focus {
  background-color: rgba(var(--color-base-bg), 0.7);
  border-color: rgba(var(--color-primary), 0.5);
}

/** 开关组件样式 */
.switch-base {
  color: rgba(var(--color-primary), 0.5);
  background-color: rgba(var(--color-base-bg), 0.2);
  transition: all 0.2s ease;
}
.hope-c-mHASU-byiOue-variant-filled {
  composes: switch-base;
}
.hope-c-mHASU-byiOue-variant-filled[data-checked] {
  background-color: currentcolor;         /* 选中时使用文本色作为背景 */
}
.hope-c-mHASU-byiOue-variant-filled[data-focus] {
  box-shadow: 0 0 0 3px var(--color-primary);
  border-color: var(--color-primary);
}

/*──────────────────────────────
  📃 内容展示区域
──────────────────────────────*/
div#root div.body {
  min-height: calc(100vh - 102px);        /* 计算高度以适配头部 */
}

/* 导航栏样式 */
div#root div.body nav.nav {
  color: #fff;
  background: transparent;
}
div#root div.body nav.nav::after {
  background-color: transparent;
}

/* 列表容器样式（带滚动条美化）*/
div#root div.body div.obj-box {
  background-color: var(--color-bg-overlay);
  min-height: 300px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  backdrop-filter: blur(5px);             /* 毛玻璃效果 */
}
/* 自定义滚动条 */
div#root div.body div.obj-box::-webkit-scrollbar {
  width: 4px;
  transition: all 0.3s ease-in-out;
}
div#root div.body div.obj-box::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 8px;
  transition-duration: 150ms;
  background: rgba(var(--color-base-text), 0.15);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--color-primary), 0.4);
}

/* Markdown内容样式 */
.markdown-body {
  font-family: inherit !important;
}
.markdown-body > ul > li::marker {
  color: var(--color-primary-full);       /* 列表标记使用主色 */
}

/*──────────────────────────────
  🛠️ 工具栏与辅助组件
──────────────────────────────*/
div#root div.body div.hope-c-PJLV-ieGWMbI-css {
  background-color: var(--color-bg-overlay);
}
div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css {
  background-color: rgba(var(--color-primary), 0.7);
}
div#root div.body svg {
  color: rgba(var(--color-primary));
}

/* 底部区域隐藏 */
div#root div.footer {
  display: none;
}

/* 工具栏样式 */
.toolbar-base {
  z-index: 1;
  background-color: rgba(var(--color-base-bg), 0.8);
  transition: all 0.2s ease;
}
div.left-toolbar-box div.left-toolbar {
  composes: toolbar-base;
}
div.left-toolbar-box div.left-toolbar svg.hope-icon,
div.left-toolbar-box svg.hope-icon {
  color: rgba(var(--color-primary));
}
div.left-toolbar-box div.left-toolbar svg.hope-icon:hover,
div.left-toolbar-box svg.hope-icon:hover {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--color-primary));
}

/* 返回顶部按钮 */
div.hope-c-PJLV-ihMpUpe-css {
  background-color: rgba(var(--color-primary)) !important;
}

/* 提示框样式 */
div.hope-tooltip {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(var(--color-primary), 1);
}

/*──────────────────────────────
  🔒 登录页定制样式
──────────────────────────────*/
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifJliWT-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-igjRXTJ-css {
  display: none;                          /* 隐藏不必要元素 */
}
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ibiABng-css,
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css {
  background-color: transparent;
}
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css {
  background-color: rgba(var(--color-base-bg), 0.5);
  backdrop-filter: blur(5px);
}


/*──────────────────────────────
  🧹 杂项优化与隐藏规则
──────────────────────────────*/
/* 隐藏外层容器背景 */
.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ijMezfq-css {
  background: none !important;
}

/* 隐藏键盘快捷键提示 */
.hope-stack .hope-kbd {
  display: none !important;
}

/* 搜索按钮样式优化 */
.hope-c-PJLV-ijMezfq-css {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 模态框玻璃态效果 */
.hope-modal__content {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* 工具栏容器 */
div.left-toolbar-box,
div.center-toolbar {
  z-index: 1;
}

/* 工具栏内容 - 确保背景透明 */
div.left-toolbar-box div.left-toolbar {
  background-color: transparent !important; /* 强制透明背景 */
}

/* 图标基础样式 */
div.left-toolbar-box div.left-toolbar svg.hope-icon,
div.left-toolbar-box svg.hope-icon {
  color: var(--color-primary-full);
  display: inline-flex; /* 使用 flex 更好地居中图标 */
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
  position: relative; /* 为伪元素定位 */
}

/* 图标 hover 效果 - 使用伪元素实现背景而不影响布局 */
div.left-toolbar-box div.left-toolbar svg.hope-icon:hover::before,
div.left-toolbar-box svg.hope-icon:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-primary-full);
  border-radius: 4px;
  z-index: -1;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s;
}

div.left-toolbar-box div.left-toolbar svg.hope-icon:hover,
div.left-toolbar-box svg.hope-icon:hover {
  color: white !important;
}

div.left-toolbar-box div.left-toolbar svg.hope-icon:hover::before,
div.left-toolbar-box svg.hope-icon:hover::before {
  opacity: 1; /* 悬停时显示 */
}

/* 确保图标本身的背景始终透明 */
div.left-toolbar-box svg.hope-icon * {
  background-color: transparent !important;
}

/* 深色模式适配 */
.hope-ui-dark div.left-toolbar-box div.left-toolbar svg.hope-icon,
.hope-ui-dark div.left-toolbar-box svg.hope-icon {
  color: var(--color-primary-full);
}

/* 隐藏通知列表 */
.hope-notification__list {
  display: none !important;
}

/* 游客登陆 */
.hope-c-PJLV-ifjOQLV-css > .hope-c-ivMHWx {
  display: none !important;
}


/* 登录页专用背景图 */
body:has(.hope-c-PJLV-ibcBsNO-css)::before {
  background-image: url(https://forum.ltgjlsw.top/data/attachment/forum/202506/15/Alist_lock.webp?size=regular) !important;
}


/* 登录页响应式背景 */
@media screen and (max-width: 960px) {
  body:has(.hope-c-PJLV-ibcBsNO-css)::before {
    background-image: url(https://forum.ltgjlsw.top/data/attachment/forum/202506/15/Alist_vertical_lock_background.webp?type=mobile&size=regular) !important;
  }
}