/*
 | Bayria 管理后台样式表。
 |
 | ⚠️ 依赖 site.css 的设计令牌（--bg / --text / --line / --orange…），
 | 必须在它之后引入。两边共用一套令牌是刻意的：官网和后台是同一个
 | 产品的两张面孔，颜色和字体分叉会让品牌看起来是拼的。
 |
 | 后台与官网共用主题（同一个 localStorage key），在一处切换到处生效——
 | 设计稿里两者本就是同一个应用的同一份 state。
 |
 | ⚠️ 这里只写与后台结构相关的样式，颜色一律用令牌变量。
 | 写死十六进制值会让浅色模式下出现看不见的文字，
 | 而那种问题在深色下开发时完全不会暴露。
 |
 | 缓存指纹同 site.css，见 config/site/asset_version.php。
 */

/* ══════════════════════════════════════════════════════════
   外壳
   ══════════════════════════════════════════════════════════ */

.admin {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ── 侧栏 ── */

.admin__side {
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  /* 菜单多于一屏时侧栏自己滚，不带着内容区一起滚 */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin__brand {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.admin__brand .wordmark { font-size: 18px; }

.admin__brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
}

.admin__menu { padding: 8px 0; flex: 1; }

.admin__menu a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.admin__menu a:hover { color: var(--text); background: var(--bg-surface); }

.admin__menu a[aria-current='page'] {
  color: var(--text);
  border-left-color: var(--orange);
  background: var(--bg-surface);
}

/* 二期模块标灰，让人一眼知道哪些还没做 */
.admin__menu a[data-phase='2'] { opacity: 0.45; }

.admin__seat {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}

.admin__seat b { color: var(--orange); font-weight: 400; }

/* ── 顶栏 ── */

.admin__main { min-width: 0; }

.admin__top {
  height: 56px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin__crumb {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
}

.admin__crumb b { color: var(--text); font-weight: 400; }

/*
 | ⚠️ margin-left:auto 挂在**第一个**右侧元素（主题按钮）上。
 | 原先挂在 form 上，后来在它前面插了主题按钮——那时按钮会紧贴面包屑，
 | form 被推到最右，中间空一大块。以后再往右侧加元素，
 | 记得把 auto 挪到新的第一个上。
 */
.admin__theme {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--line);
  padding: 7px 10px;
  cursor: pointer;
}

.admin__theme:hover { color: var(--text); border-color: var(--line-strong); }

/*
 | 显示**当前**主题（设计稿 admin.jsx 的语义），与官网图标按钮相反。
 | 带文字的按钮陈述状态，纯图标按钮暗示动作。
 */
html[data-theme='dark'] .theme-label-light { display: none; }
html[data-theme='light'] .theme-label-dark { display: none; }

/* ── 内容区 ── */

.admin__body { padding: 32px 24px; }

.admin__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  color: var(--text);
}

.admin__desc {
  font-size: 14px;
  color: var(--text2);
  margin-top: 10px;
  max-width: 680px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   登录页
   ══════════════════════════════════════════════════════════ */

.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.admin-login__card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 32px;
}

.admin-login__card .field { margin-top: 12px; }
.admin-login__card .btn { margin-top: 20px; }

/* ══════════════════════════════════════════════════════════
   窄屏
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /*
   | 侧栏改为顶部横向滚动条。
   |
   | ⚠️ 这是降级方案：19 个菜单横排需要左右滑，不好用但至少全部可达。
   | 后台本来就是桌面工具，手机上做完整体验的优先级很低——
   | 但「打不开」和「不好用」是两回事，不能让它变成前者。
   */
  .admin { grid-template-columns: 1fr; }

  .admin__side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin__menu {
    display: flex;
    overflow-x: auto;
    padding: 0;
  }

  .admin__menu a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .admin__menu a[aria-current='page'] {
    border-left-color: transparent;
    border-bottom-color: var(--orange);
  }
}

/* ══════════════════════════════════════════════════════════
   后台通用：表格、表单、flash（首个真实模块 Downloads 起用）
   ══════════════════════════════════════════════════════════ */

.adm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.adm-h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.adm-sub { color: var(--text2); font-size: 14px; margin: 6px 0 0; }

.adm-flash {
  border: 1px solid var(--mint);
  color: var(--text);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.adm-flash--error { border-color: var(--danger); }
.adm-flash--error div { color: var(--danger); font-family: var(--mono); font-size: 12px; }

/* ── 表格 ── */

.adm-table { border: 1px solid var(--line); }

.adm-tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.adm-tr:last-child { border-bottom: none; }

.adm-tr--head {
  background: var(--bg-surface);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
}

.adm-strong { color: var(--text); font-weight: 500; }
.adm-dim { color: var(--text3); font-size: 11px; margin-top: 2px; }

/* ── 表单 ── */

.adm-form { max-width: 680px; display: grid; gap: 14px; }

.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.adm-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  line-height: 1.6;
  margin: -4px 0 6px;
}

.adm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text2);
  cursor: pointer;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .adm-grid2 { grid-template-columns: 1fr; }
  .adm-tr { grid-template-columns: 1fr auto; }
  .adm-tr > :nth-child(2),
  .adm-tr > :nth-child(3),
  .adm-tr > :nth-child(4) { display: none; }
}

/* ══════════════════════════════════════════════════════════
   列表能力：搜索 / 排序 / 分页（B8-19）
   ══════════════════════════════════════════════════════════ */

.adm-search { display: flex; gap: 10px; align-items: stretch; max-width: 560px; }
.adm-search .field { flex: 1; }

.adm-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.adm-sort:hover { color: var(--text); }
.adm-sort--on { color: var(--orange); }
.adm-sort__arrow { font-size: 9px; }

.adm-pager { margin-top: 18px; }

.adm-pager .pagination {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  flex-wrap: wrap;
}

.adm-pager .page-item .page-link {
  display: block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--text2);
  text-decoration: none;
}

.adm-pager .page-item.active .page-link { border-color: var(--orange); color: var(--orange); }
.adm-pager .page-item.disabled .page-link { opacity: 0.4; }

/* 两张表各自的列宽 */
.adm-tr--users { grid-template-columns: 2.4fr 1.6fr 1fr 1.2fr; }
.adm-tr--fleet { grid-template-columns: 2fr 1fr 0.8fr 0.7fr 0.8fr 1.2fr; }

/* ── KPI 条（B8-14）── */

.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

.kpi__item { background: var(--bg); padding: 20px 22px; }
.kpi__v { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }

.kpi__l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 6px;
}

/* 超阈值的指标值。⚠️ 不只用颜色——加粗一起变，色盲用户也要能分辨 */
.val--alert { color: var(--danger); font-weight: 600; }

/* 节点状态片 */
.chip--st-online { color: var(--mint); border-color: var(--mint); }
.chip--st-degraded { color: var(--orange); border-color: var(--orange); }
.chip--st-offline { color: var(--danger); border-color: var(--danger); }
.chip--st-maintenance { color: var(--text3); }

/* ── count_only 档的计数框 ── */

.sealed-box {
  border: 1px solid var(--line);
  padding: 36px;
  text-align: center;
}

.sealed-box__n { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); }

.sealed-box__l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 8px;
}

.notice code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
}

@media (max-width: 900px) {
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .adm-tr--users,
  .adm-tr--fleet { grid-template-columns: 1fr; gap: 6px; }
  .adm-tr--head { display: none; }
}

/* ══════════════════════════════════════════════════════════
   用户列表与详情（B2）
   ══════════════════════════════════════════════════════════ */

.users-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.users-bar .adm-search { flex: 1; min-width: 260px; max-width: none; }

/* 状态筛选 Tab */
.statustabs {
  display: flex;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.statustabs__t {
  padding: 8px 12px;
  color: var(--text2);
  text-decoration: none;
  border-right: 1px solid var(--line);
}

.statustabs__t:last-child { border-right: none; }
.statustabs__t:hover { background: var(--bg-surface); }

/* 选中态用反色，和设计稿一致 */
.statustabs__t--on { background: var(--text); color: var(--bg); }

/* 整行可点 */
.adm-tr--link { text-decoration: none; color: inherit; }
.adm-tr--link:hover { background: var(--bg-surface); }

.adm-tr--users { grid-template-columns: 2fr 1.3fr 0.9fr 0.7fr 70px 80px 1fr 24px; }

/* ── 详情页头部 ── */

.udetail-head { border: 1px solid var(--line); padding: 26px 24px; margin-bottom: 22px; }

.udetail-id { display: flex; align-items: center; gap: 16px; }

.udetail-avatar {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  font-size: 15px;
  color: var(--text2);
}

.udetail-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }

.udetail-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.udetail-fact-v { font-size: 14px; color: var(--text); margin-top: 6px; }

/* ── Tab 导航 ── */

.utabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.utabs__t {
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.utabs__t:hover { color: var(--text2); }
.utabs__t--on { color: var(--text); border-bottom-color: var(--orange); }

/* 需拦截令的 Tab 标红点，与设计稿一致 */
.utabs__dot { color: var(--danger); font-size: 8px; margin-right: 4px; }

/* ── Tab 内容 ── */

.upanel { padding: 24px; }
.upanel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.upanel__title { font-size: 18px; font-weight: 600; margin: 0; color: var(--text); }

.urow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.urow:last-child { border-bottom: none; }

/* 用户状态片 */
.chip--st-active { color: var(--mint); border-color: var(--mint); }
.chip--st-trial { color: var(--orange); border-color: var(--orange); }
.chip--st-past_due { color: var(--orange); border-color: var(--orange); }
.chip--st-suspended { color: var(--danger); border-color: var(--danger); }

@media (max-width: 900px) {
  .udetail-facts { grid-template-columns: repeat(2, 1fr); }
  .urow { grid-template-columns: 1fr; gap: 4px; }
}

/* 详情页统计卡 */
.udetail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.udetail-money { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--orange); margin: 4px 0; }

.adm-tr--dev { grid-template-columns: 2fr 0.9fr 1fr 1.2fr 1.2fr; }
.adm-tr--pay { grid-template-columns: 1.6fr 1.2fr 1.2fr 1.2fr 1fr; }

/* 支付状态片 */
.chip--pay-paid { color: var(--mint); border-color: var(--mint); }
.chip--pay-failed { color: var(--danger); border-color: var(--danger); }
.chip--pay-pending { color: var(--orange); border-color: var(--orange); }
.chip--pay-refunded { color: var(--text3); }
.chip--pay-disputed { color: var(--danger); border-color: var(--danger); }

@media (max-width: 900px) {
  .udetail-stats { grid-template-columns: 1fr; }
  .adm-tr--dev, .adm-tr--pay { grid-template-columns: 1fr; gap: 4px; }
}

/* ══════════════════════════════════════════════════════════
   Fleet：角色 Tab / KPI 卡 / 区域库存矩阵（B8-50/51 一期形态）
   ══════════════════════════════════════════════════════════ */

.fleettabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.fleettabs__t {
  padding: 10px 0 12px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.fleettabs__label { display: block; font-size: 15px; color: var(--text2); }
.fleettabs__t:hover .fleettabs__label { color: var(--text); }

.fleettabs__sub {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 3px;
}

.fleettabs__t--on { border-bottom-color: var(--orange); }
.fleettabs__t--on .fleettabs__label { color: var(--text); font-weight: 600; }
.fleettabs__t--on .fleettabs__sub { color: var(--orange); }

/* ── 角色 KPI 卡 ── */

.rolecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 24px;
}

.rolecard { background: var(--bg); padding: 20px 22px; }

/* 未部署的角色压暗，但仍然显示——机队页正是用来发现缺机器的 */
.rolecard--empty { opacity: 0.55; }

.rolecard__sub {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
}

.rolecard__n {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 14px;
}

.rolecard__meta { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* ── 区域库存矩阵 ── */

.inv { border: 1px solid var(--line); margin-bottom: 24px; }

.inv__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.inv__grid {
  display: grid;
  grid-template-columns: 130px repeat(var(--cols), 1fr) 60px;
}

.inv__cell {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 13px;
}

.inv__cell--head {
  background: var(--bg-surface);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
}

.inv__label { color: var(--text); }

/* 色块。⚠️ 每个都带 title，纯颜色对色盲用户没有信息 */
.inv__dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--text3);
}

.inv__dot--online { background: var(--mint); }
.inv__dot--degraded { background: var(--orange); }
.inv__dot--offline { background: var(--danger); }
.inv__dot--maintenance { background: var(--text3); }

.inv__legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 22px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.inv__legend span { display: flex; align-items: center; gap: 7px; }
.inv__legend i { width: 10px; height: 10px; }

@media (max-width: 900px) {
  /* 矩阵横向滚动而不是压扁——压扁后色块会挤成一条 */
  .inv { overflow-x: auto; }
  .inv__grid { min-width: 640px; }
}

/* ── 合法拦截令（B2-13）── */

.li { border: 1px solid var(--line); }

/* ⚠️ 生效中的令状用红边框：它意味着此刻有人能读这个用户的浏览记录 */
.li:has(.chip--st-active) { border-color: var(--danger); }

.li__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.li__active { padding: 8px 24px 20px; }
.li .notice { margin: 20px 24px; }
.li__history { padding: 0 24px 20px; }

.li__hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  flex-wrap: wrap;
}

.li__hrow:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   消息推送（Push）
   ══════════════════════════════════════════════════════════ */

/* 编辑器与预览双栏。比例取自设计稿的 1.4fr / 1fr */
.push-compose {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* ⚠️ 窄屏下必须堆叠：预览卡固定内边距，双栏挤到 400px 以下时
   锁屏卡会被压得比真实通知窄，预览就失去了参考意义 */
@media (max-width: 1080px) {
  .push-compose { grid-template-columns: 1fr; }
}

.push-panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 24px;
}

.push-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.push-panel__hint {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text3);
  font-weight: 400;
}

.push-actions { display: flex; gap: 10px; margin-top: 18px; }

/* ── iOS 锁屏预览 ──────────────────────────────
   ⚠️ 背景固定纯黑、卡片固定半透明白，不跟随后台主题：
   预览要还原的是用户手机上的样子，不是后台的配色。
   跟着亮色主题变成白底黑字，就完全不像通知了。 */
.push-lock { background: #000; padding: 24px; }

.push-lock__card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 14px;
  color: #fff;
}

.push-lock__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.8;
}

.push-lock__icon {
  width: 18px;
  height: 18px;
  background: var(--orange);
  border-radius: 4px;
  display: block;
}

.push-lock__now { margin-left: auto; font-size: 11px; }

.push-lock__title { font-weight: 600; font-size: 14px; margin-top: 6px; }
.push-lock__body { font-size: 13px; opacity: 0.85; margin-top: 2px; }

/* 锁屏上超出两行会被系统截断。预览照做，否则运营会以为长文案能全显示 */
.push-lock__body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 历史列表 ── */
.adm-tr--push { grid-template-columns: 1.3fr 1.6fr 1fr 1fr 1.3fr 90px 130px; }

.push-rate { color: var(--mint); }
.push-fail { color: var(--danger); }

/* 行内表单按钮并排，不各占一行 */
.push-inline { display: inline-block; margin-left: 6px; }

/* 推送状态片 */
.chip--st-draft { color: var(--text3); }
.chip--st-scheduled { color: var(--orange); border-color: var(--orange); }
.chip--st-sending { color: var(--orange); border-color: var(--orange); }
.chip--st-sent { color: var(--mint); border-color: var(--mint); }
.chip--st-failed { color: var(--danger); border-color: var(--danger); }
.chip--st-canceled { color: var(--text3); }