/**
 * 文件：public/admin/css/app.css
 * 说明：后台全局样式覆盖（在 adminlte.min.css 之后加载）。只放：系统中文字体栈、SVG 图标尺寸、少量布局修正。
 *       禁止引入任何外部字体（Google Fonts 等），禁止写页面私有样式到此文件以外的内联 style。
 * 作者：架构组
 * 创建：2026-11-03
 * 修改：2026-11-05 后台前端 并入登录页样式（.zq-login 一节，原 css/login.css）
 * 修改：2026-11-05 后台前端 新增「开发中」标记 .zq-a-dev-badge
 * 修改：2026-11-05 后台前端 窄屏抽屉遮罩、表格表头不折行；侧栏收起选择器收到 3 层以内（A-04）
 * 修改：2026-11-05 后台前端 影片列表封面缩略图 .zq-vod-cover
 * 修改：2026-11-05 后台前端 单行省略 .zq-ellipsis（影片描述）
 */

/* 中文系统字体栈，替换 AdminLTE 默认的 Source Sans 3 */
:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* Bootstrap Icons SVG 雪碧图统一尺寸，随文字颜色变化 */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.info-box-icon .bi {
  width: 1.75rem;
  height: 1.75rem;
}

/* 侧栏菜单 SVG 图标：与 AdminLTE 字体图标占位一致（修改：2026-11-03 后台前端） */
.sidebar-menu .nav-icon.bi {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -0.2em;
}

/*
 * 侧栏品牌区（唯一样式，结构由 js/ui/sidebar.js 生成：.sidebar-brand.zq-a-brand > a.brand-link > svg.brand-image + span.brand-text）
 * 偏移原因：AdminLTE 的 .sidebar-brand .brand-link .brand-image{width:auto} 优先级高于原 .zq-a-brand-icon 的宽度，
 *           SVG 没有固有宽度，按默认 300px 渲染，把名称推到侧栏外；另有 justify-content:center、float:left、
 *           图标 margin-right 与 .brand-text margin-left 叠加，文字也没有 min-width:0 / 省略号。
 * 修正：品牌区左对齐、链接撑满并用 flex + gap 排列，名称单行省略；配色只用 Bootstrap 主题变量，亮/暗主题通用。
 */
.zq-a-brand {
  justify-content: flex-start;
  padding-inline: 0.75rem;
}

.zq-a-brand .brand-link {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: var(--bs-emphasis-color);
}

.zq-a-brand .brand-link .brand-image {
  float: none;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  fill: var(--bs-primary);
}

.zq-a-brand .brand-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color);
}

.zq-a-brand .brand-link:hover .brand-text {
  color: var(--bs-emphasis-color);
}

/*
 * 侧栏收起（mini，仅 ≥992px；窄屏为抽屉，始终显示名称）时只留 logo 居中；悬停展开时恢复名称（覆盖 AdminLTE 的 display/margin 设置）。
 * 选择器不超过 3 层（A-04）：链接与名称另带 .zq-a-brand-link / .zq-a-brand-text（sidebar.js 生成），不再经 .zq-a-brand 逐级下钻。
 * 修改：2026-11-05 后台前端 收掉 A-04 选择器层级警告，效果不变
 */
@media (min-width: 992px) {
  .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zq-a-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zq-a-brand-link {
    flex: 0 0 auto;
    gap: 0;
  }

  .sidebar-mini.sidebar-collapse .app-sidebar:not(:hover) .zq-a-brand-text {
    display: none;
  }

  .sidebar-mini.sidebar-collapse:not(.sidebar-without-hover) .app-sidebar:hover .brand-text.zq-a-brand-text {
    display: block;
    max-width: none;
    margin-left: 0;
  }
}

/*
 * 窄屏抽屉侧栏遮罩（<992px，AdminLTE 打开抽屉时给 body 加 .sidebar-open，并在 .app-wrapper 末尾生成 .sidebar-overlay）。
 * AdminLTE 自带遮罩为 absolute、透明度 0.2，盖不住顶栏，用户名会从抽屉右侧露出；这里改为 fixed 覆盖整屏、层级高于顶栏，
 * 抽屉层级再高于遮罩。颜色只用主题变量（亮/暗各一档）。点遮罩关闭由 js/ui/sidebar.js 处理。
 * 修改：2026-11-05 后台前端 新增
 */
:root,
[data-bs-theme=light] {
  --zq-a-overlay-bg: rgba(var(--bs-black-rgb), 0.45);
}

[data-bs-theme=dark] {
  --zq-a-overlay-bg: rgba(var(--bs-black-rgb), 0.6);
}

@media (max-width: 991.98px) {
  .sidebar-expand-lg.sidebar-open .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: var(--zq-a-overlay-bg);
  }

  .sidebar-expand-lg.sidebar-open .app-sidebar {
    z-index: 1045;
  }
}

/*
 * 表格（ui.table 生成 .zq-a-table，外层 .table-responsive 横向滚动）：表头不折行，窄屏列宽不足时整表横滚，
 * 不再把表头挤成一字一行；单元格同样不折行（长文本列在列配置里加 className:'text-wrap' 允许折行）。全站表格统一生效。
 * 修改：2026-11-05 后台前端 新增
 */
.zq-a-table > thead th,
.zq-a-table > tbody td {
  white-space: nowrap;
}

/* 登录页右上角工具（主题切换、mock 提示） */
.zq-a-login-tools {
  position: fixed;
  top: 0.75rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* 统计卡统一高度：标题、数值、注释各一行，超出省略，悬停看 title */
.info-box {
  height: 5.75rem;
  align-items: center;
}

.info-box-content {
  min-width: 0;
}

.info-box-text,
.info-box-number {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zq-a-stat-hint {
  min-height: 1.8em;
}

/* 排行 Tab 在窄屏下横向滚动，不折行 */
#rank-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

/*
 * 「开发中」小标记（侧栏菜单项与占位页标题共用，sidebar.js / ui/pending.js 生成）；颜色只用主题变量，亮暗自适应。
 * 修改：2026-11-05 后台前端 新增
 */
.zq-a-dev-badge {
  margin-left: 0.4rem;
  padding: 0.15em 0.45em;
  font-size: 0.65rem;
  font-weight: 500;
  vertical-align: middle;
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
  border: 1px solid var(--bs-warning-border-subtle);
}

/* 表格列宽档位：ui.table 列配置 width:'xs|sm|md|lg|xl' 对应（修改：2026-11-03 后台前端，替代内联 style） */
.col-w-xs {
  width: 3rem;
}

.zq-vod-cover {
  display: block;
  width: 2.5rem;
  height: 3.35rem;
  object-fit: cover;
  border-radius: 0.2rem;
  background-color: var(--bs-tertiary-bg);
}

.zq-ellipsis {
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.col-w-sm {
  width: 6rem;
}

.col-w-md {
  width: 9rem;
}

.col-w-lg {
  width: 13rem;
}

.col-w-xl {
  width: 18rem;
}

/* 可搜索下拉（Tom Select，经 ui.form.fields 生成）：在筛选栏内与 form-select-sm 等高。
   已有选项时，搜索框自带 7rem 最小宽度，和文字并排会把控件撑成两行，打开或选中时整行筛选项跟着跳。
   所以有选项时搜索框始终盖在文字上，不占高度。菜单打开才显示搜索框并藏起已选项；关掉后名称马上出现。
   打开的下拉提到后续内容之上，菜单不再压住下一行按钮。 */
.zq-a-filter .ts-wrapper.form-select-sm .ts-control {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
}

.ts-wrapper.single.has-items .ts-control > .item {
  max-width: calc(100% - 1.25rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-wrapper.single.has-items .ts-control > input {
  position: absolute;
  top: 0;
  right: 2.25rem;
  left: 0.5rem;
  width: auto !important;
  height: 100%;
  min-width: 0 !important;
  margin: 0 !important;
  opacity: 0;
}

.ts-wrapper.dropdown-active {
  z-index: 30;
}

.ts-wrapper.single.has-items.dropdown-active .ts-control > .item {
  visibility: hidden;
}

.ts-wrapper.single.has-items.dropdown-active .ts-control > input {
  opacity: 1;
}

/* 批量操作栏：未勾选时淡化提示 */
.zq-a-batch-bar[aria-disabled="true"] {
  opacity: 0.6;
}

/* 二步验证码输入框：等宽大字号 */
.zq-a-totp-code {
  font-family: var(--bs-font-monospace);
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  text-align: center;
}

/*
 * 登录页（原 css/login.css 并入，后台只用 app.css 一份样式）
 * 作用域：所有选择器以 .zq-login（login.html 外层容器）开头，主题变量也只定义在 .zq-login 内，不影响其他页面。
 * 配色：颜色只在下面亮/暗两套变量里定义，规则中不写死颜色；按钮、输入框、提示仍用统一组件样式。
 */

/* 暗色主题配色 */
[data-bs-theme=dark] .zq-login {
  --zq-login-bg-from: #0b1020;
  --zq-login-bg-to: #1a1f3a;
  --zq-login-glow-1: rgba(99, 102, 241, 0.35);
  --zq-login-glow-2: rgba(14, 165, 233, 0.25);
  --zq-login-grid: rgba(255, 255, 255, 0.04);
  --zq-login-text: #e5e7eb;
  --zq-login-muted: rgba(229, 231, 235, 0.65);
  --zq-login-glass: rgba(17, 24, 39, 0.55);
  --zq-login-glass-border: rgba(255, 255, 255, 0.10);
  --zq-login-shadow: rgba(0, 0, 0, 0.45);
  --zq-login-accent: #818cf8;
  --zq-login-accent-2: #38bdf8;
  --zq-login-art-line: rgba(255, 255, 255, 0.18);
  --zq-login-art-fill: rgba(255, 255, 255, 0.06);
}

/* 亮色主题配色 */
[data-bs-theme=light] .zq-login {
  --zq-login-bg-from: #eef2ff;
  --zq-login-bg-to: #e0f2fe;
  --zq-login-glow-1: rgba(99, 102, 241, 0.25);
  --zq-login-glow-2: rgba(14, 165, 233, 0.22);
  --zq-login-grid: rgba(30, 41, 59, 0.05);
  --zq-login-text: #1e293b;
  --zq-login-muted: rgba(30, 41, 59, 0.65);
  --zq-login-glass: rgba(255, 255, 255, 0.65);
  --zq-login-glass-border: rgba(255, 255, 255, 0.85);
  --zq-login-shadow: rgba(30, 41, 59, 0.15);
  --zq-login-accent: #4f46e5;
  --zq-login-accent-2: #0284c7;
  --zq-login-art-line: rgba(30, 41, 59, 0.22);
  --zq-login-art-fill: rgba(255, 255, 255, 0.55);
}

/* 页面容器：渐变底 + 两处光晕 + 细网格纹理 */
.zq-login {
  min-height: 100vh;
  display: flex;
  color: var(--zq-login-text);
  background:
    radial-gradient(circle at 18% 22%, var(--zq-login-glow-1), transparent 42%),
    radial-gradient(circle at 82% 78%, var(--zq-login-glow-2), transparent 40%),
    linear-gradient(var(--zq-login-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--zq-login-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, var(--zq-login-bg-from), var(--zq-login-bg-to));
}

/* 左栏品牌区（窄屏隐藏由 d-none d-lg-flex 控制） */
.zq-login .zq-login-hero {
  flex: 1 1 55%;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
}

.zq-login .zq-login-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
}

.zq-login .zq-login-brand .zq-login-logo {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--zq-login-accent);
}

.zq-login .zq-login-intro {
  margin: 1rem 0 2.5rem;
  max-width: 28rem;
  font-size: 1.05rem;
  color: var(--zq-login-muted);
}

/* 插图配色 */
.zq-login .zq-login-art { width: 100%; max-width: 30rem; height: auto; }
.zq-login .zq-login-art .a-line { stroke: var(--zq-login-art-line); fill: var(--zq-login-art-fill); }
.zq-login .zq-login-art .a-accent { fill: var(--zq-login-accent); }
.zq-login .zq-login-art .a-accent2 { fill: var(--zq-login-accent-2); }
.zq-login .zq-login-art .a-stroke { stroke: var(--zq-login-accent); fill: none; }

/* 右栏：卡片居中 */
.zq-login .zq-login-main {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* 玻璃卡片：覆盖统一 card 的底色与边框，内部组件不变 */
.zq-login .zq-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--zq-login-glass);
  border: 1px solid var(--zq-login-glass-border);
  border-radius: 1rem;
  box-shadow: 0 20px 50px var(--zq-login-shadow);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.zq-login .zq-login-card:hover { box-shadow: 0 24px 60px var(--zq-login-shadow); }
.zq-login .zq-login-card .card-header { background: transparent; border-bottom-color: var(--zq-login-glass-border); }
.zq-login .zq-login-card .card-body { background: transparent; }

/* 卡片标题内的 logo */
.zq-login .zq-login-card-title { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.zq-login .zq-login-card-title .zq-login-logo { width: 1.6rem; height: 1.6rem; fill: var(--zq-login-accent); }

/* 焦点与悬停：输入组整体高亮，按钮轻微上浮 */
.zq-login .input-group { transition: box-shadow 0.15s ease; border-radius: var(--bs-border-radius); }
.zq-login .input-group:focus-within { box-shadow: 0 0 0 0.2rem var(--zq-login-glow-1); }
.zq-login .input-group:focus-within .form-control,
.zq-login .input-group:focus-within .input-group-text { border-color: var(--zq-login-accent); box-shadow: none; }
.zq-login .btn-primary { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.zq-login .btn-primary:hover,
.zq-login .btn-primary:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 20px var(--zq-login-glow-1); }

.zq-login .zq-login-note { color: var(--zq-login-muted); }

/* 模板导入：隐藏系统文件框后，文件名单独限宽，避免把「导入」挤成两行 */
.zq-a-file-name { max-width: 14rem; }

/* 保留策略表：列宽固定，查看按钮同宽，分类名与标识同一行 */
.zq-a-fit .zq-a-table {
  width: 100%;
  min-width: 42rem;
  table-layout: fixed;
}

.zq-a-fit .zq-a-col-cat {
  width: 16rem;
}

.zq-a-fit .zq-a-col-act {
  width: 6.5rem;
}

.zq-a-fit .zq-a-col-days {
  width: 6.5rem;
}

.zq-a-fit .zq-a-col-flag {
  width: 5rem;
}

.zq-a-cat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 100%;
}

.zq-a-cat-key {
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
}

.zq-a-view-btn {
  width: 4.5rem;
  padding-right: 0;
  padding-left: 0;
}