/* ================================================================
   卡密管理后台 - 全局自定义样式
   所有页面共用的样式定义，包括布局、表格、弹窗、标签、按钮等
   ================================================================ */

/* ---------- 顶部导航栏 ----------
   蓝色背景，白色文字，包含Logo和顶部菜单 */
.admin-header {
  background: #1e9fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.admin-header .layui-nav {
  background: transparent !important;
}
.admin-header .layui-nav .layui-nav-item a {
  color: #fff !important;
}
.admin-header .layui-nav .layui-nav-more {
  border-top-color: #fff !important;
}

/* ---------- Logo区域 ----------
   顶部左侧Logo，白色文字透明背景，与蓝色顶栏融为一体 */
.admin-logo {
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff !important;
  background: transparent;
  float: left;
  transition: width .3s;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-logo span,
.admin-logo i { color: #fff !important; }
.admin-logo i {
  font-size: 24px;
  margin-right: 6px;
  vertical-align: middle;
}
/* Logo收起状态：只显示图标，隐藏文字 */
.admin-logo-collapsed {
  width: 60px !important;
}
.admin-logo-collapsed span {
  display: none;
}

/* ---------- 左侧导航栏 ----------
   侧边菜单，支持展开/收起动画 */
.admin-side {
  width: 200px;
  transition: width .3s;
  overflow: hidden;
}
/* 侧栏收起状态：隐藏菜单文字，图标居中 */
.admin-side-collapsed {
  width: 60px !important;
}
.admin-side-collapsed .layui-nav-item span {
  display: none;
}
.admin-side-collapsed .layui-nav-item a {
  text-align: center;
  padding: 0;
  display: block;
}
.admin-side-collapsed .layui-nav-item a i {
  font-size: 20px;
  margin: 0;
  color: #fff !important;
  display: inline-block;
}
.admin-side-collapsed .layui-nav-child {
  display: none !important;
}
.admin-side-collapsed .layui-nav-item a:hover {
  background: rgba(255,255,255,.1) !important;
}

/* 左侧导航菜单项样式增强：行高加大、图标间距 */
.layui-nav-tree .layui-nav-item a {
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  font-size: 16px !important;
}
.layui-nav-tree .layui-nav-item a i {
  margin-right: 8px;
  font-size: 16px;
}
.layui-nav-tree .layui-nav-item a span {
  font-size: 16px !important;
}
/* 子菜单项：缩进、行高 */
.layui-nav-tree .layui-nav-child dd a {
  height: 42px;
  line-height: 42px;
  padding-left: 46px;
  font-size: 15px !important;
}
.layui-nav-tree .layui-nav-child dd a span {
  font-size: 15px !important;
}

/* ---------- 主内容区 ----------
   灰色背景，左侧偏移随侧栏联动 */
.admin-body {
  left: 200px;
  transition: left .3s;
  background: #f2f4f7;
}
/* 侧栏收起后内容区左移 */
.admin-body-expanded {
  left: 60px !important;
}

/* 面包屑导航：吸顶，白色背景 */
.admin-breadcrumb {
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 9;
}

/* iframe容器：各页面以iframe嵌入，圆角无边框 */
.admin-iframe-wrap {
  padding: 12px;
  height: calc(100% - 50px);
  box-sizing: border-box;
}
.admin-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 6px;
  background: #fff;
}

/* 子页面在 iframe 内的布局修正
   浏览器默认给 body 加 8px margin，导致内容超出 iframe 宽度出现滚动条 */
html { margin: 0; overflow-x: hidden !important; }
body { margin: 0; overflow-x: hidden !important; }
/* 内容容器禁止横向溢出 */
.admin-page,
.admin-page-inner { overflow-x: hidden !important; }
/* iframe容器也禁止横向滚动 */
.admin-iframe-wrap { overflow: hidden !important; }
.admin-iframe-wrap iframe { overflow: hidden !important; }

/* ========== 下拉框浮层（全局） ==========
   核心：select打开时dl立即变为fixed（CSS同步生效，无JS延迟），
   防止absolute的dl撑开容器产生滚动条。MutationObserver负责精确定位。
   三层z-index递进：card > select组件 > dl下拉列表 */
.layui-form-select.layui-form-selected > dl {
  position: fixed !important;
  z-index: 1999999999 !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  white-space: nowrap !important;
  width: auto !important;
  /* 初始隐藏，等JS定位后再显示，避免闪烁到(0,42px) */
  visibility: hidden !important;
}
/* dd-float = JS已定位完毕，可以显示了 */
.layui-form-select.layui-form-selected > dl.dd-float {
  visibility: visible !important;
}
.layui-form-select.layui-form-selected > dl.dd-float dd {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
}
/* select组件和父card提升z-index，确保在最顶层 */
.layui-form-select.layui-form-selected {
  z-index: 1999999998 !important;
  position: relative;
}
.admin-card.dd-select-open {
  z-index: 1999999997 !important;
  position: relative;
}

/* ========== 表格滚动条 ==========
   所有层级禁止横向滚动，只保留表格body纵向滚动 */
.layui-table-box { overflow: hidden !important; }
.layui-table-wrapper { overflow: hidden !important; }
.layui-table-main { overflow: hidden !important; }
.layui-table-body { overflow-y: auto !important; overflow-x: hidden !important; }
.layui-table-view { transform: translateZ(0); overflow: hidden !important; }
.layui-table-header { overflow: hidden !important; }

/* ---------- 底部栏 ----------
   居中灰色小字，左侧偏移随侧栏联动 */
.admin-footer {
  left: 200px;
  text-align: center;
  font-size: 12px;
  color: #999;
  transition: left .3s;
}
.admin-footer-expanded {
  left: 60px !important;
}

/* ========== 通用卡片容器 ==========
   白色圆角卡片，用于包裹筛选栏、表格等内容区块 */
.admin-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* 卡片标题行：粗体+底部分隔线 */
.admin-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

/* ========== 统计卡片（仪表盘用） ==========
   横向排列的数据概览卡片，带渐变图标、hover上浮动效 */
.stat-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stat-card {
  flex: 1;
  min-width: 200px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  transition: transform .2s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
/* 右上角渐变色图标：蓝/绿/橙/红四种配色 */
.stat-card .stat-icon {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}
.stat-card .stat-icon.blue { background: linear-gradient(135deg, #1e9fff, #5bb8ff); }
.stat-card .stat-icon.green { background: linear-gradient(135deg, #16b777, #5cd99a); }
.stat-card .stat-icon.orange { background: linear-gradient(135deg, #ffb800, #ffd54f); }
.stat-card .stat-icon.red { background: linear-gradient(135deg, #ff5722, #ff8a65); }

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}
.stat-card .stat-label {
  font-size: 13px;
  color: #999;
}

/* ========== 筛选栏 ==========
   卡密列表等页面顶部的搜索/筛选区域 */
.admin-filter {
  background: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.admin-filter .layui-form-item {
  margin-bottom: 8px;
}

/* ========== 操作栏 ==========
   "新建""导出"等操作按钮的容器，自动换行 */
.admin-toolbar {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ========== 状态标签 ==========
   卡密状态等用到的彩色圆角小标签（带浅色背景pill）
   normal=正常(绿) expired=过期(橙) unused=未使用(蓝) frozen=冻结(红) */
.status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}
.status-tag.normal { color: #16b777; background: none; }
.status-tag.expired { color: #ffb800; background: none; }
.status-tag.unused { color: #1e9fff; background: none; }
.status-tag.frozen { color: #ff5722; background: none; }

/* ========== 页面基础容器 ==========
   灰色背景+内边距，所有子页面共用 */
.admin-page {
  padding: 0;
  min-height: 100%;
  background: #f2f4f7;
}
.admin-page-inner {
  padding: 16px;
}

/* ========== 表格全局美化 ==========
   统一所有layui表格的字号(14px)、行高、圆角、悬停色等
   overflow:hidden 裁切超宽内容，避免横向滚动条 */
.layui-table-view { border-radius: 8px !important; overflow: hidden !important; border: 1px solid #e8e8e8; }
.layui-table thead tr { background: #fafbfc; }
.layui-table th { font-weight: 600 !important; color: #555 !important; background: #fafbfc !important; font-size: 13px !important; border-right: 1px solid #e8e8e8 !important; }
.layui-table td { color: #444; font-size: 14px !important; border-right: 1px solid #ececec !important; }
.layui-table th:last-child,
.layui-table td:last-child { border-right: none !important; }
/* 表格单元格基础样式 */
.layui-table-cell { font-size: 14px !important; line-height: 1.8 !important; padding: 6px 4px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 隐藏表头列宽拖拽手柄（小三角箭头） */
.layui-table-grid-down { display: none !important; }
.layui-table th .layui-table-sort { display: none !important; }
.layui-table-cell .layui-table-sort { display: none !important; }
/* 禁止拖拽调整列宽：隐藏resize手柄，禁用拖拽交互 */
.layui-table-header th { cursor: default !important; }
.layui-table-header th .layui-table-cell { cursor: default !important; }
.layui-table-col-resize { display: none !important; width: 0 !important; padding: 0 !important; }
/* 禁用表头列分割线（拖拽热区） */
.layui-table-header th::after { display: none !important; }
/* 表格行GPU加速，避免滚动时重绘卡顿 */
.layui-table tr { will-change: transform; }
.layui-table tr:hover td { background: #f6f9ff !important; }
.layui-table-page { padding: 12px 16px !important; position: relative !important; z-index: 1 !important; }

/* ========== 弹窗标题栏增强 ==========
   layui默认弹窗标题样式覆盖 */
.layui-layer-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fafbfc !important;
}

/* 弹窗内表单项间距统一 */
.layui-layer-content .layui-form-item {
  margin-bottom: 10px;
}

/* ========== 弹窗表单布局（.dlg-form） ==========
   强制标签与输入框在同一行（flexbox横向排列）
   取代layui默认的上下分行布局，弹窗内空间有限更紧凑 */
.dlg-form .layui-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  min-height: 32px;
}
/* 标签列：固定90px宽度，右对齐 */
.dlg-form .layui-form-label {
  float: none !important;
  width: 90px !important;
  min-width: 90px;
  flex-shrink: 0;
  padding: 0 10px 0 0 !important;
  text-align: right;
  font-size: 13px;
  line-height: 38px;
  height: 38px;
}
/* 输入列：占满剩余宽度，flex居中对齐 */
.dlg-form .layui-input-block {
  margin-left: 0 !important;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 38px;
}
.dlg-form .layui-input,
.dlg-form .layui-textarea {
  font-size: 13px;
  height: 32px;
  line-height: 32px;
}

/* switch药丸垂直居中对齐标签文字 */
.dlg-form .layui-form-switch {
  margin-top: 0 !important;
  vertical-align: middle;
}

/* 小号switch（弹窗内用）：24px高度药丸 */
.dlg-form .mini-switch .layui-form-switch {
  height: 24px;
  line-height: 24px;
  min-width: 44px;
}
.dlg-form .mini-switch .layui-form-switch em {
  top: 0;
  font-size: 12px;
}
.dlg-form .mini-switch .layui-form-switch i {
  width: 18px;
  height: 18px;
  top: 3px;
}
.dlg-form .mini-switch .layui-form-onswitch i {
  left: 100%;
  margin-left: -21px;
}

/* textarea行：标签顶部对齐（因为输入框较高） */
.dlg-form .layui-form-item.has-textarea {
  align-items: flex-start;
}
.dlg-form .has-textarea .layui-form-label {
  line-height: 32px;
  height: auto;
}

/* checkbox组行（如卡密规则）：标签垂直居中对齐 */
.dlg-form .layui-form-item.has-checkbox {
  align-items: flex-start;
}
.dlg-form .has-checkbox .layui-form-label {
  line-height: 32px;
  height: 32px;
}
.dlg-form .has-checkbox .layui-input-block {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}
/* layui checkbox 在 flex 容器内恢复正常排列 */
.dlg-form .has-checkbox .layui-input-block .layui-form-checkbox {
  margin-right: 10px;
  margin-bottom: 4px;
}

/* 设备列表行：标签顶部对齐 */
.dlg-form .layui-form-item.has-devices {
  align-items: flex-start;
}
.dlg-form .has-devices .layui-form-label {
  line-height: 28px;
  height: auto;
}

/* ========== 卡片式弹窗（.dlg-card） ==========
   自定义弹窗结构：白色圆角卡片 + 标题头 + 内容体 + 底部按钮栏
   配合 layer.open({skin:'dlg-layer-skin'}) 使用，替代layui默认标题栏 */
.dlg-card { background:#fff; border-radius:8px; overflow:hidden; }
.dlg-card-header { padding:12px 20px; border-bottom:1px solid #f0f0f0; font-size:15px; font-weight:600; color:#333; display:flex; align-items:center; justify-content:space-between; }
.dlg-card-body { padding:16px 20px; max-height:min(520px, 65vh); overflow-y:auto; }
.dlg-card-footer { padding:10px 20px; border-top:1px solid #f0f0f0; text-align:right; background:#fafbfc; }
.dlg-card-footer .layui-btn { min-width:80px; border-radius:6px; }

/* 弹窗内textarea：隐藏滚动条但可滚动 */
.dlg-textarea { overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.dlg-textarea::-webkit-scrollbar { display:none; }

/* 弹窗圆角皮肤：覆盖layer默认方角，加阴影 */
.dlg-layer-skin { border-radius:8px !important; overflow:hidden !important; box-shadow:0 8px 30px rgba(0,0,0,.12) !important; }
.dlg-layer-skin .layui-layer-content { border-radius:8px !important; overflow:hidden !important; padding:0 !important; }
.dlg-layer-skin .layui-layer-setwin { top:12px !important; right:12px !important; }
.dlg-layer-skin .layui-layer-ico { background:none !important; font-size:18px !important; }
.dlg-layer-skin .layui-layer-close1::before { content:'✕'; font-size:16px; color:#999; }
.dlg-layer-skin .layui-layer-close1:hover::before { color:#333; }

/* ========== 全局按钮中文垂直居中修复 ==========
   layui按钮默认用line-height居中，中文字体基线偏下导致视觉偏移
   改用flex居中，回退只需删除此块即可 */
.layui-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ========== 全局按钮系统 ==========
   统一按钮圆角，不覆盖 layui 默认尺寸和内边距
   所有按钮 margin 由父容器控制，不在按钮上单独设 margin */
.layui-btn {
  border-radius: 6px !important;
}
/* layui弹窗确认/取消按钮圆角 - 覆盖layui默认样式 */
.layui-layer-btn .layui-layer-btn0,
.layui-layer-btn .layui-layer-btn1 {
  border-radius: 6px !important;
}
/* 确保所有layer弹窗内的按钮都圆角 */
.layui-layer * button,
.layui-layer * a.layui-btn,
.layui-layer-btn a {
  border-radius: 6px !important;
}
/* layer弹窗按钮强制圆角 */
.layui-layer-btn0 { border-radius: 6px !important; }
.layui-layer-btn1 { border-radius: 6px !important; }
#layui-layer{ border-radius: 8px !important; }
/* 工具栏按钮：间距由父容器 gap 控制，不单独设 margin */
.admin-toolbar .layui-btn { margin: 0; }
/* 表格内操作按钮：紧凑型 */
.layui-table-cell .layui-btn {
  margin: 0 4px 0 0 !important;
  border-radius: 4px;
}
.layui-table-cell .layui-btn-sm {
  height: 28px;
  line-height: 28px;
  padding: 0 12px;
  font-size: 13px;
}
.layui-table-cell .layui-btn-xs {
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}
/* 弹窗底部按钮：统一尺寸 */
.dlg-card-footer .layui-btn {
  min-width: 80px;
  height: 34px;
  line-height: 34px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0;
}
.dlg-card-footer .layui-btn + .layui-btn {
  margin-left: 10px;
}
/* 输入框和选择框统一圆角 */
.layui-input, .layui-textarea, .layui-select { border-radius:4px !important; }

/* ========== 全局选择框（checkbox）正方形，无圆角 ========== */
.layui-form-checkbox > div { border-radius: 0 !important; }
.layui-form-checkbox > i { border-radius: 0 !important; }
.layui-form-checkbox[lay-skin="primary"] > i { border-radius: 0 !important; }
.layui-form-checked[lay-skin="primary"] > i { border-radius: 0 !important; }
/* 表格自带checkbox（非primary皮肤） */
.layui-form-checkbox > span { border-radius: 0 !important; }
.layui-form-checkbox.layui-form-checked > span { border-radius: 0 !important; }
/* 表格行内checkbox */
.layui-table-cell .layui-form-checkbox > span { border-radius: 0 !important; }
.layui-table-cell .layui-form-checkbox > i { border-radius: 0 !important; }

/* 解绑设备按钮：极紧凑型 */
.btn-unbind-device { margin:0 !important; padding:0 8px; height:22px; line-height:22px; font-size:12px; border-radius:3px; }

/* ========== Tab标签页增强 ==========
   底部蓝色指示线，激活项蓝色文字 */
.admin-tabs .layui-tab-title {
  border-bottom: 2px solid #1e9fff;
}
.admin-tabs .layui-tab-title .layui-this {
  color: #1e9fff;
}

/* ========== 按钮组容器 ==========
   横向排列、自动换行的按钮组 */
.admin-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========== 空状态提示 ==========
   数据为空时显示的占位提示，灰色大图标+文字 */
.admin-empty {
  text-align: center;
  padding: 60px 20px;
  color: #ccc;
}
.admin-empty i {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

/* ========== 预留页/开发中提示 ==========
   功能未上线时的占位展示 */
.admin-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #999;
}
.admin-coming-soon i {
  font-size: 80px;
  color: #ddd;
  margin-bottom: 20px;
}
.admin-coming-soon h3 {
  font-size: 20px;
  color: #666;
  margin-bottom: 8px;
}
.admin-coming-soon p {
  font-size: 14px;
}

/* ================================================================
   移动端适配（屏幕宽度 ≤ 768px）
   侧栏滑出覆盖、表格横向滚动、弹窗宽度自适应、按钮触摸友好
   ================================================================ */
@media (max-width: 768px) {

  /* ---- 子页面基础 ---- */
  .admin-page-inner { padding: 10px; }
  .admin-card { padding: 12px; margin-bottom: 10px; border-radius: 6px; }
  .admin-card-title { font-size: 14px; margin-bottom: 10px; }

  /* ---- 筛选栏：竖向堆叠 ---- */
  .admin-filter { padding: 10px 12px; }
  .filter-bar { flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .filter-bar .layui-form-select { width: 100% !important; }
  .filter-bar .layui-input { width: 100% !important; }

  /* ---- 操作栏：换行、按钮加大触摸区域 ---- */
  .admin-toolbar { gap: 6px; }
  .admin-toolbar .layui-btn { height: 34px !important; line-height: 34px !important; padding: 0 14px !important; font-size: 13px !important; }

  /* ---- 表格：横向滚动 ---- */
  .layui-table-view { border-radius: 0 !important; }
  .layui-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .layui-table-header { min-width: 700px; }
  .layui-table-body { min-width: 700px; }
  .layui-table-cell { font-size: 13px !important; padding: 6px 4px !important; line-height: 1.8 !important; white-space: nowrap; }
  .layui-table th { font-size: 13px !important; }

  /* ---- 弹窗：宽度自适应 ---- */
  .layui-layer { max-width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; width: auto !important; }
  .dlg-card-body { padding: 12px 16px; max-height: none; }
  .dlg-card-header { padding: 10px 16px; font-size: 14px; }
  .dlg-card-footer { padding: 8px 16px; }

  /* ---- 弹窗表单：标签宽度缩小 ---- */
  .dlg-form .layui-form-label { width: 72px !important; min-width: 72px !important; font-size: 12px !important; padding-right: 6px !important; }
  .dlg-form .layui-input { font-size: 14px; /* 防止iOS缩放 */ }

  /* ---- 统计卡片：竖向堆叠 ---- */
  .stat-cards { flex-direction: column; gap: 10px; }
  .stat-card { min-width: auto; padding: 14px; }
  .stat-card .stat-value { font-size: 22px; }

  /* ---- 状态标签 ---- */
  .status-tag { font-size: 11px; padding: 1px 8px; }

  /* ---- 按钮组 ---- */
  .admin-btn-group { gap: 6px; }

  /* ---- 底部栏隐藏（手机端省空间） ---- */
  .admin-footer { display: none; }
}