/**
 * main.css - 夸克自动转存 WebUI 样式文件
 * 整合了所有 WebUI 的样式，包括 index.html、login.html 和 dashboard.css 中的样式
 */

/* --------------- 基础样式 --------------- */
body {
  font-size: 1rem;
  padding-bottom: 110px;
  color: var(--dark-text-color);
}

/* 登录页面样式 */
body.login-page {
  background: linear-gradient(135deg, #b2c8ff 0%, #739aff 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .container-fluid {
    padding-right: 5px;
    padding-left: 5px;
  }
}

@media (min-width: 769px) {
  .container-fluid {
    padding-right: 5px;
    padding-left: 5px;
  }
  /* 减少列padding */
  .row > [class*="col-"] {
    padding-right: 10px;  /* 默认是15px */
    padding-left: 10px;   /* 默认是15px */
  }
  
  /* 同时调整row的负margin以保持对齐 */
  .row {
    margin-right: -10px;
    margin-left: -10px;
  }
}

/* 页面宽度模式 - 窄 */
.page-width-narrow .container-fluid {
  max-width: 1440px !important;
  margin: 0 auto;
}

/* 页面宽度模式 - 中 */
.page-width-medium .container-fluid {
  max-width: 1680px !important;
  margin: 0 auto;
}

/* 页面宽度模式 - 宽 */
.page-width-wide .container-fluid {
  max-width: 2160px !important;
  margin: 0 auto;
}

/* --------------- 通用工具类 --------------- */
.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding-right: 25px;
}

.position-relative {
  position: relative;
}

/* --------------- Toast 通知组件 --------------- */
.toast-container-center {
  position: fixed;
  top: 91.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: auto;
  max-width: 80%;
  pointer-events: none;
}

.toast-custom {
  min-width: 120px;
  background-color: var(--focus-border-color);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 6px;
  margin: 0 auto;
  width: fit-content;
}

.toast-body-custom {
  text-align: center;
  padding: 1rem 1.2rem;
  color: #fff;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --------------- 底部按钮 --------------- */
.bottom-buttons {
  z-index: 99;
  position: fixed;
  left: 50%;
  bottom: 20px;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  transform: translateX(-50%);
}

.bottom-buttons button {
  border-radius: 50%;
  margin: 0 10px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: none;
}

/* --------------- 标题和内容布局 --------------- */
.title {
  margin-top: 30px;
  margin-bottom: 10px;
}

/* 缩小p标签之间的行距 */
.row.title + p {
  margin-bottom: 2px;
}

/* --------------- 系统配置页面标题样式 --------------- */
/* 系统配置页面标题容器样式 */
main .row.title {
  margin-top: 20px;
  margin-bottom: 6.5px;
  padding-left: 0px; /* 不使用padding，因为不能有负值 */
  margin-left: -15px; /* 添加负边距向左移动2px */
}

/* 系统配置页面标题文字样式 */
main .row.title h2 {
  font-size: 1.25rem !important; /* 标题字体大小 */
  font-weight: 500; /* 字体加粗 */
  color: var(--dark-text-color); /* 使用统一的文本颜色变量 */
  margin-bottom: 0;
  margin-top: 0;
  line-height: 1.5;
  padding-left: 0px; /* 标题文字左内边距 */
}

/* 标题旁边的问号图标容器样式 */
main .row.title .badge {
  margin-left: -2px;
  vertical-align: middle;
  background-color: transparent !important; /* 移除背景色 */
  padding: 0 !important; /* 移除内边距 */
  border: none !important; /* 移除边框 */
}

/* 标题旁边的问号图标链接样式 */
main .row.title .badge a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: inherit;
  padding: 2px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

/* 问号图标链接悬停状态 */
main .row.title .badge a:hover {
  text-decoration: none !important;
}

/* 问号图标链接悬停并聚焦状态 */
main .row.title .badge a:hover,
main .row.title .badge a:focus {
  outline: none;
}

/* 标题旁边的问号图标样式 */
main .row.title .bi-question-circle {
  font-size: 0.9rem;
  color: var(--focus-border-color);
  opacity: 1;
  position: relative;
  top: -6.5px;
  transition: color 0.2s, opacity 0.2s;
}

/* 问号图标悬停状态 */
main .row.title .badge a:hover .bi-question-circle {
  color: var(--dark-text-color);
  opacity: 1;
}

/* 系统配置页面第一个标题的上边距特殊处理 */
main div[v-if="activeTab === 'config'"] .row.title:first-child {
  margin-top: 20px;
}

/* --------------- 导航栏样式 --------------- */
.navbar-title {
  margin-left: -2px; /* 将导航栏标题"夸克自动转存"向左移动2px */
}

/* 导航栏样式 */
.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
  height: 54px;
  display: flex;
  align-items: center;
  transition: none; /* 禁用动画效果 */
}

.navbar .navbar-toggler {
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: none;
}

/* 云朵图标在不同状态下的位置调整 */
.navbar-brand i.bi-clouds {
  display: inline-flex;
  align-items: center;
  margin-right: 5px; /* 展开状态下右移主标题夸克自动转存 */
  position: relative;
  right: 2px; /* 展开状态下右移云朵图标 */
  top: 0; /* 向上移动3px修复偏移问题 */
  transition: none; /* 禁用动画效果 */
  font-size: 1.624rem; /* 添加云朵图标的大小设置 */
}

/* --------------- 侧边栏样式 --------------- */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 54px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .088);
  transition: none; /* 禁用动画效果 */
  overflow-x: hidden; /* 防止水平滚动条 */
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 54px);
  padding-top: 20px; /* 侧边栏顶距 */
  overflow-x: hidden;
  overflow-y: auto;
  transition: none; /* 禁用动画效果 */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-size: medium;
  color: var(--dark-text-color);
  padding: 8px 7px;
  height: 32px; /* 侧边栏菜单项高度 */
  line-height: 22px;
  display: flex;
  align-items: center;
  transition: none; /* 禁用动画效果 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* 添加导航菜单项之间的间距 */
.sidebar .nav-item {
  margin-bottom: 8px; /* 增加菜单项之间的间距 */
}

.sidebar .nav-link:hover {
  background-color: #e6f1ff; /* 导航悬停背景颜色 */
}

.sidebar .nav-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-left: 7px;
  width: 20px;
  transition: none; /* 禁用动画效果 */
  position: static; /* 保持在固定位置，不要使用相对定位 */
}

.sidebar .nav-link.active {
  background-color: #0D53FF;
  color: white !important;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/* --------------- 侧边栏折叠样式 --------------- */
.nav-text {
  transition: none; /* 禁用动画效果 */
  white-space: nowrap;
  opacity: 1;
}

.sidebar-collapsed {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
  overflow-x: hidden;
  transition: none; /* 禁用动画效果 */
}

.sidebar-collapsed .nav-text {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

.collapse-text {
  transition: none; /* 禁用动画效果 */
  white-space: nowrap;
  opacity: 1;
}

.sidebar-collapsed .collapse-text {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

.sidebar-collapsed .nav-text, 
.sidebar-collapsed .collapse-text {
  display: block; /* 改用opacity控制而不是display:none，避免跳动 */
  visibility: hidden;
  max-width: 0;
}

.sidebar-collapsed + main {
  max-width: calc(100% - 54px) !important;
  flex: 0 0 calc(100% - 54px) !important;
  transition: none; /* 禁用动画效果 */
}

/* 当侧边栏折叠时调整导航标题宽度 */
.sidebar-collapsed-navbar-brand {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  flex: 0 0 54px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center;
  transition: none; /* 禁用动画效果 */
  height: 54px !important; /* 保持导航栏高度一致 */
}

.sidebar-collapsed-navbar-brand i.bi-clouds {
  right: 0; /* 折叠状态下额外右移，总共成为0 */
  top: 0; /* 云朵图标与展开状态保持一致高度 */
  margin-right: 0;
  margin-left: 0;
}

.sidebar-collapsed-navbar-brand .navbar-title {
  display: none;
}

.sidebar-collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  width: 100%;
}

.sidebar-collapsed .nav-link i {
  margin-right: 0;
  margin-left: 0;
  transform: translateX(0); /* 确保图标在收起状态下没有位移 */
}

/* 底部GitHub图标在折叠状态下的调整 */
.sidebar-collapsed .text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 设置导航栏最大宽度为188px，超过后不再增长 */
@media (min-width: 768px) {
  #sidebarMenu.col-md-2,
  .navbar-brand.col-md-2 {
    max-width: 184px;
    flex: 0 0 184px;
  }
  
  main.col-md-10 {
    max-width: calc(100% - 184px);
    flex: 0 0 calc(100% - 184px);
  }
}

/* 底部链接样式 */
.bottom-links {
  position: absolute;
  bottom: 20px;
  width: 100%;
}

.bottom-links .nav-flex-column {
  margin-bottom: 0;
}

.bottom-links .nav-item {
  margin-bottom: -8px;
}

.bottom-links .nav-item + .nav-item {
  margin-top: 0; /* 底部链接项之间的间距，调整这个值可以改变两个链接之间的垂直间距 */
}

.bottom-links .nav-link {
  color: var(--dark-text-color);
  transition: none; /* 禁用动画效果 */
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.bottom-links .nav-link:hover {
  color: #0D53FF;
  background-color: transparent;
}

/* 侧边栏折叠相关功能只在大尺寸屏幕上启用 */
@media (max-width: 767.98px) {
  .sidebar-collapsed {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    flex: auto !important;
  }
  
  .sidebar-collapsed + main {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  .sidebar-collapsed-navbar-brand {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    flex: auto !important;
  }
  
  .sidebar-collapsed .nav-text,
  .sidebar-collapsed .collapse-text {
    display: block;
    visibility: visible;
    opacity: 1;
    width: auto;
    max-width: none;
  }
  
  .sidebar-collapsed .nav-link {
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
  }
  
  .sidebar-collapsed .nav-link i {
    margin-right: 8px;
    margin-left: 0;
    width: 20px;
  }
  
  /* 移动设备下底部链接的样式 */
  .sidebar-collapsed .bottom-links .nav-text {
    display: block;
    visibility: visible;
    opacity: 1;
    width: auto;
    max-width: none;
  }
  
  .sidebar-collapsed .bottom-links .nav-link {
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
  }
  
  .sidebar-collapsed .nav-item,
  .sidebar-collapsed .bottom-links .nav-item {
    width: 100%;
    display: block;
  }
  
  /* 确保导航栏高度足够 */
  .navbar {
    min-height: 54px;
  }

  .sidebar-collapsed .sidebar-sticky,
  .sidebar-collapsed .nav.flex-column {
    display: block;
    align-items: initial;
  }
}

/* --------------- 顶部操作按钮样式 --------------- */
/* 顶部操作按钮容器 */
.navbar-actions {
  display: flex;
  position: absolute;
  height: 54px;
  align-items: center;
}

/* 变量定义 - 颜色 */
:root {
  /* Bootstrap 导航栏背景色 */
  --navbar-bg-color: #343a40;
  /* 移动端导航栏覆盖颜色 - 黑色半透明 */
  --navbar-mobile-overlay: rgba(0, 0, 0, 0.5);
}

/* 顶部操作按钮样式 */
.navbar-action-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 6px 0 !important;
  text-align: center !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  border: 1px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
  color: #fff !important;
  transition: all 0.2s !important;
}

/* 桌面端按钮的悬停状态样式 */
@media (min-width: 768px) {
  .navbar-action-btn:hover {
    background-color: #fff !important;
    color: var(--navbar-bg-color) !important;
    border-color: #fff !important;
  }
  
  /* 确保按钮内图标颜色也随之变化 */
  .navbar-action-btn:hover i {
    color: var(--navbar-bg-color) !important;
  }
}

/* 移动端按钮的悬停状态样式 */
@media (max-width: 767.98px) {
  .navbar-action-btn:hover {
    background-color: #fff !important;
    color: #272b30 !important;
    border-color: #fff !important;
  }
  
  /* 确保按钮内图标颜色也随之变化 */
  .navbar-action-btn:hover i {
    color: #272b30 !important;
  }
}

/* 激活和焦点状态保持默认样式 */
.navbar-action-btn:active,
.navbar-action-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 移动模式下的菜单按钮位置 */
@media (max-width: 767.98px) {
  .navbar-actions {
    right: 52px; /* 菜单按钮宽度(32px) + 间距(8px) */
    flex-direction: row;
  }
  
  /* 确保在移动设备上隐藏页面宽度按钮 */
  .navbar-action-btn.d-none.d-md-inline-block {
    display: none !important;
  }
}

/* 桌面模式下的按钮位置 */
@media (min-width: 768px) {
  .navbar-actions {
    right: 12px; /* 与移动模式下保持一致的边距 */
  }
}

/* 覆盖Bootstrap和dashboard.css中的默认样式 */
.navbar .navbar-toggler.navbar-toggler-square {
  border: 1px solid #fff !important;
}

/* 确保响应式类正常工作 */
@media (min-width: 768px) {
  button.navbar-toggler.navbar-toggler-square.position-absolute.d-md-none {
    display: none !important;
  }
  .d-md-none {
    display: none !important;
  }
}

/* 添加移动端菜单按钮的悬停样式 */
@media (max-width: 767.98px) {
  .navbar-toggler-square:hover {
    background-color: #fff !important;
    color: #272b30 !important;
    border-color: #fff !important;
  }
  
  /* 确保按钮内图标颜色也随之变化 */
  .navbar-toggler-square:hover i {
    color: #272b30 !important;
  }
}

/* 修改菜单按钮的基础样式 - 始终使用透明背景和白色图标（默认折叠状态） */
.navbar-toggler-square {
  width: 32px !important;
  height: 32px !important;
  padding: 6px 0 !important;
  text-align: center !important;
  border-radius: 6px !important;
  position: absolute !important;
  right: 20px !important; /* 右边距 */
  background-color: transparent !important;
  border: 1px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.1s !important; /* 缩短过渡效果时间，使恢复更快 */
  color: #fff !important;
}

/* 确保菜单按钮图标的基础样式 */
.navbar-toggler-square i {
  color: #fff !important;
  font-size: 1.3rem;
  position: relative;
  top: 0.5px; /* 向下微调1px使图标居中 */
  transition: color 0.1s !important; /* 缩短过渡效果时间，使恢复更快 */
}

/* 添加移动端菜单按钮的激活和聚焦样式 - 仅在按下时生效 */
.navbar-toggler-square:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: #fff !important;
  color: #272b30 !important;
  border-color: #fff !important;
}

/* 确保按钮按下状态下图标颜色也随之变化 */
.navbar-toggler-square:active i {
  color: #272b30 !important;
}

/* 移除焦点状态的特殊样式，使其与默认状态一致 */
.navbar-toggler-square:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 在桌面模式下明确隐藏菜单按钮 */
@media (min-width: 768px) {
  .navbar-toggler-square {
    display: none !important;
  }
}

/* 自定义菜单按钮图标样式 */
.menu-icon {
  position: relative;
  width: 20px;
  height: 16px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}

/* --------------- 按钮样式 --------------- */
/* 系统配置页面中添加和删除按钮的符号样式 */
.config-page-btn-symbol {
  font-size: 20px;
  font-weight: bold;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: static;
}

/* 将添加和删除按钮设为正方形 */
.btn-outline-primary,
.btn-outline-danger {
  width: 32px;
  height: 32px;
  padding: 0;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 筛选按钮设为正方形 */
.filter-btn-square {
  width: 32px;
  height: 32px;
  padding: 0;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* X图标的样式 */
.bi-x-lg {
  color: var(--dark-text-color);
  font-size: 1.05rem;
}

/* 文件夹图标样式 */
.bi-folder {
  color: var(--dark-text-color);
  font-size: 1.01rem;
  position: relative;
  top: 0.5px;
}

/* 重置文件夹图标样式 */
.bi-folder-x {
  font-size: 1.01rem;
  position: relative;
  top: 0.5px;
}

/* 恢复图标样式 */
.bi-reply {
  color: var(--dark-text-color);
  font-size: 1.16rem;
  position: relative;
  top: -1.5px;
}

/* 调整下拉选择框的内边距，使文本与输入框占位符位置一致 */
select.form-control {
  padding: 0 8px !important; /* 移除右侧额外空间，图标已经用DOM实现 */
  text-indent: 0 !important; 
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important; /* 移除默认的背景图像 */
}

/* 下拉箭头图标样式 */
.select-arrow {
  font-size: 1.15rem !important; /* 稍微调小一点 */
  right: 7.5px !important; /* 向右调整 */
  top: calc(50% - 0.5px) !important; /* 微调上下位置，使其更精确垂直居中 */
  transform: translateY(-50%) !important; /* 确保垂直居中 */
}

/* 确保任务筛选下拉框中的文本垂直居中显示 */
.task-filter-select {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  padding-left: 8px !important;
  text-indent: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  border-top-left-radius: 0 !important; /* 移除左上角圆角 */
  border-bottom-left-radius: 0 !important; /* 移除左下角圆角 */
  border-top-right-radius: 0 !important; /* 移除右上角圆角 */
  border-bottom-right-radius: 0 !important; /* 移除右下角圆角 */
}

/* 为确保输入组中select元素的边角正确 */
.input-group-prepend + div > select.form-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* 下拉框选项的垂直居中 */
.task-filter-select option {
  padding: 8px !important;
  line-height: 1.5 !important;
}

/* 搜索图标样式 */
.bi-search {
  color: var(--dark-text-color);
  font-size: 0.98rem;
}

/* 链接图标样式 */
.bi-link-45deg {
  color: var(--dark-text-color);
  font-size: 1.2rem;
  position: relative;
  top: 0.5px;
}

/* 谷歌图标样式 */
.bi-google {
  color: var(--dark-text-color);
  font-size: 0.95rem;
}

/* 日历图标样式 */
.bi-calendar3 {
  color: var(--dark-text-color);
  font-size: 0.9rem;
}

/* TMDB图标和豆瓣图标样式 */
.tmdb-icon {
  width: 1.07rem;
  height: auto;     /* 保持图标等比缩放 */
  filter: brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(1%) hue-rotate(181deg) brightness(95%) contrast(86%); /* 使SVG图标颜色为var(--dark-text-color)，即#404040 */
}

.douban-icon {
  width: 1rem;   /* 18.4px equivalent */
  height: auto;     /* 保持图标等比缩放 */
  filter: brightness(0) saturate(100%) invert(23%) sepia(0%) saturate(1%) hue-rotate(181deg) brightness(95%) contrast(86%); /* 使SVG图标颜色为var(--dark-text-color)，即#404040 */
}

.input-group-text:has(.tmdb-icon):hover img,
.input-group-text:has(.douban-icon):hover img {
  filter: brightness(0) invert(1); /* 将SVG图标转换为白色 */
}

/* 图标按钮悬停样式 */
.btn-outline-secondary:hover .bi-x-lg,
.btn-outline-secondary:hover .bi-folder,
.btn-outline-secondary:hover .bi-search,
.btn-outline-secondary:hover .bi-link-45deg,
.btn-outline-secondary:hover .bi-google,
.btn-outline-secondary:hover .bi-calendar3,
.btn-outline-secondary:hover .bi-eye,
.btn-outline-secondary:hover .bi-eye-slash,
.btn-outline-secondary:hover .bi-reply,
.btn-primary:hover .bi-search,
.input-group-text:hover .bi-google,
.input-group-text:hover .bi-link-45deg,
.input-group-text:hover .tmdb-icon,
.input-group-text:hover .douban-icon {
  color: #fff;
}

/* 按钮基本样式 */
.btn-outline-secondary {
  border-color: var(--dark-text-color);
  color: var(--dark-text-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

/* 带图标的按钮样式（正方形） */
.btn-outline-secondary:has(i.bi),
.filter-btn-square,
.input-group-append .btn:has(i.bi):not(.btn-primary),
.input-group-prepend .btn:has(i.bi):not(.btn-primary) {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* 按钮悬停时的背景色 */
.btn-outline-secondary:hover {
  background-color: var(--dark-text-color);
  border-color: var(--dark-text-color);
}

/* 添加按钮点击时的背景色，使其与悬停状态一致 */
.btn-outline-secondary:active {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

/* X按钮特殊样式 */
.btn-outline-secondary:has(.bi-x-lg) {
  box-shadow: none !important;
  transition: background-color 0.15s, box-shadow 0.05s;
}

.btn-outline-secondary:has(.bi-x-lg):hover {
  box-shadow: none !important;
}

.btn-outline-secondary:has(.bi-x-lg):focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-outline-secondary:has(.bi-x-lg):active {
  box-shadow: none !important;
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
  transition: all 0.15s ease-out;
}

/* 确保X按钮点击后恢复到原始状态 */
.btn-outline-secondary:has(.bi-x-lg):not(:hover):not(:active) {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
  transition: background-color 0.15s ease-out;
}

/* 带文本的按钮样式 */
.btn-outline-secondary:not(:has(i.bi)) {
  padding: 0 8px;
  height: 32px;
}

/* 确保按钮组中的按钮高度一致 */
.input-group-append .btn,
.input-group-prepend .btn {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 修改搜索按钮样式，与其他按钮统一 */
.btn-primary:has(.bi-search) {
  background-color: transparent;
  border-color: var(--dark-text-color);
  color: var(--dark-text-color);
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:has(.bi-search):hover {
  background-color: var(--dark-text-color);
  border-color: var(--dark-text-color);
}

/* 修改谷歌和链接图标的容器样式 */
.input-group-text:has(.bi-google),
.input-group-text:has(.bi-link-45deg),
.input-group-text:has(.tmdb-icon),
.input-group-text:has(.douban-icon) {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-group-text:has(.bi-google):hover,
.input-group-text:has(.bi-link-45deg):hover,
.input-group-text:has(.tmdb-icon):hover,
.input-group-text:has(.douban-icon):hover {
  background-color: var(--dark-text-color) !important;
  color: #fff;
}

.input-group-text:has(.bi-google) a,
.input-group-text:has(.bi-link-45deg) a,
.input-group-text:has(.tmdb-icon) a,
.input-group-text:has(.douban-icon) a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 自定义表单控件样式 */
.form-control {
  height: 32px !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  line-height: 1.5;
  color: var(--dark-text-color);
  border-color: var(--border-color) !important; /* 使用变量替代硬编码颜色 */
  font-size: 0.95rem; /* 确保所有输入框字体大小一致 */
  font-weight: normal; /* 标准字重 */
  letter-spacing: normal; /* 标准字间距 */
}

textarea.form-control {
  height: auto !important;
  line-height: 1.5;
  padding: 8px !important;
}

/* 确保输入组内的控件边角正确 */
.input-group .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* 输入组前缀后缀样式 */
.input-group-text {
  height: 32px;
  border-radius: 6px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  color: var(--dark-text-color);
  border-color: var(--border-color) !important; /* 使用变量替代硬编码颜色 */
  background-color: #ededf0!important; /* 修改背景色为更浅的灰色 */
  border-width: 1px !important; /* 确保边框宽度为1px */
}

.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 1px !important; /* 确保右侧边框宽度为1px */
}

/* 处理正则命名标签与前一个输入框的边框重叠 */
.input-group input + .input-group-prepend .input-group-text {
  margin-left: -1px; /* 向左移动1px，使边框重叠 */
}

.input-group-append .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 输入组内按钮样式 */
.input-group-append .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group-prepend .btn:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* --------------- 转存记录展开按钮样式 --------------- */
.expand-button {
  position: absolute;
  right: 5px;
  top: 11px; /* 固定位置，不再使用百分比定位 */
  transform: none; /* 移除垂直居中转换 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* 保留阴影效果 */
  z-index: 2; /* 保留更高的层级 */
}

.position-relative:hover .expand-button {
  opacity: 1;
}

.expanded-text {
  white-space: normal;
  word-break: break-all;
  display: block; /* 确保展开的内容是块级元素 */
  line-height: 24px !important; /* 与表头保持一致的行高 */
  margin-top: 0; /* 移除顶部边距 */
  margin-bottom: 0; /* 移除底部边距 */
  position: relative; /* 确保定位准确 */
  padding-right: 25px; /* 为展开按钮预留空间 */
}

.expand-button .bi {
  font-size: 0.7em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* --------------- 表格样式 --------------- */
.table-responsive {
  overflow-x: auto;
}

/* 表头样式调整 */
.table thead th,
table.table thead th {
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color) !important; /* 修改底部边框为1px */
  border-top: 1px solid var(--border-color) !important; /* 添加上边框线 */
  padding: 8px 9px !important; /* 统一表头内边距 */
  background-color: var(--button-gray-background-color) !important; /* 表头背景色 */
  color: var(--dark-text-color) !important; /* 表头文字颜色 */
  height: 40px !important; /* 确保表头高度为40px */
  line-height: 24px !important; /* 设置行高以确保文字垂直居中 */
  box-sizing: border-box !important; /* 确保边框包含在总高度内 */
}

/* 表头悬停样式 */
.table thead th.cursor-pointer:hover {
  background-color: #f7f7fa; /* 表头悬停背景色 */
}

/* 表格单元格样式 */
.table td {
  vertical-align: middle !important; /* 统一使用垂直居中对齐 */
  height: 40px !important; /* 与表头保持一致的高度 */
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 9px !important; /* 统一单元格内边距 */
  border-bottom: 1px solid var(--border-color); /* 单元格分割线颜色 */
  border-top: none !important; /* 确保没有上边框 */
  box-sizing: border-box !important; /* 确保边框包含在总高度内 */
  line-height: 24px !important; /* 与表头保持一致的行高 */
}

/* 表格行悬停样式 */
.table tbody tr:hover {
  background-color: var(--button-gray-background-color); /* 行悬停背景色 */
}

/* 长文本列的特殊处理 */
.table td.text-wrap {
  white-space: normal;
  word-break: break-word;
}

/* 设置表格单元格中的position-relative样式，以便正确定位内容 */
.table td.position-relative {
  position: relative; /* 确保相对定位生效 */
  padding: 8px 9px !important; /* 保持与其他单元格一致的内边距 */
  vertical-align: top !important; /* 确保内容顶部对齐 */
}

/* 调整text-truncate在表格单元格中的布局 */
.table td .text-truncate {
  display: block; /* 使其成为块级元素 */
  max-width: 100%; /* 确保不超出单元格宽度 */
  padding-right: 25px; /* 为展开按钮留出空间 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px !important; /* 与表头保持一致的行高 */
}

/* --------------- 模态框样式 --------------- */
.modal-dialog {
  max-width: 800px;
}

.modal-body {
  /* 移除max-height限制，允许内容自由扩展 */
  /* max-height: calc(100vh - 200px); */
  overflow-y: auto;
}

/* 修复关闭按钮在点击时显示边框的问题 */
.close:focus,
button.close:focus,
.modal .close:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* --------------- 通用警告框样式 --------------- */
.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
  font-size: 0.95rem;
  padding: 10px 12px;
  padding-left: 11px;
  border-radius: 6px;
  margin-bottom: 0px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  border-width: 1px;
  border-style: solid;
  height: 36px;
  min-height: 36px;
}

/* 任务列表中的警告框样式 */
.task .alert-warning {
  font-size: 0.95rem;
  margin-top: 0;
  margin-bottom: 8px;
  margin-left: 3.5px; /* 添加左边距 */
  height: 32px !important; /* 设置固定高度 */
  min-height: 32px !important; 
  max-height: 32px !important; /* 确保不超过指定高度 */
  padding-top: 0 !important; /* 重置顶部内边距 */
  padding-bottom: 0 !important; /* 重置底部内边距 */
  display: flex !important; /* 确保flex布局 */
  align-items: center !important; /* 确保垂直居中 */
  justify-content: center !important; /* 水平居中内容 */
}

/* 警告框中的图标样式 */
.alert-warning .bi-exclamation-circle {
  margin-right: 8px;
  font-size: 1rem;
  color: #856404;
}

/* 任务列表中的警告按钮框样式 */
.task .btn-warning {
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  border: 1px solid #ffc107 !important;
}

/* 任务列表中的警告按钮图标样式 */
.task .btn-warning .bi-exclamation-circle {
  font-size: 1.04rem;
  color: #ffc107 !important;
  margin-right: 0;
}

.task .btn-warning:hover {
  background-color: #ffe8a1;
  border-color: #ffd97e;
  color: #856404;
}

/* 确保禁用状态的按钮样式正确 */
.task .btn-warning:disabled {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
  opacity: 1;
}

/* 添加定位样式以确保警告图标正确显示 */
.task .col-auto {
  display: flex;
  align-items: center;
}

/* --------------- 运行日志弹窗样式 --------------- */
/* 运行日志弹窗整体样式 */
#logModal .modal-dialog {
  max-width: 1080px;
  margin: 4rem auto;
  width: calc(100% - 1.25rem); /* 左右各保留1.5rem的最小边距 */
}

#logModal .modal-content {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
}

/* 弹窗头部样式 */
#logModal .modal-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 11px 16px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#logModal .modal-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark-text-color);
  display: flex;
  align-items: center;
}

#logModal .modal-title b {
  font-weight: 500;
}

/* 弹窗关闭按钮 */
#logModal .close {
  font-size: 1.4rem;
  padding: 8px;
  margin: -8px -8px -8px auto;
  opacity: 1;
  color: var(--dark-text-color);
  transition: opacity 0.15s;
}

/* 修改关闭按钮样式，使用 bi-x-lg 图标 */
#logModal .close .bi-x-lg {
  font-size: 1.2rem;
  color: var(--dark-text-color);
  opacity: 1;
  position: relative;
  top: 2px;
  right: -2px; /* 向左移动2px */
}

#logModal .close:hover {
  opacity: 1;
  color: var(--dark-text-color);
}

/* 弹窗主体样式 */
#logModal .modal-body {
  padding: 16px;
  font-size: 0.875rem;
}

/* 运行日志内容样式 */
#logModal pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--dark-text-color);
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* 加载状态图标样式 */
#logModal .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
  margin-left: 5px;
}

/* --------------- 文件选择弹窗样式 --------------- */
/* 文件选择弹窗整体样式 */
#fileSelectModal .modal-dialog,
#createTaskModal .modal-dialog {
  max-width: 1080px;
  margin: 4rem auto;
  width: calc(100% - 1.25rem); /* 左右各保留1.5rem的最小边距 */
}

#fileSelectModal .modal-content,
#createTaskModal .modal-content {
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
}

/* 弹窗头部样式 */
#fileSelectModal .modal-header,
#createTaskModal .modal-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 11px 16px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#fileSelectModal .modal-title,
#createTaskModal .modal-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark-text-color);
  display: flex;
  align-items: center;
}

#fileSelectModal .modal-title b,
#createTaskModal .modal-title b {
  font-weight: 500;
}

/* 弹窗关闭按钮 */
#fileSelectModal .close,
#createTaskModal .close {
  font-size: 1.4rem;
  padding: 8px;
  margin: -8px -8px -8px auto;
  opacity: 1;
  color: var(--dark-text-color);
  transition: opacity 0.15s;
}

/* 修改关闭按钮样式，使用 bi-x-lg 图标 */
#fileSelectModal .close .bi-x-lg,
#createTaskModal .close .bi-x-lg,
.modal .close .bi-x-lg {
  font-size: 1.2rem;
  color: var(--dark-text-color);
  opacity: 1;
  position: relative;
  top: 2px;
  right: -2px; /* 向左移动2px */
}

#fileSelectModal .close:hover,
#createTaskModal .close:hover {
  opacity: 1;
  color: var(--dark-text-color);
}

/* 弹窗主体样式 */
#fileSelectModal .modal-body,
#createTaskModal .modal-body {
  padding: 16px;
  font-size: 0.875rem;
}

/* 创建任务模态框主内容区相对定位 */
#createTaskModal .modal-body {
  position: relative;
}

/* 创建任务模态框主内容区底部分割线 */
#createTaskModal .modal-body::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: var(--border-color);
}

/* 弹窗内警告框样式 */
#fileSelectModal .alert-warning {
  font-size: 0.85rem; /* 保留特定的字体大小 */
}

/* 弹窗内面包屑导航样式 */
#fileSelectModal .breadcrumb {
  background-color: var(--button-gray-background-color);
  border-radius: 0px;
  font-size: 0.85rem;
  padding: 6.5px 12px 6px 12px; /* 上右下左内边距 */
  margin-bottom: 8px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 允许换行 */
}

#fileSelectModal .breadcrumb-item {
  display: flex;
  align-items: center;
  margin-right: 10px; /* 为每个项目添加右边距 */
  position: relative; /* 为伪元素定位提供参考 */
}

/* 移除最后一个项目的右边距 */
#fileSelectModal .breadcrumb-item:last-child {
  margin-right: 0;
}

#fileSelectModal .breadcrumb-item a {
  color: var(--dark-text-color);
  text-decoration: none;
  padding: 0;
}

#fileSelectModal .breadcrumb-item a:hover {
  color: var(--focus-border-color);
  text-decoration: none;
}

#fileSelectModal .breadcrumb-item span {
  padding: 0;
}

/* 首页图标右侧的特定斜杠样式 */
#fileSelectModal .breadcrumb > li:first-child:after {
  content: "/";
  color: var(--dark-text-color);
  position: relative;
  margin: 0 5px;
  top: -1px; /* 调整第一个斜杠的垂直位置 */
  left: 2px; /* 向右微调第一个斜杠的水平位置 */
  margin-right: -9.5px; /* 使用margin-right负值代替padding-right负值 */
}

/* 隐藏Bootstrap默认的::before分隔符 */
#fileSelectModal .breadcrumb-item + .breadcrumb-item::before {
  content: none; /* 禁用默认分隔符 */
  display: none; /* 彻底隐藏元素 */
}

/* 重设分隔符的样式 */
#fileSelectModal .breadcrumb-item:not(:last-child):not(:first-child)::after {
  content: "/";
  color: var(--dark-text-color);
  position: absolute;
  right: -11px; /* 调整位置 */
  margin: 0 auto;
  top: -1px; /* 微调其他斜杠的垂直位置 */
}

#fileSelectModal .breadcrumb-item .bi-house-door {
  font-size: 0.9rem;
  position: relative;
  top: 0px;
  left: 0px;
}

#fileSelectModal .breadcrumb-item.cursor-pointer:hover {
  background-color: transparent; /* 移除面包屑导航中home图标的悬停背景色 */
}

#fileSelectModal .breadcrumb-item .text-muted {
  color: var(--dark-text-color) !important; /* 修改灰色文本颜色为更浅的灰色 */
}

/* 弹窗内表格样式 - 与主界面表格区分 */
#fileSelectModal .table {
  margin-bottom: 0;
  font-size: 0.85rem;
  table-layout: fixed; /* 使用固定表格布局，确保列宽设置生效 */
  width: 100%;
}

#fileSelectModal .table th {
  background-color: var(--button-gray-background-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--dark-text-color);
  font-weight: 600;
  padding: 7px 12.5px 6.5px 12.5px !important; /* 表头上右下左内边距 */
  font-size: 0.85rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  vertical-align: middle; /* 添加：垂直居中对齐 */
  height: 40px !important; /* 添加：自动高度，确保与内容一致 */
}

/* 模态框表格列宽设置 - 基于内容类型 */
/* 文件名列 - 自动占用剩余空间 */
#fileSelectModal .table .col-filename {
  width: auto; /* 自动分配剩余空间 */
  min-width: 230px !important; /* 添加!important确保优先级 */
  flex-shrink: 0; /* 防止在小屏幕上压缩 */
}

/* 重命名列 - 自动占用剩余空间 */
#fileSelectModal .table .col-rename {
  width: auto; /* 自动分配剩余空间 */
  min-width: 230px !important; /* 添加!important确保优先级 */
  flex-shrink: 0; /* 防止在小屏幕上压缩 */
}

/* 大小列 - 固定宽度 */
#fileSelectModal .table .col-size {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

/* 修改日期列 - 固定宽度 */
#fileSelectModal .table .col-date {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

/* 操作列 - 固定宽度 */
#fileSelectModal .table .col-action {
  width: 188px;
  min-width: 188px;
  max-width: 188px;
  text-align: left;
  padding-left: 12px !important;
}

/* 确保单元格内容溢出时正确显示 */
#fileSelectModal .table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 添加模态框表格中的排序箭头样式，与主表格一致 */
#fileSelectModal .table th .bi-arrow-down,
#fileSelectModal .table th .bi-arrow-up {
  font-size: 0.85rem;
  position: relative;
  top: 0px;
  opacity: 1;
  font-weight: normal !important;
}

#fileSelectModal .table td {
  padding: 5.5px 12.5px 7px 12px !important; /* 单元格上右下左内边距 */
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
  color: var(--dark-text-color);
  font-size: 0.85rem;
}

#fileSelectModal .table .text-success {
  color: #28a745 !important;
}

#fileSelectModal .table .text-danger {
  color: #dc3545 !important;
}

#fileSelectModal .table .text-warning {
  color: #098eff !important;
}

/* 弹窗内表格行悬停效果 */
#fileSelectModal .table tr.cursor-pointer:hover {
  background-color: var(--button-gray-background-color);
  cursor: pointer;
}

#fileSelectModal .bi-file-earmark,
#fileSelectModal .bi-file-earmark-play,
#fileSelectModal .bi-file-earmark-music,
#fileSelectModal .bi-file-earmark-image,
#fileSelectModal .bi-file-earmark-text,
#fileSelectModal .bi-file-earmark-richtext,
#fileSelectModal .bi-file-earmark-zip,
#fileSelectModal .bi-file-earmark-font,
#fileSelectModal .bi-file-earmark-code,
#fileSelectModal .bi-file-earmark-pdf,
#fileSelectModal .bi-file-earmark-word,
#fileSelectModal .bi-file-earmark-excel,
#fileSelectModal .bi-file-earmark-ppt,
#fileSelectModal .bi-file-earmark-medical {
  color: var(--dark-text-color);
  font-size: 0.9rem;
  margin-right: 5px;
  position: relative;
  top: 0px !important; /* 负值向上移动，正值向下移动 */
}

/* 弹窗删除链接样式 */
#fileSelectModal .table td a {
  color: var(--dark-text-color);
  text-decoration: none;
  font-size: 0.85rem;
  cursor: pointer;
}

#fileSelectModal .table td a:hover {
  color: #dc3545;
  cursor: pointer;
}

/* 弹窗底部样式 */
#fileSelectModal .modal-footer,
#createTaskModal .modal-footer {
  border-top: none; /* 隐藏底部分割线 */
  padding: 0px 16px 12px 16px; /* 上 右 下 左：设置上内边距为0 */
  margin-top: -4px; /* 使用负margin使整个底部区域向上移动 */
  justify-content: flex-end;
  gap: 0px; /* 按钮之间的间距 */
  flex-wrap: wrap;
  padding-right: 12px; /* 右边距 */
}

/* 添加文件选择模态框左下角文件信息文本的左边距样式 */
#fileSelectModal .modal-footer .file-selection-info,
#createTaskModal .modal-footer .file-selection-info {
  margin-left: 0px; /* 与表格左边距保持一致 */
  font-size: 0.85rem !important; /* 覆盖内联样式 */
}

#fileSelectModal .modal-footer span,
#createTaskModal .modal-footer span {
  font-size: 0.85rem;
  color: var(--dark-text-color);
  margin-right: auto;
}

/* 弹窗底部按钮样式 */
#fileSelectModal .btn-primary,
#createTaskModal .btn-primary {
  background-color: var(--focus-border-color);
  border-color: var(--focus-border-color);
  font-size: 0.85rem;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗底部按钮内的标记样式 */
#fileSelectModal .btn-primary .badge,
#createTaskModal .btn-primary .badge {
  margin-left: 5px;
  display: flex;
  align-items: center;
}

#fileSelectModal .btn-primary:hover,
#createTaskModal .btn-primary:hover {
  background-color: #0A42CC !important;
  border-color: #0A42CC !important;
}

#fileSelectModal .btn-sm,
#createTaskModal .btn-sm {
  font-size: 0.85rem;
}

/* 弹窗底部有文本内容的按钮样式 */
#fileSelectModal .btn-primary:has(span),
#createTaskModal .btn-primary:has(span) {
  width: auto;
  padding: 0 8px;
}

#fileSelectModal .btn-primary:not(:has(span)),
#createTaskModal .btn-primary:not(:has(span)) {
  width: auto;
  min-width: 32px;
  padding: 0 8px;
}

#fileSelectModal .btn-sm,
#createTaskModal .btn-sm {
  font-size: 0.85rem;
}

#fileSelectModal .badge-light {
  background-color: #f8f9fa;
  color: var(--dark-text-color);
  font-size: 0.8rem;
  font-weight: normal;
}

/* 按钮中任务名称标记样式 */
.btn-primary .badge-light {
  background-color: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0px !important;
}

/* 加载状态图标样式 */
#fileSelectModal .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
  margin-left: 5px;
}

/* --------------- 深度搜索任务建议样式 --------------- */
.task-suggestions {
  width: 100%;
  max-height: 482px;
  overflow-y: auto;
  transform: translate(0, 0);
  top: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid #0D53FF;
  border-radius: 6px;
  z-index: 1021;
  padding: 0; /* 移除内部的内边距 */
  min-height: 30px; /* 改为30px，加上1px上边框和1px下边框，总高度为32px */
  box-sizing: border-box; /* 确保边框计入总高度 */
}

/* 移除下拉菜单项的内部空白 */
.task-suggestions .dropdown-item {
  padding: 0 8px;
  margin: 0;
  height: 30px; /* 内容高度改为30px */
  line-height: 30px; /* 行高同样调整 */
  box-sizing: border-box;
  color: var(--dark-text-color); /* 文本颜色 */
  transition: background-color 0.2s, color 0.2s;
  font-size: 14px !important; /* 文本字号 */
}

/* 下拉菜单项悬停状态 */
.task-suggestions .dropdown-item:hover {
  background-color: var(--button-gray-background-color); /* 悬停背景色 */
  color: var(--dark-text-color); /* 悬停文本颜色 */
}

/* 下拉菜单项点击状态 */
.task-suggestions .dropdown-item:active {
  background-color: var(--focus-border-color) !important; /* 点击背景色 */
  color: #fff !important; /* 点击文本颜色 */
}

/* 链接样式 */
.task-suggestions .dropdown-item small a {
  color: var(--light-text-color); /* 链接颜色 */
  text-decoration: none;
  transition: color 0.2s;
  font-size: 14px; /* 与前面文本大小一致 */
}

/* 链接悬停样式 */
.task-suggestions .dropdown-item:hover small a {
  color: var(--dark-text-color); /* 悬停时链接颜色 */
}

/* 链接点击状态样式 */
.task-suggestions .dropdown-item:active small a {
  color: #fff !important; /* 点击时链接颜色变为白色 */
}

/* "正在搜索中"状态的样式 */
.task-suggestions .dropdown-item.text-muted {
  height: 30px; /* 高度为30px，与边框一起刚好32px */
  line-height: 30px;
  padding: 0 8px !important; /* 添加左右内边距 */
  font-size: 14px !important; /* 与其他文本保持一致 */
  box-sizing: border-box;
  text-align: left !important; /* 左对齐 */
  color: var(--light-text-color) !important;
}

.task-suggestions .dropdown-item.text-muted:hover {
  color: var(--dark-text-color) !important; /* 悬停时链接颜色 */
}

/* "以下资源来自CloudSaver搜索"提示文本样式 */
.task-suggestions .dropdown-item.text-muted:not(.text-center) {
  font-size: 14px !important; /* 与其他文本保持一致 */
  text-align: left !important; /* 左对齐 */
  padding-left: 8px !important; /* 添加左内边距 */
  color: var(--light-text-color) !important;
}

.task-suggestions .dropdown-item.text-muted:hover {
  color: var(--dark-text-color) !important; /* 悬停时链接颜色 */
}

/* "以下资源来自CloudSaver搜索"提示文本点击状态样式 */
.task-suggestions .dropdown-item.text-muted:active {
  color: #fff !important; /* 点击时文本颜色变为白色 */
}

/* --------------- JSON编辑器样式 --------------- */
table.jsoneditor-tree>tbody>tr.jsoneditor-expandable:first-child {
  display: none;
}

/* 自定义JSON编辑器样式 */
div.jsoneditor {
  border: 1px solid #0D53FF !important;
  border-radius: 6px !important;
}

div.jsoneditor-menu {
  background-color: #0D53FF !important;
  border-bottom: 1px solid #0D53FF !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  height: 31px !important;
  padding: 0 6px !important;
  line-height: 31px !important;
}

div.jsoneditor-menu > button,
div.jsoneditor-menu > div.jsoneditor-modes > button {
  height: 24px !important;
  line-height: 24px !important;
  margin-top: 0px !important;
  position: relative !important;
  top: 2px !important; /* 编辑器顶部图标高度 */
}

/* 上一步和下一步按钮单独下移 */
div.jsoneditor-menu > button.jsoneditor-undo,
div.jsoneditor-menu > button.jsoneditor-redo {
  top: 3px !important;
}

div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
  background-color: #0D53FF !important;
  color: white !important;
}

div.jsoneditor-tree button:focus {
  background-color: #e6f1ff !important;
}

div.jsoneditor-tree button.jsoneditor-contextmenu:hover {
  background-color: #e6f1ff !important;
}

div.jsoneditor-tree div.jsoneditor-show-more a:hover {
  color: #0D53FF !important;
}

div.jsoneditor-tree div.jsoneditor-show-more {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
}

div.jsoneditor-statusbar {
  border-top: 1px solid var(--border-color) !important;
  background-color: #f5f5f5 !important;
}

button.jsoneditor-more {
  background-color: #0D53FF !important;
}

button.jsoneditor-more:hover {
  background-color: #0030cc !important;
}

div.jsoneditor-tree button.jsoneditor-button:focus {
  background-color: #e6f1ff !important;
}

/* --------------- 登录页样式 --------------- */
/* 登录卡片容器 - 设置宽度和阴影效果 */
.login-card {
  width: 340px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0;
  text-align: center;
  overflow: hidden;
  margin: 0 auto;
}

/* 登录页标题区域 - 浅灰色背景 */
.login-header {
  background-color: #f7f7fa;
  padding: 30px;
  margin-bottom: 0;
  height: 100px; /* 设置固定高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
}

/* 登录页表单区域 - 白色背景 */
.login-body {
  padding: 30px;
}

/* 登录页主标题样式 */
.login-title {
  font-size: 28px;
  color: var(--dark-text-color);
  margin: 6px 0 5px 0;
  font-weight: 500;
}

/* 登录页主标题链接样式 */
.login-title a {
  color: var(--dark-text-color);
  text-decoration: none;
  transition: color 0.3s;
}

/* 登录页主标题链接悬停样式 */
.login-title a:hover {
  color: #0A42CC;
  text-decoration: none;
}

/* 登录页副标题样式 */
.login-subtitle {
  font-size: 16px;
  color: #808080;
  margin: -5px 0 5px 0;
  font-weight: normal;
}

/* 登录页表单组样式 */
.login-page .form-group {
  margin-bottom: 0;
  position: relative;
}

/* 登录页输入框样式 */
.login-page .form-control {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0 15px;
  font-size: 16px;
  transition: all 0.3s;
  box-sizing: border-box;
  margin-bottom: 8px; /* 输入框之间的间距 */
}

/* 登录页输入框聚焦状态 */
.login-page .form-control:focus {
  border-color: var(--focus-border-color);
  outline: none;
  box-shadow: none;
}

/* 登录按钮样式 */
.login-page .btn {
  width: 100%;
  height: 32px;
  background-color: var(--focus-border-color);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 登录按钮悬停状态 */
.login-page .btn:hover {
  background-color: #0A42CC;
}

/* 登录页错误提示样式 */
.login-page .alert {
  background-color: #ffebee;
  color: #dc3545;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 16px;
}

/* --------------- 图标样式 --------------- */
.navbar-action-btn .bi-check2 {
  font-size: 1.4rem;
  position: relative;
  top: 1px;
}

.navbar-action-btn .bi-caret-right,
.navbar-action-btn .bi-chevron-expand {
  font-size: 1.2rem;
}

/* 页面宽度图标样式 */
.navbar-action-btn .bi-arrows {
  font-size: 1.09rem;
}

.navbar-toggler-square .bi-list {
  color: #fff;
  font-size: 1.3rem;
  position: relative;
  top: 0.5px; /* 向下微调 */
  transition: color 0.2s; /* 添加颜色过渡效果 */
}

/* 侧边栏菜单项图标样式 */
.sidebar .nav-link .bi-list-ul {
  font-size: 1.1rem;
  position: relative;
  top: 0.5px; /* 向下微调 */
}

.sidebar .nav-link .bi-gear {
  font-size: 1.05rem;
  position: relative;
  top: 0.5px; /* 向下微调 */
}

.sidebar .nav-link .bi-clock-history {
  font-size: 1.015rem;
}

.sidebar .nav-link .bi-archive {
  font-size: 1rem;
}

.sidebar .nav-link .bi-film {
  font-size: 0.94rem;
}

.sidebar .nav-link .bi-power {
  font-size: 1.27rem;
}

.bottom-links .nav-link .bi-book {
  font-size: 0.95rem;
  position: relative;
  top: 0.5px; /* 向下微调 */
}

.bottom-links .nav-link .bi-wechat {
  font-size: 1rem;
  position: relative;
  top: -0.5px; /* 向上微调 */
}

.bottom-links .nav-link .nav-text {
  font-size: 0.85rem;
}

/* 侧边栏菜单项图标调整 */
.sidebar-collapsed .nav-link i {
  margin-right: 0;
  margin-left: 0;
  width: auto;
  display: flex;
  justify-content: center;
  position: static; /* 保持在中心位置，不要使用绝对定位 */
}

/* 侧边栏折叠时确保内容完全居中且背景色填充完整 */
.sidebar-collapsed .sidebar-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-collapsed .nav.flex-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-collapsed .nav-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 确保选中状态背景色撑满 */
.sidebar-collapsed .nav-link,
.sidebar-collapsed .nav-link.active {
  width: 100%;
  box-sizing: border-box;
}

/* 侧边栏展开状态下的菜单项调整 */
.sidebar:not(.sidebar-collapsed) .nav-link {
  padding-left: 8.5px; /* 原来是7px，向右移动2px */
}

.sidebar:not(.sidebar-collapsed) .nav-link i {
  margin-left: 8.5px; /* 原来是7px，向右移动2px */
}

/* 底部链接样式调整，向右移动2px */
.sidebar:not(.sidebar-collapsed) .bottom-links .nav-link {
  padding-left: 8.5px; /* 原来是7px，向右移动2px */
}

.sidebar:not(.sidebar-collapsed) .bottom-links .nav-link i {
  margin-left: 8.5px; /* 原来是7px，向右移动2px */
}

.sidebar-collapsed .bottom-links .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.sidebar-collapsed .bottom-links .nav-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sidebar-collapsed .bottom-links .nav-text {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
  display: block;
  visibility: hidden;
  max-width: 0;
}

.bottom-links .nav-link .bi-github {
  font-size: 1rem;
}

/* 添加固定宽度容器保持图标位置 */
.sidebar .nav-link .icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  transition: none; /* 防止过渡动画影响图标位置 */
  position: relative;
}

/* 确保侧边栏折叠/展开过程中图标位置固定 */
.sidebar .nav-link i {
  position: static; /* 覆盖上面的relative设置 */
  transition: none; /* 禁用图标的过渡动画，防止它跟随父容器移动 */
}

/* --------------- 统一页面字号 --------------- */
/* 页面标题统一字号 (适用于不在main中的标题) */
.row.title h2:not(main .row.title h2) {
  font-size: 1.2rem !important;
  margin-bottom: 0;
}

/* 页面内容字号 */
main .form-control,
main .input-group-text,
main p,
main label,
main .table td,
main .table th {
  font-size: 0.95rem;
}

/* 表格头部字号 */
.table th {
  font-size: 0.95rem;
  font-weight: 600;
}

/* 按钮中的文字大小 */
.btn {
  font-size: 0.95rem;
}

/* 菜单项字号 */
.sidebar .nav-link {
  font-size: 0.95rem;
}

/* 设置任务列表页面中运行和删除按钮的布局 */
.task .col-auto {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; /* 设置按钮之间的间距为8px */
}

/* 确保按钮大小一致 */
.task .btn-outline-primary,
.task .btn-outline-danger,
.task .btn-warning,
.task .btn-outline-plex,
.task .btn-outline-alist,
.row .btn-outline-primary {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
}

/* 播放按钮样式 */
.btn-outline-primary {
  border-color: #0D53FF;
  color: #0D53FF;
}

.btn-outline-primary:hover {
  background-color: #0D53FF;
  border-color: #0D53FF;
  color: #fff;
}

/* 删除按钮样式 */
.btn-outline-danger {
  border-color: #dc3545;
  color: #dc3545;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* 播放和删除图标大小 */
.bi-caret-right {
  font-size: 1.2rem;
}

.bi-trash3 {
  font-size: 1rem;
}

/* 添加移除图标大小 */
.bi-plus-lg, .bi-dash-lg {
  font-size: 1.15rem;
  position: relative;
  top: -0.2px; /* 将图标向上移动 */
}

/* 替换Bootstrap默认的深色文本 */
:root {
  --dark-text-color: #404040;
  --light-text-color: #b1b1b3;
  --border-color: #e3e3e5; /* 统一边框颜色变量 */
  --focus-border-color: #0D53FF; /* 输入框聚焦时的边框颜色 */
  --shadow-spread: 0; /* 统一阴影扩散距离设为0 */
  --button-gray-background-color: #ededf0; /* 按钮灰色背景颜色 */
}

/* 覆盖Bootstrap原生的按钮聚焦样式 */
.btn.focus, .btn:focus {
  box-shadow: none !important;
}

body {
  color: var(--dark-text-color);
}

.text-body {
  color: var(--dark-text-color) !important;
}

.table:not(.table-dark) {
  color: var(--dark-text-color);
}

.dropdown-item,
.dropdown-header {
  color: var(--dark-text-color);
}

.form-control,
.form-control:focus,
.custom-select,
.custom-file-label,
.custom-file-label::after {
  color: var(--dark-text-color);
}

.input-group-text {
  color: var(--dark-text-color);
}

.list-group-item-action,
.list-group-item-action:focus,
.list-group-item-action:hover {
  color: var(--dark-text-color);
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
  color: var(--dark-text-color);
}

.popover-body {
  color: var(--dark-text-color);
}

/* 任务列表页面中的任务标题颜色 */
.task .btn.btn-block.text-left {
  color: var(--dark-text-color);
  transition: color 0.2s ease-in-out;
}

/* 历史记录页面的文本和表格内容 */
.table td,
.text-truncate, 
.expanded-text,
.table th,
.cursor-pointer {
  color: var(--dark-text-color);
}

/* 模态框和其他元素文本 */
.modal-title,
.modal-body,
.form-check-label,
.form-group label,
.breadcrumb-item,
.breadcrumb,
.small,
.col-form-label {
  color: var(--dark-text-color);
}

/* 设置输入框占位符的颜色 */
.form-control::placeholder {
  color: var(--light-text-color); /* 修改占位符颜色 */
}

/* 设置禁用状态下输入框的背景色 */
.form-control:disabled, 
.form-control[readonly] {
  background-color: #ededf0 !important;
  opacity: 1;
}

/* 保持侧边栏激活状态的导航链接为白色 */
.sidebar .nav-link.active {
  color: white !important;
}

/* 设置侧边栏背景色 */
.sidebar.bg-light {
  background-color: #f7f7fa !important;
}

/* 设置任务列表之间的分隔线颜色 */
.task hr {
  border-color: var(--border-color); /* 使用变量替代硬编码颜色 */
  margin-bottom: 8px; /* 分隔线与下方任务标题的距离 */
  margin-top: 1px; /* 分隔线与上方任务标题的距离 */
}

/* 添加任务按钮上方的分割线样式 */
.task-divider {
  border-color: var(--border-color); /* 使用变量替代硬编码颜色 */
  margin-bottom: 8px; /* 分隔线与下方添加任务按钮的距离 */
  margin-top: 1px; /* 分隔线与上方最后一个任务的距离 */
}

/* 设置任务标题行样式 */
.task .form-group.row[style*="align-items:center"] {
  margin-bottom: 8px; /* 设置标题行与下方内容间距为8px */
  padding-bottom: 0;
  padding-top: 8px; /* 设置标题行与上方分隔线的间距为8px */
}

/* 设置任务标题按钮样式 */
.task .btn.btn-block.text-left {
  color: var(--dark-text-color);
  padding: 4px 8px; /* 调整内边距 */
  padding-left: 6px; /* 桌面模式下任务标题左边距 */
  font-size: 0.95rem; /* 与输入框字体大小一致 */
  font-weight: normal; /* 标准字重 */
  line-height: 1.5; /* 与输入框行高一致 */
  letter-spacing: normal; /* 标准字间距 */
}

/* 任务行按钮样式 */
.task .col-auto .btn {
  margin-top: 0; /* 确保按钮没有额外的上边距 */
}

/* 设置任务栏每一条的上下行距 */
.task .form-group.row {
  margin-bottom: 8px; /* 设置行之间的间距为8px */
  padding-top: 0;
  padding-bottom: 0;
}

/* 任务列表内任务标题参数 */
.task .form-group.row .col-form-label {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.95rem; /* 与输入框字体大小一致 */
  font-weight: normal; /* 标准字重 */
  line-height: 1.5; /* 与输入框行高一致 */
  letter-spacing: normal; /* 标准字间距 */
  position: relative; /* 添加相对定位 */
  top: 0.5px; /* 文本下移0.5px */
  left: 3.5px;
}

/* 复位执行周期选项组（不受左偏移影响） */
.task .form-group.row .col-sm-10.col-form-label {
  left: 0; /* 取消左偏移 */
}

/* 设置任务配置选项标签列的最大宽度（配置选项与配置框的距离） */
.task .form-group.row .col-sm-2 {
  max-width: 104px; /* 设置最大宽度为150px */
  min-width: 104px; /* 保持最小宽度一致 */
  width: 104px; /* 固定宽度 */
}

/* 任务配置选项输入框列自适应 */
.task .form-group.row .col-sm-10 {
  width: calc(100% - 104px); /* 计算剩余宽度 */
  max-width: calc(100% - 104px); /* 最大宽度也应该计算 */
  flex: 1; /* 允许伸缩 */
}

/* 表单输入框间距 */
.task .form-group.row .form-control,
.task .form-group.row .input-group {
  margin-bottom: 0;
}

/* 添加任务列表的容器样式 */
.task.mb-3 {
  margin-bottom: 8px !important; /* 统一任务项之间的间距为8px */
}

/* 设置输入框焦点状态样式 */
.form-control:focus {
  border-color: var(--focus-border-color) !important;
  border-width: 1px;
  box-shadow: none;
  outline: none;
}

/* 按钮通用点击效果 */
.btn:active,
.btn:focus {
  box-shadow: none;
  outline: none;
}

/* 给特定按钮类型添加特定颜色的阴影效果 */
.btn-outline-primary:active,
.btn-outline-primary:focus {
  box-shadow: none;
  outline: none;
}

.btn-outline-danger:active,
.btn-outline-danger:focus {
  box-shadow: none;
  outline: none;
}

.btn-warning:active,
.btn-warning:focus {
  box-shadow: none;
  outline: none;
}

.btn-primary:active,
.btn-primary:focus {
  box-shadow: none;
  outline: none;
}

.btn-outline-secondary:active,
.btn-outline-secondary:focus {
  box-shadow: none;
  outline: none;
}

/* 隐藏日期输入框的原生日历图标 */
.date-input-no-icon::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* 确保Firefox中也能隐藏日期选择器图标 */
.date-input-no-icon {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* 防止鼠标悬停在日期输入框末尾时显示指针样式 */
.date-input-no-icon:hover {
  cursor: text;
}

/* 修复日历按钮点击后背景色不恢复的问题 */
.btn-outline-secondary:has(.bi-calendar3):focus,
.btn-outline-secondary:has(.bi-calendar3):active,
.btn-outline-secondary:has(.bi-calendar3).focus,
.btn-outline-secondary:has(.bi-calendar3).active {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 自定义JSON编辑器样式 */
/* 调整搜索框样式 */
div.jsoneditor-search {
  height: 22px !important; /* 搜索输入框高度 */
  border-radius: 4px !important; /* 搜索框整体圆角 */
  overflow: hidden !important; /* 确保子元素不超出圆角边界 */
}

div.jsoneditor-search input {
  height: 18px !important;
  margin-top: 0 !important;
  position: relative !important;
  top: -5px !important; /* 搜索文本输入框高度 */
  border-radius: 4px 0 0 4px !important; /* 左侧圆角 */
}

div.jsoneditor-search button {
  height: 22px !important;
  margin-top: -1px !important;
  border-radius: 0 4px 4px 0 !important; /* 右侧圆角 */
}

/* 添加搜索按钮区域圆角 */
div.jsoneditor-search-results {
  border-radius: 4px !important;
}

/* 修改Search图标所在的框为圆角 */
div.jsoneditor-search div.jsoneditor-frame {
  border-radius: 4px !important;
}

/* 确保所有搜索相关组件具有圆角 */
div.jsoneditor-search > * {
  border-radius: 4px !important;
}

div.jsoneditor div.jsoneditor-navigation-bar {
  background-color: #ededf0 !important; /* 设置背景颜色 */
  color: var(--dark-text-color) !important; /* 设置文本颜色 */
  border-bottom: 1px solid var(--border-color) !important; /* 设置底部边框为蓝色 */
}

/* 修改选择一个节点的文本颜色 */
div.jsoneditor-navigation-bar .jsoneditor-treemode .jsoneditor-selection,
div.jsoneditor-treepath .jsoneditor-treemode,
div.jsoneditor-treepath {
  color: var(--dark-text-color) !important;
}

/* 确保导航条中所有文本都是相同颜色 */
div.jsoneditor-treepath * {
  color: var(--dark-text-color) !important;
}

/* --------------- 分页控制样式 --------------- */
.pagination-container {
  margin-top: 24px !important;
  padding: 0 0;
  border-top: none;
  transform: translateY(-20px);
  position: relative;
  z-index: 1;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important; /* 允许元素在需要时换行 */
  gap: 0; /* 分页控制三行排列的行距 */
}

/* 桌面宽屏下的布局 */
@media (min-width: 992px) {
  .pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    order: 2;
  }

  .page-info {
    color: var(--dark-text-color);
    font-size: 0.95rem;
    line-height: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    width: 33%; /* 为左侧文本区域预留固定宽度 */
    order: 1;
  }

  .pagination-settings {
    display: flex;
    align-items: center;
    width: 33%;
    justify-content: flex-end;
    order: 3;
  }
}

/* 平板和窄屏下的布局 */
@media (max-width: 991px) and (min-width: 768px) {
  .pagination-container {
    flex-direction: row;
    justify-content: center !important;
  }
  
  .pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    order: 2;
    margin: 12px 0; /* 上下间距调整为12px，与整体间距一致 */
  }

  .page-info {
    color: var(--dark-text-color);
    font-size: 0.95rem;
    line-height: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    order: 1;
    text-align: center;
  }

  .pagination-settings {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    order: 3;
  }
}

/* 移动端布局 */
@media (max-width: 767px) {
  .pagination-container {
    flex-direction: column;
    align-items: center !important;
    margin-top: 15px !important;
    transform: translateY(-10px);
    gap: 12px; /* 垂直间距调整为12px，与整体间距一致 */
  }
  
  .pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    order: 2;
    flex-wrap: wrap;
    margin: 0; /* 移除额外的上下margin，因为已有gap控制间距 */
  }

  .page-info {
    color: var(--dark-text-color);
    font-size: 0.95rem;
    line-height: 1.5;
    height: auto;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    order: 1;
    text-align: center;
    padding: 5px 0;
  }

  .pagination-settings {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    order: 3;
    flex-wrap: wrap;
  }
  
  /* 不修改按钮大小，与桌面版保持一致 */
  .pagination-controls .btn-sm {
    min-width: 32px;
    height: 32px;
  }
  
  /* 保持与桌面版一致的跳页区域尺寸 */
  .pagination-settings .form-control-sm {
    height: 32px;
  }
  
  /* 保持与桌面版一致的下拉菜单按钮尺寸 */
  .pagination-settings .dropdown-toggle {
    height: 32px;
  }
}

.pagination-settings {
  display: flex;
  align-items: center;
}

/* 分页按钮样式 */
.pagination-controls .btn-sm {
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border-radius: 6px;
}

/* 分页按钮悬停状态 */
.pagination-controls .btn-sm:hover {
  background-color: var(--dark-text-color);
  border-color: var(--dark-text-color);
  color: #fff !important;
}

/* 分页按钮悬停状态下的图标 */
.pagination-controls .btn-sm:hover i {
  color: #fff !important;
}

/* 分页按钮点击后恢复正常状态 */
.pagination-controls .btn-sm:not(:hover):not(.btn-primary) {
  background-color: #fff;
  border-color: var(--dark-text-color);
  color: var(--dark-text-color);
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

/* 分页按钮点击后图标恢复正常状态 */
.pagination-controls .btn-sm:not(:hover):not(.btn-primary) i {
  color: var(--dark-text-color);
  transition: color 0.15s ease-out;
}

/* 当前选中页码按钮 */
.pagination-controls .btn-sm.btn-primary {
  background-color: var(--focus-border-color) !important;
  border-color: var(--focus-border-color) !important;
  color: #fff !important;
}

/* 分页设置区域的间距调整 */
.pagination-settings .text-secondary.mr-1 {
  margin-right: 7.5px !important; /* "跳到第"与输入框之间的距离 */
}

.pagination-settings .mx-1 {
  margin-left: 0 !important;
  margin-right: 7px !important; /* 输入框与"页"之间的距离 */
}

.pagination-settings .text-secondary.mr-2 {
  margin-right: 7px !important; /* "页"与"确定"按钮之间的距离 */
}

/* 页码输入框样式 */
.pagination-settings .input-group[style*="width: 70px"] {
  width: auto !important;
  min-width: 64px !important;
  display: inline-flex !important;
}

.pagination-settings .form-control-sm {
  height: 32px;
  width: 32px !important; /* 默认宽度为正方形 */
  min-width: 32px; /* 最小宽度 */
  text-align: center;
  padding: 0 2px;
  border-color: var(--dark-text-color);
  border-radius: 6px;
  -moz-appearance: textfield; /* Firefox */
  transition: width 0.2s; /* 添加宽度过渡效果 */
}

/* 去掉输入框的上下箭头 */
.pagination-settings .form-control-sm::-webkit-outer-spin-button,
.pagination-settings .form-control-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 当输入内容较多或获得焦点时自动扩展宽度 */
.pagination-settings .form-control-sm:focus,
.pagination-settings .form-control-sm:not(:placeholder-shown) {
  width: auto !important;
  min-width: 32px;
}

/* 分页文本样式 - 统一所有文本的样式 */
.pagination-settings .text-secondary,
.pagination-controls .text-secondary,
.pagination-container .text-secondary {
  color: var(--dark-text-color) !important;
  font-size: 0.95rem;
  line-height: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}

/* 分页下拉菜单样式 */
.pagination-settings .dropdown-toggle {
  height: 32px;
  padding: 0 8px; /* 调整左右内边距，与下拉项保持一致 */
  display: flex;
  align-items: center;
}

/* 调整下拉按钮中文本和三角图标之间的距离 */
.pagination-settings .dropdown-toggle::after {
  margin-left: 7px; /* 增加文本和三角图标之间的距离 */
}

/* 分页下拉菜单按钮激活状态 */
.pagination-settings .dropdown-toggle.show,
.pagination-settings .dropdown-toggle:active,
.pagination-settings .dropdown-toggle:focus {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 调整分页大小下拉菜单的宽度 */
.pagination-settings .dropdown-menu {
  min-width: 0;
  width: 100%; /* 与按钮同宽 */
  padding: 0; /* 移除菜单内边距 */
  margin: 0; /* 移除菜单外边距 */
  border-radius: 6px; /* 添加圆角 */
  overflow: hidden; /* 确保内容不超出圆角 */
  background-color: #fff; /* 设置默认背景颜色为灰色 */
  border-color: var(--dark-text-color); /* 与按钮边框颜色相同 */
  margin-top: 8px;
  margin-bottom: 8px;
}

.pagination-settings .dropdown-item {
  font-size: 0.95rem;
  padding: 0 8px; /* 调整左右内边距，与按钮文本边距保持一致 */
  text-align: left; /* 文本左对齐 */
  white-space: nowrap; /* 防止文本换行 */
  border-bottom: none; /* 添加分隔线 */
  height: 32px; /* 设置固定高度 */
  line-height: 32px; /* 垂直居中文本 */
  display: flex;
  align-items: center; /* 垂直居中内容 */
  background-color: #fff; /* 设置每个选项的默认背景颜色为灰色 */
}

/* 最后一个选项不需要底部边框 */
.pagination-settings .dropdown-item:last-child {
  border-bottom: none;
}

/* 下拉菜单项的悬停效果 */
.pagination-settings .dropdown-item:hover {
  background-color: var(--button-gray-background-color);
  color: var(--dark-text-color);
}

/* 下拉菜单项的点击效果 */
.pagination-settings .dropdown-item:active,
.pagination-settings .dropdown-item:focus {
  background-color: var(--button-gray-background-color) !important;
  color: var(--dark-text-color) !important;
  outline: none;
}

/* 省略号样式 */
.pagination-controls .mx-1 {
  color: var(--dark-text-color);
  font-size: 0.95rem;
  margin: 0 5px;
  line-height: 32px;
  height: 32px;
  display: flex;
  align-items: center;
}

/* 分页按钮中的箭头图标大小 */
.pagination-controls .btn-sm .bi-chevron-left {
  font-size: 1.09rem;
  position: relative;
  top: 0px;
  left: -1px; /* 向左移动左箭头 */
}

.pagination-controls .btn-sm .bi-chevron-right {
  font-size: 1.09rem;
  position: relative;
  top: 0px;
  right: -1px; /* 向右移动右箭头 */
}

/* --------------- 系统配置页面form-group间距统一 --------------- */
/* 系统配置页面中所有form-group的间距统一为8px，与其他模块保持一致 */
main .form-group.mb-2 {
  margin-bottom: 8px !important;
}

/* 任务设置模块的form-group间距调整为8px */
main .form-group:not(.row) {
  margin-bottom: 8px !important;
}

/* --------------- 魔法匹配输入框比例设置 --------------- */
/* 系统配置页面中魔法匹配的输入框比例 */
.form-group.mb-2 > .input-group {
  position: relative; /* 为绝对定位的子元素提供参考 */
  padding-right: 31px; /* 为删除按钮预留空间 */
}

.form-group.mb-2 > .input-group > input[data-oldkey] {
  flex: 1 !important; /* 魔法名输入框占比 */
}

.form-group.mb-2 > .input-group > input[placeholder="匹配表达式"] {
  flex: 4 !important; /* 匹配表达式输入框占比 */
}

.form-group.mb-2 > .input-group > input[placeholder="替换表达式"] {
  flex: 2 !important; /* 替换表达式输入框占比 */
}

.form-group.mb-2 > .input-group > .input-group-append {
  position: absolute; /* 使按钮组脱离文档流 */
  right: 0; /* 靠右对齐 */
  top: 0; /* 顶部对齐 */
  height: 100%; /* 与父元素等高 */
}

.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary {
  position: absolute; /* 使增加按钮不占用布局空间 */
  right: 31px; /* 位于删除按钮左侧，边框重叠 */
  z-index: 2; /* 确保按钮显示在最上层 */
  background-color: #fff; /* 添加白色背景色，避免文本重叠 */
}

/* 为增加按钮添加左侧白色空间，避免文本重叠 */
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary::before {
  content: '';
  position: absolute;
  left: -9px; /* 从-8px调整为-9px，往左移动1px */
  top: 0;
  height: 100%;
  width: 8px;
  background-color: #fff;
  z-index: -1; /* 将z-index设为负值，确保在按钮下方 */
}

/* 当鼠标悬停在增加按钮上时，保持蓝色背景 */
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:hover {
  background-color: #0D53FF; /* 悬停时使用蓝色背景 */
  color: #fff;
}

/* 当点击增加按钮时，保持蓝色背景 */
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:active,
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:focus {
  background-color: #0D53FF !important; /* 点击时强制使用蓝色背景 */
  color: white !important;
}

/* 点击或聚焦时也改变伪元素的背景色 */
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:active::before,
.form-group.mb-2 > .input-group > .input-group-append > .btn-outline-primary:focus::before {
  background-color: white !important; /* 保持白色背景 */
}

/* --------------- 插件区域样式 --------------- */
/* 插件标题与上方内容的间距 */
main .row.title[title*="插件的配置选项"] {
  margin-top: 20px !important;
  margin-bottom: 0px !important;
}

/* 调整插件选项容器的上边距（插件之间的距离） */
div[data-toggle="collapse"]:first-of-type {
  margin-top: 0px !important;
}

/* 插件与魔法匹配之间的间距 */
main .row.title[title*="预定义的正则匹配规则"] {
  margin-top: 19px !important;
}

/* 插件名称和展开图标的颜色 */
div[data-toggle="collapse"] .btn.text-left {
  color: var(--dark-text-color);
  cursor: pointer;
  transition: color 0.2s;
  font-size: 0.95rem; /* 与输入框字体大小一致 */
  font-weight: normal; /* 标准字重 */
  line-height: 1.5; /* 与输入框行高一致 */
  letter-spacing: normal; /* 标准字间距 */
  position: relative;
  left: 0px;
}

div[data-toggle="collapse"] .btn.text-left:hover {
  color: var(--focus-border-color);
}

/* 系统配置页面插件折叠按钮箭头图标样式 */
div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
  color: inherit;
  transition: transform 0.2s;
  position: relative;
  top: 0.5px; /* 调整箭头垂直对齐，使其与文本居中 */
  font-size: 0.95rem; /* 调整箭头大小与文本比例协调 */
  margin-right: 4px; /* 添加右侧间距使与文字有适当间距 */
}

div[data-toggle="collapse"][aria-expanded="true"] .btn.text-left i.bi-caret-right-fill {
  transform: rotate(90deg);
}

/* 禁用折叠按钮的点击背景色变化 */
div[data-toggle="collapse"] .btn.text-left:focus,
div[data-toggle="collapse"] .btn.text-left:active {
  outline: none;
  box-shadow: none;
}

/* 修复插件区域展开抖动问题 */
/* 修复插件容器的负边距，防止抖动 */
div[v-for*="plugin"] {
  margin-bottom: 0 !important; /* 去除负边距，防止抖动 */
}

/* 为折叠区域设置平滑过渡 - 基础规则 */
.collapse {
  transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: height;
}

/* 修复折叠内容容器的间距，使折叠动画更流畅 */
div[id^="collapse_"] {
  margin-bottom: 8px; /* 为最后一个元素添加适当的底部间距 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 修复收起动画卡顿问题 */
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: height;
}

/* 确保折叠元素内的内容不添加额外的padding，避免动画抖动 */
div[id^="collapse_"] > div.input-group {
  padding: 0 !important;
}

/* 调整折叠内容中输入框的边距，防止抖动 */
div[id^="collapse_"] .input-group.mb-2:last-child {
  margin-bottom: 0 !important; /* 去除最后一个输入组的底部边距 */
}

/* 优化任务列表折叠动画 */
.task .collapse {
  transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: height;
}

/* 防止任务列表折叠内容中的元素添加额外padding，导致动画卡顿 */
.task .collapse > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 任务列表任务折叠箭头的动画，使旋转更平滑 */
.task div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  top: 0; /* 调整箭头垂直对齐，使其与文本居中 */
  font-size: 0.95rem; /* 调整箭头大小与文本比例协调 */
}

.task div[data-toggle="collapse"][aria-expanded="true"] .btn.text-left i.bi-caret-right-fill {
  transform: rotate(90deg);
}

/* 优化侧边栏菜单的折叠动画 */
#sidebarMenu.collapse {
  transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: height;
}

#sidebarMenu.collapsing {
  position: fixed !important;
  left: 0;
  top: 54px; /* 考虑导航栏高度 */
  height: 0;
  overflow: hidden;
  transition: height 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: height;
  width: 100%;
  z-index: 99;
}

/* 在移动设备上侧边栏菜单的特殊处理 */
@media (max-width: 767.98px) {
  #sidebarMenu {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 54px; /* 考虑导航栏高度 */
    z-index: 99;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding-top: 0 !important;
  }
  
  /* 确保侧边栏内容正确定位 */
  #sidebarMenu .sidebar-sticky {
    height: calc(100vh - 54px); /* 计算正确的高度 */
    padding-top: 20px; /* 恢复内部上边距，与非移动版本保持一致 */
  }
}

/* 特别优化插件折叠动画，解决收起时最后阶段的卡顿问题 */
div[id^="collapse_"][id*="plugin"] {
  transition: height 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
}

div[id^="collapse_"][id*="plugin"].collapsing {
  transition-duration: 0.12s !important;
  transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0) !important;
}

/* 确保插件区域内容不添加额外的外边距和内边距 */
div[id^="collapse_"][id*="plugin"] > .input-group {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 32px; /* 插件固定高度的初始值，防止布局计算延迟 */
}

/* 确保插件折叠箭头动画更平滑 */
div[data-toggle="collapse"] .btn.text-left i.bi-caret-right-fill {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 优化完全收起过程，避免卡顿，特别是当高度接近0时 */
.collapsing[style*="height: 0"], 
.collapsing[style*="height:0"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45) !important;
  transition-duration: 0.1s !important;
}

/* 插件固定高度的初始值，防止布局计算延迟 */
div[id^="collapse_"][id*="plugin"] .input-group {
  min-height: 32px;
}

#fileSelectModal .btn-primary span,
#createTaskModal .btn-primary span {
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

#fileSelectModal .btn-primary .badge-light,
#createTaskModal .btn-primary .badge-light {
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

/* --------------- 命名预览页样式 --------------- */
/* 命名预览表达式样式 */
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] {
  margin-top: 15px;
  margin-bottom: 15px !important;
}

#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] > div {
  margin-bottom: 12px;
}

/* 预览页面表达式标题样式 */
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] b {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-text-color);
  margin-right: 8px;
}

/* 预览页面表达式内容样式 */
#fileSelectModal .badge-info {
  background-color: var(--focus-border-color) !important;
  color: white !important;
  font-size: 0.83rem !important;
  padding: 6px 3px !important;
  font-weight: normal !important;
  border-radius: 4px !important;
  line-height: 0.5 !important;
  word-break: break-all !important;
  text-align: left !important;
  white-space: normal !important;
}

/* 预览表格的标题样式 */
#fileSelectModal table.table th {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* 命名预览区域样式 */
#fileSelectModal div.mb-3 {
  margin-top: 12.5px !important; /* 表达式上边距 */
  margin-bottom: 0px !important;
}

/* 表达式组样式 - 应用于顺序命名、剧集命名和普通正则命名的容器 */
#fileSelectModal div.mb-3 > div {
  margin-bottom: 12.3px !important; /* 表达式下边距 */
}

/* 匹配表达式和替换表达式容器 */
#fileSelectModal div.mb-3 > div > div[style*="display: flex"] {
  margin-bottom: 0px !important;
  margin-top: 6px !important;
  padding-left: 12px !important; /* 表达式左边距 */
}

/* 多行表达式样式 - 缩小两行之间的间距 */
#fileSelectModal div.mb-3 > div > div[style*="display: flex"] + div[style*="display: flex"] {
  margin-top: 1px !important; /* 减少同一组内表达式之间的间距 */
}

/* 多行表达式间距 - 针对预览区域显示的多行表达式 */
#fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] > div > span.badge-info + span.badge-info {
  margin-top: 5px !important; /* 减少多行表达式之间的间距 */
  display: inline-block;
}

/* 顺序命名提示信息文本颜色，覆盖 Bootstrap .text-muted 类的颜色 */
.text-muted {
  color: var(--light-text-color) !important;
}

/* --------------- 深度搜索按钮样式 --------------- */
.btn-primary:has(.spinner-border-sm) {
  width: 32px !important;
  height: 32px !important;
  border-radius: 0px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--focus-border-color) !important;
  border-color: var(--focus-border-color) !important;
}

/* 确保动画加载图标垂直居中 */
.btn-primary .spinner-border-sm {
  margin: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  border-width: 0.15em !important;
}

/* --------------- datalist 历史记录提示框样式 --------------- */
datalist {
  display: none;
}

input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

/* Chrome/Safari/Edge 下拉列表样式 */
input::-webkit-list-button {
  display: none !important;
}

/* Firefox datalist下拉箭头样式 */
input::-moz-list-button {
  display: none !important;
}

/* --------------- CloudSaver & WebUI 用户名和密码输入框样式 --------------- */
/* 清除所有默认内边距和外边距 */
.cloudsaver-username-col,
.cloudsaver-password-col,
.webui-username-col,
.webui-password-col {
  padding: 0 !important;
  margin: 0 !important;
}

/* 用户名列专用样式：左侧添加页边距，右侧留间隔 */
.cloudsaver-username-col,
.webui-username-col {
  padding-left: 10px !important;
  padding-right: 4px !important;
}

/* 密码列专用样式：右侧添加页边距，左侧留间隔 */
.cloudsaver-password-col,
.webui-password-col {
  padding-left: 4px !important;
  padding-right: 10px !important;
}

/* 确保移动模式下也有相同的边距 */
@media (max-width: 767.98px) {
  .cloudsaver-username-col,
  .webui-username-col {
    padding-left: 15px !important;
    padding-right: 4px !important;
  }
  
  .cloudsaver-password-col,
  .webui-password-col {
    padding-left: 4px !important;
    padding-right: 15px !important;
  }
}

/* --------------- 任务列表筛选框样式 --------------- */
@media (min-width: 768px) {
  /* 调整名称筛选框与任务筛选框之间的间距，从20px减小到8px */
  .col-lg-6.col-md-6.mb-2.mb-md-0 {
    padding-right: 4px;
  }
  
  /* 匹配调整，确保任务筛选框左侧的间距 */
  .col-lg-6.col-md-6:not(.mb-2) {
    padding-left: 4px;
  }
}

/* 在小屏设备上调整任务列表配置选项标题 */
@media (max-width: 767.98px) {
  .task .form-group.row .col-sm-2 {
    max-width: 100%; /* 在小屏上允许全宽 */
    min-width: auto; /* 取消最小宽度限制 */
    width: 100%; /* 宽度适应屏幕 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 2px; /* 减少底部内边距 */
    padding-left: 10px;
    top: 2.5px;
  }
  
  .task .form-group.row .col-sm-10 {
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度全宽 */
    margin-top: 0px; /* 减少顶部间距 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 0; /* 移除底部内边距 */
  }
  
  /* 确保移动模式下配置选项间距与桌面模式一致 */
  .task .form-group.row {
    margin-bottom: 8px; /* 与桌面模式保持一致的行间距 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 0; /* 移除底部内边距 */
  }
  
  /* 调整移动模式下表单控件的间距 */
  .task .form-group.row .form-control,
  .task .form-group.row .input-group {
    margin-bottom: 0; /* 确保无底部边距 */
  }
  
  /* 避免在移动模式下有额外内边距 */
  .task .collapse > div .form-group.row:last-child {
    margin-bottom: 8px; /* 保持最后一个选项与其他选项有相同的间距 */
  }
  
  /* 调整任务配置标签的间距 */
  .task .form-group.row .col-form-label {
    padding-top: 2px; /* 减少顶部内边距 */
    padding-bottom: 2px; /* 减少底部内边距 */
  }
  
  /* 专门针对配置选项标题在配置框上方的情况调整 */
  .task .form-group.row:not(.align-items-center) .col-sm-2 {
    margin-bottom: 4.5px; /* 设置标题与配置框之间的距离 */
    padding-left: 15px; /* 左对齐与其他元素保持一致 */
    font-size: 0.95rem; /* 保持字体大小一致 */
  }
  
  /* 标题在上方时配置框的左内边距调整 */
  .task .form-group.row:not(.align-items-center) .col-sm-10 {
    padding-left: 18.5px; /* 为标题在上方的配置框增加左内边距 */
  }

  /* 特别处理执行周期选项组等特殊情况 */
  .task .form-group.row:not(.align-items-center) .form-check,
  .task .form-group.row:not(.align-items-center) .form-group {
    margin-top: 2px; /* 为表单组件添加顶部间距 */
    padding-left: 0px; /* 左对齐一致 */
  }

  /* 移动模式下的任务标题左边距调整 */
  @media (max-width: 767.98px) {
    .task .btn.btn-block.text-left {
      padding-left: 11px; /* 移动模式下标题左边距 */
    }
  }
}

/* 确保在移动设备上表格可以水平滚动 */
@media (max-width: 767px) {
  #fileSelectModal .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 确保表格使用固定布局算法，保持列宽 */
  #fileSelectModal .table {
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    margin-bottom: 0; /* 避免多余的底部间距 */
  }
  
  /* 移动模式下面包屑导航宽度与表格匹配 */
  /* 针对选择需转存的文件夹/选择起始文件模式 - 4列表格 */
  #fileSelectModal[data-modal-type="source"] .breadcrumb,
  #fileSelectModal[data-modal-type="start-file"] .breadcrumb {
    min-width: 690px; /* 4列表格总宽度: 230px + 230px + 90px + 140px */
  }
  
  #fileSelectModal[data-modal-type="source"] .table,
  #fileSelectModal[data-modal-type="start-file"] .table {
    width: 690px;
  }
  
  /* 针对选择保存到的文件夹模式 - 带操作列的表格 */
  #fileSelectModal[data-modal-type="target"] .breadcrumb {
    min-width: 648px; /* 4列表格总宽度: 230px + 90px + 140px + 188px */
  }
  
  #fileSelectModal[data-modal-type="target"] .table {
    width: 648px;
  }
  
  /* 针对命名预览模式 - 2列表格 */
  #fileSelectModal[data-modal-type="preview"] .breadcrumb {
    min-width: 460px; /* 2列表格总宽度: 230px + 230px */
    margin-right: 0;
    padding-right: 16px !important; /* 强制设置右边距为16px */
    box-sizing: border-box;
  }

  #fileSelectModal[data-modal-type="preview"] .table {
    width: 460px;
  }

  /* 针对文件整理页面命名预览模式 - 2列表格 */
  #fileSelectModal[data-modal-type="preview-filemanager"] .breadcrumb {
    min-width: 460px; /* 2列表格总宽度: 230px + 230px */
    margin-right: 0;
    padding-right: 16px !important; /* 强制设置右边距为16px */
    box-sizing: border-box;
  }

  #fileSelectModal[data-modal-type="preview-filemanager"] .table {
    width: 460px;
  }
  
  /* 确保面包屑导航内容不被截断 */
  #fileSelectModal .breadcrumb-item {
    white-space: nowrap;
  }
  
  /* 修复模态框内边距问题 */
  #fileSelectModal .modal-body {
    padding-right: 16px !important;
    padding-left: 16px !important;
    -webkit-overflow-scrolling: touch; /* 在iOS设备上启用惯性滚动 */
    overflow-x: hidden; /* 禁用整个modal-body的水平滚动，由内部元素单独控制 */
  }
  
  /* 修复表格和面包屑导航的边距问题 */
  #fileSelectModal .table-responsive {
    padding-right: 0;
    margin-right: 0;
    width: 100%;
  }
  
  /* 确保表格容器有正确的溢出行为 */
  #fileSelectModal .modal-body > div:not(.alert-warning) {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px; /* 添加底部内边距，避免滚动条遮挡内容 */
  }
  
  /* 确保面包屑导航在滚动容器内有正确的空间 */
  #fileSelectModal nav[aria-label="breadcrumb"] {
    padding-right: 16px; /* 确保右侧有足够边距 */
    margin-right: 0;
    margin-bottom: 8px; /* 保持与表格的间距一致 */
  }
  
  /* 特别处理预览模式下的导航栏，防止双重内边距 */
  #fileSelectModal[data-modal-type="preview"] .modal-body > div > nav[aria-label="breadcrumb"] {
    padding-right: 0 !important; /* 清除可能的额外内边距 */
  }
  
  /* 确保模态框内的预览区域也有合适的边距和滚动行为 */
  #fileSelectModal .mb-3[v-if="fileSelect.previewRegex"] {
    padding-right: 16px;
    overflow-x: auto;
    width: 100%;
  }
  
  /* 优化表格的标题行在滚动时始终可见 */
  #fileSelectModal .table th {
    z-index: 5; /* 保证在滚动时标题行位于上层 */
  }
  
  /* 优化滚动条样式，使其更细小不占用过多空间 */
  #fileSelectModal .modal-body > div::-webkit-scrollbar {
    height: 8px; /* 较细的滚动条 */
  }
  
  #fileSelectModal .modal-body > div::-webkit-scrollbar-thumb {
    background-color: var(--border-color); /* 滚动条滑块 */
    border-radius: 4px; /* 圆角滚动条 */
  }
  
  #fileSelectModal .modal-body > div::-webkit-scrollbar-track {
    background-color: #f7f7fa; /* 滚动条轨道 */
    border-radius: 4px; /* 圆角滚动条 */
  }
}

/* 针对命名预览模式特别处理表格容器的底部内边距 */
#fileSelectModal[data-modal-type="preview"] .modal-body > div:not(.alert-warning) {
  padding-bottom: 0px !important; /* 命名预览模式下表格底部无滚动条时内边距设为0px */
}

/* 命名预览模式下，有滚动条时的底部内边距 */
#fileSelectModal[data-modal-type="preview"] .modal-body > div.has-scrollbar:not(.alert-warning) {
  padding-bottom: 8px !important; /* 有滚动条时增加底部内边距 */
}

/* --------------- 模态框表格展开按钮样式 --------------- */
#fileSelectModal .expand-button {
  position: absolute;
  right: 5px;
  top: 7.5px; /* 固定位置 */
  transform: none; /* 移除垂直居中转换 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

#fileSelectModal .position-relative:hover .expand-button {
  opacity: 1;
}

#fileSelectModal .expand-button .bi {
  font-size: 0.78em;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
}

/* 确保模态框中的表格单元格可以正确显示展开按钮 */
#fileSelectModal .table td.position-relative {
  position: relative;
  vertical-align: top !important; /* 确保内容顶部对齐 */
}

/* 当表格行被点击时，防止展开按钮的点击事件冒泡 */
#fileSelectModal .expand-button {
  pointer-events: auto;
}

/* 确保展开状态下的文本可以正确换行 */
#fileSelectModal .table td [style*="white-space: normal"] {
  display: block;
  width: 100%;
  margin-top: 0; /* 移除顶部边距 */
  margin-bottom: 7px;
}

/* 确保表格行内容保持顶部对齐 */
#fileSelectModal .table tr {
  vertical-align: top !important;
}

#fileSelectModal .table td {
  vertical-align: top !important;
}

/* 移动设备插件折叠按钮左边距设置 */
@media (max-width: 767.98px) {
  div[data-toggle="collapse"] .btn.text-left {
    padding-left: 17px;
  }
}

/* 模态框表头悬停样式 */
#fileSelectModal .table th.cursor-pointer:hover {
  background-color: #f7f7fa; /* 表头悬停背景色 */
  cursor: pointer;
}

/* 移除number类型输入框的上下箭头 */
input.no-spinner::-webkit-outer-spin-button,
input.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox也需要特别处理 */
input.no-spinner {
  -moz-appearance: textfield;
}

/* 秒字框正方形样式 */
.square-append {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

/* 确保Crontab和延迟执行框在移动端也保持一行 */
@media (max-width: 767.98px) {
  .row.mb-2 .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .row.mb-2 .col-sm-6.pr-1 {
    padding-right: 4px !important;
    padding-left: 15px !important;
  }
  
  .row.mb-2 .col-sm-6.pl-1 {
    padding-left: 4px !important;
    padding-right: 15px !important;
  }
}

/* --------------- 转存记录相关样式 --------------- */
.selected-record {
  background-color: var(--button-gray-background-color) !important;
}

/* 文件大小值的文本位置调整 */
.file-size-cell .file-size-value {
  display: inline-block; /* 确保transform生效 */
  transform: translateY(0px);
}

/* 删除按钮图标大小 */
.delete-record-btn .bi-trash3 {
  font-size: 1rem;
}

/* 选中行或鼠标悬停行时显示删除按钮 */
tr.selected-record .delete-record-btn,
.selectable-records tbody tr:hover .delete-record-btn {
  visibility: visible;
}

/* 表头中的删除按钮仅在有选中行时显示 */
table th .delete-record-btn {
  visibility: hidden;
}

/* 禁止在表格中选择文本，以便更好地支持点击选择 */
table.selectable-records {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

table.selectable-records tbody tr {
  cursor: pointer;
  transition: none;
}

/* 修改表格行悬停样式，使用变量保持一致性 */
table.selectable-records tbody tr:hover {
  background-color: var(--button-gray-background-color);
}

/* 确保展开按钮在选中状态下仍然可见 */
tr.selected-record .expand-button {
  z-index: 2;
}

/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
table.selectable-records .expand-button:hover {
  background-color: transparent !important;
}

/* 转存记录页面删除按钮悬停效果 */
table.selectable-records .delete-record-btn:hover {
  color: #b02a37 !important;
}

/* 选中行或鼠标悬停行的大小列样式 */
tr.selected-record .file-size-cell .file-size-value,
.selectable-records tbody tr:hover .file-size-cell .file-size-value {
  display: none; /* 隐藏文件大小信息 */
}

tr.selected-record .file-size-cell .delete-record-btn,
.selectable-records tbody tr:hover .file-size-cell .delete-record-btn {
  display: flex;
  justify-content: flex-start; /* 居左对齐 */
  align-items: center;
  width: auto;
  height: 100%;
  margin-left: 0; /* 确保没有左边距 */
  padding-left: 0; /* 确保没有左内边距 */
  left: 9px; /* 与大小值保持相同的左边距 */
  position: absolute; /* 使用绝对定位 */
  top: 8px; /* 固定位置 */
  transform: none; /* 移除垂直居中转换 */
}

/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
table.selectable-records .expand-button:hover {
  background-color: #fff !important; /* 保持展开按钮原有的白色背景 */
}

/* 模态框表格单元格文本垂直对齐调整 */
#fileSelectModal .table td {
  transform: translateY(0.5px); /* 文本下移0.5px，不影响元素实际高度 */
}

/* 确保文件大小、修改日期和操作列的文本位置与文件名一致 */
#fileSelectModal .table td:not(.col-filename) {
  transform: translateY(1.5px); /* 非文件名列文本下移1.5px */
}

/* 特别调整红色"×"符号的位置 */
#fileSelectModal .table td.col-rename.text-danger div:not(.expand-button) {
  position: relative;
  top: 2px !important; /* 将"×"标记上移1px */
}

#fileSelectModal[data-modal-type="preview"] .table td.col-rename > * {
  position: relative;
  top: 3px !important;
}

/* 文件整理页面命名预览模式下的重命名列通用样式 */
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename > * {
  position: relative;
  top: 3px !important; /* 与任务配置页面保持一致 */
}

/* 模态框通用文件夹图标样式 */
#fileSelectModal .bi-folder-fill {
  color: #098eff;
  font-size: 0.95rem;
  margin-right: 4px !important;
  position: relative;
  top: 0.5px !important; /* 负值向上移动，正值向下移动 */
  left: -0.55px; /* 整体向左移动 */
}

/* 模态框通用文件图标样式 */
#fileSelectModal .bi-file-earmark,
#fileSelectModal .bi-file-earmark-play,
#fileSelectModal .bi-file-earmark-music,
#fileSelectModal .bi-file-earmark-image,
#fileSelectModal .bi-file-earmark-text,
#fileSelectModal .bi-file-earmark-richtext,
#fileSelectModal .bi-file-earmark-zip,
#fileSelectModal .bi-file-earmark-font,
#fileSelectModal .bi-file-earmark-code,
#fileSelectModal .bi-file-earmark-pdf,
#fileSelectModal .bi-file-earmark-word,
#fileSelectModal .bi-file-earmark-excel,
#fileSelectModal .bi-file-earmark-ppt,
#fileSelectModal .bi-file-earmark-medical {
  color: var(--dark-text-color);
  font-size: 0.95rem;
  margin-right: 4px !important;
  position: relative;
  top: 0.5px !important; /* 负值向上移动，正值向下移动 */
  left: -0.4px;
}

/* 添加选中文件的样式 */
.selected-file {
  background-color: var(--button-gray-background-color);
}

/* 确保文件选择模态框中的表格行在选中状态下保持可见 */
#fileSelectModal .table tr.selected-file:hover {
  background-color: var(--button-gray-background-color);
}

/* Plex按钮样式 */
.btn-outline-plex {
  border-color: #EBAF00;
  color: #EBAF00;
}

.btn-outline-plex:hover {
  background-color: #EBAF00;
  border-color: #EBAF00;
  color: #fff;
}

.btn-outline-plex:hover .plex-icon {
  filter: brightness(0) invert(1);
}

/* AList按钮样式 */
.btn-outline-alist {
  border-color: #70C6BE;
  color: #70C6BE;
}

.btn-outline-alist:hover {
  background-color: #70C6BE;
  border-color: #70C6BE;
  color: #fff;
}

.btn-outline-alist:hover .alist-icon {
  filter: brightness(0) invert(1);
}

/* Plex图标样式 */
.plex-icon {
  width: 10.3px;
  height: auto;
  object-fit: contain;
}

/* AList图标样式 */
.alist-icon {
  width: 18px;
  height: auto;
  object-fit: contain;
  position: relative;
  top: -0.5px;
}

/* 任务按钮悬停显示样式 */
.task-buttons .hover-only {
  opacity: 0;
  position: absolute;
  right: 0;
  visibility: hidden;
}

/* 修改悬停触发范围到整个任务单元 */
.task:hover .task-buttons .hover-only {
  opacity: 1;
  visibility: visible;
  position: static;
}

/* 确保按钮容器在悬停时保持宽度 */
.task-buttons {
  position: relative;
  min-width: 160px; /* 根据按钮数量和间距调整 */
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
  margin-right: 0;
}

/* 确保按钮在悬停时可见 */
.task:hover .task-buttons {
  z-index: 1;
}

/* 移动模式下的任务按钮容器样式 */
@media (max-width: 767.98px) {
  .task .col-auto.task-buttons {
    padding-right: 15px; /* 与添加任务按钮的右边距保持一致 */
  }
}

/* 任务最近更新日期样式 */
.task-latest-date {
  color: var(--dark-text-color);
  font-size: 0.95rem;
  font-weight: normal;
}

/* 任务最近转存文件样式 */
.task-latest-file {
  color: var(--dark-text-color);
  font-size: 0.95rem;
  font-weight: normal;
}

/* 悬停显示模式 - 使用display来避免占用空间，同时保持平滑的悬停效果 */
.task-latest-date.hover-only,
.task-latest-file.hover-only {
  display: none;
  transition: all 0.2s ease;
}

.task .btn:hover .task-latest-date.hover-only,
.task .btn:hover .task-latest-file.hover-only {
  display: inline;
}

/* 显示设置行样式 */
.display-setting-row > [class*='col-'] {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* 当天更新指示器样式 */
.task-today-indicator {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: bold;
}

.task-today-indicator i {
  background: linear-gradient(45deg, #03d5ff 25%, var(--focus-border-color) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--focus-border-color); /* 备用颜色，以防渐变不支持 */
}

/* 当日更新图标悬停显示样式 */
.task-today-indicator.hover-only {
  opacity: 0;
  visibility: hidden;
}

/* 任务列表页面悬停显示 */
.task:hover .task-today-indicator.hover-only {
  opacity: 1;
  visibility: visible;
}

/* 转存记录页面悬停显示 */
.table-hover tbody tr:hover .task-today-indicator.hover-only {
  opacity: 1;
  visibility: visible;
}

/* 文件整理页面悬停显示 */
.selectable-files tbody tr:hover .task-today-indicator.hover-only {
  opacity: 1;
  visibility: visible;
}

.display-setting-row {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

@media (min-width: 992px) {
  .display-setting-row > .col-lg-3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* 调整显示设置第二行的上边距，使其与第一行保持8px间距 */
.display-setting-row + .display-setting-row {
  margin-top: -8px !important;
}

/* 文件整理性能设置样式 */
.performance-setting-row > [class*='col-'] {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.performance-setting-row {
  margin-left: -4px !important;
  margin-right: -4px !important;
}

/* 性能设置板块标题上移8px，统一与其他设置板块的间距 */
.row.title[title*="文件整理页面的请求参数"] {
  margin-top: 12px !important; /* 从默认的20px减少到12px，上移8px */
}

/* 任务单元基础样式 */
.task {
  position: relative;
  cursor: pointer;
}

/* 任务展开后的配置区域使用默认指针 */
.task .collapse {
  cursor: default;
}

/* 确保按钮容器在悬停时保持宽度 */
.task-buttons {
  position: relative;
  min-width: 160px; /* 根据按钮数量和间距调整 */
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
  margin-right: 0;
}

/* 确保按钮在悬停时可见 */
.task:hover .task-buttons {
  z-index: 1;
}

/* 添加伪元素扩展整个任务单元的可点击区域 */
.task::before,
.task::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  background: transparent;
  z-index: 0;
  pointer-events: auto;
}

.task::before {
  top: 0;
}

.task::after {
  bottom: -8px;
}

/* 当鼠标悬停在任务单元上时，任务标题变为蓝色 */
.task:hover .btn.btn-block.text-left {
  color: var(--focus-border-color);
}

select.task-filter-select,
.task-filter-select {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group .form-control:focus {
  z-index: 3;
  position: relative;
}
.input-group .form-control:focus + .input-group-append .btn,
.input-group .form-control:focus + .input-group-append .btn:focus {
  border-left-color: #2563eb !important; /* 激活时的边框色 */
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}

/* 添加任务名称悬停样式 */
.task-name-hover {
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.task-name-hover:hover {
  color: var(--focus-border-color) !important;
}

/* 文件整理页面样式 */
.file-manager-card {
  display: none; /* 隐藏卡片 */
}

.file-manager-card .card-body {
  padding: 0; /* 移除内边距 */
}

.file-manager-input {
  flex: 1;
}

/* 文件整理页面面包屑导航样式 */
.file-manager-breadcrumb {
  margin-top: 20px;
}

.file-manager-breadcrumb .breadcrumb-item {
  color: var(--dark-text-color);
  padding: 0;
  position: relative; /* 添加相对定位 */
}

.file-manager-breadcrumb .breadcrumb-item a {
  color: var(--dark-text-color);
  text-decoration: none;
}

.file-manager-breadcrumb .breadcrumb-item a:hover {
  color: var(--focus-border-color);
}

/* 文件整理页面面包屑导航当前目录样式 */
.file-manager-breadcrumb .breadcrumb-item .text-muted {
  color: var(--dark-text-color) !important;
}

/* 隐藏Bootstrap默认的面包屑分隔符 */
.file-manager-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--dark-text-color);
  content: "/"; /* 使用斜杠作为分隔符 */
  position: relative;
  display: inline-block;
  vertical-align: middle; /* 垂直居中 */
  padding: 0 8px; /* 在斜杠两侧添加间距 */
  top: -1px; /* 将分隔符上移1px */
}

.file-actions {
  white-space: nowrap;
}

.selectable-files tr.selected-file {
  background-color: rgba(var(--primary-rgb), 0.1);
}

.batch-rename-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
}

/* 为相邻的batch-rename-btn按钮添加左边距 */
.batch-rename-btn + .batch-rename-btn {
  margin-left: 8px;
}

/* 文件整理页面按钮与前面元素的间距 */
.file-manager-rule-bar .batch-rename-btn:first-of-type {
  margin-left: 8px;
}

/* 移动端文件整理页面按钮与前面元素的间距 */
.file-manager-rule-bar-responsive .batch-rename-btn:first-of-type {
  margin-left: 8px;
}

.batch-rename-btn:hover {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: white !important;
}

/* 文件整理页面刷新当前目录缓存按钮图标大小 */
.batch-rename-btn .bi-arrow-clockwise {
  font-size: 1.17rem;
}

/* 文件整理页面新建文件夹按钮图标大小 */
.batch-rename-btn .bi-folder-plus {
  font-size: 1.01rem;
  position: relative;
  top: 0px;
}

/* 确保文件整理页面的Plex和AList按钮样式与任务列表一致 */
.batch-rename-btn.btn-outline-plex,
.batch-rename-btn.btn-outline-alist {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
}

/* 文件整理页面Plex按钮样式 */
.batch-rename-btn.btn-outline-plex {
  border-color: #EBAF00 !important;
  color: #EBAF00 !important;
}

.batch-rename-btn.btn-outline-plex:hover {
  background-color: #EBAF00 !important;
  border-color: #EBAF00 !important;
  color: #fff !important;
}

.batch-rename-btn.btn-outline-plex:hover .plex-icon {
  filter: brightness(0) invert(1);
}

/* 文件整理页面AList按钮样式 */
.batch-rename-btn.btn-outline-alist {
  border-color: #70C6BE !important;
  color: #70C6BE !important;
}

.batch-rename-btn.btn-outline-alist:hover {
  background-color: #70C6BE !important;
  border-color: #70C6BE !important;
  color: #fff !important;
}

.batch-rename-btn.btn-outline-alist:hover .alist-icon {
  filter: brightness(0) invert(1);
}



/* 文件表格中的展开按钮 */
.expand-button {
  position: absolute;
  right: 5px;
  top: 11px; /* 固定位置，与其他表格保持一致 */
  transform: none; /* 移除垂直居中转换 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.expand-button:hover {
  opacity: 1;
}

/* 批量重命名模态框样式 */
#batchRenameModal .modal-dialog {
  max-width: 80%;
}

#batchRenameModal .table {
  margin-bottom: 0;
}

#batchRenameModal .badge {
  font-size: 90%;
  font-weight: 500;
  word-break: break-all;
}

#batchRenameModal .alert {
  margin-bottom: 15px;
}

#batchRenameModal .text-danger {
  background-color: rgba(var(--danger-rgb), 0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .file-manager-rule-bar {
    flex-direction: column;
  }
  
  .file-manager-rule-bar .input-group {
    margin-bottom: 10px;
  }
  
  .batch-rename-btn {
    margin-top: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
  }

  /* 移动端按钮间距重置 */
  .batch-rename-btn + .batch-rename-btn {
    margin-left: 8px;
  }

  /* 移动端第一个按钮与前面元素的间距 */
  .file-manager-rule-bar-responsive .batch-rename-btn:first-of-type {
    margin-left: 8px;
  }
  
  #batchRenameModal .modal-dialog {
    max-width: 95%;
  }
}

/* 文件大小单元格样式 */
.file-size-cell {
  position: relative;
}

.file-size-cell .file-size-value {
  display: inline-block;
}

.delete-record-btn .bi-trash3 {
  font-size: 1rem;
}

/* 当行被选中或鼠标悬停时显示删除按钮 */
tr:hover .delete-record-btn,
tr.selected-file .delete-record-btn {
  display: inline-block;
}

/* 表格标题行不显示删除按钮 */
table th .delete-record-btn {
  display: none !important;
}

/* 可选择的表格样式 */
table.selectable-files {
  border-collapse: separate;
  border-spacing: 0;
}

table.selectable-files tbody tr {
  transition: none;
}

table.selectable-files tbody tr:hover {
  background-color: rgba(var(--primary-rgb), 0.05);
}

/* 选中行时展开按钮的样式 */
tr.selected-file .expand-button {
  background-color: var(--button-gray-background-color);
}

/* 展开按钮悬停样式 */
table.selectable-files .expand-button:hover,
tr.selected-file .expand-button:hover {
  background-color: #fff;
  opacity: 1;
}

/* 选中行时文件大小和删除按钮的样式 */
tr.selected-file .file-size-cell .file-size-value,
tr.selected-file .file-size-cell .delete-record-btn {
  position: relative;
  z-index: 1;
}

/* 文件整理页面表格样式 */
.selectable-files {
  border-collapse: collapse !important;
}

.selectable-files td, 
.selectable-files th {
  border: none !important;
  border-top: 1px solid var(--border-color) !important; /* 添加顶部边框线 */
  border-bottom: 1px solid var(--border-color) !important; /* 添加底部分割线 */
}

.selectable-files tbody tr {
  cursor: pointer;
  transition: none;
}

.selectable-files tbody tr:hover {
  background-color: var(--button-gray-background-color) !important;
}

/* 删除按钮样式调整 */
.selectable-files .delete-record-btn {
  color: #dc3545;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: flex-start; /* 居左对齐 */
  width: 24px;
  height: 24px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  position: absolute;
  right: auto; /* 移除右对齐 */
  left: 9px; /* 与大小值保持相同的左边距 */
  top: 50%;
  transform: translateY(-50%);
}

.selectable-files tr:hover .delete-record-btn,
.selectable-files tr.selected-file .delete-record-btn {
  display: inline-flex;
}

.selectable-files tr:hover .file-size-value,
.selectable-files tr.selected-file .file-size-value {
  visibility: hidden;
}

/* 确保选中行的样式正确 */
.selectable-files tr.selected-file {
  background-color: var(--button-gray-background-color) !important;
}

/* 使面包屑导航样式与表头一致 */
.file-manager-breadcrumb .breadcrumb {
  background-color: var(--button-gray-background-color) !important;
  border-radius: 0px;
  font-size: 0.95rem;
  padding: 0 9px !important;
  margin-bottom: 8px;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  display: flex;
  align-items: center;
  height: 42px !important; /* 确保面包屑导航内容区域高度为42px（包含上下边框） */
  line-height: 23px !important; /* 设置行高以确保文字垂直居中 */
  box-sizing: border-box !important; /* 确保边框包含在总高度内 */
}

.file-manager-breadcrumb .breadcrumb-item {
  color: var(--dark-text-color);
  padding: 0;
  position: relative; /* 添加相对定位 */
}

.file-manager-breadcrumb .breadcrumb-item a {
  color: var(--dark-text-color);
  text-decoration: none;
}

.file-manager-breadcrumb .breadcrumb-item a:hover {
  color: var(--focus-border-color);
}

/* 让"全部文件"链接悬停时文字变为蓝色 */
.file-manager-breadcrumb .breadcrumb-item.cursor-pointer:hover {
  background-color: transparent; /* 移除背景色 */
  color: var(--focus-border-color);
}

.file-manager-breadcrumb .breadcrumb-item.cursor-pointer:hover {
  color: var(--focus-border-color);
}

/* 文件整理页面样式 */
.file-manager-input {
  flex: 1;
}

/* 文件整理页面面包屑导航样式 */
.file-manager-breadcrumb {
  margin-top: 20px;
}

/* 文件整理规则栏样式 */
.file-manager-rule-bar {
  width: 100%;
}

/* 文件整理账号选择栏样式 */
.file-manager-account-selector {
  margin-bottom: 8px !important;
}

/* 账号选择下拉框样式 */
.file-manager-account-select {
  padding-left: 8px !important;
  text-indent: 0 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
  padding-right: 24px !important;
}

/* 账号选择框右侧圆角 - 需要更高优先级覆盖file-manager-input的圆角设置 */
.file-manager-rule-bar .file-manager-account-select,
.file-manager-rule-bar-responsive .file-manager-account-select {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* 禁止在表格中选择文本，以便更好地支持点击选择 */
table.selectable-files {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 确保展开按钮在选中状态下仍然可见 */
tr.selected-file .expand-button {
  z-index: 2;
}

/* 当鼠标悬停在展开按钮上时，不改变按钮的背景色 */
table.selectable-files .expand-button:hover {
  background-color: transparent !important;
}

/* 文件整理页面重命名按钮悬停效果 */
table.selectable-files .rename-record-btn:hover {
  color: #0A42CC !important;
}

/* 文件整理页面移动按钮悬停效果 */
table.selectable-files .move-record-btn:hover {
  color: #0A42CC !important;
}

/* 文件整理页面删除按钮悬停效果 */
table.selectable-files .delete-record-btn:hover {
  color: #b02a37 !important;
}

/* 选中行或鼠标悬停行的大小列样式 */
tr.selected-file .file-size-cell .file-size-value,
.selectable-files tbody tr:hover .file-size-cell .file-size-value {
  display: none; /* 隐藏文件大小信息 */
}

tr.selected-file .file-size-cell .delete-record-btn,
.selectable-files tbody tr:hover .file-size-cell .delete-record-btn {
  display: flex;
  justify-content: flex-start; /* 居左对齐 */
  align-items: center;
  width: auto;
  height: 100%;
  margin-left: 0; /* 确保没有左边距 */
  padding-left: 0; /* 确保没有左内边距 */
  left: 9px; /* 与大小值保持相同的左边距 */
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 确保垂直居中 */
}

/* 当鼠标悬停在展开按钮或删除按钮上时，不改变按钮的背景色 */
table.selectable-files .expand-button:hover {
  background-color: #fff !important; /* 保持展开按钮原有的白色背景 */
}

/* 文件整理页面表头样式，与转存记录页面保持一致 */
.selectable-files th,
table.selectable-files th {
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color) !important; /* 修改底部边框为1px */
  border-top: 1px solid var(--border-color) !important; /* 添加上边框线 */
  padding: 8px 9px !important; /* 统一表头内边距 */
  background-color: var(--button-gray-background-color) !important; /* 表头背景色 */
  color: var(--dark-text-color) !important; /* 表头文字颜色 */
  height: 40px !important; /* 确保表头高度为40px */
  line-height: 24px !important; /* 设置行高以确保文字垂直居中 */
  box-sizing: border-box !important; /* 确保边框包含在总高度内 */
}

/* 文件整理页面表格单元格样式，与转存记录页面保持一致 */
.selectable-files td,
table.selectable-files td {
  vertical-align: middle !important; /* 统一使用垂直居中对齐 */
  height: 40px !important; /* 与表头保持一致的高度 */
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 9px !important; /* 统一单元格内边距 */
  border-bottom: 1px solid var(--border-color); /* 单元格分割线颜色 */
  border-top: none !important; /* 确保没有上边框 */
  box-sizing: border-box !important; /* 确保边框计入总高度 */
  line-height: 24px !important; /* 与表头保持一致的行高 */
}

/* 确保文件大小列的垂直对齐保持一致 */
.table .file-size-cell,
.selectable-files .file-size-cell,
table.selectable-files .file-size-cell {
  vertical-align: middle !important;
}

/* 表头悬停样式 */
.table thead th.cursor-pointer:hover {
  background-color: #f7f7fa; /* 表头悬停背景色 */
}

/* 确保所有表格的表头悬停样式一致 */
.table th.cursor-pointer:hover,
.selectable-files th.cursor-pointer:hover,
table.selectable-files th.cursor-pointer:hover,
table.selectable-records th.cursor-pointer:hover {
  background-color: #f7f7fa !important; /* 表头悬停背景色 */
  cursor: pointer;
}

/* 添加表头排序列的鼠标指针样式 */
.table th.sortable,
.selectable-files th.sortable,
table.selectable-files th.sortable,
table.selectable-records th.sortable {
  cursor: pointer;
}

/* 确保展开后其他列（如转存日期、大小、修改日期）的内容保持在原始位置 */
.table tr td {
  vertical-align: top !important; /* 确保所有单元格内容顶部对齐 */
}

/* 确保文件整理页面和模态框中的表格也应用相同的规则 */
#fileSelectModal .table tr td,
.selectable-files tr td,
table.selectable-files tr td,
table.selectable-records tr td {
  vertical-align: top !important; /* 确保所有单元格内容顶部对齐 */
}

/* 确保展开后的行中所有单元格内容保持原位 */
.table tr:has(.expanded-text) td,
#fileSelectModal .table tr:has([style*="white-space: normal"]) td,
.selectable-files tr:has([style*="white-space: normal"]) td {
  vertical-align: top !important; /* 确保展开后所有单元格内容顶部对齐 */
}



/* 文件大小列中展开行的重命名按钮特殊处理 */
tr:has(.expanded-text) .file-size-cell .rename-record-btn,
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .rename-record-btn,
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
  top: 8px !important; /* 强制固定位置 */
  transform: none !important; /* 确保不使用任何转换 */
  left: 5px !important; /* 确保左边距固定 */
  /* 不设置display，保持默认的隐藏状态 */
}

/* 文件大小列中展开行的移动按钮特殊处理 */
tr:has(.expanded-text) .file-size-cell .move-record-btn,
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .move-record-btn,
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .move-record-btn,
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .move-record-btn {
  top: 8px !important; /* 强制固定位置 */
  transform: none !important; /* 确保不使用任何转换 */
  left: 32px !important; /* 确保左边距固定，在重命名按钮右侧 */
  /* 不设置display，保持默认的隐藏状态 */
}

/* 文件大小列中展开行的删除按钮特殊处理 */
tr:has(.expanded-text) .file-size-cell .delete-record-btn,
.selectable-records tbody tr:has(.expanded-text) .file-size-cell .delete-record-btn,
#fileSelectModal .table tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
  top: 8px !important; /* 强制固定位置 */
  transform: none !important; /* 确保不使用任何转换 */
  left: 59px !important; /* 确保左边距固定，在移动按钮右侧 */
  /* 不设置display，保持默认的隐藏状态 */
}

/* 修复删除按钮位置问题 - 使用更强制的方法 */
.delete-record-btn {
  color: #dc3545;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  visibility: hidden;
  position: absolute !important; /* 强制绝对定位 */
  top: 8px !important; /* 强制固定位置 */
  transform: none !important; /* 强制禁用任何转换 */
  left: 0;
}

/* 删除按钮图标大小 */
.delete-record-btn .bi-trash3 {
  font-size: 1rem;
}

/* 选中行或鼠标悬停行时显示删除按钮 */
tr.selected-record .delete-record-btn,
.selectable-records tbody tr:hover .delete-record-btn {
  visibility: visible;
}

/* 表头中的删除按钮仅在有选中行时显示 */
table th .delete-record-btn {
  visibility: hidden;
}

/* 选中行或鼠标悬停行的大小列样式 */
tr.selected-record .file-size-cell .file-size-value,
.selectable-records tbody tr:hover .file-size-cell .file-size-value {
  display: none; /* 隐藏文件大小信息 */
}

/* 文件大小列中的删除按钮特殊处理 - 完全重写这部分规则 */
tr .file-size-cell .delete-record-btn,
tr.selected-record .file-size-cell .delete-record-btn,
.selectable-records tbody tr .file-size-cell .delete-record-btn,
.selectable-records tbody tr:hover .file-size-cell .delete-record-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 24px;
  margin-left: 0;
  padding-left: 0;
  left: 9px !important; /* 强制固定左边距 */
  position: absolute !important; /* 强制绝对定位 */
  top: 8px !important; /* 强制固定位置 */
  transform: none !important; /* 强制禁用任何转换 */
}




/* 文件整理页面表格行悬停样式 */
.selectable-files tbody tr:hover {
  background-color: var(--button-gray-background-color);
}

/* --------------- 文件整理页面样式 --------------- */

/* 重命名按钮样式 */
.selectable-files .rename-record-btn {
  color: var(--focus-border-color);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  left: 5px; /* 靠左放置 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* 文件整理页面的重命名文件按钮图标大小 */
.selectable-files .rename-record-btn .bi-pencil {
  font-size: 0.99rem;
  position: relative;
  left: 0.5px;
}

/* 移动按钮样式 */
.selectable-files .move-record-btn {
  color: var(--focus-border-color);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  left: 32px; /* 在重命名按钮右侧，调整间距 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* 文件整理页面的移动文件按钮图标大小 */
.selectable-files .move-record-btn .bi-arrow-up-right-circle {
  font-size: 1.07rem;
  position: relative;
}

/* 删除按钮样式调整 */
.selectable-files .delete-record-btn {
  color: #dc3545;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  position: absolute;
  right: auto; /* 移除右对齐 */
  left: 59px; /* 在移动按钮右侧，调整间距 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}

/* 文件大小单元格需要相对定位以容纳绝对定位的按钮 */
.selectable-files .file-size-cell {
  position: relative;
  min-width: 80px;
}

/* 修复：确保在悬停和选中状态下重命名、移动和删除按钮显示 */
.selectable-files tr:hover .file-size-cell .rename-record-btn,
.selectable-files tr.selected-file .file-size-cell .rename-record-btn,
.selectable-files tr:hover .file-size-cell .move-record-btn,
.selectable-files tr.selected-file .file-size-cell .move-record-btn,
.selectable-files tr:hover .file-size-cell .delete-record-btn,
.selectable-files tr.selected-file .file-size-cell .delete-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
}

/* 修复：确保在悬停和选中状态下文件大小值隐藏 */
.selectable-files tr:hover .file-size-cell .file-size-value,
.selectable-files tr.selected-file .file-size-cell .file-size-value {
  display: none !important;
  visibility: hidden !important;
}

/* 重命名输入框样式 - 使用更高优先级 */
.selectable-files .rename-input {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 0.94rem !important;
  padding: 4px 5.5px !important;
  border: 1px solid var(--focus-border-color) !important;
  border-radius: 6px !important;
  outline: none !important;
  background-color: #fff !important;
  height: auto !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  margin-top: -2px !important;
  margin-bottom: -2px !important;
}

.selectable-files .rename-input:focus {
  border-color: var(--focus-border-color) !important;
  box-shadow: none !important;
}

/* 确保文件整理页面的重命名按钮在悬停和选中状态下始终可见 - 最高优先级 */
body .selectable-files tbody tr:hover .file-size-cell .rename-record-btn,
body .selectable-files tr.selected-file .file-size-cell .rename-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 5px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 确保文件整理页面的移动按钮在悬停和选中状态下始终可见 - 最高优先级 */
body .selectable-files tbody tr:hover .file-size-cell .move-record-btn,
body .selectable-files tr.selected-file .file-size-cell .move-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 32px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 确保文件整理页面的删除按钮在悬停和选中状态下始终可见 - 最高优先级 */
body .selectable-files tbody tr:hover .file-size-cell .delete-record-btn,
body .selectable-files tr.selected-file .file-size-cell .delete-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 59px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 展开状态下的重命名按钮悬停和选中状态 - 最高优先级 */
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn,
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .rename-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 8px !important;
  transform: none !important;
  left: 5px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 展开状态下的移动按钮悬停和选中状态 - 最高优先级 */
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .move-record-btn,
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .move-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 8px !important;
  transform: none !important;
  left: 32px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 展开状态下的删除按钮悬停和选中状态 - 最高优先级 */
body .selectable-files tbody tr:hover:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn,
body .selectable-files tr.selected-file:has([style*="white-space: normal"]) .file-size-cell .delete-record-btn {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 8px !important;
  transform: none !important;
  left: 59px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  opacity: 1 !important;
}

/* 文件整理页面的文件名单元格样式 */
.selectable-files td .text-truncate {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 25px; /* 为展开按钮预留空间 */
  line-height: inherit; /* 使用继承的行高 */
}

/* 文件整理页面展开后的文本样式 */
.selectable-files td div:not(.text-truncate):not(.expand-button):not(.d-flex) {
  white-space: normal;
  word-break: break-all;
  display: block;
  line-height: inherit; /* 使用继承的行高 */
  margin-top: 0;
  margin-bottom: -1px;
  position: relative;
  padding-right: 25px;
  max-width: 100%; /* 确保不超出单元格宽度 */
  top: -1px;
}

/* 展开按钮悬停状态 */
.selectable-files .expand-button:hover {
  background-color: #fff !important; /* 保持白色背景 */
  opacity: 1 !important;
}

/* 展开按钮样式 */
.selectable-files .expand-button {
  position: absolute;
  right: 5px;
  top: 11px; /* 固定位置，不使用垂直居中 */
  transform: none; /* 移除垂直居中转换 */
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  z-index: 2;
  pointer-events: auto; /* 确保点击事件不被阻止 */
}

/* 展开按钮悬停时可见 */
.selectable-files .position-relative:hover .expand-button {
  opacity: 1;
}

/* 展开按钮中的图标样式 */
.selectable-files .expand-button .bi {
  font-size: 0.7em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* 确保单元格垂直居中 */
.selectable-files td {
  vertical-align: middle !important;
}

/* 确保图标与文本垂直对齐 */
.selectable-files .d-flex.align-items-center {
  align-items: center !important;
}

/* 确保图标固定大小不变形 */
.selectable-files .d-flex.align-items-center i.bi {
  flex-shrink: 0;
}

/* 确保图标与文本垂直对齐 - 使用固定高度 */
.selectable-files .d-flex.align-items-center {
  align-items: flex-start !important; /* 改为顶部对齐，使用固定高度 */
}

/* 确保图标固定大小不变形，使用固定位置 */
.selectable-files .d-flex.align-items-center i.bi {
  flex-shrink: 0;
  position: relative;
  top: 0px; /* 固定图标位置，向下移动4px */
}

/* 修复文件整理页面展开后文件大小列的垂直对齐问题 */
/* 确保展开后的行中所有单元格都使用顶部对齐 */
.selectable-files tr:has([style*="white-space: normal"]) td,
.selectable-files tr:has(div:not(.text-truncate):not(.expand-button):not(.d-flex)) td {
  vertical-align: top !important; /* 强制展开后所有单元格顶部对齐 */
}

/* 特别处理文件大小列，确保展开后也使用顶部对齐 */
.selectable-files tr:has([style*="white-space: normal"]) .file-size-cell,
.selectable-files tr:has(div:not(.text-truncate):not(.expand-button):not(.d-flex)) .file-size-cell {
  vertical-align: top !important; /* 强制文件大小列顶部对齐 */
}



/* 确保选中状态下文件整理页面的展开按钮也保持白色背景 */
.selectable-files .expand-button {
  background-color: #fff !important;
}

/* 文件整理页面重命名配置框输入框样式 - 去除圆角 */
.file-manager-rule-bar .file-manager-input {
  border-radius: 0 !important; /* 去除圆角 */
}

/* 账号选择框例外 - 保持右侧圆角 */
.file-manager-rule-bar .file-manager-input.file-manager-account-select {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

/* 文件整理页面重命名配置框输入框相邻边框重叠样式 */
.file-manager-rule-bar .file-manager-input:not(:first-child) {
  margin-left: -1px; /* 向左移动1px，使边框重叠 */
}

/* 确保输入框在输入组中的边框重叠 */
.file-manager-rule-bar .input-group .file-manager-input:not(:first-child) {
  border-left: 1px solid var(--border-color) !important; /* 确保左边框显示 */
  margin-left: -1px; /* 向左移动1px，使边框重叠 */
}

/* 文件整理页面正则命名按钮样式 - 保持左边圆角，去除右边圆角 */
.file-manager-rule-bar .input-group-prepend .btn {
  position: relative; /* 添加相对定位以应用z-index */
  z-index: 2; /* 确保边框在顶层 */
  border-top-left-radius: 6px !important; /* 保持左上角圆角 */
  border-bottom-left-radius: 6px !important; /* 保持左下角圆角 */
  border-top-right-radius: 0 !important; /* 去除右上角圆角 */
  border-bottom-right-radius: 0 !important; /* 去除右下角圆角 */
  border-right: 1px solid var(--dark-text-color) !important; /* 确保右边框显示 */
}

/* 文件整理页面匹配表达式输入框左边框与正则命名按钮右边框重叠 */
.file-manager-rule-bar .input-group-prepend + input.file-manager-input {
  margin-left: 0px;
}

/* 文件整理页面激活的输入框边框置顶 */
.file-manager-rule-bar .file-manager-input:focus {
  position: relative;
  z-index: 3;
}

/* 仅影响文件选择模态框表格的表头和单元格高度，减少5px */
#fileSelectModal .table th {
  padding-top: 4.5px !important;  /* 原7px，减少2.5px */
  padding-bottom: 4px !important; /* 原6.5px，减少2.5px */
  height: 35px !important;        /* 原40px，减少5px */
  line-height: 19px !important;   /* 原24px，减少5px */
}

#fileSelectModal .table td {
  padding-top: 3px !important;    /* 原5.5px，减少2.5px */
  padding-bottom: 4.5px !important; /* 原7px，减少2.5px */
  height: 35px !important;        /* 原40px，减少5px */
  line-height: 19px !important;   /* 原24px，减少5px */
}

#fileSelectModal .table td {
  vertical-align: middle !important;
  position: relative;
}

#fileSelectModal .table td > *:not(.expand-button) {
  position: relative;
  top: 3.5px;
}

#fileSelectModal .table td.col-size,
#fileSelectModal .table td.col-date {
  padding-top: 6px !important;
}

#fileSelectModal .table td.col-rename,
#fileSelectModal .table td.col-action {
  padding-top: 2.5px !important;
}

#fileSelectModal[data-modal-type="preview"] .table td.col-rename {
  padding-top: 3px !important;
}

/* 文件整理页面的文件图标样式 */
.selectable-files .bi-file-earmark,
.selectable-files .bi-file-earmark-play,
.selectable-files .bi-file-earmark-music,
.selectable-files .bi-file-earmark-image,
.selectable-files .bi-file-earmark-text,
.selectable-files .bi-file-earmark-richtext,
.selectable-files .bi-file-earmark-zip,
.selectable-files .bi-file-earmark-font,
.selectable-files .bi-file-earmark-code,
.selectable-files .bi-file-earmark-pdf,
.selectable-files .bi-file-earmark-word,
.selectable-files .bi-file-earmark-excel,
.selectable-files .bi-file-earmark-ppt,
.selectable-files .bi-file-earmark-medical {
  font-size: 1.06rem;   /* 比模态框的0.95rem大一些 */
  margin-right: 7px !important;    /* 图标距离文本的距离 */
  position: relative;
  top: 1px;             /* 可微调垂直对齐 */
  left: -1px;           /* 可微调水平对齐 */
}

/* 文件整理页面的文件夹图标样式 */
.bi-folder-fill {
  font-size: 1.06rem;   /* 比模态框的0.95rem大一些 */
  margin-right: 7px !important;    /* 图标距离文本的距离 */
  position: relative;
  top: 1px;             /* 可微调垂直对齐 */
  left: -1px;           /* 可微调水平对齐 */
  color: #098eff;       /* 55%接近深蓝色 */
}

/* 文件整理页面无法识别剧集编号样式 */
#fileSelectModal[data-modal-type="preview-filemanager"] .episode-number-text {
  position: relative;
  top: 1.5px; /* 或你想要的像素 */
  display: inline-block;
}

/* 任务配置页面无法识别剧集编号样式 */
#fileSelectModal[data-modal-type="preview"] .episode-number-text {
  position: relative;
  top: 1px;
  display: inline-block;
  left: 2px;
}

/* 文件整理页面无法识别剧集编号前面的 × 样式 */
#fileSelectModal[data-modal-type="preview-filemanager"] .episode-x {
  position: relative;
  top: 0.5px;
  display: inline-block;
  margin-right: 2px;
}

/* 文件整理页面命名预览模式下的绿色重命名文本上移0.5px */
#fileSelectModal[data-modal-type="preview-filemanager"] .table td.col-rename.text-success > * {
  position: relative;
  top: 3px !important; /* 原来是3px，上移0.5px */
}

/* 文件整理页面命名预览模式下的取消按钮样式 */
#fileSelectModal[data-modal-type="preview-filemanager"] .modal-footer .btn-cancel {
  background-color: var(--button-gray-background-color) !important;
  border-color: var(--button-gray-background-color) !important;
  color: var(--dark-text-color) !important;
}


#fileSelectModal[data-modal-type="preview-filemanager"] .modal-footer .btn-cancel:hover {
  background-color: #e0e2e6 !important;
  border-color: #e0e2e6 !important;
  color: var(--dark-text-color) !important;
}

/* 移动文件模态框的取消按钮样式 */
#fileSelectModal[data-modal-type="move"] .modal-footer .btn-cancel {
  background-color: var(--button-gray-background-color) !important;
  border-color: var(--button-gray-background-color) !important;
  color: var(--dark-text-color) !important;
}
#fileSelectModal[data-modal-type="move"] .modal-footer .btn-cancel:hover {
  background-color: #e0e2e6 !important;
  border-color: #e0e2e6 !important;
  color: var(--dark-text-color) !important;
}

/* 创建任务模态框的取消按钮样式 */
#createTaskModal .modal-footer .btn-cancel {
  background-color: var(--button-gray-background-color) !important;
  border-color: var(--button-gray-background-color) !important;
  color: var(--dark-text-color) !important;
}

#createTaskModal .modal-footer .btn-cancel:hover {
  background-color: #e0e2e6 !important;
  border-color: #e0e2e6 !important;
  color: var(--dark-text-color) !important;
}

/* --------------- 模态框层级管理 --------------- */
/* 当从创建任务模态框中打开文件选择模态框时，确保文件选择模态框显示在上层 */
#createTaskModal.show ~ #fileSelectModal {
  z-index: 1060 !important;
}

#createTaskModal.show ~ #fileSelectModal .modal-backdrop {
  z-index: 1055 !important;
}

/* --------------- 创建任务模态框使用任务列表样式 --------------- */

/* 创建任务模态框底部间距调整 */
#createTaskModal .modal-footer {
  margin-top: 5px; /* 调整为5px，让分割线距离按钮16px */
}

/* 创建任务模态框中的搜索按钮样式 */
#createTaskModal .btn-primary:has(.bi-search) {
  background-color: transparent;
  border-color: var(--dark-text-color);
  color: var(--dark-text-color);
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0; /* 去掉圆角 */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#createTaskModal .btn-primary:has(.bi-search):hover {
  background-color: var(--dark-text-color) !important; /* 使用!important确保优先级 */
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

#createTaskModal .btn-primary:hover .bi-search {
  color: #fff !important;
}

/* 覆盖可能存在的其他btn-primary样式 */
#createTaskModal .input-group-append .btn-primary:has(.bi-search):hover {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

#createTaskModal .input-group-append .btn-primary:has(.bi-search) {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
}

/* 创建任务模态框中的输入组按钮样式 */
#createTaskModal .input-group-append .btn,
#createTaskModal .input-group-prepend .btn {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#createTaskModal .input-group-append .btn:has(i.bi):not(.btn-primary),
#createTaskModal .input-group-prepend .btn:has(i.bi):not(.btn-primary) {
  width: 32px;
  height: 32px;
  padding: 0;
}

/* 创建任务模态框中的图标悬停样式 */
#createTaskModal .btn-outline-secondary:hover .bi-folder,
#createTaskModal .btn-outline-secondary:hover .bi-calendar3,
#createTaskModal .btn-outline-secondary:hover .bi-reply,
#createTaskModal .btn-outline-secondary:hover .bi-folder-x,
#createTaskModal .input-group-text:hover .bi-google,
#createTaskModal .input-group-text:hover .bi-link-45deg,
#createTaskModal .input-group-text:hover .tmdb-icon,
#createTaskModal .input-group-text:hover .douban-icon {
  color: #fff;
}

/* 创建任务模态框中的input-group-text样式 */
#createTaskModal .input-group-text {
  background-color: #fff;
  border-color: var(--border-color);
  color: var(--dark-text-color);
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  transition: all 0.2s ease;
}

#createTaskModal .input-group-text:hover {
  background-color: var(--dark-text-color);
  border-color: var(--dark-text-color);
  color: #fff;
}

/* 忽略后缀文本不应该有悬停效果 */
#createTaskModal .input-group-text:has(input[type="checkbox"]) {
  background-color: var(--button-gray-background-color) !important;
  border-color: var(--border-color) !important;
  color: var(--dark-text-color) !important;
}

#createTaskModal .input-group-text:has(input[type="checkbox"]):hover {
  background-color: var(--button-gray-background-color) !important;
  border-color: var(--border-color) !important;
  color: var(--dark-text-color) !important;
}

/* 创建任务模态框中的按钮样式 - 完全复制任务列表样式 */
#createTaskModal .btn-outline-secondary:hover {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

#createTaskModal .btn-outline-secondary:active {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

/* 修复创建任务模态框中日历按钮点击后背景色不恢复的问题 */
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):focus,
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):active,
#createTaskModal .btn-outline-secondary:has(.bi-calendar3).focus,
#createTaskModal .btn-outline-secondary:has(.bi-calendar3).active {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 强制覆盖所有可能的日历按钮状态 */
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):focus,
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):active,
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3).focus,
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3).active {
  background-color: transparent !important;
  border-color: var(--dark-text-color) !important;
  color: var(--dark-text-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 确保日历按钮悬停时正确显示 */
#createTaskModal .btn-outline-secondary:has(.bi-calendar3):hover,
#createTaskModal .input-group-append .btn-outline-secondary:has(.bi-calendar3):hover {
  background-color: var(--dark-text-color) !important;
  border-color: var(--dark-text-color) !important;
  color: #fff !important;
}

/* 创建任务模态框中的图标样式 */
#createTaskModal .tmdb-icon,
#createTaskModal .douban-icon {
  width: 16px;
  height: 16px;
  transition: filter 0.2s ease;
}

#createTaskModal .input-group-text:hover .tmdb-icon,
#createTaskModal .input-group-text:hover .douban-icon {
  filter: brightness(0) invert(1); /* 将图标变为白色 */
}

/* 创建任务模态框中的输入组焦点样式 */
#createTaskModal .input-group .form-control:focus + .input-group-append .btn,
#createTaskModal .input-group .form-control:focus + .input-group-append .btn:focus {
  border-left-color: #2563eb !important;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}

/* 创建任务模态框中的表单组样式 */
#createTaskModal .form-group.row {
  margin-bottom: 8px; /* 设置行之间的间距为8px */
  padding-top: 0;
  padding-bottom: 0;
}

/* 创建任务模态框中的标签样式 */
#createTaskModal .form-group.row .col-sm-2 {
  max-width: 104px; /* 设置最大宽度为104px */
  min-width: 104px; /* 保持最小宽度一致 */
  width: 104px; /* 固定宽度 */
}

/* 创建任务模态框中的输入框列自适应 */
#createTaskModal .form-group.row .col-sm-10 {
  width: calc(100% - 104px); /* 计算剩余宽度 */
  max-width: calc(100% - 104px); /* 最大宽度也应该计算 */
  flex: 1; /* 允许伸缩 */
}

/* 创建任务模态框中的标签样式 */
#createTaskModal .form-group.row .col-form-label {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.95rem; /* 与输入框字体大小一致 */
  font-weight: normal; /* 标准字重 */
  line-height: 1.5; /* 与输入框行高一致 */
}

/* 创建任务模态框中的表单控件样式 */
#createTaskModal .form-group.row .form-control,
#createTaskModal .form-group.row .input-group {
  margin-bottom: 0;
}

/* 创建任务模态框中的任务建议样式 */
#createTaskModal .task-suggestions {
  width: 100%;
  max-height: 482px;
  overflow-y: auto;
  transform: translate(0, 0);
  top: 100%;
}

#createTaskModal .task-suggestions .dropdown-item {
  padding: 0 8px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}

#createTaskModal .task-suggestions .dropdown-item:hover {
  background-color: var(--button-gray-background-color);
  color: var(--dark-text-color);
}

#createTaskModal .task-suggestions .dropdown-item:active {
  background-color: var(--focus-border-color) !important;
  color: #fff !important;
}

#createTaskModal .task-suggestions .dropdown-item small a {
  color: var(--light-text-color);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 14px;
}

#createTaskModal .task-suggestions .dropdown-item:hover small a {
  color: var(--dark-text-color);
}

#createTaskModal .task-suggestions .dropdown-item:active small a {
  color: #fff !important;
}

#createTaskModal .task-suggestions .dropdown-item.text-muted {
  height: 30px;
  line-height: 30px;
  padding: 0 8px !important;
  font-size: 14px !important;
  box-sizing: border-box;
}

#createTaskModal .task-suggestions .dropdown-item.text-muted:hover {
  color: var(--dark-text-color) !important;
}

#createTaskModal .task-suggestions .dropdown-item.text-muted:not(.text-center) {
  font-size: 14px !important;
  text-align: left !important;
  padding-left: 8px !important;
  color: var(--light-text-color) !important;
}

#createTaskModal .task-suggestions .dropdown-item.text-muted:active {
  color: #fff !important;
}

/* 创建任务模态框移动端响应式样式 */
@media (max-width: 767.98px) {
  #createTaskModal .form-group.row .col-sm-2 {
    max-width: 100%; /* 在小屏上允许全宽 */
    min-width: auto; /* 取消最小宽度限制 */
    width: 100%; /* 宽度适应屏幕 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 2px; /* 减少底部内边距 */
  }

  #createTaskModal .form-group.row .col-sm-10 {
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度全宽 */
    margin-top: 0px; /* 减少顶部间距 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 0; /* 移除底部内边距 */
  }

  /* 确保移动模式下配置选项间距与桌面模式一致 */
  #createTaskModal .form-group.row {
    margin-bottom: 8px; /* 与桌面模式保持一致的行间距 */
    padding-top: 0; /* 移除顶部内边距 */
    padding-bottom: 0; /* 移除底部内边距 */
  }

  /* 调整移动模式下表单控件的间距 */
  #createTaskModal .form-group.row .form-control,
  #createTaskModal .form-group.row .input-group {
    margin-bottom: 0; /* 确保无底部边距 */
  }

  /* 调整任务配置标签的间距 */
  #createTaskModal .form-group.row .col-form-label {
    padding-top: 2px; /* 减少顶部内边距 */
    padding-bottom: 2px; /* 减少底部内边距 */
  }

  /* 专门针对配置选项标题在配置框上方的情况调整 */
  #createTaskModal .form-group.row:not(.align-items-center) .col-sm-2 {
    margin-bottom: 4.5px; /* 设置标题与配置框之间的距离 */
    padding-left: 15px; /* 左对齐与其他元素保持一致 */
    font-size: 0.95rem; /* 保持字体大小一致 */
  }

  /* 标题在上方时配置框的左内边距调整 */
  #createTaskModal .form-group.row:not(.align-items-center) .col-sm-10 {
    padding-left: 15px; /* 为标题在上方的配置框增加左内边距 */
  }
}



@media (max-width: 767.98px) {
  .file-manager-rule-bar-responsive {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .file-manager-rule-bar-responsive .rule-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
    width: 100%;
  }
  .file-manager-rule-bar-responsive .rule-row:last-child {
    margin-bottom: 0;
  }
  .file-manager-rule-bar-responsive .rule-row input,
  .file-manager-rule-bar-responsive .rule-row button,
  .file-manager-rule-bar-responsive .rule-row .input-group-text,
  .file-manager-rule-bar-responsive .rule-row label {
    flex: 1 1 0;
    min-width: 0;
  }
  .file-manager-rule-bar-responsive .rule-row .input-group-prepend,
  .file-manager-rule-bar-responsive .rule-row .input-group-text {
    flex: 0 0 auto;
  }
  .file-manager-rule-bar-responsive .filter-label {
    flex: 0 0 auto;
    margin-right: 4px;
    white-space: nowrap;
  }
}

.file-manager-rule-bar-responsive { display: none; }
.file-manager-rule-bar { display: flex; }
@media (max-width: 767.98px) {
  .file-manager-rule-bar { display: none !important; }
  .file-manager-rule-bar-responsive { display: block !important; }
  .file-manager-rule-bar-responsive .input-group { width: 100%; }
  .file-manager-rule-bar-responsive .input-group + .input-group { margin-top: 8px; }

  /* 移动端账号选择栏下边距 - 确保与命名规则栏有8px间距 */
  .file-manager-account-selector {
    margin-bottom: 8px !important;
  }

  .file-manager-account-selector .file-manager-rule-bar-responsive {
    margin-bottom: 0 !important; /* 移除内部边距，使用外部容器的边距 */
  }
  /* 含文件夹样式调整 */
  .file-manager-rule-bar-responsive .input-group-text.file-folder-rounded {
    border-top-left-radius: 0 !important; /* 左侧不要圆角 */
    border-bottom-left-radius: 0 !important; /* 左侧不要圆角 */
    border-top-right-radius: 6px !important; /* 右侧圆角6px */
    border-bottom-right-radius: 6px !important; /* 右侧圆角6px */
    margin-left: -1px; /* 左边框与过滤规则输入框重叠 */
    position: relative;
    z-index: 1; /* 确保边框显示正确 */
  }

  /* 过滤规则输入框在含文件夹前面时去除右侧圆角 */
  .file-manager-rule-bar-responsive .input-group .form-control + .input-group-text.file-folder-rounded {
    border-left: 1px solid #ced4da; /* 确保左边框显示 */
  }

  /* 过滤规则输入框右侧圆角调整 */
  .file-manager-rule-bar-responsive .input-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  /* 预览并执行重命名按钮与含文件夹间距8px，且与上方input-group间距8px */
  .file-manager-rule-bar-responsive .input-group-append .btn {
    margin-left: 8px;
  }
    /* 只影响移动端的“预览并执行重命名”按钮上边距 */
    .file-manager-rule-bar-responsive .batch-rename-btn {
      margin-top: 0px; /* 你想要的上边距 */
      width: 32px;
      height: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px !important;
    }

  /* 移动端预览并执行重命名按钮与含文件夹间距 */
  .file-manager-rule-bar-responsive .input-group .batch-rename-btn {
    margin-left: 8px !important;
  }

  /* 移动端账号选择栏中的按钮间距 */
  .file-manager-rule-bar-responsive .d-flex .batch-rename-btn:first-of-type {
    margin-left: 8px !important;
  }

  .file-manager-rule-bar-responsive .d-flex .batch-rename-btn + .batch-rename-btn {
    margin-left: 8px !important;
  }
}
@media (min-width: 768px) {
  .file-manager-rule-bar { display: flex !important; }
  .file-manager-rule-bar-responsive { display: none !important; }
}

/* --------------- 影视发现页面样式 --------------- */
.discovery-controls {
  margin-bottom: 20px;
}

.discovery-main-buttons {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.discovery-main-buttons::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.discovery-sub-buttons {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.discovery-sub-buttons::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.discovery-btn {
  border-radius: 6px;
  font-size: 0.95rem;
  padding: 0 8px;
  height: 32px;
  border: 1px solid var(--dark-text-color);
  background-color: transparent;
  color: var(--dark-text-color);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

.discovery-btn:hover {
  background-color: var(--dark-text-color);
  border-color: var(--dark-text-color);
  color: white;
}

.discovery-btn.active {
  background-color: var(--focus-border-color) !important;
  border-color: var(--focus-border-color) !important;
  color: white !important;
}

.discovery-btn:focus {
  box-shadow: none;
  outline: none;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  padding: 0;
}

.discovery-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3; /* 强制保持2:3比例 */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.discovery-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.discovery-poster:hover img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.discovery-poster-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 8px 5px 8px;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.discovery-poster:hover .discovery-poster-overlay {
  opacity: 1;
}

.discovery-poster-overlay .info-line {
  margin-bottom: 5.5px;
  padding-bottom: 5px;
  word-wrap: break-word;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.discovery-poster-overlay .info-line:first-child {
  margin-top: 0;
}

.discovery-poster-overlay .info-line:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.discovery-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #efb30a;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 10;
}

.discovery-create-task {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  color: white;
  font-size: 1rem;
  font-weight: 210;
}

.discovery-create-task .plus-text {
  transform: translateX(-0.5px) translateY(-1.5px);
}

.discovery-poster:hover .discovery-create-task {
  opacity: 1;
}

.discovery-create-task:hover {
  background-color: var(--focus-border-color);
  border-color: var(--focus-border-color);
  color: white;
}

.discovery-info {
  padding: 0 0px;
  text-align: left;
}

.discovery-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dark-text-color);
  margin-bottom: 0px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.discovery-title:hover {
  color: var(--focus-border-color);
}

.discovery-genre {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genre-slash {
  position: relative;
  top: -1px;
}

.discovery-year {
  font-size: 0.75rem;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
  }

  .discovery-btn {
    font-size: 0.95rem;
    padding: 0 6px;
    height: 28px;
  }

  .discovery-controls {
    margin-bottom: 15px;
  }

  .discovery-main-buttons {
    margin-bottom: 8px;
    gap: 8px;
  }

  .discovery-sub-buttons {
    margin-bottom: 20px;
    gap: 8px;
  }
}

@media (min-width: 1200px) {
  .discovery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}